# 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