gilles/serv_benchmark

Fork 0

Files

Gilles Soulier c67befc549 addon

2026-01-05 16:08:01 +01:00

13 KiB

Executable File

Raw Blame History

Améliorations Frontend - 13 Décembre 2025

Date : 2025-12-13 Version : 1.1.0 Auteur : Assistant AI + Gilles

📋 Résumé

Ce document décrit les améliorations apportées au frontend de Linux BenchTools pour améliorer l'expérience utilisateur (UX) et l'interface utilisateur (UI).

✨ Nouvelles Fonctionnalités

1. Barre de Recherche avec Filtrage en Temps Réel

Fichier : index.html, dashboard.js

Fonctionnalité :

Ajout d'une barre de recherche dans le dashboard
Filtrage en temps réel des devices par :
- Hostname
- Description
- Location
Debouncing (300ms) pour optimiser les performances
Bouton "Effacer" pour réinitialiser la recherche

Code ajouté (index.html) :

<section class="toolbar">
  <div>
    <input
      type="text"
      id="searchInput"
      class="form-control"
      placeholder="🔍 Rechercher un device..."
      style="width: 300px;"
    />
    <button class="btn btn-secondary btn-sm" onclick="clearSearch()">Effacer</button>
  </div>
  ...
</section>

Code ajouté (dashboard.js) :

// Filter devices based on search query
function filterDevices(query) {
  if (!query || query.trim() === '') {
    renderDevicesTable(allDevices);
    return;
  }

  const lowerQuery = query.toLowerCase();
  const filtered = allDevices.filter(device => {
    const hostname = (device.hostname || '').toLowerCase();
    const description = (device.description || '').toLowerCase();
    const location = (device.location || '').toLowerCase();

    return hostname.includes(lowerQuery) ||
           description.includes(lowerQuery) ||
           location.includes(lowerQuery);
  });

  renderDevicesTable(filtered);
}

Bénéfices :

✅ Recherche instantanée sans rechargement
✅ Filtrage sur plusieurs champs
✅ Performance optimisée avec debouncing
✅ UX améliorée pour les utilisateurs avec beaucoup de devices

2. Bouton d'Actualisation Manuelle

Fichier : index.html, dashboard.js

Fonctionnalité :

Bouton "🔄 Actualiser" dans la toolbar
Affiche "⏳ Chargement..." pendant le refresh
Désactivé pendant le chargement (évite les doubles clics)
Horodatage de la dernière mise à jour

Code ajouté :

// Refresh dashboard manually
function refreshDashboard() {
  if (!isLoading) {
    loadDashboard();
  }
}

// Update refresh button state
function updateRefreshButton(loading) {
  const btn = document.getElementById('refreshBtn');
  if (!btn) return;

  if (loading) {
    btn.disabled = true;
    btn.innerHTML = '⏳ Chargement...';
  } else {
    btn.disabled = false;
    btn.innerHTML = '🔄 Actualiser';
  }
}

// Update last refresh time
function updateLastRefreshTime() {
  const element = document.getElementById('lastUpdate');
  if (!element) return;

  const now = new Date();
  element.textContent = `Mis à jour: ${now.toLocaleTimeString('fr-FR')}`;
}

Interface :

<div style="display: flex; align-items: center; gap: 1rem;">
  <span id="lastUpdate" style="font-size: 0.85rem; color: var(--text-muted);"></span>
  <button class="btn btn-primary btn-sm" onclick="refreshDashboard()" id="refreshBtn">
    🔄 Actualiser
  </button>
</div>

Bénéfices :

✅ Contrôle utilisateur du rafraîchissement
✅ Feedback visuel de l'état de chargement
✅ Horodatage pour savoir quand les données ont été mises à jour
✅ Protection contre les clics multiples

3. Gestion d'Erreurs Améliorée avec Bouton Retry

Fichier : dashboard.js

Problème : Avant, si le chargement échouait, l'utilisateur voyait simplement un message d'erreur sans possibilité de réessayer.

Solution : Affichage d'un message d'erreur détaillé avec bouton "🔄 Réessayer" :

} catch (error) {
  console.error('Failed to load devices:', error);
  container.innerHTML = `
    <div class="error" style="text-align: center;">
      <p style="margin-bottom: 1rem;">❌ Impossible de charger les devices</p>
      <p style="font-size: 0.9rem; margin-bottom: 1rem;">${escapeHtml(error.message)}</p>
      <button class="btn btn-primary btn-sm" onclick="loadTopDevices()">🔄 Réessayer</button>
    </div>
  `;
}

Affichage :

