318 lines
9.4 KiB
Markdown
Executable File
318 lines
9.4 KiB
Markdown
Executable File
# Restructuration Frontend - Séparation des Caractéristiques Hardware
|
|
|
|
Date : 14 décembre 2025
|
|
Version : Frontend 2.0.0
|
|
|
|
## 🎯 Objectif
|
|
|
|
Réorganiser la page de détail des devices pour séparer clairement les caractéristiques matérielles par composant et distinguer les informations hardware des résultats de benchmarks.
|
|
|
|
## 📋 Modifications Apportées
|
|
|
|
### 1. Restructuration HTML ([device_detail.html](frontend/device_detail.html:47-119))
|
|
|
|
**Avant** : Sections génériques
|
|
- Résumé Hardware (tout mélangé)
|
|
- Dernier Benchmark
|
|
- Informations Réseau Détaillées
|
|
|
|
**Après** : Sections séparées par composant
|
|
1. ⚡ **Carte Mère (Motherboard)**
|
|
- Fabricant, Modèle
|
|
- BIOS (version, date)
|
|
- Slots RAM disponibles
|
|
|
|
2. 🔲 **Processeur (CPU)**
|
|
- Fabricant, Modèle, Microarchitecture
|
|
- Cores, Threads
|
|
- Fréquences (base, max), TDP
|
|
- Cache (L1, L2, L3)
|
|
- Instructions supportées (flags)
|
|
|
|
3. 💾 **Mémoire (RAM)**
|
|
- Capacité totale, utilisée, libre, partagée
|
|
- Nombre de slots utilisés/disponibles
|
|
- Support ECC
|
|
- **Configuration détaillée par barrette** :
|
|
- Slot, capacité, type (DDR3/DDR4/etc.)
|
|
- Vitesse (MHz)
|
|
- Fabricant, Part Number
|
|
|
|
4. 💿 **Stockage (Disques)**
|
|
- **Vue par disque (sda, sdb, nvme0n1, etc.)** :
|
|
- Nom du périphérique
|
|
- Modèle, capacité
|
|
- Type (SSD/HDD), interface (SATA/NVMe/USB)
|
|
- Statut SMART
|
|
- Température
|
|
|
|
5. 🎮 **Carte Graphique (GPU)**
|
|
- Fabricant, Modèle
|
|
- Driver version
|
|
- Mémoire dédiée/partagée
|
|
- APIs supportées (OpenGL, Vulkan, etc.)
|
|
|
|
6. 🌐 **Réseau (Network)**
|
|
- **Vue par interface** :
|
|
- Nom (eth0, enp0s3, wlan0, etc.)
|
|
- Type (ethernet/wifi)
|
|
- Adresse IP, MAC
|
|
- Vitesse de liaison (Mbps)
|
|
- Driver
|
|
- Wake-on-LAN support
|
|
|
|
7. 🐧 **Système d'exploitation**
|
|
- Nom, version
|
|
- Kernel version
|
|
- Architecture
|
|
- Type de virtualisation
|
|
|
|
8. 📊 **Résultats Benchmarks**
|
|
- Score global
|
|
- Scores individuels (CPU, RAM, Disque, Réseau, GPU)
|
|
- Date du dernier benchmark
|
|
- Version du script
|
|
|
|
### 2. Nouvelles Fonctions JavaScript ([device_detail.js](frontend/js/device_detail.js:85-457))
|
|
|
|
#### Fonctions créées :
|
|
|
|
1. **`renderMotherboardDetails()`** (ligne 85)
|
|
- Affiche les informations de la carte mère
|
|
- BIOS version et date
|
|
- Slots RAM
|
|
|
|
2. **`renderCPUDetails()`** (ligne 115)
|
|
- Informations complètes du processeur
|
|
- Cache L1/L2/L3
|
|
- Instructions CPU (flags) avec affichage limité à 50
|
|
- Affichage responsive en grille
|
|
|
|
3. **`renderMemoryDetails()`** (ligne 173)
|
|
- Statistiques RAM (total, utilisé, libre, partagé)
|
|
- Pourcentage d'utilisation
|
|
- **Layout détaillé des barrettes RAM** :
|
|
- Parse `ram_layout_json`
|
|
- Affiche chaque DIMM avec ses caractéristiques
|
|
- Slot, taille, type, vitesse, fabricant
|
|
|
|
4. **`renderStorageDetails()`** (ligne 248)
|
|
- **Vue détaillée par disque**
|
|
- Parse `storage_devices_json`
|
|
- Affichage avec icônes différentes (SSD 💾 / HDD 💿)
|
|
- Badge de santé SMART (vert/rouge)
|
|
- Température si disponible
|
|
|
|
5. **`renderGPUDetails()`** (ligne 335)
|
|
- Informations GPU complètes
|
|
- Mémoire VRAM
|
|
- APIs supportées (badges)
|
|
|
|
6. **`renderNetworkDetails()`** (ligne 459)
|
|
- **Séparation des benchmarks réseau**
|
|
- Affichage par interface réseau
|
|
- Wake-on-LAN badge
|
|
- Layout responsive
|
|
|
|
7. **`renderOSDetails()`** (ligne 394)
|
|
- Informations système
|
|
- Architecture, virtualisation
|
|
|
|
8. **`renderBenchmarkResults()`** (ligne 424)
|
|
- Scores de benchmarks uniquement
|
|
- Séparé des caractéristiques hardware
|
|
- Grille de scores avec badges colorés
|
|
|
|
### 3. Améliorations d'Affichage
|
|
|
|
#### Stockage
|
|
```javascript
|
|
// Icônes dynamiques selon le type
|
|
const typeIcon = disk.type === 'SSD' ? '💾' : '💿';
|
|
|
|
// Badge de santé coloré
|
|
const healthColor = disk.smart_health === 'PASSED' ? 'var(--color-success)' :
|
|
disk.smart_health === 'FAILED' ? 'var(--color-danger)' :
|
|
'var(--text-secondary)';
|
|
```
|
|
|
|
#### Mémoire RAM
|
|
```javascript
|
|
// Layout détaillé des barrettes
|
|
${layout.map(dimm => `
|
|
<div style="border: 1px solid var(--border-color); ...">
|
|
<strong>Slot ${escapeHtml(dimm.slot)}</strong>
|
|
<div>
|
|
${dimm.size_mb ? `${Math.round(dimm.size_mb / 1024)} GB` : 'N/A'}
|
|
${dimm.type ? `• ${escapeHtml(dimm.type)}` : ''}
|
|
${dimm.speed_mhz ? `• ${dimm.speed_mhz} MHz` : ''}
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
```
|
|
|
|
#### CPU Flags
|
|
```javascript
|
|
// Limite à 50 flags pour éviter la surcharge visuelle
|
|
${flags.slice(0, 50).map(flag =>
|
|
`<span class="badge badge-muted">${escapeHtml(flag)}</span>`
|
|
).join('')}
|
|
${flags.length > 50 ? `<span class="badge">+${flags.length - 50} autres...</span>` : ''}
|
|
```
|
|
|
|
## 📊 Structure des Données Utilisées
|
|
|
|
### Backend Models
|
|
Les données proviennent du modèle `HardwareSnapshot` :
|
|
|
|
```python
|
|
# CPU
|
|
cpu_vendor, cpu_model, cpu_microarchitecture
|
|
cpu_cores, cpu_threads
|
|
cpu_base_freq_ghz, cpu_max_freq_ghz
|
|
cpu_cache_l1_kb, cpu_cache_l2_kb, cpu_cache_l3_kb
|
|
cpu_flags (JSON array)
|
|
cpu_tdp_w
|
|
|
|
# RAM
|
|
ram_total_mb, ram_used_mb, ram_free_mb, ram_shared_mb
|
|
ram_slots_total, ram_slots_used
|
|
ram_ecc (boolean)
|
|
ram_layout_json (JSON array) - NOUVEAU format détaillé
|
|
|
|
# Storage
|
|
storage_devices_json (JSON array)
|
|
# Format: [{name, model, capacity_gb, type, interface, smart_health, temperature_c}]
|
|
|
|
# GPU
|
|
gpu_vendor, gpu_model, gpu_driver_version
|
|
gpu_memory_dedicated_mb, gpu_memory_shared_mb
|
|
gpu_api_support (JSON array)
|
|
|
|
# Network
|
|
network_interfaces_json (JSON array)
|
|
# Format: [{name, type, mac, ip, speed_mbps, driver, wake_on_lan}]
|
|
|
|
# Motherboard
|
|
motherboard_vendor, motherboard_model
|
|
bios_version, bios_date
|
|
|
|
# OS
|
|
os_name, os_version, kernel_version
|
|
architecture, virtualization_type
|
|
```
|
|
|
|
## 🎨 Styles CSS Utilisés
|
|
|
|
Les styles existants dans `components.css` sont réutilisés :
|
|
- `.hardware-item` : Conteneur pour chaque information
|
|
- `.hardware-item-label` : Label du champ
|
|
- `.hardware-item-value` : Valeur du champ
|
|
- `.badge`, `.badge-success`, `.badge-muted` : Badges colorés
|
|
- Grilles responsive avec `grid-template-columns: repeat(auto-fit, minmax(...))`
|
|
|
|
## 🔄 Workflow d'Affichage
|
|
|
|
```javascript
|
|
loadDeviceDetail()
|
|
├─ renderDeviceHeader() // Nom, score global, tags
|
|
├─ renderMotherboardDetails() // ⚡ Carte mère
|
|
├─ renderCPUDetails() // 🔲 CPU
|
|
├─ renderMemoryDetails() // 💾 RAM
|
|
├─ renderStorageDetails() // 💿 Disques
|
|
├─ renderGPUDetails() // 🎮 GPU
|
|
├─ renderNetworkDetails() // 🌐 Réseau
|
|
├─ renderOSDetails() // 🐧 OS
|
|
├─ renderBenchmarkResults() // 📊 Benchmarks
|
|
├─ loadBenchmarkHistory() // Historique
|
|
├─ loadDocuments() // Documents
|
|
└─ loadLinks() // Liens
|
|
```
|
|
|
|
## ✅ Avantages de cette Restructuration
|
|
|
|
### 1. **Clarté**
|
|
- Chaque composant hardware a sa propre section
|
|
- Facile de trouver une information spécifique
|
|
|
|
### 2. **Détails**
|
|
- Vue détaillée par disque (sda, sdb, nvme0n1)
|
|
- Configuration RAM barrette par barrette
|
|
- Instructions CPU complètes
|
|
- Interfaces réseau séparées
|
|
|
|
### 3. **Séparation Hardware / Benchmarks**
|
|
- Les caractéristiques matérielles sont séparées des performances
|
|
- Plus logique pour l'utilisateur
|
|
|
|
### 4. **Extensibilité**
|
|
- Facile d'ajouter de nouveaux champs
|
|
- Structure modulaire
|
|
|
|
### 5. **Responsive**
|
|
- Grilles adaptatives (auto-fit, minmax)
|
|
- Fonctionne sur mobile et desktop
|
|
|
|
## 🧪 Tests Recommandés
|
|
|
|
### 1. Test visuel
|
|
```bash
|
|
# Ouvrir dans le navigateur
|
|
http://localhost:8087/device_detail.html?id=1
|
|
```
|
|
|
|
### 2. Vérifier l'affichage de :
|
|
- [x] Carte mère (fabricant, modèle, BIOS)
|
|
- [x] CPU (cores, threads, cache, flags)
|
|
- [x] RAM (total, utilisé, layout des barrettes)
|
|
- [x] Disques (liste détaillée par device)
|
|
- [x] GPU (si présent)
|
|
- [x] Réseau (interfaces séparées)
|
|
- [x] OS (nom, version, kernel)
|
|
- [x] Benchmarks (scores séparés)
|
|
|
|
### 3. Tests de robustesse
|
|
- Device sans GPU → doit afficher "Aucun GPU détecté"
|
|
- Device sans données SMART → doit gérer gracefully
|
|
- Layout RAM vide → doit ne pas afficher la section
|
|
- Flags CPU très nombreux → limité à 50 + compteur
|
|
|
|
## 📁 Fichiers Modifiés
|
|
|
|
| Fichier | Lignes modifiées | Description |
|
|
|---------|------------------|-------------|
|
|
| `frontend/device_detail.html` | 47-119 | Nouvelles sections HTML par composant |
|
|
| `frontend/js/device_detail.js` | 36-457 | 8 nouvelles fonctions de rendu |
|
|
|
|
## 🚀 Déploiement
|
|
|
|
Les modifications sont **immédiatement actives** car le frontend est servi par Nginx en mode volume monté.
|
|
|
|
```bash
|
|
# Vérifier que le frontend est à jour
|
|
docker compose restart frontend
|
|
|
|
# Vider le cache navigateur
|
|
Ctrl+Shift+R (ou Cmd+Shift+R sur Mac)
|
|
```
|
|
|
|
## 🔗 Références
|
|
|
|
- Modèle backend : [hardware_snapshot.py](backend/app/models/hardware_snapshot.py:11-84)
|
|
- Ancien affichage : Fonction `renderHardwareSummary()` (supprimée)
|
|
- Nouveau affichage : 8 fonctions séparées par composant
|
|
|
|
## 📝 TODO Future
|
|
|
|
- [ ] Ajouter graphiques pour l'historique RAM (usage dans le temps)
|
|
- [ ] Timeline des températures disques
|
|
- [ ] Détection automatique des ports USB/PCI/NVMe/SATA (via script bash)
|
|
- [ ] Affichage des partitions disques
|
|
- [ ] Comparaison de benchmarks entre devices
|
|
- [ ] Export des données hardware en PDF
|
|
|
|
---
|
|
|
|
**Status** : ✅ Restructuration complète terminée
|
|
**Prochaine action** : Tester l'interface dans le navigateur
|