serv_benchmark/docs/05_webui_design.md

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