Proposition : Refonte complète Monitoring Dashboard

Date : 06/01/2026 Status : IMPLEMENTEE Priorité : MOYENNE Durée estimée : Session complète

Contexte

Le système de monitoring actuel (collect.sh + generate.sh) est obsolète :

IPs et chemins incorrects
Architecture réseau non documentée (2 réseaux)
Nouveaux pools ZFS non intégrés (stock_1to)
Design incohérent entre les sections
Pas de suivi des crons ni d'historique

Objectifs

Mettre à jour collect.sh avec l'infrastructure actuelle
Refondre generate.sh avec design homogène
Ajouter historique des crons et leurs logs
Documenter les 2 réseaux (principal + stockage 10G)
Intégrer tous les pools ZFS (stock_8to, stock_36to, stock_1to)

Architecture actuelle à refléter

Réseaux

Réseau	Plage	Usage
Principal	192.168.1.0/24	Services, SSH
Stockage	10.10.10.0/24	NFS/SMB 10G

Machines

Machine	IP Principale	IP Stockage	Rôle
PVE	192.168.1.10	10.10.10.10	Hyperviseur + NFS + Claude
Proxmox 1	192.168.1.155	10.10.10.155	Hyperviseur legacy + stock_1to
prod-portainer	192.168.1.12	10.10.10.12	Docker PROD
dev-portainer	192.168.1.51	-	Docker DEV
nginx	192.168.1.104	-	Reverse Proxy
gitlab	192.168.1.196	-	GitLab CE
jellyfin	192.168.1.199	-	Media Server
win11	192.168.1.30	10.10.10.15	Gaming + Ollama

Pools ZFS

Pool	Machine	Config	Taille	Rôle
stock_8to	PVE	RAIDZ1 3x4To	7.2 To	Données actives (FRONTAL)
stock_36to	PVE	RAIDZ2 5x12To	33 To	Backup + Médias
stock_1to	Proxmox 1	Mirror 2x1To USB	900 Go	DEV stack

Crons à surveiller

Machine	Cron	Script	Fréquence
PVE	monitoring	collect.sh	0
PVE	backup-8to	rsync-stock8-to-stock36.sh	0
PVE	ZFS	trim/scrub	Dim
Proxmox 1	backup-1to	rsync-stock1to-to-stock36.sh	0
Proxmox 1	ZFS	trim/scrub	Dim
GitLab	backup	gitlab-backup + rsync	/6 *

Design proposé

Navigation

Menu Principal (header sticky)

┌─────────────────────────────────────────────────────────────────────────┐
│  [logo] 33800 Stack    Dashboard  Stockage  Crons  Réseau  Docs  [●]   │
└─────────────────────────────────────────────────────────────────────────┘
                                                                    │
                                                            Status global

Logo + titre à gauche
Liens principaux au centre
Indicateur status global à droite (vert/jaune/rouge)
Sticky en haut de page
Backdrop blur sur scroll

Menu Secondaire (sous-navigation par page)

