Die Ansicht Dashboard besteht aus einer Verschachtelung von Widgets auf der Seite. Sie zeigen Datengrafiken an, deren Quelle sein kann:

• entweder das aktuelle Board,

• oder ein Webservice.

Um sich mit Daten aus einem Webdienst zu verbinden, muss dieser eine Payload-Antwort im JSON-Format zurückgeben, deren Parameter je nach Art des zu befüllenden Widgets variieren.

Es ist wichtig zu beachten, dass derzeit nur bestimmte Widgets externe Daten anzeigen können, wie zum Beispiel:

• Zahl,

• Kurven,

• Balkendiagramm,

• Ringdiagramm,

• Radar,

• Histogramm,

• Tabelle.

Zahlen-Widget

Das Widget Zahl ermöglicht die Anzeige eines Scores mit seiner Variation und möglicherweise einem Diagramm des Werts nach Datum.

Wenn mehrere Zahlen-Widgets in der Ansicht dargestellt werden sollen, kann die Payload-Antwort alle Informationen nach gewünschtem Widget-Typ enthalten. In diesem Fall wird bei der Konfiguration jedes Widgets die Einstellung so vorgenommen, dass es die richtigen Informationen in der zurückgegebenen Payload-Antwort aufruft.

Format der Payload-Antwort

Die Versorgung dieses Widget-Typs erfordert die folgenden Informationen in der zurückgegebenen Payload-Antwort:

Angezeigte Information	Attribut	Parameter des Attributs	Erforderlich	Beispiel
Titel des Widgets	title			"title":"Sicherheits-Score",
Startdatum des Diagramms (Datum und Uhrzeit)	startDate			"startDate":"2024-12-20T00:00:00Z"
Enddatum des Diagramms (Datum und Uhrzeit)	endDate			"endDate":"2025-03-30T00:00:00Z"
Hilfe-Schaltfläche zum Zugriff auf eine Online-Dokumentation	help	text : Bezeichnung der Hilfe im Tooltip URL : URL für den Zugriff auf die Online-Hilfe		"help":{"text":"Hilfe hier", "URL":"https://madocURL"},
Untertitel des Widgets	subtitle			"subtitle":"Vorfälle diese Woche",
URL, auf die beim Klick auf das Widget verwiesen wird	onClickURL			"onClickURL":"http://example.com",
Ausrichtung der Informationen im Widget	align (standardmäßig left)			"align":"left"
Wert der Zahl	value		x und ungleich 0	"value":"59"
Einheit der Zahl	unit			"unit":"%",
URL des Bildes	imageUrl
Badge des Variationswerts mit Hintergrundfarbe	variation	text : Wert des Variations-Badges color : Hintergrundfarbe des Badges im Hexadezimalformat		"variation":{"text":"-21 %", "color":"#06C350"},
Daten des Diagramms	valueHistory			Beispiel 1: "valueHistory":{"dataset":[58, 25, 26, 87,25,120,25], "sparklineType":"line", "color":"#25542F" Beispiel 2: "valueHistory":{ "dataset":[ {"value": 50, "date": "2024-07-24T00:00:00Z"}, {"value: 60, "date": "2024-07-23T00:00:00Z"}, {"value: 30, "date": "2024-07-22T00:00:00Z"}, ], "sparklineType":"line"}

Beispiel einer Antwort

WEITERES BEISPIEL

Widget Kurven

Das Widget Kurven ermöglicht, wie der Name schon sagt, die Anzeige von Daten in Form mehrerer Kurven.

{
  "title": "Score de sécurité",
  "startDate": "2024-12-20T00:00:00Z",
  "endDate": "2025-03-30T00:00:00Z",
  "help": {
    "text": "Aide ici",
    "URL": "https://madocURL"
  },
  "onClickURL": "http….",
  "align": "left",
  "value": "59",
  "unit": "%",
  "variation": {
    "text": "-21 %",
    "color": "#06C350"
  },
  "valueHistory": {
    "dataset": [
      58,
      25,
      26,
      87,
      25,
      120,
      25
    ],
    "sparklineType": "line",
    "color": "#25542F"
  }
}

{
  "title": "Utilisateurs à risque",
  "help": {
    "text": "Aide ici",
    "URL": "[https://madocURL](https://madocurl/)"
  },
  "subtitle": "Incidents cette semaine",
  "onClickURL": "http….",
  "value": "17",
  "variation": {
    "text": "-38 %",
    "color": "green"
  },
  "valueHistory": {
    "dataset": [
      {
        "value": 50,
        "date": "2024-07-24T00:00:00Z"
      },
      {
        "value": 60,
        "date": "2024-07-23T00:00:00Z"
      },
      {
        "value": 30,
        "date": "2024-07-22T00:00:00Z"
      }
    ],
    "sparklineType": "line"
  }
}

Format der Payload-Antwort

Die Versorgung dieses Widget-Typs erfordert die folgenden Informationen in der zurückgegebenen Payload-Antwort:

Angezeigte Information	Attribut	Attributparameter	Erforderlich	Beispiel
Widget-Titel	title			"title": "Entwicklung der Scores",
Hilfe-Schaltfläche zum Zugriff auf Online-Dokumentation	help	text : Bezeichnung der Hilfe im Tooltip URL : URL für den Zugriff auf die Online-Hilfe		"help": { "text": "Hilfe hier", "URL": "https://example.com" },
Widget-Untertitel	subtitle			"subtitle": "Vorfälle diese Woche",
Typ der Abszissen und Ordinaten des Diagramms	scale	standardmäßig {min : 0 , max : 100}		"scale":{"min":10, "max":90}
Sichtbarkeit der Punkte auf der Kurve	hidePoints	Standardmäßig False		"hidePoints": true
URL, auf die beim Klick auf das Widget verwiesen wird	onClickURL			"onClickURL": http://example.com,
Einheit der Diagrammwerte	unit			"unit": "%",
	valueHeigtor			"valueHeigtor": "3",
Kurvendaten	dataset		x	"dataset": [ { "name": "Dataset 1", hidden: true courbeLisse : number "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" } ] },
Diagrammtyp	chartType	kann mehrere Werte haben wie line, progressBar, donuts, radar, verticalBar, … aber der für dieses Diagramm zu verwendende ist natürlich "line"	x	"charttype": "line"

