# Restructuration Frontend - Séparation des Caractéristiques Hardware

Date : 14 décembre 2025
Version : Frontend 2.0.0

## 🎯 Objectif

Réorganiser la page de détail des devices pour séparer clairement les caractéristiques matérielles par composant et distinguer les informations hardware des résultats de benchmarks.

## 📋 Modifications Apportées

### 1. Restructuration HTML ([device_detail.html](frontend/device_detail.html:47-119))

**Avant** : Sections génériques
- Résumé Hardware (tout mélangé)
- Dernier Benchmark
- Informations Réseau Détaillées

**Après** : Sections séparées par composant
1. ⚡ **Carte Mère (Motherboard)**
   - Fabricant, Modèle
   - BIOS (version, date)
   - Slots RAM disponibles

2. 🔲 **Processeur (CPU)**
   - Fabricant, Modèle, Microarchitecture
   - Cores, Threads
   - Fréquences (base, max), TDP
   - Cache (L1, L2, L3)
   - Instructions supportées (flags)

3. 💾 **Mémoire (RAM)**
   - Capacité totale, utilisée, libre, partagée
   - Nombre de slots utilisés/disponibles
   - Support ECC
   - **Configuration détaillée par barrette** :
     - Slot, capacité, type (DDR3/DDR4/etc.)
     - Vitesse (MHz)
     - Fabricant, Part Number

4. 💿 **Stockage (Disques)**
   - **Vue par disque (sda, sdb, nvme0n1, etc.)** :
     - Nom du périphérique
     - Modèle, capacité
     - Type (SSD/HDD), interface (SATA/NVMe/USB)
     - Statut SMART
     - Température

5. 🎮 **Carte Graphique (GPU)**
   - Fabricant, Modèle
   - Driver version
   - Mémoire dédiée/partagée
   - APIs supportées (OpenGL, Vulkan, etc.)

6. 🌐 **Réseau (Network)**
   - **Vue par interface** :
     - Nom (eth0, enp0s3, wlan0, etc.)
     - Type (ethernet/wifi)
     - Adresse IP, MAC
     - Vitesse de liaison (Mbps)
     - Driver
     - Wake-on-LAN support

7. 🐧 **Système d'exploitation**
   - Nom, version
   - Kernel version
   - Architecture
   - Type de virtualisation

8. 📊 **Résultats Benchmarks**
   - Score global
   - Scores individuels (CPU, RAM, Disque, Réseau, GPU)
   - Date du dernier benchmark
   - Version du script

### 2. Nouvelles Fonctions JavaScript ([device_detail.js](frontend/js/device_detail.js:85-457))

#### Fonctions créées :

1. **`renderMotherboardDetails()`** (ligne 85)
   - Affiche les informations de la carte mère
   - BIOS version et date
   - Slots RAM

2. **`renderCPUDetails()`** (ligne 115)
   - Informations complètes du processeur
   - Cache L1/L2/L3
   - Instructions CPU (flags) avec affichage limité à 50
   - Affichage responsive en grille

3. **`renderMemoryDetails()`** (ligne 173)
   - Statistiques RAM (total, utilisé, libre, partagé)
   - Pourcentage d'utilisation
   - **Layout détaillé des barrettes RAM** :
     - Parse `ram_layout_json`
     - Affiche chaque DIMM avec ses caractéristiques
     - Slot, taille, type, vitesse, fabricant

4. **`renderStorageDetails()`** (ligne 248)
   - **Vue détaillée par disque**
   - Parse `storage_devices_json`
   - Affichage avec icônes différentes (SSD 💾 / HDD 💿)
   - Badge de santé SMART (vert/rouge)
   - Température si disponible

5. **`renderGPUDetails()`** (ligne 335)
   - Informations GPU complètes
   - Mémoire VRAM
   - APIs supportées (badges)

6. **`renderNetworkDetails()`** (ligne 459)
   - **Séparation des benchmarks réseau**
   - Affichage par interface réseau
   - Wake-on-LAN badge
   - Layout responsive

7. **`renderOSDetails()`** (ligne 394)
   - Informations système
   - Architecture, virtualisation

8. **`renderBenchmarkResults()`** (ligne 424)
   - Scores de benchmarks uniquement
   - Séparé des caractéristiques hardware
   - Grille de scores avec badges colorés

### 3. Améliorations d'Affichage

#### Stockage
```javascript
// Icônes dynamiques selon le type
const typeIcon = disk.type === 'SSD' ? '💾' : '💿';

// Badge de santé coloré
const healthColor = disk.smart_health === 'PASSED' ? 'var(--color-success)' :
                  disk.smart_health === 'FAILED' ? 'var(--color-danger)' :
                  'var(--text-secondary)';
```

#### Mémoire RAM
```javascript
// Layout détaillé des barrettes
${layout.map(dimm => `
  <div style="border: 1px solid var(--border-color); ...">
    <strong>Slot ${escapeHtml(dimm.slot)}</strong>
    <div>
      ${dimm.size_mb ? `${Math.round(dimm.size_mb / 1024)} GB` : 'N/A'}
      ${dimm.type ? `• ${escapeHtml(dimm.type)}` : ''}
      ${dimm.speed_mhz ? `• ${dimm.speed_mhz} MHz` : ''}
    </div>
  </div>
`).join('')}
```

#### CPU Flags
```javascript
// Limite à 50 flags pour éviter la surcharge visuelle
${flags.slice(0, 50).map(flag =>
  `<span class="badge badge-muted">${escapeHtml(flag)}</span>`
).join('')}
${flags.length > 50 ? `<span class="badge">+${flags.length - 50} autres...</span>` : ''}
```

