# 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`

## Déploiement

Pour appliquer les mises à jour :

### 1. Appliquer la migration 002
```bash
cd backend
python3 apply_migration_002.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`