La vue Tableau de bord est construite à partir d’une imbrication de widgets dans la page. Ils présentent des graphiques de données dont la source peut être :

• soit le board courant,

• soit un web service.

Pour se connecter à des données provenant d’un web service, il est nécessaire que ce dernier renvoie une réponse payload au format JSON dont les paramètres seront variables selon le type de widget à alimenter.

Il est important de noter que seuls certains widgets permettent d’exposer des données externes, pour l’instant, tels que :

• Nombre,

• Courbes,

• Graphique à barres,

• Graphique en anneau,

• Radar,

• Histogramme,

• Tableau.

Widget Nombre

Le widget Nombre permet d’afficher un score avec sa variation et potentiellement un graphique de valeur par date.

Si plusieurs widgets nombre doivent être présentés dans la vue, la réponse payload pourra contenir l’ensemble des informations par type de widget souhaité. Dans ce cas, lors de la configuration de chaque widget, le paramétrage sera fait de telle sorte qu’il appelle les bonnes informations dans la réponse payload renvoyée.

Format de la réponse Payload

L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :

Exemple de réponse

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

AUTRE EXEMPLE

{
"title":"Utilisateurs à risque",
"help": {"text":"Aide ici", "URL":"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"}
}

Widget Courbes

Le widget Courbes, comme son nom l’indique, permet d’afficher des données sous la forme de plusieurs courbes.

Format de la réponse Payload

L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :

Exemple de réponse

{
"title": "Évolution des scores",
"help": { "text": "Aide ici", "URL": "https://example.com" },
"subtitle": "sous titre",
"scale": {min : number , max: number } // par défaut { min : 0 , max : 100 }
"hidePoints": "true" // default 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"
}

Widget Graphique à barres

Le widget Graphique à barres permet d’afficher la progression de différents indicateurs sous la forme de barre horizontale.

Format de la réponse Payload

L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :

Exemple de réponse

{
"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 Graphique en anneau

Le widget Graphique en anneau, comme son nom l’indique, permet de représenter les données sous forme de segments circulaires disposés autour d'un centre vide, formant ainsi un anneau (ou donut).

Format de la réponse Payload

L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :

Exemple de réponse

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

Le widget Radar permet de représenter les données sous forme d’un diagramme étoilé vide ou plein. Ainsi, il est possible d’y représenter plusieurs jeux de données superposés les uns sur les autres.

Format de la réponse Payload

L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :

Exemple de réponse

{
"title":"Répartition des scores par catégorie",
"help":{"text":"Aide ici", "URL":"https://madocURL"},
"subtitle":"sous titre",
"activateScale":"true",
"scaleStep":10 ,
"scale":{"min":10, "max":90},
"hideScale":"true",
"hideVerticalAxis":"true",
"onClickURL":"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 Histogramme

Le widget Histogramme, comme son nom l’indique, permet de représenter les données sous forme de barres verticales.

Format de la réponse Payload

L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :

Exemple de réponse

{
"title":"Progression",
"help":{"text":"Aide ici", "URL":"https://madocURL"},
"subtitle":"sous titre",
"onClickURL":"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 Tableau

Le widget Tableau permet de proposer une représentation des données sous la forme d’un tableau pouvant contenir des données simples ou composées d’une indicateur visuel et d’un libellé.

Format de la réponse Payload

L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :

Exemple de réponse

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

Mise en place d’un widget connecté à une source de données externe

Se connecter aux données externes

Pour se connecter aux données externes, il est nécessaire de déclarer la source telle que :

1. Cliquez sur le bouton … du board > Connecteurs.

2. Cliquez sur Nouvelle connexion > Source de données Tableau de bord.

3. Saisissez les informations requises dont notamment l’url d’accès au web service ciblé.

4. Cliquez sur Ajouter.

Une fois la connexion établie, vous devez alors utiliser cette connexion lors de l’ajout de vos widgets dans la vue Tableau de bord.

Déclarer des variables

Dans le board, vous pouvez avoir besoin de déclarer une ou plusieurs variables qui permettront de contextualiser la vue Tableau de bord à un périmètre de données particulier (ex : les données d’un client). Pour cela, vous pouvez déclarer une variable que vous appellerez alors sur le ou les widgets souhaités, ces variables étant alors interprétées au moment du chargement de la vue.

1. Cliquez sur le bouton … du board > Connecteurs.

2. Cliquez sur l’onglet Variables.

3. Cliquez sur Nouvelle Variable.

4. Saisissez son nom et sa valeur avant de valider.

5. Editez les paramètres du widget qui devra utiliser cette variable en cliquant sur le bouton Roue crantée du widget.

6. Saisissez, dans l’onglet Payload, la valeur telle que : “Nom de la donnée variable” : “%Nom de la variable déclarée dans le board%”

Ajouter un widget connecté dans la vue Tableau de bord

L’ajout d’un widget connecté est très simple :

1. Dans la vue Tableau de bord, cliquez sur Ajouter un widget.

2. Sélectionnez un widget parmi ceux compatibles avec une source externe.

3. Choisissez la connexion correspondant à la source déclarée précédemment.

4. Saisissez les paramètres du payload propre à votre web service.

5. Cliquez sur Enregistrer.

Note : vous pouvez cliquez sur Tester puis sur l’onglet Résultats du test pour vérifier si vos paramètres Payload sont bien configurés et renvoie les informations attendues.

Tester / modifier temporairement les données renvoyées dans la vue Tableau de bord

Comme indiqué précédemment, en cliquant sur Tester, vous avez accès aux données renvoyées dans la réponse payload du widget sur l’onglet Résultats du test.

En revanche, sachez que vous pouvez également modifier ces données et cliquer sur Appliquer pour voir les modifications s’appliquer temporairement dans le widget de la vue.