Comment créer une interface utilisateur de sécurité personnalisée avec Turbine Widgets et l'IA

Comment créer une interface utilisateur de sécurité personnalisée avec Turbine Widgets et l'IA

Les équipes de sécurité manquent rarement de données. Ce qui leur manque, c'est une visualisation pertinente. Un tableau de bord qui donne presque l'impression d'avoir ce dont un chef d'équipe a besoin. Une présentation des cas qui oblige un analyste à ouvrir quatre onglets pour reconstituer une seule alerte. Les interfaces prêtes à l'emploi permettent de s'en approcher, mais elles s'arrêtent là.

Les widgets Turbine complètent l'interface. Un widget est un petit composant d'interface personnalisé que vous créez et intégrez à Swimlane Turbine, sur un enregistrement d'application ou un tableau de bord, afin que la plateforme affiche exactement ce dont votre centre d'opérations de sécurité (SOC) a besoin, et de la manière dont il le souhaite. Ce guide explique ce que sont les widgets, où ils s'exécutent, propose quelques exemples utiles et présente les trois méthodes de création, d'une simple ligne de code à une interface en langage naturel.

Vous manquez de temps ? La vidéo ci-dessous aborde le même sujet en quelques minutes.

Qu'est-ce qu'un widget Turbine ?

Un widget Turbine est un composant web personnalisé qui s'affiche dans Swimlane Turbine et peut lire, afficher et mettre à jour vos données. Les widgets sont conçus avec Lit, une bibliothèque légère de composants web, et étendent une classe de base appelée SwimlaneElement. Cette classe de base sert d'interface avec la plateforme : elle transmet les données de l'enregistrement ou du rapport actuel, expose le contexte de session et permet au widget d'appeler n'importe quelle API Turbine sans que vous ayez à gérer les jetons ou l'authentification. Si vous avez déjà travaillé avec HTML, CSS et JavaScript, ce modèle vous semblera familier.

Les avantages sont plus importants qu'il n'y paraît. Au lieu de se contenter des écrans fournis avec Turbine, vous pouvez personnaliser l'interface et proposer à vos analystes n'importe quelle vue.

Les widgets sont rendus directement dans Turbine. Ici, l'un d'eux est placé sur une mise en page d'enregistrement.

Widgets d'enregistrement vs. Widgets de rapport

Les widgets s'affichent à deux endroits, et leur emplacement détermine les données qu'ils peuvent visualiser.

• Widgets d'enregistrement Vous pouvez vous asseoir sur la structure d'un enregistrement, d'un dossier ou d'une alerte et interagir avec les champs de cet enregistrement. Ils sont parfaitement adaptés aux indicateurs de score de risque, aux chronologies d'événements, aux indicateurs d'état ou à une vue consolidée d'une alerte.
• Widgets de rapport Ils permettent de consulter un tableau de bord et de lire des données agrégées à partir d'une requête de rapport, ce qui les rend idéaux pour les indicateurs, les graphiques, les moniteurs de santé et les regroupements multi-locataires.

Même cadre, deux étendues : les données d’un seul enregistrement ou les données de plusieurs enregistrements.

Les widgets d'enregistrement permettent de lire un seul enregistrement. Les widgets de rapport permettent de consulter plusieurs enregistrements.

Top 3 Exemples de widgets Turbine à emprunter

Le catalogue propose plus d'une centaine de widgets, chacun avec son code source complet ; le moyen le plus rapide d'apprendre les modèles est donc de commencer par un seul. Trois d'entre eux sont fréquemment utilisés :

#1 Widget de calcul du retour sur investissement 

Le widget Calculateur de retour sur investissement est un outil de reporting qui transforme les exécutions de playbooks, les actions menées et l'utilisation de Hero AI en gains de temps et de coûts. Il répond à la question que tout responsable SOC se voit tôt ou tard poser par les métiers : quel est le retour sur investissement ?

Calculateur de retour sur investissement : temps et coûts économisés par scénario, action et invite de l’IA héroïque.

Résumé de l'affaire #2

Le widget de résumé de cas fonctionne au niveau de l'enregistrement. Il regroupe les alertes dans un seul panneau au lieu de six onglets.

