serv_benchmark/FRONTEND_UPDATES.md

Mises à jour Frontend - Linux BenchTools

Date: 2025-12-07

Vue d'ensemble

Le frontend a été mis à jour pour afficher les nouvelles données collectées par le script bench.sh v1.1.0, notamment :

• Statistiques RAM détaillées (utilisée, libre, partagée)
• Informations réseau complètes (Wake-on-LAN, vitesse)
• Résultats des tests iperf3 (upload, download, ping)

Fichiers modifiés

1. frontend/device_detail.html

Ajout d'une nouvelle section "Informations Réseau Détaillées" après la section "Dernier Benchmark" (lignes 67-75) :

<!-- Network Details -->
<div class="card">
  <div class="card-header">🌐 Informations Réseau Détaillées</div>
  <div class="card-body">
    <div id="networkDetails">
      <div class="loading">Chargement...</div>
    </div>
  </div>
</div>

2. frontend/js/device_detail.js

Modifications apportées :

a) Appel de la nouvelle fonction dans loadDeviceDetail() (ligne 39)

renderNetworkDetails();

b) Affichage RAM détaillé dans renderHardwareSummary() (lignes 89-105)

Ajout du calcul et de l'affichage des statistiques RAM :

• Pourcentage d'utilisation
• RAM utilisée en GB
• RAM libre en GB
• RAM partagée en GB (si disponible, ex: mémoire vidéo partagée)

// RAM usage info
const ramTotalGB = Math.round((snapshot.ram_total_mb || 0) / 1024);
const ramUsedMB = snapshot.ram_used_mb || 0;
const ramFreeMB = snapshot.ram_free_mb || 0;
const ramSharedMB = snapshot.ram_shared_mb || 0;

let ramValue = `${ramTotalGB} GB`;
if (ramUsedMB > 0 || ramFreeMB > 0) {
  const usagePercent = ramTotalGB > 0 ? Math.round((ramUsedMB / (snapshot.ram_total_mb || 1)) * 100) : 0;
  ramValue = `${ramTotalGB} GB (${usagePercent}% utilisé)<br><small>Utilisée: ${Math.round(ramUsedMB / 1024)}GB • Libre: ${Math.round(ramFreeMB / 1024)}GB`;
  if (ramSharedMB > 0) {
    ramValue += ` • Partagée: ${Math.round(ramSharedMB / 1024)}GB`;
  }
  ramValue += `<br>${snapshot.ram_slots_used || '?'} / ${snapshot.ram_slots_total || '?'} slots</small>`;
}

c) Nouvelle fonction renderNetworkDetails() (lignes 163-281)

Cette fonction affiche :

1. Interfaces réseau :

   • Type (ethernet/wifi) avec icône appropriée (🔌/📡)
   • Badge Wake-on-LAN (WoL ✓ ou WoL ✗)
   • Adresse IP
   • Adresse MAC
   • Vitesse en Mbps
   • Driver (si disponible)

2. Résultats benchmark réseau (iperf3) :

   • Upload en Mbps avec flèche ↑
   • Download en Mbps avec flèche ↓
   • Ping moyen en ms
   • Score réseau

// Render network details
function renderNetworkDetails() {
  const container = document.getElementById('networkDetails');
  const snapshot = currentDevice.last_hardware_snapshot;
  const bench = currentDevice.last_benchmark;

  // Parse network interfaces JSON
  const interfaces = JSON.parse(snapshot.network_interfaces_json);

  // Display each interface with WoL badge
  interfaces.forEach(iface => {
    const typeIcon = iface.type === 'ethernet' ? '🔌' : '📡';
    const wolBadge = iface.wake_on_lan === true
      ? '<span class="badge badge-success">WoL ✓</span>'
      : '<span class="badge badge-muted">WoL ✗</span>';
    // ... affichage des détails
  });

  // Display iperf3 results if available
  if (bench && bench.network_results_json) {
    const netResults = JSON.parse(bench.network_results_json);
    // Affichage upload_mbps, download_mbps, ping_ms, score
  }
}

Backend - Modifications associées

1. Modèle Benchmark (backend/app/models/benchmark.py)

Ajout du champ network_results_json (ligne 33) :

network_results_json = Column(Text, nullable=True)  # Network benchmark details (iperf3)

2. API Benchmark (backend/app/api/benchmark.py)

