add go bench client
This commit is contained in:
Gilles Soulier
220
REFACTORING_PLAN.md
Normal file
220
REFACTORING_PLAN.md
Normal file
@@ -0,0 +1,220 @@
|
||||
# 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 :
|
||||
```javascript
|
||||
// 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
|
||||
|
||||
```javascript
|
||||
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 :
|
||||
|
||||
```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
|
||||
|
||||
```javascript
|
||||
// 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
|
||||
Reference in New Issue
Block a user