gilles/serv_benchmark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8428bf9c82af5ca8fd33eb45ff95c12d1be10a0d
serv_benchmark/FRONTEND_RESTRUCTURE_2025-12-14.md
gilles soulier 8428bf9c82 maj
2025-12-14 10:40:54 +01:00

9.4 KiB
Raw Blame History

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

Reference in New Issue View Git Blame Copy Permalink