4.6 KiB
4.6 KiB
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
- Summary
- Benchmarks
- Tableau simple
- Évolution future en graphe
- Documents
- Upload PDF/images
- Liste des documents
- Boutons download/delete
- 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