Topologie

Le widget Topologie permet d'afficher des topologies de réseaux et d'autres objets. Nous proposons plusieurs options de mise en page :

image-20240821-131655.png
Screenshot 2024-08-21 094005.pngcolaJS.pngimage-20240821-083505.png

Édition du widget Topologie

Pour configurer une topologie, sélectionnez une mise en page et spécifiez une requête de données ou une source de données pour les nœuds et/ou les arêtes.

Pour afficher les nœuds sans arêtes, activez l'option Afficher les nœuds sans arêtes.

Ensuite, configurez les champs nécessaires pour les nœuds et les arêtes dans les paramètres :

Configuration des nœuds

Paramètre

Description

Colonne ID

Identifiant unique

Colonne Nom

Nom affiché

Colonne État

Détermine le code couleur des nœuds en fonction de leur état. Les états valides sont les suivants : OK (vert), Warning (jaune), Minor (orange), Major (rouge), Maintenance (bleu), No Data (gris) ou Undefined (blanc).

Colonne d'icônes

Pour afficher une icône de nœud, utilisez

  • Les noms d'images de la section Paramètres/Fichiers (les images SVG doivent inclure les attributs width, height et viewBox).

  • Des images SKOOR standard (par exemple, device_server, device_router, etc.)

Colonne de groupe

Les nœuds seront regroupés en fonction de cette colonne.

Les images SVG utilisées pour la visualisation des nœuds utilisent automatiquement les paramètres de couleur Accent 2 définis dans Paramètres / Thème.

Configuration des bords

Paramètre

Description de la colonne

Colonne ID

Identifiant unique

Colonne Nom

Nom affiché

Colonne État

Détermine le code couleur des arêtes en fonction de leur état. Les états valides sont les suivants : OK (vert), Warning (jaune), Minor (orange), Major (rouge), Maintenance (bleu), No Data (gris) ou Undefined (blanc).

Colonne Source

Spécifie l'origine de l'arête. La valeur de cette colonne doit correspondre à un ID de nœud existant.

Colonne Destination

Spécifie l'endroit où l'arête se termine. La valeur de cette colonne doit correspondre à un ID de nœud existant.

Paramètres

Paramètre

Description

Disposition

Disposition permettant de placer les éléments dans la vue :

  • fCoSE: La disposition fCoSE est une version plus rapide de la disposition CoSE-Bilkent. Elle prend en charge les graphes composés et non composés, ce qui permet d'obtenir des résultats finaux de premier ordre et des performances élevées pour une mise en page dirigée par la force. En outre, fCoSE prend en charge les contraintes spécifiées par l'utilisateur des types suivants sur les nœuds : position fixe, alignement et placement relatif. Si une mise en page orientée par la force est souhaitée, fCoSE devrait être la première mise en page à essayer.

  • Cola.js: La mise en page de simulation physique Cola.js (orientée par la force). Cola permet d'obtenir de beaux résultats en matière de mise en page, il s'anime de manière très fluide et dispose de nombreuses options pour contrôler la mise en page. Il se concentre sur l'obtention de résultats esthétiques pour des graphes relativement petits.

  • AVSDF: La présentation AVSDF. Il organise les nœuds en cercle et tente de minimiser les croisements d'arêtes dans la mesure du possible.

Afficher les nœuds sans liens

Ce paramètre détermine s'il convient d'afficher les nœuds qui n'ont pas de liens. S'il est désactivé et qu'aucun lien n'est configuré, aucun nœud ne sera affiché.

Action en cas de clic sur un nœud/arête

Définit l'action du clic

Paramètres

Paramètres des nœuds

La colonne x de la base de données d'une configuration de nœud est accessible à l'aide de la notation suivante :

${columns.x}

Exemple : La configuration suivante Action on node click ouvre le tableau de bord Device Details avec le paramètre URL device défini sur la valeur de la colonne devicename:

image-20240723-133626.png

Paramètres de périphérie

Les paramètres tels que la source ou la destination des liens entre les nœuds peuvent avoir plusieurs valeurs (par exemple, dans une connexion entre deux appareils, les deux peuvent agir en tant que source et destination). C'est pourquoi ils se présentent sous la forme de tableaux plutôt que de valeurs uniques (par exemple, <valeur 1>, <valeur 2>). Bien qu'ils soient accessibles de la même manière que les paramètres à valeur unique, ils doivent être traités différemment lorsqu'ils sont utilisés.

Exemple : Filtrer les dispositifs à l'aide des paramètres de configuration des bords :

device=IN(${columns.devicename})