Aurora Design FR

Design Aurora

EN | FR | Aurora | design system des pages d'administration

Sombre, sans dépendance, honnête sur ses données. Une page = un fichier HTML.

À quoi ça sert

« Aurora » (le profil projet référence, nommé le 2026-10-11) est le style commun des pages d'administration refondues : vue d'ensemble WAF et ses six onglets, Guardian, DPI et ses cinq onglets ndpid, SOC, Actor Intelligence, Threats, Metrics et le Toolbox. Ce guide donne les principes, les jetons de couleur, l'anatomie d'une page et les règles à suivre pour en ajouter ou en porter une. Le modèle vivant est packages/secubox-waf-ng/composants/waf/www/waf/vue.html ; en cas de doute, le code fait foi. Le résultat est visible dans Admin-Panels-Gallery-FR.

1. Principes

Règle	Pourquoi
Un HTML autonome : CSS et JS en ligne	La CSP des vhosts (default-src 'self'; script-src 'self' 'unsafe-inline') n'en permet pas plus, et chaque dépendance est une surface de plus
Aucune bibliothèque, police distante ni <script src>	Même raison ; rien à télécharger
Graphiques en SVG écrits à la main	Pas de canvas, pas de bibliothèque de graphes
Police "IBM Plex Sans","Inter",system-ui,… et tabular-nums sur les nombres alignés	Repli système ; monospace seulement pour les identifiants techniques (interfaces, hachages, IP)
En-tête SPDX CMSD-1.0, aucun secret affiché	Une clé publique tronquée suffit
Thème unique sombre	Pas de thème clair dans ce profil

2. Jetons de couleur

À copier tels quels :

