33800 Docs

← Retour

Refonte CSS Dashboard Monitoring 33800

Date: 07 janvier 2026 Statut: Termine

Contexte

Le dashboard de monitoring avait plusieurs problemes :

  1. Design inconsistant entre les pages (seuls index.html et shortlinks.html avaient un bon design)
  2. CSS inline dans chaque page (duplication, maintenance difficile)
  3. stock_8to non collecte dans collect.sh
  4. Affichage stockage incorrect (4To au lieu de 8To)

Actions Realisees

1. Creation du systeme CSS unifie

Fichier: /stock_8to/33800-stack/monitoring/assets/dashboard.css (16 KB)

Contient :

2. Creation des templates HTML reutilisables

Fichier: /stock_8to/33800-stack/monitoring/templates.sh

Fonctions disponibles :

html_head "Titre"           # Genere <head> avec lien CSS externe
html_header "page" "date"   # Header sticky avec navigation
html_page_title "T" "S"     # Titre de page avec sous-titre
html_footer                 # Footer 4 colonnes
html_end                    # Ferme </body></html>

Navigation supportee : index, shortlinks, montages, nginx, endpoints, doc, models, secrets, crons, needfinder

3. Correction de collect.sh pour stock_8to

Fichier: /stock_8to/33800-stack/monitoring/collect.sh

Ajout de la collecte du pool ZFS stock_8to (lignes 175-201) :

# Pool ZFS stock_8to (RAIDZ1 3x4To - stockage frontal)
PVE_STOCK8_STATE=$(ssh_cmd 192.168.1.10 "sudo zpool status stock_8to...")
PVE_STOCK8_INFO=$(ssh_cmd 192.168.1.10 "zfs list stock_8to -H -o used,avail")

Ajout dans la sortie JSON (lignes 1087-1093) :

"stock_8to": {
  "state": "$PVE_STOCK8_STATE",
  "used": "${PVE_STOCK8_USED}T",
  "avail": "${PVE_STOCK8_AVAIL}T",
  "total": "${PVE_STOCK8_TOTAL}T",
  "percent": $PVE_STOCK8_CAP
}

4. Refactorisation de generate.sh

Fichier: /stock_8to/33800-stack/monitoring/generate.sh

Pages mises a jour avec CSS externe :

Page Statut Notes
index.html OK CSS externe + sticky header
montages.html OK CSS externe + sticky header
nginx.html OK CSS externe + sticky header
shortlinks.html OK Mise a jour header navigation
endpoints.html OK CSS externe + sticky header
doc.html OK CSS externe + sticky header
models.html OK CSS externe + sticky header
secrets.html OK CSS externe + sticky header
crons.html OK CSS externe + styles timeline
needfinder.html OK CSS externe + styles specifiques

Structure CSS

Variables principales

:root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --accent-blue: #3b82f6;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-orange: #f97316;
    --border-color: #334155;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

Classes principales

Deploiement

Commit Git

Branche: main
Message: "Refonte CSS unifie + collecte stock_8to"

Fichiers deployes sur PROD

/var/www/dashboard/
├── index.html          (11 KB)
├── montages.html       (mise a jour)
├── nginx.html          (mise a jour)
├── shortlinks.html
├── endpoints.html
├── doc.html
├── models.html
├── secrets.html
├── crons.html
├── needfinder.html
└── assets/
    └── style.css       (16 KB - copie de dashboard.css)

Problemes identifies non resolus

  1. NeedFinder API : Service non accessible sur 192.168.1.51:5200

    • curl http://192.168.1.51:5200/api/needs retourne vide
    • A investiguer : conteneur NeedFinder

  2. Containers "offline" : Affichage initial semblait incorrect mais les donnees JSON sont correctes (22 containers UP)

Actions completees

  1. CSS unifie applique a TOUTES les pages (10/10)
  2. Navigation sticky header coherente sur toutes les pages
  3. Variables CSS unifiees (--bg-primary, --accent-blue, etc.)
  4. Footer 4 colonnes standard sur toutes les pages
  5. Deploiement PROD termine

Points d'attention restants

  1. NeedFinder API non accessible (192.168.1.51:5200) - a investiguer
  2. stock_8to maintenant collecte dans collect.sh

Commandes utiles

# Regenerer le dashboard
/stock_8to/33800-stack/monitoring/collect.sh
/stock_8to/33800-stack/monitoring/generate.sh

# Deployer en PROD
scp -r /stock_8to/33800-stack/monitoring/output/* gouroubleu@192.168.1.104:/var/www/dashboard/

# Voir les logs
cat /stock_8to/33800-stack/monitoring/logs/$(date +%Y-%m-%d).json