add go bench client
This commit is contained in:
Gilles Soulier
296
docs/FEATURE_MEMORY_SLOTS_VISUALIZATION.md
Normal file
296
docs/FEATURE_MEMORY_SLOTS_VISUALIZATION.md
Normal file
@@ -0,0 +1,296 @@
|
||||
# Feature: Visualisation des slots mémoire
|
||||
|
||||
**Date:** 2026-01-10
|
||||
**Version:** 1.0
|
||||
**Auteur:** Claude Code
|
||||
|
||||
## Vue d'ensemble
|
||||
|
||||
Nouvelle fonctionnalité d'affichage visuel des slots mémoire dans la section "💾 Mémoire (RAM)" de la page de détail d'un device. Chaque slot de la carte mère est représenté par une carte visuelle montrant son état (occupé/vide) et les caractéristiques de la barrette installée.
|
||||
|
||||
## Problème résolu
|
||||
|
||||
Auparavant, les informations RAM étaient déjà collectées et stockées, mais l'API ne les retournait pas au frontend. De plus, l'affichage était basique et ne montrait pas clairement :
|
||||
- Quels slots sont occupés vs vides
|
||||
- La position physique des barrettes sur la carte mère
|
||||
- Les caractéristiques détaillées par barrette
|
||||
|
||||
## Solution implémentée
|
||||
|
||||
### 1. Backend - Correction de l'API
|
||||
|
||||
**Fichier:** `backend/app/schemas/hardware.py`
|
||||
- Ajout du champ `ram_layout_json` dans `HardwareSnapshotResponse`
|
||||
|
||||
**Fichier:** `backend/app/api/devices.py`
|
||||
- L'API retourne maintenant `ram_layout_json` dans la réponse
|
||||
|
||||
### 2. Frontend - Nouvelle visualisation
|
||||
|
||||
**Fichiers modifiés:**
|
||||
- `frontend/device_detail.html` - Inclusion du CSS memory-slots.css
|
||||
- `frontend/js/device_detail.js` - Fonction `renderMemoryDetails()` réécrite
|
||||
- `frontend/css/memory-slots.css` - Nouveau fichier de styles (créé)
|
||||
|
||||
## Caractéristiques
|
||||
|
||||
### Affichage par slot
|
||||
|
||||
Chaque slot mémoire affiche :
|
||||
|
||||
**Slot occupé :**
|
||||
- 💾 Icône de mémoire
|
||||
- Nom du slot (DIMM0, DIMM1, etc.)
|
||||
- Badge "Occupé" (vert)
|
||||
- Taille de la barrette (en GB)
|
||||
- Type de RAM avec badge coloré :
|
||||
- DDR3 : Bleu
|
||||
- DDR4 : Vert
|
||||
- DDR5 : Violet
|
||||
- Autre : Gris
|
||||
- Vitesse (en MHz)
|
||||
- Fabricant avec icône circulaire (première lettre)
|
||||
- Part Number (si disponible)
|
||||
|
||||
**Slot vide :**
|
||||
- 📭 Icône de boîte vide
|
||||
- Nom du slot
|
||||
- Badge "Vide" (gris)
|
||||
- Message "Slot libre"
|
||||
- Bordure en pointillés
|
||||
- Opacité réduite
|
||||
|
||||
### Design et UX
|
||||
|
||||
**Layout :**
|
||||
- Grille responsive (auto-fit, min 220px)
|
||||
- S'adapte au nombre de slots (2, 4, 8, etc.)
|
||||
- Gap de 1rem entre les cartes
|
||||
|
||||
**Effets visuels :**
|
||||
- Dégradé de fond
|
||||
- Barre latérale colorée (verte pour occupé)
|
||||
- Hover : élévation avec ombre portée
|
||||
- Animations au chargement (staggered, 0.05s par slot)
|
||||
|
||||
**Accessibilité :**
|
||||
- Légende en bas (slot occupé / vide)
|
||||
- Couleurs contrastées
|
||||
- Bordures distinctives
|
||||
|
||||
**Responsive :**
|
||||
- Mobile : 1 colonne
|
||||
- Tablette : 2 colonnes
|
||||
- Desktop : auto-fit selon l'espace
|
||||
|
||||
## Logique de détection des slots
|
||||
|
||||
### Cas 1 : Slots totaux connus
|
||||
Si `ram_slots_total` est défini (ex: 4 slots), le système génère tous les slots :
|
||||
- DIMM0, DIMM1, DIMM2, DIMM3
|
||||
- Marque chaque slot comme occupé ou vide selon `ram_layout_json`
|
||||
|
||||
### Cas 2 : Slots totaux inconnus
|
||||
Si `ram_slots_total` n'est pas défini :
|
||||
- Crée des slots uniquement pour les barrettes détectées
|
||||
- Utilise les noms de slots de `ram_layout_json`
|
||||
- Pas de slots vides affichés
|
||||
|
||||
### Mapping des slots
|
||||
|
||||
Le système essaie plusieurs variations pour matcher les noms :
|
||||
```javascript
|
||||
occupiedSlots.get(slotName) // "DIMM0"
|
||||
occupiedSlots.get(`DIMM${i}`) // "DIMM0"
|
||||
occupiedSlots.get(String(i)) // "0"
|
||||
```
|
||||
|
||||
Cela permet de gérer différents formats de noms de slots retournés par `dmidecode`.
|
||||
|
||||
## Exemples visuels
|
||||
|
||||
### Exemple 1 : 4 slots, 2 occupés
|
||||
|
||||
```
|
||||
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
||||
│ 💾 DIMM0 │ │ 📭 DIMM1 │ │ 💾 DIMM2 │ │ 📭 DIMM3 │
|
||||
│ [Occupé] │ │ [Vide] │ │ [Occupé] │ │ [Vide] │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ 8 GB │ │ Slot libre │ │ 8 GB │ │ Slot libre │
|
||||
│ [DDR4] │ │ │ │ [DDR4] │ │ │
|
||||
│ 2400 MHz │ │ Aucune barrette │ │ 2666 MHz │ │ Aucune barrette │
|
||||
│ Ⓢ Samsung │ │ installée │ │ Ⓒ Crucial │ │ installée │
|
||||
└─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘
|
||||
```
|
||||
|
||||
### Exemple 2 : 2 slots, tous occupés
|
||||
|
||||
```
|
||||
┌─────────────────────────┐ ┌─────────────────────────┐
|
||||
│ 💾 DIMM0 │ │ 💾 DIMM1 │
|
||||
│ [Occupé] │ │ [Occupé] │
|
||||
│ │ │ │
|
||||
│ 16 GB │ │ 16 GB │
|
||||
│ [DDR5] │ │ [DDR5] │
|
||||
│ Vitesse: 4800 MHz │ │ Vitesse: 4800 MHz │
|
||||
│ Ⓚ Kingston │ │ Ⓚ Kingston │
|
||||
│ P/N: KF548C38BBK2-32 │ │ P/N: KF548C38BBK2-32 │
|
||||
└─────────────────────────┘ └─────────────────────────┘
|
||||
```
|
||||
|
||||
## Données sources
|
||||
|
||||
### Collecte (bench.sh)
|
||||
Le script utilise `dmidecode -t 17` pour extraire :
|
||||
```bash
|
||||
sudo dmidecode -t 17 | grep -E 'Locator:|Size:|Type:|Speed:|Manufacturer:'
|
||||
```
|
||||
|
||||
### Format JSON stocké
|
||||
```json
|
||||
{
|
||||
"ram_slots_total": 4,
|
||||
"ram_slots_used": 2,
|
||||
"ram_layout_json": "[
|
||||
{
|
||||
\"slot\": \"DIMM0\",
|
||||
\"size_mb\": 8192,
|
||||
\"type\": \"DDR4\",
|
||||
\"speed_mhz\": 2400,
|
||||
\"manufacturer\": \"Samsung\",
|
||||
\"part_number\": \"M378A1K43CB2-CTD\"
|
||||
},
|
||||
{
|
||||
\"slot\": \"DIMM2\",
|
||||
\"size_mb\": 8192,
|
||||
\"type\": \"DDR4\",
|
||||
\"speed_mhz\": 2666,
|
||||
\"manufacturer\": \"Crucial\"
|
||||
}
|
||||
]"
|
||||
}
|
||||
```
|
||||
|
||||
## CSS - Classes principales
|
||||
|
||||
### Conteneur
|
||||
- `.memory-slots-container` : Wrapper principal
|
||||
- `.memory-slots-grid` : Grille de slots
|
||||
- `.memory-slots-legend` : Légende en bas
|
||||
|
||||
### Carte slot
|
||||
- `.memory-slot` : Carte individuelle
|
||||
- `.memory-slot.occupied` : Slot occupé (bordure verte)
|
||||
- `.memory-slot.empty` : Slot vide (bordure pointillée grise)
|
||||
|
||||
### Composants
|
||||
- `.memory-slot-header` : En-tête avec nom et badge
|
||||
- `.memory-slot-body` : Corps avec caractéristiques
|
||||
- `.memory-type-badge` : Badge DDR3/DDR4/DDR5
|
||||
- `.memory-manufacturer` : Section fabricant
|
||||
|
||||
## Code JavaScript
|
||||
|
||||
### Fonction principale
|
||||
```javascript
|
||||
function renderMemoryDetails()
|
||||
```
|
||||
- Parse `ram_layout_json`
|
||||
- Génère tous les slots (occupés + vides)
|
||||
- Appelle `renderMemorySlot()` pour chaque slot
|
||||
|
||||
### Fonction helper
|
||||
```javascript
|
||||
function renderMemorySlot(slot)
|
||||
```
|
||||
- Retourne le HTML d'un slot occupé ou vide
|
||||
- Gère l'affichage conditionnel des specs
|
||||
- Échappe les caractères HTML
|
||||
|
||||
## Compatibilité
|
||||
|
||||
### Navigateurs
|
||||
- Chrome/Edge : ✅
|
||||
- Firefox : ✅
|
||||
- Safari : ✅
|
||||
- Mobile : ✅ (responsive)
|
||||
|
||||
### Données
|
||||
- Fonctionne avec ou sans `ram_slots_total`
|
||||
- Gère les noms de slots variés
|
||||
- Supporte les champs optionnels (part_number, etc.)
|
||||
|
||||
## Améliorations futures possibles
|
||||
|
||||
1. **Dual-channel / Quad-channel**
|
||||
- Indiquer visuellement les paires de barrettes
|
||||
- Colorer les slots par canal mémoire
|
||||
|
||||
2. **Détection de configuration sub-optimale**
|
||||
- Alerter si les barrettes ne sont pas en dual-channel
|
||||
- Suggérer un meilleur placement
|
||||
|
||||
3. **Statistiques**
|
||||
- Graphique de répartition par fabricant
|
||||
- Histogramme des vitesses
|
||||
|
||||
4. **Comparaison**
|
||||
- Comparer avec d'autres machines
|
||||
- Recommandations d'upgrade
|
||||
|
||||
5. **Export**
|
||||
- Exporter la configuration en PDF
|
||||
- Générer un rapport détaillé
|
||||
|
||||
## Migration et déploiement
|
||||
|
||||
### Fichiers à déployer
|
||||
1. `backend/app/schemas/hardware.py` (modifié)
|
||||
2. `backend/app/api/devices.py` (modifié)
|
||||
3. `frontend/device_detail.html` (modifié)
|
||||
4. `frontend/js/device_detail.js` (modifié)
|
||||
5. `frontend/css/memory-slots.css` (nouveau)
|
||||
|
||||
### Étapes
|
||||
1. Déployer le backend → redémarrer le service
|
||||
2. Déployer le frontend → vider le cache navigateur
|
||||
3. Lancer un nouveau benchmark pour tester
|
||||
|
||||
### Rétrocompatibilité
|
||||
- ✅ Compatibilité avec anciennes données
|
||||
- ✅ Pas de migration BDD nécessaire
|
||||
- ✅ Dégradation gracieuse si données manquantes
|
||||
|
||||
## Tests
|
||||
|
||||
### Test 1 : 4 slots, 2 occupés
|
||||
- Vérifier que 2 slots apparaissent verts, 2 gris
|
||||
- Vérifier les caractéristiques des slots occupés
|
||||
|
||||
### Test 2 : Tous slots occupés
|
||||
- Aucun slot vide visible
|
||||
- Toutes les caractéristiques affichées
|
||||
|
||||
### Test 3 : Données manquantes
|
||||
- Sans `ram_slots_total` : affiche uniquement les barrettes
|
||||
- Sans `part_number` : champ non affiché
|
||||
- Sans `manufacturer` : "Inconnu"
|
||||
|
||||
### Test 4 : Responsive
|
||||
- Mobile : 1 colonne
|
||||
- Tablette : 2 colonnes
|
||||
- Desktop : grid auto-fit
|
||||
|
||||
## Conclusion
|
||||
|
||||
Cette fonctionnalité améliore significativement la lisibilité des informations RAM en :
|
||||
- Rendant visuellement clair quels slots sont occupés
|
||||
- Affichant les caractéristiques détaillées par barrette
|
||||
- Proposant une interface moderne et responsive
|
||||
- Facilitant l'identification de configurations sub-optimales
|
||||
|
||||
---
|
||||
|
||||
**Voir aussi :**
|
||||
- [ANALYSE_RAM_AFFICHAGE.md](ANALYSE_RAM_AFFICHAGE.md) - Analyse de l'implémentation initiale
|
||||
- [CHANGELOG.md](../CHANGELOG.md) - Historique des modifications
|
||||
Reference in New Issue
Block a user