Ajout de l'extraction et de la sauvegarde des résultats réseau (lignes 134-142, 158) :

# Extract network results for easier frontend access
network_results = None
if results.network:
    network_results = {
        "upload_mbps": results.network.upload_mbps,
        "download_mbps": results.network.download_mbps,
        "ping_ms": results.network.ping_ms,
        "score": results.network.score
    }

benchmark = Benchmark(
    # ...
    network_results_json=json.dumps(network_results) if network_results else None
)

3. Migration SQL

Fichier : backend/migrations/002_add_network_results.sql

ALTER TABLE benchmarks ADD COLUMN network_results_json TEXT;

Script d'application : backend/apply_migration_002.py

Déploiement

Pour appliquer les mises à jour :

1. Appliquer la migration 002

cd backend
python3 apply_migration_002.py

2. Redémarrer le backend

docker compose restart backend

3. Frontend

Aucune action requise - les fichiers HTML/JS sont servis directement par nginx. Il suffit de rafraîchir la page dans le navigateur (F5 ou Ctrl+R).

Données affichées

Section "Résumé Hardware"

• RAM : Affiche maintenant le pourcentage d'utilisation et le détail utilisée/libre/partagée

Avant :

💾 RAM: 16 GB
    2 / 4 slots

Après :

💾 RAM: 16 GB (45% utilisé)
    Utilisée: 7GB • Libre: 9GB • Partagée: 0GB
    2 / 4 slots

Section "Informations Réseau Détaillées" (nouvelle)

Interfaces :

🔌 enp0s31f6 (ethernet)                    [WoL ✓]
    IP: 10.0.1.100
    MAC: a0:b1:c2:d3:e4:f5
    Vitesse: 1000 Mbps

Benchmark iperf3 :

📈 Résultats Benchmark Réseau (iperf3)

  ↑ 945.23           ↓ 938.17          52.3            47.2
  Upload Mbps       Download Mbps     Ping ms         Score

Compatibilité

• ✅ Compatible avec les anciens benchmarks (affichage gracieux si données manquantes)
• ✅ Gestion des cas où network_results_json est null
• ✅ Gestion des cas où ram_used_mb, ram_free_mb, ram_shared_mb sont null
• ✅ Affichage "N/A" ou messages appropriés si données non disponibles

Tests à effectuer

1. Nouveau benchmark :

   • Exécuter sudo bash scripts/bench.sh depuis un client
   • Vérifier l'affichage des nouvelles données sur la page device detail

2. Anciens benchmarks :

   • Vérifier que les devices avec anciens benchmarks s'affichent correctement
   • Vérifier l'absence d'erreurs JavaScript dans la console

3. Wake-on-LAN :

   • Vérifier le badge "WoL ✓" pour les interfaces ethernet supportant WoL
   • Vérifier le badge "WoL ✗" pour les interfaces ne supportant pas WoL

4. iperf3 :

   • Vérifier l'affichage des débits upload/download
   • Vérifier l'affichage du ping moyen
   • Vérifier le calcul du score réseau

Notes techniques

Parsing JSON

Le frontend parse plusieurs champs JSON :

• network_interfaces_json : Array des interfaces réseau
• network_results_json : Objet avec upload_mbps, download_mbps, ping_ms, score

Gestion des erreurs

Tous les parsings JSON sont dans des blocs try/catch pour éviter les crashes si le JSON est invalide.

Classes CSS utilisées

• .badge-success : Badge vert pour WoL activé
• .badge-muted : Badge gris pour WoL désactivé
• .hardware-item : Conteneur pour chaque interface réseau
• Couleurs CSS variables : --color-success, --color-info, --color-warning, --color-primary

Améliorations futures possibles

1. Graphiques : Ajouter des graphiques pour visualiser l'historique des performances réseau
2. SMART : Ajouter une section pour afficher les données SMART des disques (déjà collectées par le script)
3. Alertes : Notifier si Wake-on-LAN n'est pas activé sur les serveurs
4. Comparaison : Permettre de comparer les résultats iperf3 entre plusieurs benchmarks
5. Export : Permettre d'exporter les données réseau en CSV/JSON

Support

Pour toute question ou problème concernant ces mises à jour, vérifiez :

1. Les logs du backend : docker compose logs backend
2. La console JavaScript du navigateur (F12)
3. Les migrations ont été appliquées : python3 backend/apply_migration_002.py