Przykład odpowiedzi

Widżet Wykres słupkowy

Widżet Wykres słupkowy umożliwia wyświetlanie postępu różnych wskaźników w formie poziomych słupków.

{
  "title": "Évolution des scores",
  "help": {
    "text": "Aide ici",
    "URL": "https://example.com"
  },
  "subtitle": "sous titre",
  "scale": {
    "min": 0,
    "max": 100
  },
  "hidePoints": "true",
  "onclickURL": "http://example.com",
  "unit": "%",
  "valueHeigtor": "3",
  "dataset": [
    {
      "name": "Dataset 1",
      "hidden": "true",
      "courbeLisse": "5",
      "lineColor": "#06C350",
      "lineWidth": "2",
      "values": [
        {
          "value": 50,
          "date": "2024-07-24T00:00:00Z"
        },
        {
          "value": 60,
          "date": "2024-07-23T00:00:00Z"
        },
        {
          "value": 30,
          "date": "2024-07-22T00:00:00Z"
        }
      ]
    },
    {
      "name": "Dataset 2",
      "lineColor": "#06C350",
      "lineWidth": "1",
      "values": [
        {
          "value": 40,
          "date": "2024-07-24T00:00:00Z"
        },
        {
          "value": 70,
          "date": "2024-07-23T00:00:00Z"
        },
        {
          "value": 20,
          "date": "2024-07-22T00:00:00Z"
        }
      ]
    }
  ],
  "charttype": "line"
}

Format odpowiedzi Payload

Zasilanie tego typu widżetu wymaga następujących informacji w zwróconej odpowiedzi Payload:

Przykład odpowiedzi

Widget Wykres pierścieniowy

{
  "title": "Progression",
  "help": {
    "text": "En savoir plus",
    "URL": "https://madocURL"
  },
  "subtitle": "sous titre",
  "scale": {
    "min": 0,
    "max": 50
  },
  "isGradient": "true",
  "hideScale": "true",
  "onClickURL": "http://example.com",
  "valueHistory": {
    "dataset": [
      {
        "progress": 50,
        "value": 35,
        "barTitle": "Data",
        "barColor": "#F9670D",
        "textColor": "white",
        "textPosition": "left",
        "gradientColor": "#FFFFFF"
      },
      {
        "progress": 50,
        "value": 122,
        "barTitle": "Identity",
        "barColor": "#06C350",
        "textColor": "white",
        "textPosition": "left",
        "gradientColor": "#FFFFFF"
      },
      {
        "progress": 50,
        "value": 122,
        "barTitle": "Endpoint",
        "barColor": "#06C350",
        "textColor": "white",
        "textPosition": "left",
        "gradientColor": "#FFFFFF"
      }
    ]
  },
  "chartType": "progressBar"
}

Widget Wykres pierścieniowy, jak sama nazwa wskazuje, pozwala na przedstawienie danych w formie segmentów kołowych ułożonych wokół pustego środka, tworząc w ten sposób pierścień (lub donut).

Format odpowiedzi Payload

Zasilanie tego typu widgetu wymaga następujących informacji w zwracanej odpowiedzi Payload:

Przykład odpowiedzi

Widget Radar

{
  "title": "Utilisateurs à risque",
  "help": {
    "text": "Aide ici",
    "URL": "https://madocURL"
  },
  "subtitle": "sous titre",
  "onClickURL": "http://example.com",
  "centerData": {
    "title": "Titre",
    "value": 14
  },
  "values": {
    "dataset": [
      {
        "value": 122,
        "areaTitle": "Faible",
        "areaColor": "#06C350"
      },
      {
        "value": 50,
        "areaTitle": "Moyen",
        "areaColor": "#FBC02D"
      },
      {
        "value": 8,
        "areaTitle": "Élevé",
        "areaColor": "#D32F2F"
      }
    ]
  },
  "chartType": "donuts"
}

Widget Radar umożliwia przedstawienie danych w formie pustego lub wypełnionego wykresu gwiaździstego. W ten sposób możliwe jest przedstawienie kilku zestawów danych nałożonych na siebie.

Format odpowiedzi Payload

Zasilanie tego typu widgetu wymaga następujących informacji w zwracanej odpowiedzi Payload:

Przykład odpowiedzi

Widget Histogram

