Dashboard "Infinity"

Estimated time to read: 4 minutes

L'écosystème Grafana est riche de plugins, ... Il existe de nombreux plugins disponibles sur le site de Grafana. Certains permettent d'ajouter des visualizationss panels, d'autres des datasources ou encore des applications Apps. Les Apps sont des plugins plus complexes qui permettent d'ajouter des fonctionnalités avancées à Grafana.

Tout comme pour la dashboard Grafana fournit une page web permettant de visualiser les plugins disponibles, il est possible de filtrer par type de plugin (datasource, panel, app, ...).

La configuration est accessible par le menu Administration > Plugins and data > Plugins dans Grafana.

Il est possible d'installer des plugins directement depuis l'interface de Grafana ou en ligne de commande.

Celui de Infinity est l'un des plus complets car offrant de nombreux use cases :

• Datasources : JSON API, CSV, TSV, XML, GraphQL, HTML, Google Sheets and HTTP/REST API, RSS/ATOM
• Transformations des données avec UQL/GROQ
• Diverses méthodes d'authentification :
• Basic authentication
• API key authentication
• OAuth2 client credentials / JWT authentication
• AWS/Azure/GCP authentication

📖 Doc plugin

La documentation est disponible sur le site de Grafana.

Installation

Info

Il faut tout d'abord installer le plugin. Pour cela, aller dans Connections > Add new connection et rechercher infinity. Puis installer le plugin.

C'est déjà fait sur cette instance, car cela nécessite des droits admin au niveau de l'instance.

Air Gap Installation

Il est possible d'installer le plugin en utilisant le zip directement télécharger depuis le site.

Il faut ensuite le dézipper pour obtenir l'arborescence suivante:

.docker/config/grafana-provisioning/plugins/yesoreyeram-infinity-datasource

Une fois installé, vous pouvez ajouter une nouvelle DataSource:

Le plugin dispose de nombreuses possibilités de configuration.

Mode API

Configuration

Dans ce premier cas, on va configurer la connexion à une API HTTP car dans la vraie vie, il est fort possible que l'on ait pas accès directement à la BDD comme nous l'avons fait dans les premières étapes du lab.

On configure donc la connexion à l'API stock de notre service lumbercamp: http://stock.grafanalab.yodamad.fr/api/stock

On valide que tout est ok via le bouton Save & Test

Success

Cliquez maintenant sur Explore view pour voir les données disponibles via l'API

On observe que l'on a bien les données en temps réel du stock:

Création du dashboard

Retournez dans Dashboard et ajoutez un nouveau intitulé API.

Ajoutez une visualization utilisant notre nouvelle datasource api-lumbercamp:

• type Pie chart
• affichant les portions avec leur pourcentage par type de bois

Success

Il serait aussi intéressant d'avoir une visualization montrant les stocks "à risque" facilement.

En dupliquant la visualization précédent, configurez-en un nouveau n'affichant que les stocks en-dessous de 30 pièces disponibles.

Success

Spoiler la solution est là

• Widget de type "Bar gauge" en affichage horizontal et type Retro LCD
• 2 transformations
  • Filtrer les stocks supérieurs à 30 (Filter by value)
  • Ordonner les données en mode décroissant (Sort by)
• Configurer les thresholds
  • Base en rouge
  • 20 en orange
  • 10 en jaune

Mode CSV

Il est encore fréquent que l'on est des donnéees exportées au format CSV. Le plugin infinity permet de gérer ce format de données comme expliqué en introduction.

Configuration datasource

On reconfigure une nouvelle datasource Infinity que l'on peut nommer infinity-csv.

Pas besoin de remplir quoique ce soit d'autres cette fois-ci.

Création du dashboard

On crée un nouveau dashboard CSV pour héberger nos visualizations de données issues de CSV.

Dans ce nouveau dashboard, ajoutez une visualization utilisant la nouvelle datasource infinity-csv pour avoir le désormais classique Pie Chart avec l'état des stocks.

Télécharger le csv via l'URL csv stock.

CSV chargé et interprété

On obtient la visualization suivante

Spoiler la solution est là

Dans la visualization, il faut :

• mettre le type à CSV
• mettre la source à Inline
• copier le contenu du csv téléchargé dans Data

• créer une transformation pour que le champ Quantity soit interprété comme un Number

• mettre le mode Donut plutôt que Pie pour changer un peu

Plusieurs sources possibles

On remarque qu'en plus d'Inline, il y a d'autres sources possibles tel qu'Azure blob pour récupérer un fichier qui serait générer périodiquement sur un storage cloud.

Bascule sur le mode API

On peut aussi imaginer que le CSV soit disponible via une API.

Modifier la configuration de la visualization pour qu'elle utilise une nouvelle datasource infinity-csv-api qui utilise l'API plutôt que des données statiques et ainsi bénéficier de la possibilité d'avoir du rafraîchissement automatiquement

Visualization fonctionne toujours

La visualization fonctionne et en activant le rafraîchissement automatique toutes les 5s, les données sont bien mises à jour.

Spoiler la solution est là

Il suffit de créer la datasource avec la valeur URL et configurer l'url de l'API utilisée pour récupérer le csv : http://csv.grafanalab.yodamad.fr