221 lines
7.4 KiB
Markdown
221 lines
7.4 KiB
Markdown
# 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
|