Chaos admin — panneau formateur¶

Le panneau formateur chaos-admin est l'interface principale utilisée par les professeurs pour piloter une session PerfShop. Il est servi par le même conteneur que la page étudiant (perfshop-chaos-admin) mais organisé dans un sous-chemin dédié : /admin/. Il est protégé par authentification et expose des contrôles avancés que la page étudiant ne donne pas.

Sources

chaos-admin/public/admin/index.html, login.html, gestion.html, mon-compte.html, chaos-admin/public/admin/chaos-sections.js, chaos-admin/public/admin/js/{login.js, gestion.js, gestion-licence.js, mon-compte.js}

Les trois pages HTML¶

Page	URL	Accès
`login.html`	`/admin/login.html`	Public
`index.html`	`/admin/`	Requiert `sessionStorage.chaos_auth === 'true'`
`gestion.html`	`/admin/gestion.html`	Requiert auth et `chaos_is_superadmin === 'true'`
`mon-compte.html`	`/admin/mon-compte.html`	Requiert auth (tout admin)

La protection est un simple guard JavaScript en tête de chaque page :

if (sessionStorage.getItem('chaos_auth') !== 'true') {
  window.location.href = 'login.html';
}

Ce guard est délibérément côté client — la véritable sécurité est assurée côté serveur par le backend Spring Boot qui vérifie la session HTTP et/ou le header X-Admin-Token sur chaque appel API. Voir Authentification admin.

login.html est un formulaire simple (email + password) qui appelle POST /api/admin/login. En cas de succès, le backend retourne :

{
  "email": "admin@perfshop.fr",
  "adminToken": "abcd...",
  "isSuperAdmin": true,
  "canAccessChaos": true,
  "canAccessMonitoring": true,
  "canAccessAdmin": true
}

Le script login.js stocke ces informations dans sessionStorage et redirige vers /admin/ :

chaos_auth, chaos_user, chaos_token
chaos_is_superadmin
chaos_can_access_chaos, chaos_can_access_monitoring, chaos_can_access_admin

Le backend retourne HTTP 402 si aucune licence valide n'est active — le formulaire affiche alors un message expliquant qu'une licence est requise pour accéder au panneau formateur. C'est une règle de sécurité importante : sans licence, même le login admin est bloqué. L'activation de licence doit donc passer par la page étudiant (qui reste accessible) ou par la variable d'environnement PERFSHOP_LICENSE_KEY.

Page principale — index.html¶

La page principale affiche sept onglets :

flowchart LR
  B[🔧 Chaos Backend]
  F[🖥️ Chaos Frontend]
  S[🔐 Chaos Scripting]
  M[🧑‍💼 Chaos Métier]
  Sec[🔒 Chaos Sécurité]
  Fn[⚡ Chaos Fonctionnel]
  P[🎓 Pédagogique]
  B --> F --> S --> M --> Sec --> Fn --> P

En-tête et boutons globaux¶

↻ Recharger — appelle loadCurrentState() et rafraîchit tous les panneaux
⊘ Reset tout — remet à zéro toutes les familles de chaos en une seule opération
⚙️ Administration — ouvre gestion.html, visible uniquement si chaos_is_superadmin === 'true'
👤 Mon compte — ouvre mon-compte.html, visible pour tout admin
Déconnexion — vide le sessionStorage et appelle POST /api/admin/logout

Barre mode étudiant¶

Juste sous l'avertissement figure une barre de contrôle du mode étudiant :

État	Comportement côté étudiant
✅ Actif (vert)	La page étudiant est utilisable, les sliders répondent aux clics
🔒 Bloqué (rouge)	La page étudiant affiche la bannière « TP non démarré — en attente du formateur » et tous les sliders sont verrouillés

Le bouton toggleStudentMode() bascule cet état via POST /api/chaos/student/admin/mode { enabled: !current }. C'est le levier principal que le formateur utilise pour démarrer ou arrêter un TP.

Onglet Chaos Backend¶

Rendu dynamiquement via chaos-sections.js. Affiche une grille de cartes — une par chaos infrastructure (CPU, mémoire, GC, DB pool, thread pool, slow queries, deadlock, network). Chaque carte affiche l'intensité actuelle, un slider de contrôle et les métriques temps réel. Un polling de 5 secondes rafraîchit les compteurs de requêtes et les intensités. Voir Chaos Performance.

Onglet Chaos Scripting¶

Cinq cartes empilées (sc-card-0 à sc-card-4) présentent les cinq niveaux :

Désactivé — API libre, aucun token
Junior — X-Session-Token sur le checkout
Confirmé — Double token + corrélation action
Expert — CSRF + step séquentiel + signature HMAC (15 s)
Maestro — clé HMAC dérivée par session

Chaque carte contient un exemple de code JMeter/k6 que l'étudiant pourra reproduire. Un clic sur une carte appelle setScriptingLevel(N). La carte active porte la classe CSS .active. Voir Chaos Scripting.

