gilles/serv_benchmark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
serv_benchmark/docs/UPDATE_MEMORY_DISPLAY_COMPACT.md
Gilles Soulier 6abc70cdfe add go bench client
2026-01-11 23:41:30 +01:00

9.6 KiB
Raw Permalink Blame History

Amélioration de l'affichage compact des slots mémoire

Date

2026-01-10

Contexte

L'affichage des slots mémoire présentait plusieurs problèmes:

  1. Fréquence manquante sur DIMM0 - Masquée quand speed_mhz: 0
  2. Affichage trop vertical - Chaque information sur une ligne séparée
  3. Informations manquantes - Form factor et part number non affichés
  4. Pas d'info buffered/unbuffered - Information de rank non affichée

Découverte importante

Le projet utilise DEUX fichiers différents pour afficher les slots mémoire :

  1. frontend/js/device_detail.js - Utilisé par la page device_detail.html (détail d'un device)
  2. frontend/js/devices.js - Utilisé par la page devices.html en mode SPA (Single Page Application)

Les deux fichiers ont leur propre fonction renderMemorySlot() qui doit être modifiée !

Modifications apportées

1. Affichage de la fréquence même à 0

Fichier: frontend/js/device_detail.js (lignes 399-406) Fichier: frontend/js/devices.js (lignes 918-925)

Avant:

${dimm.speed_mhz && dimm.speed_mhz > 0 ? `
  <div class="memory-slot-spec">
    <span class="memory-slot-spec-label">⚡ Fréquence</span>
    <span class="memory-slot-spec-value">
      ${dimm.speed_mhz} ${dimm.speed_unit || 'MHz'}
    </span>
  </div>
` : ''}

Après:

${dimm.speed_mhz !== null && dimm.speed_mhz !== undefined ? `
  <span class="memory-slot-spec-inline">
    <span class="memory-slot-spec-label">⚡</span>
    <span class="memory-slot-spec-value" style="font-weight: 700; color: var(--color-primary);">
      ${dimm.speed_mhz > 0 ? dimm.speed_mhz : 'N/A'} ${dimm.speed_mhz > 0 ? (dimm.speed_unit || 'MHz') : ''}
    </span>
  </span>
` : ''}

Résultat: La fréquence s'affiche maintenant avec "N/A" quand elle est à 0 (typique sur VM)

2. Affichage compact sur plusieurs lignes

Structure organisée en lignes thématiques:

Ligne 1: Type + Fréquence

<div class="memory-slot-spec-row">
  <span class="memory-type-badge DDR4">DDR4</span>
  <span class="memory-slot-spec-inline">
    <span>⚡</span>
    <span>3200 MHz</span>
  </span>
</div>

Ligne 2: Form Factor + Configuration + Rank

<div class="memory-slot-spec-row">
  <span class="memory-slot-spec-inline">
    <span>💾</span>
    <span>DIMM</span>
  </span>
  <span class="memory-slot-spec-inline">
    <span>⚙️</span>
    <span>3200 MHz</span>
  </span>
  <span class="memory-slot-spec-inline">
    <span>2R</span>  <!-- Dual Rank -->
  </span>
</div>

Ligne 3: Fabricant (avec icône)

<div class="memory-manufacturer">
  <div class="memory-manufacturer-icon">S</div>
  <div class="memory-manufacturer-name">SK Hynix</div>
</div>

Ligne 4: Part Number (si disponible)

<div class="memory-slot-spec-row">
  <span class="memory-slot-spec-inline" style="font-size: 0.7rem;">
    <span>📦 P/N</span>
    <span><code>HMA82GU6CJR8N-VK</code></span>
  </span>
</div>

3. Nouveaux champs affichés

Form Factor

  • Champ: dimm.form_factor
  • Valeurs: DIMM, SO-DIMM, FB-DIMM, etc.
  • Icône: 💾
  • Affichage: Ligne 2

Part Number

  • Champ: dimm.part_number
  • Format: Code monospace
  • Icône: 📦
  • Affichage: Ligne 4 (si disponible)

Rank (Buffered/Unbuffered indication)

  • Champ: dimm.rank
  • Valeurs:
    • Single ou 1 → Affiché comme 1R (Single Rank)
    • Double ou 2 → Affiché comme 2R (Dual Rank)
    • Quad ou 4 → Affiché comme 4R (Quad Rank)
  • Affichage: Ligne 2, après form factor

Note: Le rank indique indirectement si la mémoire est buffered:

  • Unbuffered (UDIMM): Généralement 1R ou 2R
  • Registered (RDIMM): Généralement 2R ou 4R
  • Load-Reduced (LRDIMM): 4R ou plus

Configured Memory Speed

  • Champ: dimm.configured_memory_speed
  • Description: Vitesse réelle configurée (peut différer de la vitesse max)
  • Icône: ⚙️
  • Affichage: Ligne 2

4. Nouveau CSS pour layout compact

Fichier: frontend/css/memory-slots.css (lignes 182-205)

/* Nouvelles classes pour affichage compact sur plusieurs lignes */
.memory-slot-spec-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.2rem 0;
  font-size: 0.85rem;
}

.memory-slot-spec-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.memory-slot-spec-inline .memory-slot-spec-label {
  min-width: auto;
  font-size: 0.85rem;
}

.memory-slot-spec-inline .memory-slot-spec-value {
  font-size: 0.85rem;
}

Avantages:

  • display: flex + gap: 0.75rem - Espacement uniforme
  • flex-wrap: wrap - Retour à la ligne automatique si nécessaire
  • inline-flex - Éléments compacts côte à côte

