Tableau de bord HTML¶

Le dashboard HTML est le monitoring temps réel de PerfShop. Il existe en deux niveaux d'accès servis par le container perfshop-monitoring (Node.js).

Architecture deux niveaux¶

https://perfshop-monitoring.perfshop.io/          → Page élèves (lecture seule)
https://perfshop-monitoring.perfshop.io/admin/    → Login admin
https://perfshop-monitoring.perfshop.io/admin/monitoring.html → Dashboard admin complet

Fichier	Accès	Onglets
`public/index.html`	Public — élèves	🔧 Backend · 🖥️ Frontend · 🐳 Vue Générale
`public/admin/index.html`	Login admin	formulaire d'authentification
`public/admin/monitoring.html`	Admin authentifié	7 onglets complets

Page élèves — `index.html`¶

3 onglets en lecture seule, sans contrôles ni logs sensibles :

Onglet	Contenu
🔧 Backend	6 stats JVM + 14 graphiques + bouton ⚙️ Admin
🖥️ Frontend	Stats container Nginx + métriques navigateur
🐳 Vue Générale	CPU/RAM/Réseau tous containers

Dashboard admin — `monitoring.html`¶

7 onglets avec visibilité complète sur toutes les familles de chaos :

Onglet	Contenu
🔧 Backend	Stats JVM + 14 graphiques + grille chaos backend (7 anomalies + intensités) + Heap Dump
🖥️ Frontend	Stats Nginx + métriques navigateur + grille chaos frontend (4 anomalies)
🐳 Vue Générale	CPU/RAM/Réseau tous containers
📜 Scripting	Niveau actif (0–4), bundles sessions, logs activité API en temps réel
🎯 Chaos Métier	Bannière niveau (OFF/Junior/Confirmé/Expert), KPIs A1-A11, logs filtrables
🔐 Chaos Sécurité	9 failles OWASP, compteurs par faille S1-S9, flux attaques temps réel
⚡ Chaos Fonctionnel	Compteurs F1-NPE/F2-StackOverflow/F3-OOM, journal exceptions injectées

Authentification admin¶

Le login utilise /api/admin/login (même endpoint que chaos-admin). Trois clés sessionStorage sont stockées après succès :

monitoring_admin_auth   = "true"
monitoring_admin_token  = "<adminToken JWT>"
monitoring_admin_email  = "<email>"

Le guard en haut de monitoring.html redirige vers ./ si monitoring_admin_auth !== 'true'. La déconnexion supprime les 3 clés et redirige vers la page login.

Clé sessionStorage — point de vigilance

Le token admin doit être lu avec sessionStorage.getItem('monitoring_admin_token'). Utiliser une autre clé (ex. adminToken) provoque un clear des logs métier silencieusement raté.

Injection de config — `config.js`¶

Les pages admin/index.html et admin/monitoring.html chargent ../config.js pour obtenir les URLs de production (API_URL, MONITORING_URL, etc.).

Ce fichier n'est pas statique — il est servi dynamiquement par Node.js :

// server.js
app.get('/config.js', (req, res) => {
  res.set('Content-Type', 'application/javascript');
  res.send(`window.__CONFIG__ = ${JSON.stringify(PUBLIC_CONFIG)};`);
});

Sans cette route, API_URL tombe sur http://localhost:8080

Si config.js retourne un 404 ou un MIME type text/html, le navigateur refuse d'exécuter le script (strict MIME checking) et toutes les requêtes chaos échouent avec ERR_CONNECTION_REFUSED.

Endpoints chaos utilisés par le dashboard admin¶

Onglet	Endpoint	Route backend
Backend chaos	`GET /api/admin/chaos/public/status`	`ChaosController` — réponse wrappée `{ backend:{...}, frontend:{...} }`
Frontend chaos	`GET /api/chaos/frontend/state`	`FrontendChaosController`
Scripting status	`GET /api/admin/chaos/scripting/public/status`	`ChaosScriptingController`
Scripting logs	`GET /api/admin/chaos/scripting/public/logs`	`ChaosScriptingController`
Métier status	`GET /api/chaos/public/business/status`	`BusinessChaosController`
Métier logs	`GET /api/chaos/public/business/logs`	`BusinessChaosController`
Sécurité status	`GET /api/chaos/public/security/status`	`SecurityChaosController`
Sécurité logs	`GET /api/chaos/public/security/logs`	`SecurityChaosController`
Fonctionnel status	`GET /api/chaos/public/functional/status`	`FunctionalChaosController`
Fonctionnel logs	`GET /api/chaos/public/functional/logs`	`FunctionalChaosController`

Parsing de la réponse chaos backend

/api/admin/chaos/public/status retourne un objet wrappé :

{ "backend": {"memory":0,"cpu":0,...}, "frontend":{...}, "business":{...} }

Il faut extraire resp.backend — itérer directement sur resp ne trouve aucune clé correspondant aux anomalies et affiche tout à 0% / Inactif.

Rafraîchissement¶

Données	Intervalle
Métriques backend (Prometheus)	3s
CPU container backend (Docker)	3s
Chaos backend + frontend	2s
Métriques navigateur client	2s
Scripting + Métier + Sécurité + Fonctionnel	2s
Stats Docker containers	3s

Bouton Pause¶

Le bouton ⏸ Pause en haut à droite fige tous les graphiques (flag paused = true) sans couper les collectes serveur. Utile pour analyser un pic ou une anomalie.

Heap Dump (onglet Backend admin)¶

Le bouton ⬇️ Générer Heap Dump proxy vers perfshop-app:9090/actuator/heapdump via la route Node.js /api/heapdump. Génération ~30s, fichier .hprof téléchargé automatiquement, analysable avec Eclipse MAT ou VisualVM.

Déploiement des fichiers HTML¶

Les fichiers public/ sont montés en volume Docker — un simple SCP suffit, sans rebuild :

# Monitoring page élèves
scp monitoring/public/index.html user@nas:/volume4/docker-speed/perfshop/monitoring/public/

# Pages admin
scp monitoring/public/admin/index.html user@nas:/volume4/docker-speed/perfshop/monitoring/public/admin/
scp monitoring/public/admin/monitoring.html user@nas:/volume4/docker-speed/perfshop/monitoring/public/admin/

server.js modifié → rebuild obligatoire

Toute modification de src/server.js (ajout de route, changement de config) nécessite un rebuild de l'image perfshop-monitoring et redéploiement. Voir Build & Déploiement.