## 📊 Structure des Données Utilisées

### Backend Models
Les données proviennent du modèle `HardwareSnapshot` :

```python
# CPU
cpu_vendor, cpu_model, cpu_microarchitecture
cpu_cores, cpu_threads
cpu_base_freq_ghz, cpu_max_freq_ghz
cpu_cache_l1_kb, cpu_cache_l2_kb, cpu_cache_l3_kb
cpu_flags (JSON array)
cpu_tdp_w

# RAM
ram_total_mb, ram_used_mb, ram_free_mb, ram_shared_mb
ram_slots_total, ram_slots_used
ram_ecc (boolean)
ram_layout_json (JSON array) - NOUVEAU format détaillé

# Storage
storage_devices_json (JSON array)
# Format: [{name, model, capacity_gb, type, interface, smart_health, temperature_c}]

# GPU
gpu_vendor, gpu_model, gpu_driver_version
gpu_memory_dedicated_mb, gpu_memory_shared_mb
gpu_api_support (JSON array)

# Network
network_interfaces_json (JSON array)
# Format: [{name, type, mac, ip, speed_mbps, driver, wake_on_lan}]

# Motherboard
motherboard_vendor, motherboard_model
bios_version, bios_date

# OS
os_name, os_version, kernel_version
architecture, virtualization_type
```

## 🎨 Styles CSS Utilisés

Les styles existants dans `components.css` sont réutilisés :
- `.hardware-item` : Conteneur pour chaque information
- `.hardware-item-label` : Label du champ
- `.hardware-item-value` : Valeur du champ
- `.badge`, `.badge-success`, `.badge-muted` : Badges colorés
- Grilles responsive avec `grid-template-columns: repeat(auto-fit, minmax(...))`

## 🔄 Workflow d'Affichage

```javascript
loadDeviceDetail()
  ├─ renderDeviceHeader()          // Nom, score global, tags
  ├─ renderMotherboardDetails()    // ⚡ Carte mère
  ├─ renderCPUDetails()            // 🔲 CPU
  ├─ renderMemoryDetails()         // 💾 RAM
  ├─ renderStorageDetails()        // 💿 Disques
  ├─ renderGPUDetails()            // 🎮 GPU
  ├─ renderNetworkDetails()        // 🌐 Réseau
  ├─ renderOSDetails()             // 🐧 OS
  ├─ renderBenchmarkResults()      // 📊 Benchmarks
  ├─ loadBenchmarkHistory()        // Historique
  ├─ loadDocuments()               // Documents
  └─ loadLinks()                   // Liens
```

## ✅ Avantages de cette Restructuration

### 1. **Clarté**
- Chaque composant hardware a sa propre section
- Facile de trouver une information spécifique

### 2. **Détails**
- Vue détaillée par disque (sda, sdb, nvme0n1)
- Configuration RAM barrette par barrette
- Instructions CPU complètes
- Interfaces réseau séparées

### 3. **Séparation Hardware / Benchmarks**
- Les caractéristiques matérielles sont séparées des performances
- Plus logique pour l'utilisateur

### 4. **Extensibilité**
- Facile d'ajouter de nouveaux champs
- Structure modulaire

### 5. **Responsive**
- Grilles adaptatives (auto-fit, minmax)
- Fonctionne sur mobile et desktop

## 🧪 Tests Recommandés

### 1. Test visuel
```bash
# Ouvrir dans le navigateur
http://localhost:8087/device_detail.html?id=1
```

### 2. Vérifier l'affichage de :
- [x] Carte mère (fabricant, modèle, BIOS)
- [x] CPU (cores, threads, cache, flags)
- [x] RAM (total, utilisé, layout des barrettes)
- [x] Disques (liste détaillée par device)
- [x] GPU (si présent)
- [x] Réseau (interfaces séparées)
- [x] OS (nom, version, kernel)
- [x] Benchmarks (scores séparés)

### 3. Tests de robustesse
- Device sans GPU → doit afficher "Aucun GPU détecté"
- Device sans données SMART → doit gérer gracefully
- Layout RAM vide → doit ne pas afficher la section
- Flags CPU très nombreux → limité à 50 + compteur

## 📁 Fichiers Modifiés

| Fichier | Lignes modifiées | Description |
|---------|------------------|-------------|
| `frontend/device_detail.html` | 47-119 | Nouvelles sections HTML par composant |
| `frontend/js/device_detail.js` | 36-457 | 8 nouvelles fonctions de rendu |

## 🚀 Déploiement

Les modifications sont **immédiatement actives** car le frontend est servi par Nginx en mode volume monté.

```bash
# Vérifier que le frontend est à jour
docker compose restart frontend

# Vider le cache navigateur
Ctrl+Shift+R (ou Cmd+Shift+R sur Mac)
```

## 🔗 Références

- Modèle backend : [hardware_snapshot.py](backend/app/models/hardware_snapshot.py:11-84)
- Ancien affichage : Fonction `renderHardwareSummary()` (supprimée)
- Nouveau affichage : 8 fonctions séparées par composant

## 📝 TODO Future

- [ ] Ajouter graphiques pour l'historique RAM (usage dans le temps)
- [ ] Timeline des températures disques
- [ ] Détection automatique des ports USB/PCI/NVMe/SATA (via script bash)
- [ ] Affichage des partitions disques
- [ ] Comparaison de benchmarks entre devices
- [ ] Export des données hardware en PDF

---

**Status** : ✅ Restructuration complète terminée
**Prochaine action** : Tester l'interface dans le navigateur