Onglet Chaos Métier¶

Cinq cartes (N0 à N4 — Master). La carte sélectionnée déclenche setBusinessLevel(N) qui envoie POST /api/chaos/business avec le niveau demandé. Chaque niveau ajoute des anomalies A1 à A16 de manière cumulative. Un bouton de reset resetBusiness() force le retour au niveau 0. Voir Chaos Métier.

Onglet Chaos Sécurité¶

Même structure que Métier — cinq cartes N0 à N4 (Master) activant les failles S1 à S12. La carte Master active le portail admin caché qui débloque S10, S11 et S12 (scénario chaîné GET /api/admin/portal/stats → POST /api/admin/portal/login → PUT /api/admin/portal/accounts/{id}/promote). Un compteur temps réel sec-hits-label affiche le nombre d'attaques détectées. Voir Chaos Sécurité.

Onglet Chaos Fonctionnel¶

Cinq cartes présentant les anomalies F1 à F4 :

N1 — F1 : NullPointerException dans processPaymentPublic()
N2 — F1 + F2 : StackOverflow dans calculateOrderTotal()
N3 — F1 + F2 + F3 : OutOfMemoryError dans getAllProducts()
N4 Master — F4 : corruption silencieuse des données (pas de crash, payload corrompu)

Un panneau compteurs affiche en direct les occurrences de chaque exception. Voir Chaos Fonctionnel.

Onglet Chaos Frontend¶

Grille de cartes pour CPU burn, memory leak, DOM flood, fetch flood. Aucun impact serveur — les chaos s'exécutent dans les navigateurs des visiteurs via chaos-agent.js qui poll /api/chaos/frontend/state toutes les 5 secondes. Voir Chaos Frontend.

Onglet Pédagogique¶

Rendu dynamiquement par buildPedagogyAdminPanel() dans chaos-sections.js. Permet au formateur de :

Sélectionner un niveau de parcours (BAC1 à BAC5) — indépendant du slider étudiant
Définir le timer (durée en minutes avant expiration)
Activer ou désactiver le cache mémoire des sessions pédagogiques (valeur pédagogique : quand activé, les MutableSession apparaissent dans les heap dumps lors d'un Chaos Mémoire, démontrant une fuite de tokens)
Activer ou désactiver les indices
Voir la liste des sessions étudiantes actives et leur progression
Lancer un reset global du parcours

Panneau licence sur `gestion.html`¶

Dans la page gestion.html du superadmin figure un panneau dédié à la licence (chaos-admin/public/admin/js/gestion-licence.js) qui expose :

L'état actuel (plan, détenteur, date d'émission, date d'expiration, jours restants, fonctionnalités débloquées)
Un <textarea> pour coller une nouvelle clé PFSH-xxx.yyy
Un bouton Activer qui appelle POST /api/license/activate
Un bouton Révoquer qui appelle POST /api/license/revoke
Un bloc d'aide expliquant comment injecter la clé via .env au démarrage

Voir Système de licence.

Gestion des comptes admin — `gestion.html`¶

Accessible au seul superadmin. Affiche la liste des comptes admin sous forme de tableau avec les colonnes : email, chaos-admin, monitoring, backoffice, JMeter, Scripts, rôle, créé le, actions.

Trois actions sont disponibles :

Créer un compte — formulaire avec email, mot de passe (min 6 caractères) et cases à cocher de droits
Changer le mot de passe — modale modal-password
Modifier les droits — modale modal-rights, sauf pour le superadmin (droits fixes)
Supprimer — sauf pour le superadmin

Toutes les requêtes passent par adminFetch(), un wrapper qui injecte automatiquement X-Admin-Token depuis sessionStorage.chaos_token dans chaque requête. Ce wrapper est nécessaire car en déploiement cross-origin (NAS, HTTPS tiers, local HTTP), le cookie de session ne suit pas toujours : le token explicite est la voie fiable.

Page mon-compte¶

mon-compte.html est accessible à tout admin connecté, y compris le superadmin. Elle permet à chacun de changer son propre mot de passe. Le formulaire affiche :

Un champ Nouveau mot de passe avec un indicateur de force
Un champ Confirmer le mot de passe
Un bouton « Enregistrer »

Le script mon-compte.js expose checkStrength(value) qui calcule un score et met à jour la .strength-bar, puis savePassword() qui envoie PUT /api/admin/accounts/me avec le nouveau mot de passe après vérification de la confirmation. La force est purement visuelle — la politique serveur impose un minimum de 6 caractères.

Internationalisation¶

Tous les textes affichés utilisent l'attribut data-i18n="key" et sont remplacés au chargement par applyI18n() depuis public/i18n/{fr,en}.json. Le loader i18n.js est partagé avec la page étudiant et permet d'ajouter une langue sans modifier de code — il suffit d'ajouter un fichier public/i18n/<lang>.json et de positionner PERFSHOP_LANG à la valeur correspondante. Voir Outils annexes.