gilles/serv_benchmark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
serv_benchmark/RESUME_SESSION_2026-01-11.md
Gilles Soulier 6abc70cdfe add go bench client
2026-01-11 23:41:30 +01:00

12 KiB
Raw Permalink Blame History

Résumé Session - 11 janvier 2026

🎯 Objectif

Améliorer le frontend de l'application serv_benchmark sans toucher au backend ni aux scripts.

✅ Actions Complétées

1. Extraction module HardwareRenderer (Action 3.1)

Fichier créé : frontend/js/hardware-renderer.js (700+ lignes)

Module centralisé exposant 9 fonctions de rendu hardware :

Fonction Description
renderMotherboardDetails() 16 champs carte mère (fabricant, BIOS, châssis, etc.)
renderCPUDetails() CPU + multi-socket + signature + flags
renderMemoryDetails() RAM/SWAP bars + slots DIMM détaillés
renderStorageDetails() Disques avec SMART status
renderGPUDetails() Carte graphique
renderNetworkDetails() Interfaces réseau
renderOSDetails() Système d'exploitation
renderProxmoxDetails() Proxmox VE (host/guest) ✨ NOUVEAU
renderAudioDetails() Audio hardware + software ✨ NOUVEAU

Intégration :

Note : Migration partielle effectuée (1 fonction dans device_detail.js). Plan complet dans REFACTORING_PLAN.md.

2. Migration icônes vers IconManager (Action 3.3)

Fichier modifié : frontend/js/devices.js

Avant :

const SECTION_ICON_PATHS = {
  motherboard: 'icons/icons8-motherboard-94.png',
  // ... 18 chemins PNG hardcodés
};
function getSectionIcon(key, altText) {
  return `<img src="${src}" ...>`;
}

Après :

const SECTION_ICON_NAMES = {
  motherboard: 'motherboard',
  cpu: 'cpu',
  // ... 18 noms FontAwesome
};
function getSectionIcon(key, altText) {
  return `<span data-icon="${iconName}" ...></span>`;
}

Résultat :

  • ✅ 18 icônes migrées vers data-icon
  • ✅ Compatible avec packs d'icônes (FontAwesome, Icons8, emoji)
  • ✅ Coloration automatique selon thème (SVG inline)
  • ✅ Initialisation via IconManager.initializeIcons() après rendu

3. UI IP URL avec édition (Action 1.1)

Fichier modifié : frontend/js/devices.js (+80 lignes)

Fonctionnalités :

  • ✅ Affichage IP(s) non-loopback (extrait de network_interfaces_json)
  • ✅ Lien cliquable si URL définie (ouvre nouvel onglet)
  • ✅ Bouton "Éditer lien" avec input inline
  • ✅ Auto-préfixe http:// si manquant
  • ✅ Sauvegarde via PUT /api/devices/{id} avec { ip_url: "..." }

Code ajouté :

  • renderIPDisplay(snapshot, device) - Affichage + bouton éditer
  • editIPUrl() - Ouvre l'éditeur
  • saveIPUrl() - Sauvegarde (appelle API)
  • cancelIPUrlEdit() - Annule l'édition

Affichage : Section "Adresse IP" dans l'en-tête du panneau détail

⚠️ Nécessite backend : Le champ device.ip_url doit être retourné par l'API → Voir TODO_BACKEND.md §1 pour la mise à jour des schémas Pydantic

4. Bouton Recherche Web du modèle (Action 2.1)

Fichiers modifiés :

Fonctionnalités :

  • ✅ Bouton globe (🌐) à côté du champ "Modèle"
  • ✅ Tooltip "Recherche sur le Web"
  • ✅ Moteur paramétrable : Google (défaut), DuckDuckGo, Bing
  • ✅ Sauvegarde préférence dans localStorage.searchEngine
  • ✅ Ouvre recherche dans nouvel onglet

Mapping moteurs :

const searchUrls = {
  google: `https://www.google.com/search?q=...`,
  duckduckgo: `https://duckduckgo.com/?q=...`,
  bing: `https://www.bing.com/search?q=...`
};

5. Multi-CPU + Proxmox + Audio (Actions 2.2, 1.3)