:root{--fond:#060d1b;--trait:rgba(86,150,255,.22);--trait2:rgba(86,150,255,.38);--texte:#eaf1ff;--doux:#9fb3d6;--faible:#6f84a8;
  --cyan:#29b6f6;--bleu:#3b82f6;--vert:#2ecc71;--rouge:#ff4d5e;--orange:#ff9f1c;--violet:#a78bfa;--jaune:#ffd23f}

Jeton	Sens
--cyan	information, entrant, primaire
--vert	sain, actif, bloqué avec succès
--orange	attention, démonstration, périmé
--rouge	menace, critique, paquets écartés, hors ligne
--jaune	sortant
--violet, --bleu	séries secondaires
--texte / --doux / --faible	valeur / étiquette / note et unité

Une couleur garde le même sens dans toutes les pages. Fond : deux dégradés radiaux (bleu en haut à droite rgba(59,130,246,.2), rouge ou cyan en bas à gauche .10) sur --fond. Pastilles de gravité : critique rouge, haute orange, moyenne jaune, basse bleu ou vert.

3. Anatomie d'une page

.cadre   container-type:inline-size; container-name:a; padding:10px  (SANS min-height)
 └ .app  bordure --trait2, rayon 16, dégradé sombre 160deg, ombre cyan, grille gap 10
    ├ .tete      marque · pastille d'état · à droite : heure + bouton Rafraîchir
    ├ bandeaux   .demo (orange) · .info « session requise » (cyan)
    ├ .tuiles    2 colonnes, 4 à 6 au-delà (container query)
    └ .grille    de panneaux .pan (titre h3, mention faible à droite)

Élément	Spécification
Tuile	rayon 12, bord --trait ; étiquette .74rem --doux, valeur 1.45rem/700 tabular-nums, sous-ligne .68rem --faible. Chaque tuile porte sa définition en infobulle (title)
Panneau .pan	rayon 12, bord --trait, fond rgba(10,22,46,.6) ; cartes ombrées réservées aux objets à distinguer
Pastille	rayon 999, bord et texte de la couleur sémantique, fond de la même couleur à 12 %
Liste / barre	ligne nom · valeur · barre (barre de 6 px)
Tableau	en-tête petites capitales .66rem, tri/filtre/recherche côté client, défilement horizontal dans son propre conteneur
Courbe	une seule échelle (le plus grand des deux séries), graduations réelles, aire translucide fill-opacity .14, vector-effect:non-scaling-stroke. Jamais de série inventée

4. Mise en page : container queries

La grille se décide sur la largeur du .cadre (@container a (min-width:700px|900px|1100px)), pas sur celle de la fenêtre : la même page sert en carte, en onglet encadré et en plein écran.

• ?embed=1 ou largeur sous 900 px : une colonne ; min-width:0 sur les enfants de grille qui portent du texte.
• À 420 px (téléphone) : pas de défilement horizontal de la page. Seuls tableaux, code et diagrammes défilent, chacun dans son conteneur.

5. Vérité des données

Situation	Ce que fait la page
Mesure absente	« — », jamais 0. Zéro est une mesure
L'API ne fournit pas une série	pas de courbe
Valeur déduite côté page (famille, catégorie, confiance, tendance)	la page le dit (note ou infobulle)
Chiffre partiel	annoncé partiel
401 / échec	bandeau « Aucune mesure : session requise. Se connecter », tuiles en « — »
?demo=1	données de démonstration réalistes, bandeau orange, adresses de documentation (RFC 5737 / 3849), noms fictifs, aucun appel d'écriture
Collecteur arrêté / données périmées	état visible (pastille orange « DONNÉES PÉRIMÉES — COLLECTEUR ARRÊTÉ ? »), pas un silence

Corollaires : une timeline sans jours vides n'est pas comblée à zéro (l'axe ne montre que les jours mesurés, les moyennes ne comptent qu'eux) ; « visiteur unique = 1 » peut venir d'une IP de proxy, et l'infobulle l'explique au lieu de masquer le chiffre.

6. Accès aux données

• fetch(url, {headers:{Accept:'application/json'}, credentials:'same-origin', cache:'no-store'}) ; en-tête Authorization: Bearer tiré de localStorage.sbx_token s'il existe (lecture dans un try/catch, localStorage peut lever).
• Même origine uniquement : routes /api/v1/<module>/… de l'hôte de la page.
• Préférer les lectures agrégées (/pub/…) aux routes legacy retirées : sur l'hôte admin, /api/v1/dpi/stats répondait « retiré » sans champ connected et la vue affichait « HORS LIGNE » à tort (#2368).
• Actualisation toutes les 15 à 60 s seulement si document.hidden est faux, jamais pendant une saisie ou une confirmation ouverte.

7. Protocole de hauteur d'iframe

La page encadrée mesure son cadre, pas le document :

parent.postMessage({sbxVue: Math.ceil(document.querySelector('.cadre').getBoundingClientRect().bottom + scrollY), onglet:'nom'}, location.origin)

À poster au chargement, au redimensionnement et à chaque rendu (ResizeObserver sur body).

• Interdits : documentElement.scrollHeight et min-height:100vh sur le cadre. La mesure ne pourrait alors que croître (le document n'est jamais plus court que l'iframe) et l'on obtient des milliers de pixels de vide (#2323, #2354, #2358).
• Clés existantes : sbxwafVue (vue WAF, w minuscule), sbxWafVue + onglet (onglets WAF), sbxdpiVue, sbxSocVue, sbxNdpidVue, sbxThreatsVue, sbxMetricsVue, sbxToolboxVue, et la clé générique sbxVue (SOC/Toolbox). Une page neuve poste sbxVue + onglet.
• L'hôte borne la valeur (WAF 300-4000 px, SOC 400-4000 px, plus 4 px) et vérifie e.origin === location.origin ; avec plusieurs cadres, onglet doit correspondre au cadre. Une page qui n'annonce rien garde la hauteur par défaut de l'iframe.

8. Actions et confirmations

• Une page est en lecture seule sauf si l'ancien onglet écrivait. Les actions existantes gardent exactement le même appel (route, corps, en-têtes) : on refait la peau, pas le contrat. N'inventer aucune action.
• La confirmation est intégrée à la page (boutons Confirmer / Annuler dans le panneau). Jamais confirm(), alert() ni prompt() : le navigateur du viewer les ignore (confirm() renvoie faux sans rien dire). Résultat ou erreur affichés dans la page.
• Actions inertes en ?demo=1. Toute action sans retour arrière demande confirmation ; ne jamais proposer de vider des listes apprises.

9. Intégration dans un hôte (onglets, SOC, Hall)

• Chaque onglet d'une page à onglets est une page autonome encadrée dans une iframe de même origine ; l'ancien contenu reste dans le DOM, masqué, pour ne pas casser le reste du script.
• Une seule source : le SOC encadre /waf/*.html, /dpi/vue.html, /actor-intelligence/ ; le Toolbox encadre /soc/reseau.html. On ne copie jamais une page. L'hôte déclare dans Depends les paquets qui portent les pages qu'il encadre (sinon l'onglet est vide) ; le Profils lite les embarque par fermeture des dépendances.
• Les pages sont servies par un root statique, jamais un alias + try_files (qui perd l'extension). Un relais du Hall est une liste de routes exactes derrière auth_request.
• Le menu latéral commun (/shared/sidebar.js) reste chargé hors ?embed=1 et hors démonstration.

10. Pièges

Piège	Parade
Le skin partagé hybrid-skin.css est injecté après la page et pose ses teintes en !important	Une page qui garde ce skin répond à spécificité supérieure (html :is(.hybrid-skin, body) …) ; une page Aurora complète ne le charge pas
La hauteur de cadre ne fait que croître	Voir section 7
Boîtes de dialogue ignorées	Confirmation intégrée
fetch relatif en échec sous file://	C'est le cas « sans session », utile pour tester

11. Tests et vérification

1. Test statique (pytest, sans navigateur) par page : en-tête SPDX, clé de hauteur postée, demo, aucun <script src= externe, ni « lorem », ni secret, pas de confirm( / alert( / prompt(, routes d'API citées, routes d'écriture identiques à l'ancienne page, et aucun POST pour une page lecture seule.
2. Capture réelle (Playwright, file://…?demo=1) en 1400x900 puis 420 px de large ; lire les PNG ; corriger jusqu'à ce que rien ne déborde horizontalement et qu'aucun texte ne soit coupé. scripts/snapshots-aurora.py régénère la galerie.
3. Cas vide : sans ?demo=1, attendre « — », le bandeau et aucune erreur JS (page.on('pageerror')).
4. Intégration : basculer tous les onglets, relever src et hauteur de l'iframe, aucune erreur.
5. Sur la box : curl des pages (200) et coup d'œil humain avec les vraies données ; une capture à vide ne prouve pas la lisibilité des vraies séries.

12. Contenu et accessibilité

Vocabulaire français du projet ; titres sobres ; infobulle de définition sur chaque mesure ; libellés explicites (« Entrant maintenant », pas « In ») ; aria-selected sur les onglets, focus visible, cibles tactiles confortables, contraste conforme aux jetons ci-dessus.

Voir aussi

• Admin-Panels-Gallery-FR — les 28 pages en captures (données de démonstration)
• WAF-FR — sbxwaf et ses onglets
• DPI-Vivant — DPI en direct
• ToolBox — pages du Toolbox
• Profils — profils et ce qu'ils embarquent