{
  "title": "Répartition des scores par catégorie",
  "help": {
    "text": "Aide ici",
    "URL": "[https://madocURL](https://madocurl/)"
  },
  "subtitle": "sous titre",
  "activateScale": "true",
  "scaleStep": 10,
  "scale": {
    "min": 10,
    "max": 90
  },
  "hideScale": "true",
  "hideVerticalAxis": "true",
  "onClickURL": "[http://example.com](http://example.com/)",
  "values": {
    "dataset": [
      {
        "name": "Dataset 1",
        "chartType": "line",
        "chartColor": "#06C350",
        "values": [
          {
            "value": 50,
            "axis": "data"
          },
          {
            "value": 60,
            "axis": "identity"
          },
          {
            "value": 30,
            "axis": "endpoint"
          }
        ]
      },
      {
        "name": "Dataset 2",
        "chartType": "area",
        "chartColor": "#FF6384",
        "values": [
          {
            "value": 40,
            "axis": "data"
          },
          {
            "value": 70,
            "axis": "identity"
          },
          {
            "value": 20,
            "axis": "endpoint"
          }
        ]
      }
    ]
  },
  "chartType": "radar"
}

Widget Histogram, jak sama nazwa wskazuje, pozwala na przedstawienie danych w formie pionowych słupków.

Format odpowiedzi Payload

Zasilanie tego typu widgetu wymaga następujących informacji w zwróconej odpowiedzi Payload:

Przykład odpowiedzi

Widget Tabela

{
  "title": "Progression",
  "help": {
    "text": "Aide ici",
    "URL": "[https://madocURL](https://madocurl/)"
  },
  "subtitle": "sous titre",
  "onClickURL": "[http://example.com](http://example.com/)",
  "valueHistory": {
    "dataset": [
      {
        "progress": 50,
        "value": 122,
        "barTitle": "Data",
        "barColor": "#06C350"
      },
      {
        "progress": 50,
        "value": 77,
        "barTitle": "Identity",
        "barColor": "#06C355"
      },
      {
        "progress": 50,
        "value": 98,
        "barTitle": "Endpoint",
        "barColor": "#05C470"
      }
    ]
  },
  "chartType": "verticalBar"
}

Widget Tabela umożliwia przedstawienie danych w formie tabeli, która może zawierać dane proste lub złożone z wizualnego wskaźnika i etykiety.

Format odpowiedzi Payload

Zasilanie tego typu widgetu wymaga następujących informacji w zwróconej odpowiedzi Payload:

Przykład odpowiedzi

Konfiguracja widżetu połączonego z zewnętrznym źródłem danych

Połączenie z danymi zewnętrznymi

Aby połączyć się z danymi zewnętrznymi, należy zadeklarować źródło w następujący sposób:

{
  "columns": [
   {
     "id": "name",
     "label": "Nom de l'alerte",
     "type": "text",
     "sortable": true,
     "style": {
       "bold": true
     }
   },
   {
     "id": "severity",
     "label": "Gravity",
     "type": "rating",
     "sortable":"true",
     "align": "center",
     "ratingMax": 3,
     "extraConfig": [
       { "value": 1, "color": "#10b981", "label": "Faible" },
       { "value": 2, "color": "#f97316", "label": "Moyen" },
       { "value": 3, "color": "#ef4444", "label": "Élevé" }
     ]
   },
   {
     "id": "status",
     "label": "État",
     "type": "status",
     "sortable":"true",
     "align": "center",
     "extraConfig": [
       { "id": "resolved", "label": "Résolu", "color": "#10b981" },
       { "id": "in-progress", "label": "En cours", "color": "#f97316" },
       { "id": "open", "label": "Ouvert", "color": "#3b82f6" },
       { "id": "default", "label": "Non défini", "color": "#6b7280" }
     ]
   },
   {
     "id": "category",
     "label": "Catégorie",
     "type": "category",
     "sortable":"true",
     "align": "center",
     "style": {
       "color": "#94a3b8",
				"vborderColor":"red",
        "hborderColor":"transparent"
     }
   },
   {
     "id": "source",
     "label": "Source de détection",
     "type": "text",
     "sortable":"true"
   },
   {
     "id": "resources",
     "label": "Ressources affectées",
     "type": "user",
     "sortable":"true"
   },
   {
     "id": "firstActivity",
     "label": "Première activité",
     "type": "date",
     "sortable":"true"
   },
   {
     "id": "lastActivity",
     "label": "Dernière activité",
     "type": "date",
     "sortable":"true"
   }
  ],
  "data": [
   {
     "name": "Email messages removed after delivery",
     "severity": 1,
     "status": "resolved",
     "category": "Gestion des menaces",
     "source": "MDO",
     "resources": {
       "name": "Fabien TREAND",
       "role": "Cyber Team"
     },
     "firstActivity": "2025-01-27T04:59:00",
     "lastActivity": "2025-01-27T05:01:00",
     "_style": {
       "name": {
         "color": "#60a5fa"
       },
       "category": {
         "background": "#1e293b"
       }
     }
   },
   {
     "name": "Anonymous IP address",
     "severity": 2,
     "status": "resolved",
     "category": "Accès initial",
     "source": "AAD Identity Protection",
     "resources": {
       "name": "thomas"
     },
     "firstActivity": "2024-12-26T09:27:00",
     "lastActivity": "2024-12-26T09:27:00"
   },
   {
     "name": "Anonymous IP address",
     "severity": 2,
     "status": "resolved",
     "category": "Accès initial",
     "source": "AAD Identity Protection",
     "resources": {
       "name": "thomas"
     },
     "firstActivity": "2024-12-26T09:27:00",
     "lastActivity": "2024-12-26T09:27:00"
   },
   {
     "name": "Anonymous IP address",
     "severity": 2,
     "status": "resolved",
     "category": "Accès initial",
     "source": "AAD Identity Protection",
     "resources": {
       "name": "thomas"
     },
     "firstActivity": "2024-12-26T09:24:00",
     "lastActivity": "2024-12-26T09:24:00"
   },
   {
     "name": "Anonymous IP address",
     "severity": 2,
     "status": "resolved",
     "category": "Accès initial",
     "source": "AAD Identity Protection",
     "resources": {
       "name": "thomas"
     },
     "firstActivity": "2024-12-26T09:24:00",
     "lastActivity": "2024-12-26T09:24:00"
   },
   {
     "name": "Anonymous IP address",
     "severity": 3,
     "status": "resolved",
     "category": "Accès initial",
     "source": "AAD Identity Protection",
     "resources": {
       "name": "thomas"
     },
     "firstActivity": "2024-12-26T09:23:00",
     "lastActivity": "2024-12-26T09:23:00"
   },
   {
     "name": "Sample with colored cells",
     "severity": 3,
     "status": "in-progress",
     "category": "Exemple",
     "source": "Sample Source",
     "resources": {
       "name": "John Doe",
       "role": "Security Team"
     },
     "firstActivity": "2025-01-28T10:00:00",
     "lastActivity": "2025-01-28T11:00:00",
     "_style": {
       "name": {
         "background": "#312e81",
         "color": "#818cf8",
         "bold":"true"
       },
       "category": {
         "background": "#064e3b",
         "color": "#34d399"
       },
       "source": {
         "background": "#831843",
         "color": "#fb7185"
       },
       "resources": {
         "background": "#1e3a8a",
         "color": "#93c5fd"
       }
     }
   }
  ]
}

