serv_benchmark/docs/FRONTEND_RESTRUCTURE_2025-12-14.md

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)

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)

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

// 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

// 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

// 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 :

# 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

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

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

2. Vérifier l'affichage de :

• Carte mère (fabricant, modèle, BIOS)
• CPU (cores, threads, cache, flags)
• RAM (total, utilisé, layout des barrettes)
• Disques (liste détaillée par device)
• GPU (si présent)
• Réseau (interfaces séparées)
• OS (nom, version, kernel)
• 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é.

# 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
• 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