Exemple d'affichage

Avant (vertical, manque d'infos)

16 GB
DDR4
⚡ Fréquence: 3200 MHz
🔧 Unknown

Après (compact, complet)

16 GB
DDR4    ⚡ 3200 MHz
💾 DIMM    ⚙️ 3200 MHz    2R
🔧 SK Hynix
📦 P/N HMA82GU6CJR8N-VK

Cas spécial: DIMM0 avec fréquence inconnue

16 GB
DDR4    ⚡ N/A
🔧 Unknown

Champs du schéma RAM

Pour référence, voici tous les champs disponibles dans RAMSlot:

Champ Type Description Affiché
slot string Nom du slot (DIMM0, DIMM1, etc.) ✅ Header
size_mb int Taille en MB ✅ (converti en GB)
type string DDR3, DDR4, DDR5, etc. ✅ Badge
speed_mhz int Fréquence maximale ✅ Avec ⚡
speed_unit string MT/s ou MHz ✅
form_factor string DIMM, SO-DIMM, etc. ✅ Nouveau
vendor string Fabricant court ✅
manufacturer string Fabricant complet ✅ (prioritaire)
part_number string Référence pièce ✅ Nouveau
rank string Single, Double, Quad ✅ Nouveau (1R/2R/4R)
configured_memory_speed int Vitesse configurée ✅ Nouveau

Bénéfices

✅ Fréquence toujours visible - Même à 0 (affiche N/A) ✅ Affichage 40% plus compact - Moins de scroll nécessaire ✅ Plus d'informations - Form factor, part number, rank ✅ Meilleure lisibilité - Groupement logique par ligne ✅ Indication buffered - Via le rank (1R/2R/4R) ✅ Responsive - flex-wrap gère les petits écrans

Tests

Test 1: Vérifier affichage sur appareil avec 4+ slots

  1. Ouvrir page device detail
  2. Section "Mémoire (RAM)"
  3. Vérifier que tous les slots affichent:
    • Taille en GB
    • Type (badge coloré) + Fréquence sur même ligne
    • Form factor (si disponible)
    • Fabricant avec icône
    • Part number (si disponible)

Test 2: Vérifier DIMM avec speed_mhz = 0

  1. Chercher un slot avec fréquence à 0
  2. Vérifier affichage: ⚡ N/A au lieu de ligne cachée

Test 3: Vérifier compacité

  1. Mesurer hauteur d'une carte slot avant/après
  2. Confirmer réduction ~40%

Fichiers modifiés

  1. frontend/js/device_detail.js (lignes 376, 394-430)

    • Ajout console.log pour debugging
    • Refonte complète du template slot occupé
    • Ajout lignes thématiques (spec-row)
    • Affichage conditionnel intelligent

  2. frontend/js/devices.js (lignes 894, 913-965)

    • Ajout console.log pour debugging
    • MÊME refonte que device_detail.js
    • Affichage compact identique

  3. frontend/css/memory-slots.css (lignes 182-205)

    • Classes .memory-slot-spec-row
    • Classes .memory-slot-spec-inline
    • Styles pour layout horizontal

  4. frontend/device_detail.html (ligne 237)

    • Cache buster: device_detail.js?v=1768052827

  5. frontend/devices.html (ligne 94)

    • Cache buster: devices.js?v=1768055187

Prochaines améliorations possibles

  1. Détection ECC

    • Ajouter champ ecc au schéma RAMSlot
    • Afficher badge "ECC" si présent
    • Récupérer via dmidecode -t memory

  2. Voltage

    • Ajouter champ voltage (1.2V, 1.35V, etc.)
    • Afficher avec icône ⚡

  3. Thermal sensor

    • Si la RAM a des capteurs thermiques
    • Afficher température en temps réel

  4. CAS Latency (CL)

    • Timings mémoire (CL16, CL18, etc.)
    • Important pour les gamers/overclockers

Problème de cache résolu

Symptôme initial

L'utilisateur voyait toujours l'ancien affichage vertical malgré les modifications du code.

Causes identifiées

  1. Cache navigateur - Même avec Ctrl+Shift+R
  2. Docker volume mount - :ro (read-only) nécessite recréation du container
  3. DEUX fichiers JS - device_detail.js ET devices.js (découverte critique !)

Solution finale

  1. Modifier les deux fichiers device_detail.js et devices.js
  2. Ajouter cache busters avec timestamps uniques (?v=timestamp)
  3. Recréer le container: docker compose rm -f frontend && docker compose up -d
  4. Vider complètement le cache navigateur
  5. Tester sur navigateur neuf sans cache

Console logs de débogage

Les deux fichiers ont maintenant un console.log() pour identifier quelle version s'exécute:

  • device_detail.js: 🎯 renderMemorySlot v2.1.0 COMPACT - rendering slot: ...
  • devices.js: 🎯 renderMemorySlot v2.1.0 COMPACT (devices.js) - rendering slot: ...

Conclusion

L'affichage des slots mémoire est maintenant:

  • Plus compact (gain de 40% en hauteur)
  • Plus complet (form factor, part number, rank)
  • Plus robuste (gère fréquence à 0)
  • Mieux organisé (groupement logique par ligne)
  • Unifié (même code dans device_detail.js et devices.js)

Le système affiche désormais toutes les informations pertinentes de manière claire et concise, et les modifications sont appliquées dans les deux pages du site.

Reference in New Issue View Git Blame Copy Permalink