✅ Déjà implémenté dans HardwareRenderer :

Multi-CPU (renderCPUDetails) :

  • Parsing dmidecode type 4 (Proc 1, Proc 2, etc.)
  • Grille tableau avec : Socket, Modèle, Cores/Threads, Fréquences, Tension
  • Signature CPU (Family/Model/Stepping)
  • Socket, Voltage, Fréquence actuelle

Proxmox (renderProxmoxDetails) :

  • Détecte is_proxmox_host / is_proxmox_guest
  • Affiche version Proxmox VE
  • Badge coloré si détecté

Audio (renderAudioDetails) :

  • Section Hardware audio (périphériques)
  • Section Software audio (configs)
  • Parse audio_hardware_json et audio_software_json

⚠️ Note : Ces sections sont prêtes côté renderer mais pas encore affichées dans les pages HTML. Pour activer :

  1. Ajouter <div id="proxmoxDetails"> et <div id="audioDetails"> dans device_detail.html
  2. Appeler HardwareRenderer.renderProxmoxDetails(snapshot) et renderAudioDetails(snapshot)

📁 Fichiers de Documentation Créés

Fichier Contenu
TODO_BACKEND.md Actions backend requises (schémas Pydantic, champs manquants)
REFACTORING_PLAN.md Plan détaillé migration vers HardwareRenderer (gain -656 lignes)
FRONTEND_CHANGES.md Synthèse modifications frontend
RESUME_SESSION_2026-01-11.md Ce fichier

📊 Statistiques

Métrique Valeur
Fichiers créés 5 (1 JS + 4 MD)
Fichiers modifiés 6
Lignes ajoutées ~880
Fonctions créées 15
Icônes migrées 18/18
Fonctionnalités ajoutées 5

🧪 Tests Recommandés

Test 1 : IconManager

  1. Ouvrir devices.html
  2. Sélectionner un device
  3. Vérifier icônes de sections (pas de <img> cassées)
  4. Settings → changer pack d'icônes
  5. Revenir → vérifier changement icônes

Résultat attendu : Icônes changent selon le pack sélectionné (emoji, FontAwesome, Icons8)

Test 2 : IP URL ⚠️ (nécessite backend à jour)

  1. Ouvrir devices.html
  2. Sélectionner un device
  3. Vérifier affichage IP (non-127.0.0.1)
  4. Cliquer "Éditer lien IP"
  5. Saisir http://10.0.0.50:8080
  6. Cliquer "Sauvegarder"
  7. Vérifier IP devenue cliquable
  8. Cliquer → vérifier ouverture nouvel onglet

Résultat attendu : IP cliquable ouvre l'URL définie

⚠️ Prérequis : Backend doit retourner device.ip_url (voir TODO_BACKEND.md)

Test 3 : Recherche Web

  1. Ouvrir devices.html
  2. Sélectionner un device
  3. Repérer bouton 🌐 à côté du modèle
  4. Cliquer → vérifier ouverture Google avec recherche du modèle
  5. Aller dans settings.html
  6. Changer moteur → DuckDuckGo
  7. Sauvegarder
  8. Retour devices → cliquer 🌐
  9. Vérifier ouverture DuckDuckGo

Résultat attendu : Recherche s'ouvre sur le moteur sélectionné

Test 4 : HardwareRenderer

  1. Ouvrir console navigateur (F12)
  2. Taper : HardwareRenderer
  3. Vérifier objet avec 9 méthodes
  4. Tester : HardwareRenderer.renderCPUDetails(null)
  5. Résultat : HTML "Aucune information disponible"

Résultat attendu : Module accessible globalement

⚠️ Limitations Actuelles

Backend pas à jour

  • device.ip_url non retourné → bouton IP URL ne sauvegarde pas réellement
  • Champs Proxmox (is_proxmox_host, is_proxmox_guest, proxmox_version) non exposés
  • Champs Audio (audio_hardware_json, audio_software_json) non exposés

Solution : Appliquer les modifications dans TODO_BACKEND.md

Migration HardwareRenderer partielle

  • device_detail.js : 1 fonction migrée / 7
  • devices.js : 0 fonction migrée / 7

