Développement et modernisation d'une Weather map de supervision

1. Objectifs et Enjeux

L'objectif était de moderniser l'outil de visualisation réseau (Weather Map) utilisé par le pôle support de la DSI. L'enjeu était de passer d'une carte archaïque et illisible à une interface moderne permettant de surveiller en temps réel la charge des liens (Internet et MPLS) sur chaque site industriel d'Olga.

2. Contexte : Une supervision archaïque

L'ancienne Weather Map présentait plusieurs défauts majeurs pour une exploitation quotidienne :

• Défaut d'affichage : Sur les écrans géants de la salle de supervision, les informations étaient trop petites et sombres. Le support ne pouvait pas distinguer les alertes de loin.
• Manque de précision : On ne voyait pas clairement la séparation entre les liens principaux et les liens de secours, ni le débit exact consommé par site.
• Besoin métier : Il fallait savoir instantanément si un site était saturé ou si un lien était "Down" pour intervenir avant que la production ne soit impactée.

3. Méthodologie : L'infrastructure technique et le rôle d'Icinga

Pour construire cet outil, je me suis appuyé sur l'infrastructure de supervision déjà en place chez Olga :

C'est quoi Icinga ? Icinga est l'outil de supervision principal de la DSI. Il surveille en permanence l'état des serveurs et des routeurs. Grâce au protocole SNMP, Icinga interroge chaque routeur sur tous les sites (Noyal, Châteaubourg, etc.) pour connaître le trafic exact qui passe par les ports WAN.

L'utilité d'une Weather Map sur écran de supervision : Au sein du support DSI, nous avons un écran qui affiche la "santé" du réseau. Une Weather Map est essentielle car :

• Elle offre une vue d'ensemble immédiate : pas besoin de fouiller dans des listes de données, on voit tout d'un coup.
• Elle permet d'être proactif : si une jauge passe à l'orange, le support voit tout de suite qu'un site sature avant même que les utilisateurs ne s'en plaignent.
• Elle facilite le diagnostic : on voit immédiatement si c'est le lien MPLS (réseau interne) ou le lien Internet qui pose problème.

4. Développement : La structure du code (Les 3 fichiers)

Pour passer des données brutes d'Icinga à un affichage moderne, j'ai développé trois fichiers complémentaires :

config.json (Le référentiel) : Ce fichier contient la liste de tous les sites d'Olga (ex: FR-35-CHATEAUBOURG). Pour chaque site, on lui donne son nom et surtout l'adresse IP des routeurs (INET et MPLS) qu'Icinga doit surveiller.

api.php (Le moteur de données) : C'est le fichier "cerveau". Il se connecte à la base de données d'Icinga (InfluxDB) pour récupérer les métriques de trafic. Il calcule ensuite le pourcentage d'utilisation par rapport à la capacité maximale du lien.

weathermapv2.html (L'interface visuelle) : C'est ce qui s'affiche à l'écran. J'ai utilisé du HTML/CSS pour créer des "cartes" par site et du JavaScript avec la librairie Chart.js pour dessiner les jauges circulaires qui se remplissent selon le trafic.

5. Comparaison : La modernisation de l'affichage

Voici le résultat concret de mon travail de développement :

AVANT : L'ancienne Weather Map

APRÈS : Ma nouvelle Weather Map

L'interface est épurée et lumineuse. On distingue clairement les deux liens par site. J'ai ajouté des codes couleurs vifs : le support voit immédiatement si un lien est "Down" (Rouge) à l'autre bout de la pièce. Les débits réels (Mbps) sont affichés en gros sous chaque jauge pour une précision maximale.

6. Conclusion de l'activité

Ce projet m'a permis de mettre mes compétences en développement (HTML/PHP/JS) au service du réseau. J'ai appris qu'un outil de supervision n'est efficace que s'il est visuellement simple : moins le technicien passe de temps à chercher l'information, plus il est rapide pour corriger la panne.

Désormais, grâce à ce "mur de supervision" modernisé, la DSI d'Olga peut garantir une surveillance 24h/24 des liens de production sans aucune zone d'ombre.