serv_benchmark/REFACTORING_PLAN.md

Plan de Refactoring Frontend

✅ Action 3.1 - Extraction des fonctions communes (EN COURS)

Fichiers créés

• ✅ frontend/js/hardware-renderer.js - Module commun de rendu hardware
• ✅ Intégré dans devices.html et device_detail.html

Fonctions disponibles dans HardwareRenderer

Le module window.HardwareRenderer expose les fonctions suivantes :

• renderMotherboardDetails(snapshot) - Carte mère
• renderCPUDetails(snapshot) - Processeur (avec multi-CPU)
• renderMemoryDetails(snapshot, deviceData) - Mémoire (barres + slots)
• renderStorageDetails(snapshot) - Stockage
• renderGPUDetails(snapshot) - Carte graphique
• renderNetworkDetails(snapshot) - Réseau
• renderOSDetails(snapshot) - Système d'exploitation
• renderProxmoxDetails(snapshot) - Proxmox (nouveau)
• renderAudioDetails(snapshot) - Audio (nouveau)

Prochaines étapes

Option 1 : Refactorisation progressive (RECOMMANDÉ)

Étape 1 : Modifier device_detail.js pour utiliser HardwareRenderer

• Remplacer chaque renderXxxDetails() locale par un appel à HardwareRenderer.renderXxxDetails()
• Exemple :

  // AVANT
  function renderMotherboardDetails() {
    const snapshot = currentDevice.last_hardware_snapshot;
    const container = document.getElementById('motherboardDetails');
    // ... 25 lignes de code ...
    container.innerHTML = html;
  }
  
  // APRÈS
  function renderMotherboardDetails() {
    const snapshot = currentDevice.last_hardware_snapshot;
    const container = document.getElementById('motherboardDetails');
    container.innerHTML = HardwareRenderer.renderMotherboardDetails(snapshot);
  }
  

Étape 2 : Modifier devices.js pour utiliser HardwareRenderer

• Même principe : remplacer les fonctions locales par des appels au module
• Les fonctions renderXxxDetails() dans devices.js retournent déjà du HTML (pas de changement majeur)

Étape 3 : Supprimer les fonctions dupliquées

• Une fois les deux fichiers migrés, supprimer les anciennes implémentations

Option 2 : Migration immédiate (RISQUÉ)

Remplacer toutes les fonctions d'un coup dans les deux fichiers. Risque d'introduire des bugs.

---

Modifications à apporter dans device_detail.js

Fonctions à remplacer

Ligne	Fonction actuelle	Action
91	renderMotherboardDetails()	Appeler HardwareRenderer.renderMotherboardDetails(snapshot)
127	renderCPUDetails()	Appeler HardwareRenderer.renderCPUDetails(snapshot)
185	renderMemoryDetails()	Appeler HardwareRenderer.renderMemoryDetails(snapshot, currentDevice)
260	renderStorageDetails()	Appeler HardwareRenderer.renderStorageDetails(snapshot)
454	renderGPUDetails()	Appeler HardwareRenderer.renderGPUDetails(snapshot)
612	renderNetworkDetails()	Appeler HardwareRenderer.renderNetworkDetails(snapshot)
513	renderOSDetails()	Appeler HardwareRenderer.renderOSDetails(snapshot)

Nouvelles fonctions à ajouter

function renderProxmoxDetails() {
  const snapshot = currentDevice.last_hardware_snapshot;
  const container = document.getElementById('proxmoxDetails');
  if (!container) return;
  container.innerHTML = HardwareRenderer.renderProxmoxDetails(snapshot);
}

function renderAudioDetails() {
  const snapshot = currentDevice.last_hardware_snapshot;
  const container = document.getElementById('audioDetails');
  if (!container) return;
  container.innerHTML = HardwareRenderer.renderAudioDetails(snapshot);
}

Puis ajouter les sections dans le HTML :

<!-- Après la section Network -->
<div class="card" id="proxmoxSection" style="display: none;">
  <div class="card-header">🔧 Proxmox VE</div>
  <div class="card-body">
    <div id="proxmoxDetails">
      <div class="loading">Chargement...</div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">🔊 Audio</div>
  <div class="card-body">
    <div id="audioDetails">
      <div class="loading">Chargement...</div>
    </div>
  </div>