1. Kliknij przycisk … tablicy > Konektory.

2. Kliknij Nowe połączenie > Źródło danych Pulpit nawigacyjny.

3. Wprowadź wymagane informacje, w tym adres URL dostępu do docelowej usługi internetowej.

4. Kliknij Dodaj.

Po nawiązaniu połączenia musisz użyć tego połączenia podczas dodawania widżetów w widoku Pulpit.

Deklarowanie zmiennych

W panelu możesz potrzebować zadeklarować jedną lub więcej zmiennych, które pozwolą na kontekstualizację widoku Pulpit do określonego zakresu danych (np. dane klienta). W tym celu możesz zadeklarować zmienną, którą następnie wywołasz na wybranych widżetach, przy czym zmienne te będą interpretowane w momencie ładowania widoku.

1. Kliknij przycisk … tablicy > Konektory.

2. Kliknij zakładkę Zmienne.

3. Kliknij Nowa Zmienna.

4. Wprowadź jego nazwę i wartość przed zatwierdzeniem.

5. Edytuj parametry widgetu, który będzie używał tej zmiennej, klikając przycisk Koło zębate widgetu.

6. Wprowadź w zakładce Payload wartość w postaci: "Nazwa danych zmiennej" : "%Nazwa zmiennej zadeklarowanej w tablicy%"

Dodawanie podłączonego widżetu w widoku Pulpit

Dodawanie podłączonego widżetu jest bardzo proste:

1. W widoku Pulpit kliknij Dodaj widżet.

2. Wybierz widżet spośród tych kompatybilnych z zewnętrznym źródłem.

3. Wybierz połączenie odpowiadające źródłu zadeklarowanemu wcześniej.

4. Wprowadź parametry ładunku specyficzne dla Twojej usługi sieciowej.

5. Kliknij Zapisz.

Uwaga: możesz kliknąć Testuj, a następnie zakładkę Wyniki testu, aby sprawdzić, czy parametry Payload są poprawnie skonfigurowane i zwracają oczekiwane informacje.

Testowanie / tymczasowa modyfikacja danych zwracanych w widoku Pulpitu

Jak wspomniano wcześniej, klikając Testuj, masz dostęp do danych zwracanych w odpowiedzi payload widgetu na karcie Wyniki testu.

Należy jednak wiedzieć, że możesz również zmodyfikować te dane i kliknąć Zastosuj , aby zobaczyć, jak zmiany są tymczasowo stosowane w widgecie widoku.