Résumé du cas : une alerte et tout ce qui s’y rapporte en une seule vue.

Widget de carte thermique #3 MITRE ATT&CK

Ce widget de rapport affiche le volume d'alertes sur la matrice MITRE ATT&CK. Comme le montre l'image ci-dessous, la couleur indique les zones de concentration des détections et, surtout, les zones non couvertes. Il est généralement affiché en permanence sur le mur d'affichage du SOC.

Carte thermique MITRE ATT&CK : zones de regroupement des détections et zones de lacunes

Trois façons de construire un widget de turbine

La façon dont vous créez un widget dépend de la quantité de code que vous souhaitez modifier. Les trois approches partagent le même éditeur et la même bibliothèque de composants, swim-ui, ce qui garantit que vos créations conservent une apparence native à Turbine.

1.    Importer depuis le réseau de distribution de contenu. De nombreux widgets sont hébergés sur le CDN de Swimlane et prêts à l'emploi. Il suffit de coller une ligne d'importation dans l'éditeur de widgets, d'enregistrer, et le widget s'affiche. Choisissez une version stable. Aucune connaissance du framework n'est requise.

2.    Construire à partir de zéro. Ouvrez l'éditeur de widgets et écrivez vous-même le code Lit : étendez SwimlaneElement, importez swim-ui et définissez votre méthode de rendu. Cette approche vous offre un contrôle total et constitue la meilleure façon d'apprendre le framework. La documentation, disponible à l'adresse swimlane.github.io/custom-Widgets, contient la référence de l'API, la bibliothèque de composants et le code source de l'ensemble du catalogue. 

3. Construisez avec Hero AI. Ouvrez l'éditeur de widgets et choisissez “” Construisez avec Hero AI ». Décrivez ce que vous voulez en termes simples, et Hero entre en scène. Mode de création de widgets, Hero génère le code du widget dans l'onglet Code et affiche un aperçu en direct. Vérifiez-le, cliquez sur Appliquer, et il est intégré à la mise en page. Vous pouvez continuer à l'affiner dans la même session ; Hero vous posera des questions pour obtenir des précisions si nécessaire. Hero AI doit être activé dans votre environnement.

Créez avec Hero AI : décrivez le widget, prévisualisez le code généré et cliquez sur Appliquer.

Foire aux questions

Qu'est-ce qu'un widget Turbine ?

Un composant web personnalisé exécuté dans Swimlane Turbine, capable de lire, d'afficher et de mettre à jour vos données. Les widgets étendent l'interface utilisateur de la plateforme sur les mises en page d'enregistrements et les tableaux de bord grâce au framework Lit et à la classe de base Swimlane Element.

Où fonctionnent les widgets Turbine ?

À deux endroits. Les widgets d'enregistrement s'exécutent sur une mise en page d'enregistrement et fonctionnent avec les champs d'un seul enregistrement. Les widgets de rapport s'exécutent sur un tableau de bord et lisent les données agrégées d'une requête de rapport.

Ai-je besoin de savoir programmer pour en construire un ?

Pas nécessairement. Vous pouvez importer un widget prêt à l'emploi depuis le CDN en une seule ligne, ou décrire votre besoin à Hero AI qui générera le code. Coder de A à Z est optionnel et vous offre un contrôle maximal.

Est-ce que Hero AI peut créer un widget pour moi ?

Oui. Dans l'éditeur de widgets, choisissez « Créer avec Hero AI », décrivez le widget en langage clair, et Hero génère le code que vous pouvez prévisualiser et appliquer. Hero AI doit être activé dans votre environnement.

Combien de widgets sont disponibles ?

Le catalogue comprend plus d'une centaine de widgets, chacun publié avec son code source complet que vous pouvez étudier et adapter à votre environnement.

Prêt à commencer à créer vos propres widgets ?

Choisissez une vue que votre équipe souhaite utiliser et créez-la : importez-la depuis le CDN, développez-la vous-même ou décrivez-la à Hero AI. Partagez-la ensuite : publiez votre widget sur LinkedIn et taguez Swimlane. Si elle répond à nos attentes, nous vous ferons une offre.