serv_benchmark/docs/FEATURE_MEMORY_SLOTS_VISUALIZATION.md

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 :

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 :

sudo dmidecode -t 17 | grep -E 'Locator:|Size:|Type:|Speed:|Manufacturer:'

Format JSON stocké

{
  "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

function renderMemoryDetails()

• Parse ram_layout_json
• Génère tous les slots (occupés + vides)
• Appelle renderMemorySlot() pour chaque slot

Fonction helper

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 de l'implémentation initiale
• CHANGELOG.md - Historique des modifications