addon

2026-01-05 16:08:01 +01:00
parent dcba044cd6
commit c67befc549
2215 changed files with 26743 additions and 329 deletions
--- a/docs/FRONTEND_UPDATES.md
+++ b/docs/FRONTEND_UPDATES.md
@@ -0,0 +1,298 @@
+# 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) :
+
+```html
+<!-- 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)**
+```javascript
+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)
+
+```javascript
+// 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
+
+```javascript
+// 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) :
+```python
+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) :
+```python
+# 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`
+```sql
+ALTER TABLE benchmarks ADD COLUMN network_results_json TEXT;
+```
+
+**Script d'application** : `backend/apply_migration_002.py`
+
+### 4. Migration SQL (nouveau score CPU)
+
+**Fichier** : `backend/migrations/003_add_cpu_scores.sql`
+```sql
+ALTER TABLE benchmarks ADD COLUMN cpu_score_single FLOAT;
+ALTER TABLE benchmarks ADD COLUMN cpu_score_multi FLOAT;
+```
+
+**Script d'application** : `backend/apply_migration_003.py`
+
+### 5. Migration SQL (métadonnées hardware supplémentaires)
+
+**Fichier** : `backend/migrations/004_add_snapshot_details.sql`
+```sql
+ALTER TABLE hardware_snapshots ADD COLUMN hostname VARCHAR(255);
+ALTER TABLE hardware_snapshots ADD COLUMN desktop_environment VARCHAR(100);
+ALTER TABLE hardware_snapshots ADD COLUMN pci_devices_json TEXT;
+ALTER TABLE hardware_snapshots ADD COLUMN usb_devices_json TEXT;
+```
+
+**Script d'application** : `backend/apply_migration_004.py`
+
+### 6. Migration SQL (session Wayland/X11, batterie, uptime)
+
+**Fichier** : `backend/migrations/005_add_os_display_and_battery.sql`
+```sql
+ALTER TABLE hardware_snapshots ADD COLUMN screen_resolution VARCHAR(50);
+ALTER TABLE hardware_snapshots ADD COLUMN display_server VARCHAR(50);
+ALTER TABLE hardware_snapshots ADD COLUMN session_type VARCHAR(50);
+ALTER TABLE hardware_snapshots ADD COLUMN last_boot_time VARCHAR(50);
+ALTER TABLE hardware_snapshots ADD COLUMN uptime_seconds INTEGER;
+ALTER TABLE hardware_snapshots ADD COLUMN battery_percentage FLOAT;
+ALTER TABLE hardware_snapshots ADD COLUMN battery_status VARCHAR(50);
+ALTER TABLE hardware_snapshots ADD COLUMN battery_health VARCHAR(50);
+```
+
+**Script d'application** : `backend/apply_migration_005.py`
+
+## Déploiement
+
+Pour appliquer les mises à jour :
+
+### 1. Appliquer les migrations 002, 003, 004 et 005
+```bash
+cd backend
+python3 apply_migration_002.py
+python3 apply_migration_003.py
+python3 apply_migration_004.py
+python3 apply_migration_005.py
+```
+
+### 2. Redémarrer le backend
+```bash
+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`