33800 Docs

← Retour

Proposition : Refonte UI/UX Dashboard Monitoring

Date : 20/12/2025 13:15 Statut : En attente de validation

Constat actuel

Problemes identifies

  1. Script monolithique : generate.sh = 3820 lignes de bash
  2. CSS duplique : Chaque page HTML contient ~500 lignes de CSS identique
  3. Navigation repetee : Le menu est recopie dans chaque page
  4. Pas de structure claire : HTML/CSS/JS melanges dans des heredocs bash
  5. Pages dispersees : 7 pages sans coherence visuelle forte
    • index.html (1853 lignes)
    • endpoints.html (921 lignes)
    • montages.html (567 lignes)
    • nginx.html (515 lignes)
    • doc.html (320 lignes)
    • secrets.html (221 lignes)
    • models.html (157 lignes)

Proposition de refonte

Option A : Refonte legere (conserve le bash)

Effort : Moyen | Impact : Amelioration notable

monitoring/
├── generate.sh           # Script principal simplifie
├── templates/
│   ├── header.html       # Header + nav communs
│   ├── footer.html       # Footer commun
│   └── card.sh           # Fonctions de generation
├── assets/
│   └── style.css         # CSS unique partage
└── current.json          # Donnees (inchange)

Avantages :

Inconvenients :

Option B : Dashboard SPA moderne (recommande)

Effort : Important | Impact : Transformation complete

monitoring/
├── collect.sh            # Collecte des donnees (inchange)
├── current.json          # Donnees (inchange)
└── dashboard/
    ├── index.html        # Page unique SPA
    ├── style.css         # CSS moderne
    └── app.js            # Logique JS vanilla

Principe : Une seule page HTML qui charge current.json et affiche tout dynamiquement.

Avantages :

Inconvenients :

Proposition detaillee (Option B)

1. Nouvelle structure UI

+------------------------------------------+
|  33800 Stack                    [dark]   |  <- Header fixe
+--------+---------------------------------+
|        |                                 |
|  [*]   |  Vue d'ensemble                 |
| Accueil|  +-------+ +-------+ +-------+  |
|        |  | Alerts| | Servers| |Services|
|  [ ]   |  +-------+ +-------+ +-------+  |
| Servers|                                 |
|        |  Serveurs                       |
|  [ ]   |  +---------------------------+  |
| Sites  |  | PVE        | Proxmox1     |  |
|        |  | OK  4% CPU | WARN 94% RAM |  |
|  [ ]   |  +---------------------------+  |
| Services|  +---------------------------+  |
|        |  | prod-port. | dev-port.    |  |
|  [ ]   |  | 23 containers | 27 cont.  |  |
| Secrets|  +---------------------------+  |
|        |                                 |
|  [ ]   |  Services IA                    |
| Docs   |  +-------+ +-------+ +-------+  |
|        |  |Ollama | |Whisper| |YOLO   |  |
+--------+---------------------------------+

2. Fonctionnalites cles

Fonctionnalite Description
Navigation sidebar Acces rapide a chaque section
Badges resume Compteurs OK/Warning/Error en haut
Cards collapsibles Expand/collapse par serveur
Filtres Montrer uniquement les erreurs
Recherche Trouver un container/site rapidement
Auto-refresh Actualisation toutes les 5 min
Dark/Light mode Toggle theme
Mobile responsive Sidebar devient drawer

3. Sections principales

  1. Vue d'ensemble (index)

    • Resume global (X OK, Y warnings, Z errors)
    • Alertes en cours
    • Derniere collecte

  2. Serveurs

    • Tous les serveurs avec metriques CPU/RAM/Disk
    • VMs pour PVE/Proxmox1
    • Containers pour portainers

  3. Sites Nginx

    • Tableau des sites avec status UP/DOWN
    • Filtrage par access (public/local)
    • Recherche par nom

  4. Services

    • Services IA (Ollama, Whisper, YOLO, ComfyUI)
    • Databases (Redis PROD/DEV, Supabase PROD/DEV)
    • Apps (NeedFinder, HelloCar, etc.)

  5. Montages

    • NFS mounts
    • Docker volumes
    • ZFS pools

  6. Secrets (si pertinent en dashboard)

    • Liste des secrets disponibles
    • Pas les valeurs, juste les cles

  7. Documentation

    • Liens utiles
    • Commandes rapides

Implementation technique

Fichier unique dashboard/index.html

<!DOCTYPE html>
<html>
<head>
  <title>33800 Stack</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav id="sidebar">...</nav>
  <main id="content"></main>
  <script src="app.js"></script>
</body>
</html>

CSS moderne (style.css)

JavaScript vanilla (app.js)

// Chargement des donnees
async function loadData() {
  const res = await fetch('current.json');
  return res.json();
}

// Rendu dynamique
function render(data) {
  document.getElementById('content').innerHTML = renderSection(currentView, data);
}

// Navigation
window.onhashchange = () => render(data);

Migration

Etape 1 : Creer le nouveau dashboard

Etape 2 : Adapter collect.sh

Etape 3 : Deployer

Etape 4 : Nettoyer

Estimation

Tache Temps estime
Structure HTML + routing 1-2h
CSS complet 2-3h
JS rendering 2-3h
Tests + ajustements 1-2h
Deploiement 30min
Total ~8h

Questions pour validation

  1. Option A ou B ? (B recommande pour le long terme)
  2. Garder les 7 pages ou tout fusionner en SPA ?
  3. Fonctionnalites prioritaires ?
    • [ ] Dark/Light mode
    • [ ] Filtres
    • [ ] Recherche
    • [ ] Graphiques historiques
    • [ ] Auto-refresh configurable
  4. Secrets dans le dashboard ? (peut etre sensible)

Validation