serv_benchmark/docs/CHANGE_REMOVE_SIDEBAR_DELETE.md

🗑️ Suppression des boutons de suppression du volet latéral

📋 Changement effectué

Les boutons de suppression (🗑️) ont été retirés du volet latéral de la page Devices.

Raison

La suppression d'un device doit uniquement se faire depuis la section centrale (panneau de détail) pour éviter les suppressions accidentelles lors de la navigation dans la liste.

---

🔧 Modifications apportées

1. JavaScript - Rendu de la liste

Fichier modifié : frontend/js/devices.js

AVANT :

<div style="display: flex; align-items: center; gap: 0.35rem;">
  <span class="${scoreClass}" style="font-size: 0.75rem; padding: 0.2rem 0.5rem;">
    ${scoreText}
  </span>
  <button type="button" class="device-list-delete"
          title="Supprimer ce device"
          onclick="event.stopPropagation(); deleteDeviceFromList(event, ${device.id}, '${hostnameEscaped}')">
    🗑️
  </button>
</div>

APRÈS :

<div style="display: flex; align-items: center; gap: 0.35rem;">
  <span class="${scoreClass}" style="font-size: 0.75rem; padding: 0.2rem 0.5rem;">
    ${scoreText}
  </span>
</div>

2. CSS - Nettoyage

Fichier modifié : frontend/css/main.css

AVANT :

.device-list-delete {
  background: transparent;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.device-list-delete:hover {
  transform: scale(1.2);
  filter: brightness(1.3);
}

APRÈS :

/* Device list delete button removed - deletion only from central panel */

---

✅ Résultat

Volet latéral (liste des devices)

AVANT :

┌─────────────────────────────┐
│ pvemsi              9109 🗑️│
│ ⏱️ il y a 23 heures        │
├─────────────────────────────┤
│ aorus               8848 🗑️│
│ ⏱️ il y a 13 heures        │
└─────────────────────────────┘

APRÈS :

┌─────────────────────────────┐
│ pvemsi                  9109│
│ ⏱️ il y a 23 heures        │
├─────────────────────────────┤
│ aorus                   8848│
│ ⏱️ il y a 13 heures        │
└─────────────────────────────┘

Panneau central (détails)

Le bouton "🗑️ Supprimer" (ou avec l'icône selon le pack choisi) reste présent dans le panneau central, à côté du nom du device.

---

🎯 Workflow de suppression

Nouvelle procédure

1. Cliquer sur un device dans le volet latéral pour le sélectionner
2. Le panneau central affiche les détails du device
3. Cliquer sur le bouton "Supprimer" en haut du panneau central
4. Confirmer la suppression dans la popup

Avantages

• ✅ Évite les suppressions accidentelles lors de la navigation
• ✅ Workflow plus clair : sélectionner puis agir
• ✅ Interface plus propre dans le volet latéral
• ✅ Cohérent avec d'autres interfaces de gestion

---

📝 Note technique

Fonction conservée

La fonction deleteDeviceFromList() dans devices.js a été conservée mais n'est plus appelée. Elle pourrait être utilisée à l'avenir si nécessaire.

Emplacement : frontend/js/devices.js:270

Si vous souhaitez la supprimer complètement :

// Supprimer les lignes 270-289 dans devices.js
async function deleteDeviceFromList(event, deviceId, hostname) {
  // ... code de la fonction
}

// Et la ligne 2144
window.deleteDeviceFromList = deleteDeviceFromList;

---

🧪 Test

1. Ouvrir http://localhost:8087/devices.html
2. Observer le volet latéral
3. Vérifier qu'il n'y a plus de bouton 🗑️ à côté des scores
4. Cliquer sur un device
5. Vérifier que le bouton "Supprimer" est bien présent dans le panneau central

---

Date : 2026-01-11 Impact : UX improvement - Prévention des suppressions accidentelles Breaking change : Non - Fonctionnalité conservée, seul l'emplacement change