297 lines
9.3 KiB
Markdown
297 lines
9.3 KiB
Markdown
# 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
|