maj

2025-12-14 10:40:54 +01:00
parent 5d483b0df5
commit 8428bf9c82
55 changed files with 9763 additions and 391 deletions
--- a/docs/05_webui_design.md
+++ b/docs/05_webui_design.md
@@ -0,0 +1,192 @@
+
+# 05 – Design WebUI (structure, pages, composants)
+
+Objectif : définir l’interface utilisateur de Linux BenchTools, les pages, les composants, l’organisation visuelle et les interactions nécessaires.
+
+---
+
+# 1. Principes généraux
+
+- Interface orientée **observabilité** des performances machines.
+- Style sombre **Monokai-like**.
+- Pages structurées en **cartes** et **tableaux lisibles**.
+- Navigation : **Dashboard**, **Devices**, **Settings**.
+- Composants réutilisables : badges score, cartes hardware, tableaux benchmark.
+
+---
+
+# 2. Pages de la WebUI
+
+## 2.1. Dashboard (`/`)
+Présente un aperçu du parc machines et un classement global.
+
+### Contenu :
+- **Stats globales**
+  - Nombre de devices
+  - Nombre total de benchmarks
+  - Score global moyen
+  - Dernier bench reçu
+- **Tableau Top Devices**
+  - Rang
+  - Hostname
+  - Description
+  - Score global
+  - Scores CPU/MEM/DISK/NET/GPU
+  - Dernier run
+- **Bloc “Quick Bench Script”**
+  - Commande à copier pour exécuter un bench sur une nouvelle machine.
+
+---
+
+## 2.2. Liste Devices (`/devices`)
+
+- Tableau paginé et filtrable
+- Colonnes :
+  - Hostname
+  - Description
+  - Location
+  - Tags
+  - Dernier Score
+  - Dernier Bench
+  - Bouton “Voir”
+
+Barre de recherche : filtre hostname / tags / description.
+
+---
+
+## 2.3. Page Device Détail (`/devices/{id}`)
+
+### Sections :
+
+#### A. Bandeau principal
+- Hostname
+- Description
+- Tags
+- Localisation / Owner
+
+#### B. Résumé Hardware
+- CPU : modèle, cores, threads, fréquences
+- RAM : total, slots utilisés, détail
+- GPU
+- Stockage (NVMe/SSD/HDD)
+- Réseau
+- Carte mère / BIOS
+- OS / kernel
+
+#### C. Dernier Benchmark
+- Score global + badge couleur
+- Scores CPU / MEM / DISK / NET / GPU
+- Timestamp
+- Bouton “Voir JSON complet”
+
+#### D. Onglets
+
+1. **Summary**
+2. **Benchmarks**
+   - Tableau simple
+   - Évolution future en graphe
+3. **Documents**
+   - Upload PDF/images
+   - Liste des documents
+   - Boutons download/delete
+4. **Links**
+   - Liste des liens constructeurs
+   - Form ajout
+   - Edit / Delete
+
+---
+
+## 2.4. Settings (`/settings`)
+
+Champs configurables :
+- Bench server URL
+- Default iperf-server
+- Token API (lecture seule)
+- Commande bench générée automatiquement
+
+---
+
+# 3. Style visuel (Monokai Dark)
+
+### Couleurs
+- Fond général : `#1e1e1e`
+- Cartes : `#2d2d2d`
+- Texte principal : `#f8f8f2`
+- Texte secondaire : `#cccccc`
+- Success : `#a6e22e`
+- Warning : `#fd971f`
+- Danger : `#f92672`
+
+### Composants
+- **Badge Score**
+  - 0–50 : rouge
+  - 51–75 : orange
+  - 76–100 : vert
+- **Cartes Hardware**
+  - Layout en 2 ou 3 colonnes
+- **Tableaux**
+  - Style striped + hover highlight
+
+---
+
+# 4. Mockups ASCII
+
+## Dashboard
+```
+---------------------------------------------------------------------------+
+| Linux BenchTools – Dashboard                                              |
+---------------------------------------------------------------------------+
+| Stats                                                                     |
+|   Devices: 12   Benchmarks: 47   Avg Score: 78.4   Last: 2025‑12‑07       |
+---------------------------------------------------------------------------+
+| Top Devices                                                               |
+---------------------------------------------------------------------------+
+| # | Hostname          | Score | CPU | MEM | DISK | NET | GPU | Last Run  |
+|---------------------------------------------------------------------------|
+| 1 | elitedesk-800g3   |  92   | 90  | 95  | 94   | 88  | --  | 10:32      |
+---------------------------------------------------------------------------+
+| Quick Bench Script                                                        |
+|   curl -s https://.../bench.sh | bash -s -- --server ... --token XXXX    |
+---------------------------------------------------------------------------+
+```
+
+## Page Device
+```
+Device: elitedesk-800g3
+Location: Bureau   Tags: lab, dev
+
+Hardware Summary:
+  CPU: Intel i7‑6700 (4C/8T, 3.4 → 4.0 GHz)
+  RAM: 64GB (4×16GB)
+  GPU: Intel HD 530
+  Storage: NVMe 1TB + HDD 2TB
+  Network: eth0 1Gbps
+  OS: Debian 12 / Kernel 6.1
+
+Last Benchmark:
+  Global Score: 92 [GREEN]
+  CPU 90 | MEM 95 | DISK 94 | NET 88 | GPU --
+  Run: 2025‑12‑07 10:32
+
+Tabs: [Summary] [Benchmarks] [Documents] [Links]
+```
+
+---
+
+# 5. API utilisée par le frontend
+
+- `/api/devices`
+- `/api/devices/{id}`
+- `/api/devices/{id}/benchmarks`
+- `/api/devices/{id}/docs`
+- `/api/docs/{id}/download`
+- `/api/devices/{id}/links`
+
+---
+
+# 6. Améliorations futures
+
+- Graphiques d’évolution des scores (Chart.js)
+- Mode mobile
+- Compare devices
+- Notifications en cas de baisse anormale de performance