Moniteur de Statut - Tableau de Bord
Réseau
(Remplacez cette image par une capture d'écran réelle de votre tableau de bord)
Table des Matières
1. Introduction
2. Fonctionnalités
3. Prérequis
4. Installation
o Configuration de l'Agent SNMP sur Windows Server
o Configuration de l'Agent SNMP sur Windows 11
o Configuration de l'Agent SNMP sur Linux (Ubuntu)
o Configuration du Serveur Web (PHP)
5. Configuration du Projet
6. Structure du Code
7. Personnalisation
o Ajout/Modification d'Appareils
o Modification des OIDs
o Styles et Thème
8. Améliorations Possibles
9. Crédits
1. Introduction
Ce projet est un tableau de bord web simple et efficace développé en PHP, HTML, CSS et
JavaScript, conçu pour surveiller le statut et les métriques de performance de base de vos
appareils réseau (serveurs, postes de travail, routeurs, etc.). Il utilise le protocole SNMP
(Simple Network Management Protocol) pour collecter des données telles que la charge CPU
et l'utilisation de la mémoire, et des pings ICMP pour vérifier la disponibilité des appareils.
Le tableau de bord offre une vue d'ensemble rapide de l'état de votre réseau grâce à une
interface conviviale avec des indicateurs visuels et des mini-graphiques.
2. Fonctionnalités
Surveillance de la Disponibilité (Ping): Vérifie si un appareil est en ligne ou hors
ligne.
Collecte de Métriques SNMP:
o Nom du système (SysName)
o Temps de fonctionnement (Uptime)
o Charge CPU (en pourcentage)
o Utilisation de la mémoire RAM (en pourcentage et en GB)
Prise en Charge Multi-OS: Gère les spécificités des OIDs pour Windows Server,
Windows 11 et Ubuntu (Linux).
Tableau de Bord Réactif: Interface utilisateur adaptée aux différentes tailles d'écran
(ordinateurs, tablettes, mobiles).
Mini-Graphiques Visuels: Utilise [Link] pour des graphiques en beignet (doughnut
charts) représentant l'utilisation CPU et RAM.
Rafraîchissement Automatique: Met à jour les données toutes les 30 secondes pour
une surveillance quasi-en temps réel.
Statistiques Globales: Affiche le nombre total d'appareils, d'appareils en ligne/hors
ligne et le temps de ping moyen.
3. Prérequis
Pour exécuter ce projet, vous aurez besoin de :
Un serveur web (Apache, Nginx, IIS, etc.) configuré pour servir des fichiers PHP.
PHP 7.4+ (ou version supérieure) avec l'extension SNMP activée.
o Pour activer l'extension SNMP : Décommentez extension=snmp dans votre
fichier [Link].
Accès réseau depuis le serveur web vers les appareils que vous souhaitez surveiller.
Agents SNMP configurés et fonctionnels sur les appareils cibles (Windows Server,
Windows 11, Ubuntu, Routeurs).
[Link] (inclus via CDN dans le code HTML).
Font Awesome 6.5.0 (inclus via CDN dans le code HTML).
4. Installation
1. Clonez ou téléchargez le dépôt du projet sur votre serveur web.
2. Placez les fichiers (notamment [Link] et tout autre fichier CSS/JS si vous les
externalisez) dans le répertoire racine de votre serveur web (ex: htdocs pour Apache,
www pour Nginx/IIS).
4.1. Configuration de l'Agent SNMP sur Windows Server
Pour que votre Windows Server puisse être surveillé via SNMP, vous devez installer et
configurer la fonctionnalité "Agent SNMP" :
1. Installer la fonctionnalité SNMP:
o Ouvrez le "Gestionnaire de serveur".
o Cliquez sur "Ajouter des rôles et fonctionnalités".
o Naviguez jusqu'à "Fonctionnalités", cochez "Service SNMP" et
"Fournisseur WMI SNMP".
o Suivez les instructions pour installer.
2. Configurer le Service SNMP:
o Ouvrez [Link] (Services).
o Recherchez "Service SNMP" et double-cliquez dessus.
o Allez à l'onglet "Agents":
Renseignez les informations de contact et de localisation si désiré (ex:
Nom de la machine, Emplacement du serveur).
o Allez à l'onglet "Traps":
Ajoutez des noms de communauté si vous utilisez des traps (non
essentiel pour ce tableau de bord).
o Allez à l'onglet "Sécurité":
Cliquez sur "Ajouter..." sous "Noms de communauté acceptés".
Sélectionnez "READ ONLY" (Lecture seule).
Entrez le nom de la communauté (ex: public). Assurez-vous que cette
communauté correspond à celle définie dans votre fichier PHP.
Cliquez sur "Ajouter".
Sous "Accepter les paquets SNMP de ces hôtes", cliquez sur
"Ajouter..." et entrez l'adresse IP de votre serveur web où le script
PHP est exécuté.
Cliquez sur "OK" sur toutes les fenêtres pour appliquer.
3. Redémarrer le Service SNMP: Redémarrez le "Service SNMP" pour que les
modifications prennent effet.
4. Vérifier le Pare-feu Windows:
o Ouvrez le "Pare-feu Windows avec fonctions avancées de sécurité"
([Link] ou recherchez dans le menu Démarrer).
o Dans "Règles de trafic entrant", assurez-vous qu'une règle existe pour autoriser
le trafic UDP sur le port 161 pour le "Service SNMP" (ou créez-en une
nouvelle si nécessaire). Limitez-la à l'adresse IP de votre serveur web pour une
meilleure sécurité.
4.2. Configuration de l'Agent SNMP sur Windows 11
Le processus est très similaire à Windows Server, mais l'installation de la fonctionnalité est
légèrement différente.
1. Installer la fonctionnalité SNMP:
o Allez dans Paramètres > Applications > Fonctionnalités
facultatives.
o Cliquez sur "Afficher les fonctionnalités" (ou "Ajouter une fonctionnalité"
sur des versions plus anciennes de Windows 10).
o Recherchez "Agent SNMP" et cochez la case.
o Cliquez sur "Suivant" puis "Installer".
2. Configurer le Service SNMP: (Identique à Windows Server)
o Ouvrez [Link] (Services).
o Recherchez "Service SNMP" et double-cliquez dessus.
o Allez à l'onglet "Agents" et "Sécurité".
o Suivez les mêmes étapes que pour Windows Server pour définir la
communauté en lecture seule (public par exemple) et autoriser l'adresse IP de
votre serveur web.
3. Redémarrer le Service SNMP: Redémarrez le "Service SNMP".
4. Vérifier le Pare-feu Windows: (Identique à Windows Server)
o Autorisez le trafic UDP sur le port 161 pour l'adresse IP de votre serveur web.
4.3. Configuration de l'Agent SNMP sur Linux (Ubuntu)
Si vous envisagez d'ajouter des appareils Linux :
1. Installer l'agent SNMP:
Bash
sudo apt update
sudo apt install snmp snmpd snmp-mibs-downloader
2. Télécharger les MIBs (optionnel mais recommandé pour les OIDs numériques):
Bash
sudo download-mibs
3. Configurer snmpd:
o Ouvrez le fichier de configuration :
Bash
sudo nano /etc/snmp/[Link]
o Commentez la ligne agentAddress udp:[Link]:161 ou modifiez-la pour
écouter sur toutes les interfaces ou l'interface spécifique :
o # agentAddress udp:[Link]:161,udp6:[::1]:161
o agentAddress udp:161,udp6:161 # Écoute sur toutes les
interfaces IPv4 et IPv6
o Définissez la communauté en lecture seule (remplacez public par votre
communauté) :
o rocommunity public
o # Si vous voulez limiter à une IP spécifique, ajoutez :
o # rocommunity public votre_ip_serveur_web
o Pour la charge CPU et la RAM sur Linux, assurez-vous que des lignes
similaires à celles-ci sont présentes (elles le sont souvent par défaut ou peuvent
être ajoutées) :
o proc mountd
o proc snmpd
o disk /
o load 12 10 5
Ceci permet à l'OID .[Link].[Link].3.1.2.196608 (pour CPU) et aux
OIDs de mémoire de retourner une valeur.
oEnregistrez et quittez.
4. Redémarrer le service snmpd:
Bash
sudo systemctl restart snmpd
5. Vérifier le Pare-feu (UFW):
Bash
sudo ufw allow 161/udp
sudo ufw reload
4.4. Configuration du Serveur Web (PHP)
1. Activer l'extension SNMP de PHP:
o Ouvrez votre fichier [Link]. Son emplacement varie selon votre système (ex:
/etc/php/8.x/apache2/[Link] sur Ubuntu, ou dans le répertoire
d'installation de PHP pour XAMPP/WAMP).
o Recherchez la ligne suivante :
Ini, TOML
;extension=snmp
o Décommentez-la en supprimant le point-virgule :
Ini, TOML
extension=snmp
o Enregistrez le fichier.
o Redémarrez votre serveur web (Apache, Nginx, etc.) pour que les
modifications prennent effet.
5. Configuration du Projet ([Link])
Ouvrez le fichier [Link] et modifiez la section $devices au début du script. Pour vos
deux systèmes Windows, assurez-vous que leurs IPs et communautés sont correctement
listées ici.
PHP
// Configuration des appareils à surveiller
$devices = [
// Vos deux systèmes Windows
"Mon Serveur Windows" => ["ip" => "[Link]", "snmp_community" =>
"maCommunauteSecrete"], // Remplacez l'IP et la communauté
"Mon PC Windows 11" => ["ip" => "[Link]", "snmp_community" =>
"maCommunauteSecrete"], // Remplacez l'IP et la communauté
// Exemple d'autres appareils
"Routeur Principal" => ["ip" => "[Link]", "snmp_community" =>
"routeurComm"], // Exemple avec une communauté différente
"Serveur Ubuntu" => ["ip" => "[Link]", "snmp_community" =>
"public"], // Exemple d'un serveur Linux
"Google DNS" => ["ip" => "[Link]", "snmp_community" => null], //
Appareil uniquement pingable
];
"Nom de l'appareil": C'est le nom affiché sur le tableau de bord. Choisissez des
noms descriptifs.
"ip": L'adresse IP ou le nom d'hôte de l'appareil.
"snmp_community": La chaîne de communauté SNMP que vous avez configurée sur
l'appareil cible. C'est crucial qu'elle corresponde exactement. Laissez null si
l'appareil n'est pas SNMP-compatible (ex: Google DNS ci-dessus, ou si vous ne voulez
que le ping pour un appareil).
IMPORTANT: Pour des raisons de sécurité, évitez d'utiliser "public" comme communauté
SNMP en production. Utilisez une chaîne de caractères complexe et unique, et limitez les
adresses IP autorisées dans la configuration SNMP de vos appareils.
6. Structure du Code
Le projet est principalement contenu dans un seul fichier [Link] pour la simplicité.
Section PHP (<?php ... ?>):
o $devices: Tableau de configuration des appareils à surveiller.
o Constantes OID: Définissent les identifiants d'objets (Object Identifiers)
SNMP utilisés pour récupérer des informations spécifiques (SysName, Uptime,
CPU, RAM). Ces OIDs varient légèrement entre les systèmes d'exploitation
(Windows, Linux), et le script gère cette distinction.
o Fonctions de surveillance:
ping($host): Effectue un ping ICMP et retourne le temps de latence
ou false si l'appareil est injoignable.
getSnmpData($ip, $community, $oids): Récupère les données
SNMP pour un ensemble d'OIDs donné.
parseWindowsMemory($memoryData): Analyse la sortie SNMP
spécifique à Windows pour la mémoire.
getLinuxCpuLoad($ip, $community): Récupère la charge CPU pour
les systèmes Linux.
getLinuxMemoryUsage($ip, $community): Récupère l'utilisation de
la mémoire pour les systèmes Linux.
o Logique Principale:
Parcourt le tableau $devices.
Pour chaque appareil, effectue un ping.
Si l'appareil est en ligne et une communauté SNMP est définie, tente de
récupérer les données SNMP (SysName, Uptime, CPU, RAM) en
utilisant les OIDs appropriés pour Windows ou Linux.
Formate les données pour l'affichage.
o $device_status: Tableau associatif qui stocke toutes les données collectées
pour chaque appareil.
o $mini_charts: Tableau préparé avec les pourcentages CPU et RAM pour les
graphiques JavaScript.
Section HTML (<!DOCTYPE html>...):
o Structure de la page web.
o Inclusion des feuilles de style CSS (en ligne ou via des balises <style>).
o Inclusion des bibliothèques Font Awesome (pour les icônes) et [Link] (pour
les graphiques) via CDN.
o La boucle <?php foreach ($device_status as $name => $status): ?>
génère dynamiquement une "carte" pour chaque appareil, affichant son statut,
ses métriques SNMP et les barres de progression/mini-graphiques.
o Affiche des statistiques globales (total appareils, en ligne, hors ligne, ping
moyen).
Section JavaScript (<script>...</script>):
o Animation au chargement: Ajoute un effet d'apparition progressif aux cartes.
o Compteur de rafraîchissement: Affiche un compte à rebours avant la
prochaine actualisation automatique de la page.
o Mini-charts CPU/RAM: Utilise [Link] pour dessiner les graphiques en
beignet pour chaque appareil, en se basant sur les données passées par PHP
(mini_charts).
7. Personnalisation
7.1. Ajout/Modification d'Appareils
Pour ajouter, modifier ou supprimer des appareils à surveiller, éditez simplement le tableau
$devices au début du fichier [Link]. Assurez-vous que l'IP est correcte et que la
snmp_community correspond à celle configurée sur l'appareil.
PHP
$devices = [
"Nouvel Appareil" => ["ip" => "[Link]", "snmp_community" =>
"nouvelleComm"],
// ... autres appareils
];
7.2. Modification des OIDs
Les OIDs (Object Identifiers) sont des chemins uniques dans l'arborescence MIB
(Management Information Base) qui identifient des informations spécifiques sur un appareil.
Si vous avez besoin de collecter d'autres métriques ou si les OIDs par défaut ne fonctionnent
pas pour une raison spécifique sur un appareil particulier, vous pouvez les ajuster.
Les OIDs sont définis comme des constantes en début de script :
PHP
// OIDs standards pour SNMP (communs)
define('OID_SYS_NAME', '.[Link].[Link].0');
define('OID_SYS_UPTIME', '.[Link].[Link].0');
// OIDs spécifiques Windows
// Charge CPU (Windows Server/Client):
// L'OID pour le pourcentage d'utilisation du processeur global
est .[Link].[Link].3.1.2.x,
// où x est l'index du processeur (souvent 196608 pour le total sur
Windows).
define('OID_WIN_CPU_LOAD', '.[Link].[Link].3.1.2.196608');
// Informations mémoire pour Windows
define('OID_WIN_TOTAL_RAM', '.[Link].[Link].2.0'); // Total RAM en
octets
define('OID_WIN_USED_RAM', '.[Link].[Link].[Link]'); // RAM utilisée en
pages, souvent [Link].[Link].[Link] (pour le premier type de mémoire
physique, typiquement)
define('OID_WIN_ALLOC_UNIT', '.[Link].[Link].[Link]'); // Allocation
unit pour la mémoire
// OIDs spécifiques Linux (net-snmp)
// Charge CPU (Linux): .[Link].4.1.2021.[Link] pour 1 minute load
average, ou plus commun pour %CPU:
define('OID_LINUX_CPU_LOAD', '.[Link].4.1.2021.11.9.0'); // % CPU System
(user + system)
// Utilisation Mémoire (Linux):
define('OID_LINUX_MEM_TOTAL', '.[Link].4.1.2021.4.5.0'); // Total RAM en
KB
define('OID_LINUX_MEM_FREE', '.[Link].4.1.2021.4.6.0'); // Free RAM en KB
define('OID_LINUX_MEM_CACHED', '.[Link].4.1.2021.4.15.0'); // Cached RAM
en KB
define('OID_LINUX_MEM_BUFFER', '.[Link].4.1.2021.4.14.0'); // Buffered RAM
en KB
Pour trouver d'autres OIDs: Vous pouvez utiliser des outils comme snmpwalk (sur
Linux) ou des MIB Browsers (sur Windows) pour explorer les OIDs disponibles sur
vos appareils.
o Exemple snmpwalk (sur une machine Linux avec snmp installé) :
Bash
snmpwalk -v 2c -c public [Link] .[Link].2.1.25
Remplacez -v 2c par la version SNMP (v1, v2c, v3), -c public par votre
communauté, et [Link] par l'IP de votre appareil.
7.3. Styles et Thème
Le style est intégré directement dans le fichier [Link] dans la balise <style>. Pour une
maintenance plus facile, il est recommandé de déplacer ce CSS vers un fichier externe (ex:
[Link]) et de l'inclure via <link rel="stylesheet" href="[Link]">.
Vous pouvez modifier les couleurs, les tailles de police, les marges et d'autres propriétés CSS
pour adapter l'apparence à vos préférences. Les variables CSS (ex: var(--bg-primary))
facilitent la modification du thème global.
CSS
:root {
--bg-primary: #1a202c; /* Couleur de fond principale */
--bg-secondary: #2d3748; /* Couleur de fond des cartes */
--bg-tertiary: #4a5568; /* Couleur de fond des sous-sections */
--text-primary: #edf2f7; /* Couleur du texte principal */
--text-muted: #a0aec0; /* Couleur du texte secondaire/muté */
--success: #48bb78; /* Vert pour 'Online' */
--warning: #f59e0b; /* Orange pour 'CPU' */
--danger: #ef4444; /* Rouge pour 'Offline' */
--primary: #6366f1; /* Indigo/bleu pour 'RAM' */
--border-color: #4a5568; /* Couleur des bordures */
--shadow-color: rgba(0, 0, 0, 0.5); /* Couleur des ombres */
}
/* ... autres styles ... */
8. Améliorations Possibles
Ce projet est une base solide. Voici quelques idées pour l'améliorer :
Persistance des données: Stocker les données historiques (ping, CPU, RAM) dans
une base de données (SQLite, MySQL) pour afficher des graphiques sur le long terme.
Notifications: Envoyer des alertes (e-mail, SMS, Discord, Slack) en cas d'appareil
hors ligne ou de métriques critiques (CPU/RAM > 90%).
Authentification: Ajouter un système de connexion pour sécuriser l'accès au tableau
de bord.
Configuration via interface: Permettre l'ajout/modification d'appareils et de
communautés via une interface web, au lieu d'éditer le fichier PHP.
Plus de métriques SNMP: Ajouter des informations sur l'utilisation du disque, le
trafic réseau des interfaces, le nombre de processus, etc.
Amélioration de l'interface: Utiliser un framework CSS plus complet (Tailwind CSS,
Bootstrap) pour une interface plus sophistiquée.
Graphiques dynamiques: Utiliser AJAX pour rafraîchir les données sans recharger
toute la page, et mettre à jour les graphiques [Link] en temps réel.
Gestion des erreurs plus robuste: Améliorer la gestion des erreurs SNMP (ex:
communauté incorrecte, timeout) pour donner un feedback plus précis.
Contrôle de version: Mettre le projet sur un dépôt Git (GitHub, GitLab) pour faciliter
la collaboration et le suivi des modifications.
9. Crédits
Développé par [Votre Nom/Pseudo]
Icônes : Font Awesome
Graphiques : [Link]