</div>

---

Modifications à apporter dans devices.js

Fonctions à remplacer

Ligne	Fonction actuelle	Action
649	renderMotherboardDetails(snapshot)	Appeler HardwareRenderer.renderMotherboardDetails(snapshot)
681	renderCPUDetails(snapshot)	Appeler HardwareRenderer.renderCPUDetails(snapshot)
735	renderMemoryDetails(snapshot)	Adapter appel HardwareRenderer.renderMemoryDetails(snapshot, currentDevice)
791	renderStorageDetails(snapshot)	Appeler HardwareRenderer.renderStorageDetails(snapshot)
915	renderGPUDetails(snapshot)	Appeler HardwareRenderer.renderGPUDetails(snapshot)
942	renderOSDetails(snapshot)	Appeler HardwareRenderer.renderOSDetails(snapshot)
1525	renderNetworkBlock(snapshot, bench)	Adapter pour utiliser HardwareRenderer.renderNetworkDetails(snapshot)

Exemple de remplacement

// AVANT (ligne 649)
function renderMotherboardDetails(snapshot) {
  if (!snapshot) {
    return '<p style="color: var(--text-muted); text-align: center; padding: 2rem;">Aucune information disponible</p>';
  }
  const cleanValue = (val) => {
    if (!val || (typeof val === 'string' && val.trim() === '')) return 'N/A';
    return val;
  };
  const items = [
    { label: 'Fabricant', value: cleanValue(snapshot.motherboard_vendor) },
    // ... 20 lignes ...
  ];
  return `<div style="display: grid; ...">...</div>`;
}

// APRÈS
function renderMotherboardDetails(snapshot) {
  return HardwareRenderer.renderMotherboardDetails(snapshot);
}

Gain : 649 → 681 (32 lignes) deviennent 3 lignes

---

Estimation du gain de lignes

Fichier	Lignes actuelles	Lignes après refacto	Gain
devices.js	1953	~1600	-353
device_detail.js	1003	~700	-303
TOTAL	2956	2300	-656 lignes

---

Tests à effectuer après refactoring

Tests visuels (devices.html)

1. Ouvrir devices.html
2. Sélectionner un device
3. Vérifier chaque section :
   • ✅ Motherboard : affiche bien fabricant, modèle, BIOS, etc.
   • ✅ CPU : affiche modèle, cores, threads, caches, flags
   • ✅ Mémoire : barres RAM/SWAP + slots avec détails
   • ✅ Stockage : liste des disques avec SMART
   • ✅ GPU : fabricant, modèle, VRAM
   • ✅ Réseau : liste des interfaces
   • ✅ OS : nom, version, kernel, uptime
   • ✅ Proxmox : affiche si détecté (host/guest)
   • ✅ Audio : matériel + logiciels

Tests visuels (device_detail.html)

1. Ouvrir device_detail.html?id=X
2. Vérifier les mêmes sections
3. Vérifier que les popups/tooltips fonctionnent

Tests fonctionnels

1. Édition des champs (hostname, description, etc.)
2. Upload d'images/PDFs
3. Ajout/suppression de tags
4. Ajout/suppression de liens
5. Suppression de device

Tests de régression

1. Vérifier que le score global s'affiche (étoiles)
2. Vérifier que les images s'affichent en grid
3. Vérifier que les barres mémoire ont les bons %
4. Vérifier le multi-CPU (si disponible)

---

🎯 Recommandation

Je recommande de faire la migration progressive (Option 1) :

1. ✅ Créer hardware-renderer.js (FAIT)
2. ✅ Intégrer dans les HTML (FAIT)
3. SUIVANT : Migrer device_detail.js (plus simple, fichier plus petit)
4. APRÈS : Migrer devices.js
5. TESTER chaque étape

Cette approche réduit les risques et permet de valider chaque changement avant de passer au suivant.

---

Dernière mise à jour : 2026-01-11