193 lines
4.6 KiB
Markdown
Executable File
193 lines
4.6 KiB
Markdown
Executable File
|
||
# 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
|