❌ Impossible de charger les devices
Impossible de se connecter au serveur backend. Vérifiez que le service est démarré.

[🔄 Réessayer]

Bénéfices :

✅ Message d'erreur clair et informatif
✅ Possibilité de réessayer sans recharger la page
✅ Message personnalisé pour les erreurs réseau
✅ Meilleure expérience en cas de problème temporaire

4. Skeleton Loaders (Indicateurs de Chargement)

Fichier : components.css

Fonctionnalité : Ajout de styles pour des skeleton loaders professionnels pendant le chargement des données.

Styles ajoutés :

/* Skeleton Loader */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 1rem;
  margin-bottom: var(--spacing-sm);
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.long {
  width: 90%;
}

.skeleton-card {
  height: 100px;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Smooth transitions */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Utilisation :

<!-- Skeleton pour une card -->
<div class="skeleton skeleton-card"></div>

<!-- Skeleton pour du texte -->
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text short"></div>

Bénéfices :

✅ Perception de chargement plus rapide
✅ Interface plus professionnelle
✅ Réduction de l'anxiété pendant le chargement
✅ Animations fluides et modernes

5. Protection contre les Chargements Multiples

Fichier : dashboard.js

Problème : Si l'utilisateur clique plusieurs fois sur "Actualiser" ou si l'auto-refresh se déclenche pendant un chargement manuel, plusieurs requêtes pouvaient être lancées en parallèle.

Solution : Ajout d'un flag isLoading pour empêcher les chargements concurrents :

// Global state
let allDevices = [];
let isLoading = false;

// Load dashboard data
async function loadDashboard() {
  if (isLoading) return;  // ✅ Empêche les chargements multiples

  isLoading = true;
  updateRefreshButton(true);

  try {
    await Promise.all([
      loadStats(),
      loadTopDevices()
    ]);

    updateLastRefreshTime();

  } catch (error) {
    console.error('Failed to load dashboard:', error);
    showToast('Erreur lors du chargement des données', 'error');
  } finally {
    isLoading = false;
    updateRefreshButton(false);
  }
}

Bénéfices :

✅ Évite les requêtes réseau inutiles
✅ Meilleure performance
✅ Pas de concurrence de données
✅ Expérience utilisateur plus fluide

6. Affichage "Aucun résultat" pour la Recherche

Fichier : dashboard.js

Fonctionnalité : Message d'information quand aucun device ne correspond à la recherche :

function renderDevicesTable(devices) {
  const container = document.getElementById('devicesTable');

  if (devices.length === 0) {
    container.innerHTML = `
      <div style="text-align: center; padding: 2rem; color: var(--text-secondary);">
        <p>Aucun device trouvé avec ces critères de recherche.</p>
      </div>
    `;
    return;
  }
  // ...
}

Bénéfices :

✅ Feedback clair à l'utilisateur
✅ Évite la confusion (tableau vide vs pas de résultats)

📊 Impact sur l'Expérience Utilisateur

Avant les améliorations

❌ Pas de recherche → difficile de trouver un device parmi beaucoup
❌ Pas de feedback de chargement → utilisateur ne sait pas si l'app fonctionne
❌ Erreurs sans possibilité de retry → frustrant
❌ Pas d'indication de fraîcheur des données

Après les améliorations

✅ Recherche instantanée → trouve un device en quelques secondes
✅ Feedback de chargement clair → utilisateur rassuré
✅ Bouton retry sur erreurs → résolution autonome
✅ Horodatage → confiance dans les données affichées
✅ Bouton actualiser → contrôle total

🔧 Fichiers Modifiés

Fichier	Lignes ajoutées	Lignes modifiées	Type
`frontend/index.html`	19	3	Nouvelle UI
`frontend/js/dashboard.js`	90	30	Fonctionnalités
`frontend/css/components.css`	52	0	Styles

Total : ~160 lignes de code ajoutées/modifiées

🧪 Tests Recommandés

Test 1 : Recherche de devices

1. Ouvrir http://localhost:8087/
2. Taper "lenovo" dans la barre de recherche
3. ✅ Vérifier que seuls les devices contenant "lenovo" s'affichent
4. Cliquer sur "Effacer"
5. ✅ Vérifier que tous les devices réapparaissent

Test 2 : Bouton actualiser

1. Ouvrir http://localhost:8087/
2. Cliquer sur "🔄 Actualiser"
3. ✅ Vérifier que le bouton affiche "⏳ Chargement..."
4. ✅ Vérifier que le bouton est désactivé
5. ✅ Vérifier que l'horodatage se met à jour

Test 3 : Gestion d'erreurs

1. Arrêter le backend : docker compose stop backend
2. Ouvrir http://localhost:8087/
3. Cliquer sur "🔄 Actualiser"
4. ✅ Vérifier qu'un message d'erreur s'affiche
5. ✅ Vérifier qu'un bouton "🔄 Réessayer" est présent
6. Redémarrer le backend : docker compose start backend
7. Cliquer sur "🔄 Réessayer"
8. ✅ Vérifier que les données se chargent correctement

Test 4 : Protection contre chargements multiples

1. Ouvrir la console du navigateur (F12)
2. Cliquer rapidement 5 fois sur "🔄 Actualiser"
3. ✅ Vérifier dans l'onglet Network qu'une seule requête est lancée

Test 5 : Auto-refresh

1. Ouvrir http://localhost:8087/
2. Attendre 30 secondes
3. ✅ Vérifier que l'horodatage se met à jour automatiquement
4. ✅ Vérifier qu'une nouvelle requête apparaît dans Network

📈 Prochaines Améliorations Possibles

Court terme

Ajouter des filtres avancés (par score, par date, par type de device)
Ajouter un tri personnalisable sur les colonnes du tableau
Améliorer le responsive design pour mobile/tablet
Ajouter des tooltips informatifs sur les scores

Moyen terme

Graphiques d'évolution des scores avec Chart.js
Export des données en CSV/JSON
Mode sombre/clair (toggle theme)
Notifications push pour nouveaux benchmarks

Long terme

Dashboard temps réel avec WebSockets
Comparaison de plusieurs devices côte à côte
Historique de recherche
Favoris/épingler des devices

🎨 Design Pattern Utilisés

1. Debouncing

Pour optimiser les performances de la recherche en temps réel :

const debouncedSearch = debounce((query) => {
  filterDevices(query);
}, 300);

2. Loading States

Gestion explicite des états de chargement :

isLoading = true;  // Début
try { ... }
finally { isLoading = false; }  // Fin

3. Graceful Degradation

L'application fonctionne même si certains éléments manquent :

if (!searchInput) return;  // Évite les erreurs si l'élément n'existe pas

4. Progressive Enhancement

Les fonctionnalités de base fonctionnent, les améliorations s'ajoutent :

Sans JS → Affichage statique (dégradé)
Avec JS → Recherche, refresh, animations

📚 Références

✅ Checklist de Validation

Recherche en temps réel fonctionne
Bouton actualiser fonctionne et affiche l'état
Horodatage de dernière mise à jour s'affiche
Erreurs affichent un bouton retry
Skeleton loaders CSS ajoutés
Protection contre chargements multiples
Message "Aucun résultat" pour recherche vide
Tests sur navigateurs différents (Chrome, Firefox, Safari)
Tests sur mobile/tablet
Validation accessibilité (ARIA labels)

Version frontend : 1.1.0 Compatibilité backend : 1.0.1+ Date de validation : 13 décembre 2025 Status : ✅ Prêt pour production

🚀 Déploiement

Les améliorations frontend sont automatiquement actives dès que les fichiers sont mis à jour sur le serveur nginx :

# Redémarrer le frontend (si nécessaire)
docker compose restart frontend

# Vérifier que les fichiers sont bien servis
curl http://localhost:8087/ | grep "searchInput"

Aucune migration de base de données ou changement backend requis ! 🎉

13 KiB Executable File Raw Blame History

Améliorations Frontend - 13 Décembre 2025

📋 Résumé

✨ Nouvelles Fonctionnalités

1. Barre de Recherche avec Filtrage en Temps Réel

2. Bouton d'Actualisation Manuelle

3. Gestion d'Erreurs Améliorée avec Bouton Retry

4. Skeleton Loaders (Indicateurs de Chargement)

5. Protection contre les Chargements Multiples

6. Affichage "Aucun résultat" pour la Recherche

📊 Impact sur l'Expérience Utilisateur

Avant les améliorations

Après les améliorations

🔧 Fichiers Modifiés

🧪 Tests Recommandés

Test 1 : Recherche de devices

Test 2 : Bouton actualiser

Test 3 : Gestion d'erreurs

Test 4 : Protection contre chargements multiples

Test 5 : Auto-refresh

📈 Prochaines Améliorations Possibles

Court terme

Moyen terme

Long terme

🎨 Design Pattern Utilisés

1. Debouncing

2. Loading States

3. Graceful Degradation

4. Progressive Enhancement

📚 Références

✅ Checklist de Validation

🚀 Déploiement

13 KiB

Executable File

Raw Blame History