Antwortbeispiel

Balkendiagramm-Widget

Das Widget Balkendiagramm ermöglicht die Anzeige des Fortschritts verschiedener Indikatoren in Form von horizontalen Balken.

{
  "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 der Payload-Antwort

Die Versorgung dieses Widget-Typs erfordert folgende Informationen in der zurückgegebenen Payload-Antwort:

hideScale":trueURL, auf die beim Klick auf das Widget verwiesen wirdonClickURL"onClickURL":"http://example.com",Daten der FortschrittsbalkenvalueHistoryx isGradient muss true sein, um gradientColor zu aktivieren"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"} ]}DiagrammtypchartTypekann mehrere Werte haben wie line, progressBar, donuts, radar, verticalBar, … aber der für dieses Diagramm zu verwendende ist natürlich "progressBar"x"charttype":"progressBar"

Antwortbeispiel

Ringdiagramm-Widget

{
  "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"
}

Das Ringdiagramm-Widget ermöglicht es, wie der Name schon sagt, Daten in Form von kreisförmigen Segmenten darzustellen, die um ein leeres Zentrum angeordnet sind und so einen Ring (oder Donut) bilden.

Format der Payload-Antwort

Die Versorgung dieses Widget-Typs erfordert die folgenden Informationen in der zurückgegebenen Payload-Antwort:

Beispiel einer Antwort

Radar-Widget

{
  "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"
}

Das Radar-Widget ermöglicht die Darstellung von Daten in Form eines leeren oder gefüllten Sterndiagramms. So können mehrere Datensätze übereinander dargestellt werden.

Format der Payload-Antwort

Die Versorgung dieses Widget-Typs erfordert die folgenden Informationen in der zurückgegebenen Payload-Antwort:

Beispiel einer Antwort

Histogramm-Widget

{
  "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"
}

Das Histogramm-Widget ermöglicht es, wie der Name schon sagt, Daten in Form von vertikalen Balken darzustellen.

Format der Payload-Antwort

Die Versorgung dieses Widget-Typs erfordert die folgenden Informationen in der zurückgegebenen Payload-Antwort:

Antwortbeispiel

Tabellen-Widget

{
  "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"
}

Das Tabellen-Widget ermöglicht die Darstellung von Daten in Form einer Tabelle, die einfache Daten oder Daten enthalten kann, die aus einem visuellen Indikator und einer Bezeichnung bestehen.

Format der Payload-Antwort

Die Befüllung dieses Widget-Typs erfordert die folgenden Informationen in der zurückgegebenen Payload-Antwort:

Antwortbeispiel

Einrichtung eines Widgets, das mit einer externen Datenquelle verbunden ist

Verbindung zu externen Daten herstellen

Um eine Verbindung zu externen Daten herzustellen, muss die Quelle wie folgt deklariert werden:

{
  "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. Klicken Sie auf die Schaltfläche … des Boards > Konnektoren.

2. Klicken Sie auf Neue Verbindung > Dashboard-Datenquelle.

3. Geben Sie die erforderlichen Informationen ein, insbesondere die URL für den Zugriff auf den Ziel-Webservice.

4. Klicken Sie auf Hinzufügen.

Sobald die Verbindung hergestellt ist, müssen Sie diese Verbindung beim Hinzufügen Ihrer Widgets in der Dashboard-Ansicht verwenden.

Variablen deklarieren

Im Dashboard kann es erforderlich sein, eine oder mehrere Variablen zu deklarieren, die es ermöglichen, die Dashboard-Ansicht auf einen bestimmten Datenbereich zu kontextualisieren (z. B. die Daten eines Kunden). Dazu können Sie eine Variable deklarieren, die Sie dann auf dem oder den gewünschten Widgets aufrufen, wobei diese Variablen beim Laden der Ansicht interpretiert werden.

1. Klicken Sie auf die Schaltfläche … des Boards > Connectoren.

2. Klicken Sie auf die Registerkarte Variablen.

3. Klicken Sie auf Neue Variable.

4. Geben Sie den Namen und den Wert ein, bevor Sie bestätigen.

5. Bearbeiten Sie die Einstellungen des Widgets, das diese Variable verwenden soll, indem Sie auf die Schaltfläche Zahnrad des Widgets klicken.

6. Geben Sie auf der Registerkarte Payload den Wert wie folgt ein: "Name der variablen Daten": "%Name der im Board deklarierten Variable%"

Ein verbundenes Widget in der Dashboard-Ansicht hinzufügen

Das Hinzufügen eines verbundenen Widgets ist sehr einfach:

1. Klicken Sie in der Dashboard-Ansicht auf Widget hinzufügen.

2. Wählen Sie ein Widget aus, das mit einer externen Quelle kompatibel ist.

3. Wählen Sie die Verbindung aus, die der zuvor deklarierten Quelle entspricht.

4. Geben Sie die Payload-Parameter für Ihren Webservice ein.

5. Klicken Sie auf Speichern.

Hinweis: Sie können auf Testen und dann auf die Registerkarte Testergebnisse klicken, um zu überprüfen, ob Ihre Payload-Parameter korrekt konfiguriert sind und die erwarteten Informationen zurückgeben.

Testen / vorübergehend ändern der in der Dashboard-Ansicht zurückgegebenen Daten

Wie bereits erwähnt, haben Sie durch Klicken auf Testen Zugriff auf die Daten, die in der Payload-Antwort des Widgets auf der Registerkarte Testergebnisse zurückgegeben werden.

Beachten Sie jedoch, dass Sie diese Daten auch ändern und auf Anwenden klicken können, um die Änderungen vorübergehend im Widget der Ansicht anzuwenden.