Dashboard:    [Vue d'ensemble] [Alertes] [Serveurs] [Docker] [Nginx]
Stockage:     [Pools ZFS] [Disques] [Historique] [SMART]
Crons:        [Timeline] [Logs] [Alertes]
Réseau:       [Principal] [Stockage 10G] [Connexions]
Docs:         [Modèles IA] [Secrets] [Endpoints] [Montages]

Tabs horizontaux sous le header
Scroll smooth vers section
Highlight actif au scroll

Version Mobile

┌─────────────────────┐
│ [≡] 33800 Stack [●] │  <- Header compact + burger menu
├─────────────────────┤
│                     │
│  [Cards empilées]   │  <- 1 colonne
│                     │
│  [Swipe sections]   │  <- Swipe horizontal entre sections
│                     │
└─────────────────────┘
    [Dashboard][+][Docs]   <- Bottom nav (3-4 items)

Adaptations mobile :

Burger menu pour navigation complète
Bottom navigation pour accès rapide
Cards en 1 colonne
Tableaux scrollables horizontalement
Touch-friendly (min 44px touch targets)
Swipe pour changer de section

Principes

Palette unique : Dark theme cohérent
- Background : #0d1117
- Cards : #161b22
- Borders : #30363d
- Success : #238636
- Warning : #d29922
- Error : #f85149
- Info : #58a6ff
Typographie
- Font : Inter ou system-ui
- Titres : Semi-bold
- Mono : JetBrains Mono pour code/valeurs
Cards uniformes
- Border-radius : 8px
- Padding : 16px
- Shadow subtile
- Header avec icône + titre + status badge
Grille responsive
- Desktop : 3-4 colonnes
- Tablet : 2 colonnes
- Mobile : 1 colonne

Sections du Dashboard

┌─────────────────────────────────────────────────────────────┐
│  HEADER : 33800 Stack Dashboard                             │
│  Dernière MAJ : [timestamp] | Status global : [badge]       │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  ALERTES (collapsible si 0)                                 │
│  [alert cards avec suggestions]                             │
└─────────────────────────────────────────────────────────────┘

┌──────────────┬──────────────┬──────────────┬───────────────┐
│  STOCKAGE    │  STOCKAGE    │  STOCKAGE    │  CRONS        │
│  stock_8to   │  stock_36to  │  stock_1to   │  Status       │
│  [progress]  │  [progress]  │  [progress]  │  [timeline]   │
└──────────────┴──────────────┴──────────────┴───────────────┘

┌──────────────┬──────────────┬──────────────┬───────────────┐
│  PVE         │  Proxmox 1   │  prod-port   │  dev-port     │
│  [metrics]   │  [metrics]   │  [metrics]   │  [metrics]    │
└──────────────┴──────────────┴──────────────┴───────────────┘

┌──────────────┬──────────────┬──────────────┬───────────────┐
│  nginx       │  gitlab      │  jellyfin    │  win11        │
│  [metrics]   │  [metrics]   │  [metrics]   │  [metrics]    │
└──────────────┴──────────────┴──────────────┴───────────────┘

┌─────────────────────────────────────────────────────────────┐
│  SERVICES DOCKER (tabs: PROD | DEV)                         │
│  [container cards avec status]                              │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  SITES NGINX (table triable)                                │
│  [domain | target | status | ssl | logs]                    │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  RESEAUX (collapsible)                                      │
│  [schéma principal + stockage 10G]                          │
└─────────────────────────────────────────────────────────────┘

Nouvelle section : CRONS

┌─────────────────────────────────────────────────────────────┐
│  CRONS & BACKUPS                                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  monitoring    ●────●────●────●────●────●    Dernier: 22:00 │
│  backup-8to    ●────●────●────●────●────●    Dernier: 22:00 │
│  backup-1to    ●────●────●────●────●────●    Dernier: 22:00 │
│  gitlab-backup ●─────────●─────────●────    Dernier: 18:30 │
│                                                             │
│  ● Succès   ○ Échec   ◐ En cours                           │
│                                                             │
│  [Voir logs détaillés →]                                    │
└─────────────────────────────────────────────────────────────┘

Footer avec liens rapides

┌─────────────────────────────────────────────────────────────────────────┐
│  ACCÈS RAPIDES                                                          │
│                                                                         │
│  Proxmox: [PVE] [Proxmox1]    Docker: [Prod] [Dev]    Services: [...]   │
│                                                                         │
│  [GitLab] [Grafana] [Nextcloud] [Jellyfin] [Ollama] [Ntfy] [Supabase]  │
│                                                                         │
│  Docs: [Modèles IA] [Secrets] [Endpoints] [Montages] [Nginx]           │
│                                                                         │
│  33800 Stack • Dernière MAJ: [timestamp] • v2.0                         │
└─────────────────────────────────────────────────────────────────────────┘

Nouvelles pages

shortlinks.html - Page centrale avec tous les raccourcis

┌─────────────────────────────────────────────────────────────────────────┐
│  SHORTLINKS - Accès rapide à tous les services                         │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌─── INFRASTRUCTURE ────┐  ┌─── DOCKER PROD ────────┐                 │
│  │ [PVE]        :8006    │  │ [Portainer]    :9443   │                 │
│  │ [Proxmox1]   :8006    │  │ [Grafana]      :3000   │                 │
│  │ [Nginx]      direct   │  │ [Ntfy]         :8080   │                 │
│  └───────────────────────┘  │ [Supabase]     :8200   │                 │
│                             │ [Redis]        :6379   │                 │
│  ┌─── SERVICES ──────────┐  │ [Notif-Logger] :5300   │                 │
│  │ [GitLab]     :80      │  └────────────────────────┘                 │
│  │ [Jellyfin]   :8096    │                                             │
│  │ [Nextcloud]  :8060    │  ┌─── DOCKER DEV ─────────┐                 │
│  │ [Ollama]     :11434   │  │ [Portainer]    :9443   │                 │
│  │ [ComfyUI]    :8188    │  │ [Supabase]     :8100   │                 │
│  └───────────────────────┘  │ [Redis]        :6379   │                 │
│                             │ [Baserow]      :8050   │                 │
│  ┌─── DOCUMENTATION ─────┐  │ [Registry]     :5000   │                 │
│  │ [Dashboard]  index    │  └────────────────────────┘                 │
│  │ [Modèles IA] models   │                                             │
│  │ [Secrets]    secrets  │  ┌─── STOCKAGE ───────────┐                 │
│  │ [Endpoints]  endpoints│  │ [stock_8to]   /        │                 │
│  │ [Montages]   montages │  │ [stock_36to]  /data    │                 │
│  │ [Nginx]      nginx    │  │ [stock_1to]   Prox1    │                 │
│  │ [Crons]      crons    │  └────────────────────────┘                 │
│  └───────────────────────┘                                             │
│                                                                         │
│  [Copier tous les liens] [Exporter JSON] [Ouvrir tout]                 │
└─────────────────────────────────────────────────────────────────────────┘

Fonctionnalités shortlinks.html :

Grille de cards par catégorie
Indicateur status (vert/rouge) en temps réel
Copier URL au clic
Recherche rapide (filtre)
Favoris personnalisables (localStorage)
Export JSON des liens

crons.html - Historique détaillé des crons
- Timeline par cron
- Durée d'exécution
- Logs récents
- Alertes si échec
network.html - Schéma réseau interactif
- Vue principal (192.168.1.x)
- Vue stockage (10.10.10.x)
- Connexions NFS/SMB
storage.html - Détails stockage
- Pools ZFS avec disques
- Santé SMART
- Historique utilisation

Modifications collect.sh

Corrections

# IP prod-portainer
PROD_IP="192.168.1.12"  # était .11

# Chemins directs (plus de /mnt/)
STOCK_8TO="/stock_8to"
STOCK_36TO="/stock_36to"

# Collecte stock_1to (SSH vers Proxmox 1)
STOCK_1TO_DATA=$(ssh_cmd 192.168.1.155 'zpool list -H stock_1to')

Ajouts

# Collecte status crons
collect_cron_status() {
    # PVE crons
    CRON_MONITORING_LAST=$(stat -c %Y /stock_8to/33800-stack/monitoring/current.json)
    CRON_BACKUP8_LAST=$(grep "Fin sync" /var/log/rsync-stock8-backup.log | tail -1)

    # Proxmox 1 crons (via SSH)
    CRON_BACKUP1_LAST=$(ssh_cmd 192.168.1.155 'tail -1 /var/log/rsync-stock1to.log')

    # GitLab backup
    CRON_GITLAB_LAST=$(ssh_cmd 192.168.1.196 'ls -t /var/opt/gitlab/backups/*.tar | head -1')
}

# Collecte réseau stockage
collect_storage_network() {
    # Clients NFS sur réseau 10G
    NFS_CLIENTS_10G=$(showmount -a 2>/dev/null | grep "10.10.10" | wc -l)

    # Vitesse transfert récente (si dispo)
    # ...
}

Modifications generate.sh

Refactoring complet

Séparer en fonctions modulaires
- render_header()
- render_alerts()
- render_storage_cards()
- render_server_cards()
- render_crons_timeline()
- render_docker_tabs()
- render_nginx_table()
- render_network_diagram()
CSS externe
- Créer /stock_8to/33800-stack/monitoring/assets/style.css
- Variables CSS pour thème
- Classes réutilisables
JS minimal
- Auto-refresh
- Tabs
- Collapsibles
- Tri tableaux

Centralisation des logs (proposition bonus)

Option A : Loki + Grafana (recommandé)

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Promtail   │────▶│    Loki     │────▶│   Grafana   │
│  (agents)   │     │  (stockage) │     │  (visu)     │
└─────────────┘     └─────────────┘     └─────────────┘
      │
      ├── nginx access/error logs
      ├── cron logs
      ├── docker logs
      └── system logs

Avantages :

Query language puissant (LogQL)
Intégré à Grafana existant
Alertes sur patterns

Option B : Logs centralisés simples

# Sur chaque machine, rsyslog vers PVE
*.* @192.168.1.10:514

# Sur PVE, stockage dans /stock_8to/33800-stack/logs/
/stock_8to/33800-stack/logs/
├── nginx/
├── crons/
├── docker/
└── system/

Avantages :

Simple à mettre en place
Pas de nouveau service
Consultable via dashboard custom

Plan d'exécution

Phase 1 : Corrections urgentes

[ ] Corriger IPs dans collect.sh
[ ] Corriger chemins /stock_8to
[ ] Ajouter collecte stock_1to

Phase 2 : Refonte design

[ ] Créer CSS unifié
[ ] Refactorer generate.sh en fonctions
[ ] Implémenter nouveau layout

Phase 3 : Nouvelles fonctionnalités

[ ] Section crons avec timeline
[ ] Page network.html
[ ] Page storage.html
[ ] Page crons.html

Phase 4 : Logs (optionnel)

[ ] Décider Option A ou B
[ ] Implémenter centralisation
[ ] Intégrer au dashboard

Fichiers impactés

Fichier	Action
collect.sh	Modifier
generate.sh	Refonte complète
README.md	Mettre à jour
current.json	Structure étendue
assets/style.css	Créer
crons.html	Créer
network.html	Créer
storage.html	Créer

Validation requise

[ ] Approuver le nouveau design
[ ] Approuver les nouvelles sections (crons, network, storage)
[ ] Choisir option logs (A: Loki ou B: rsyslog simple)
[ ] Confirmer le plan d'exécution

Proposition créée le 06/01/2026 à 23:30