Gain potentiel : -656 lignes (non réalisé)

Solution : Suivre REFACTORING_PLAN.md Option 1 (migration progressive)

Sections Proxmox/Audio non affichées

Fonctions prêtes mais pas appelées dans les pages HTML.

Solution rapide :

<!-- Dans device_detail.html, après 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>
  </div>
</div>

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

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

  // Show section only if Proxmox detected
  const section = document.getElementById('proxmoxSection');
  if (section && (snapshot.is_proxmox_host || snapshot.is_proxmox_guest)) {
    section.style.display = 'block';
  }
}

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

🎯 Prochaines Étapes Recommandées

Priorité 1 : Backend

  1. Appliquer modifications TODO_BACKEND.md
    • Ajouter ip_url aux schémas Pydantic
    • Exposer champs Proxmox/Audio dans API
  2. Redémarrer backend
  3. Tester endpoints : 
    curl http://localhost:8007/api/devices/1 | jq '.ip_url'
curl http://localhost:8007/api/devices/1 | jq '.last_hardware_snapshot.is_proxmox_host'

Priorité 2 : Afficher Proxmox/Audio

  1. Ajouter <div> dans device_detail.html
  2. Appeler fonctions HardwareRenderer
  3. Tester visuellement

Priorité 3 : Migration complète HardwareRenderer

  1. Suivre REFACTORING_PLAN.md
  2. Migrer device_detail.js (6 fonctions restantes)
  3. Migrer devices.js (7 fonctions)
  4. Gain estimé : -656 lignes

Priorité 4 : Uniformiser gestion erreurs

  1. Remplacer alert() par utils.showToast()
  2. Standardiser try-catch
  3. Ajouter validation input

🔧 Commandes Utiles

Lancer le frontend

cd /home/gilles/projects/serv_benchmark/frontend
python3 -m http.server 8087

→ Ouvrir http://localhost:8087/devices.html

Lancer le backend

cd /home/gilles/projects/serv_benchmark/backend
uvicorn app.main:app --host 0.0.0.0 --port 8007 --reload

→ API sur http://localhost:8007

Appliquer migration backend

cd /home/gilles/projects/serv_benchmark
sqlite3 backend/data/data.db < backend/migrations/018_add_device_ip_url.sql

Vérifier données

sqlite3 backend/data/data.db "SELECT ip_url FROM devices LIMIT 5;"
sqlite3 backend/data/data.db "SELECT is_proxmox_host, proxmox_version FROM hardware_snapshots WHERE is_proxmox_host = 1 LIMIT 5;"

📝 Notes Importantes

  1. Pas de modification backend/scripts : Tous les changements sont côté frontend uniquement, comme demandé.

  2. Compatibilité descendante : Les modifications n'empêchent pas l'app de fonctionner si le backend n'est pas à jour (affichage "N/A" par défaut).

  3. IconManager : Le système d'icônes personnalisables fonctionne dès maintenant pour toutes les icônes de sections dans devices.js.

  4. HardwareRenderer : Module prêt et utilisable, mais nécessite migration manuelle des fichiers JS pour exploiter pleinement son potentiel.

  5. Documentation complète : Tous les choix techniques et plans futurs sont documentés dans les 4 fichiers .md créés.

🎉 Résultat Final

L'application dispose maintenant de :

  • ✅ Un système d'icônes moderne et personnalisable
  • ✅ Une UI pour gérer les URL IP des devices
  • ✅ Un bouton de recherche Web du modèle (moteur paramétrable)
  • ✅ Un module centralisé pour le rendu hardware (réutilisable)
  • ✅ Support prêt pour Proxmox et Audio (backend requis)
  • ✅ Documentation exhaustive pour la suite

Gain de maintenabilité : Code plus modulaire et réutilisable Gain UX : Nouvelles fonctionnalités pratiques pour l'utilisateur Gain futur : Base solide pour évolutions (multi-CPU, Proxmox, etc.)

Session terminée : 2026-01-11 Temps estimé : ~2h de travail Lignes modifiées/créées : ~880 lignes Fichiers impactés : 11 fichiers (6 modifiés + 5 créés)

Reference in New Issue View Git Blame Copy Permalink