serv_benchmark/docs/FRONTEND_USB_DETAILS.md

Affichage des Informations USB Détaillées - Frontend

Vue d'ensemble

Section dynamique ajoutée au formulaire de périphériques pour afficher toutes les informations techniques USB extraites lors de l'import.

Comportement

Affichage Conditionnel

La section "Informations USB Détaillées" est :

• ✅ Visible : Si le périphérique contient des données USB (vendor_id, product_id, usb_type, ou interface_classes)
• ❌ Cachée : Si aucune donnée USB n'est présente (périphériques non-USB)

Déclenchement

La section est automatiquement remplie lors de :

1. Import USB CLI (lsusb -v) → Fonction importSelectedUSBDevice()
2. Import USB Structuré (info formatée) → Fonction importUSBStructured()
3. Édition d'un périphérique existant avec données USB

Champs Affichés

Grille Responsive (12 champs)

Champ	Description	Exemple	Source USB
Vendor ID	Identifiant hexadécimal du fabricant	0x0781	idVendor
Product ID	Identifiant hexadécimal du produit	0x55ab	idProduct
Fabricant	Nom du fabricant	SanDisk Corp.	iManufacturer
Type USB Réel	Type basé sur vitesse négociée	USB 3.0	Vitesse → Type
Version USB Déclarée	Version déclarée par le périphérique	USB 3.20	bcdUSB
Vitesse Négociée	Vitesse réelle de connexion	SuperSpeed (5 Gbps)	Détection vitesse
Puissance Max	Consommation maximale	896 mA	MaxPower
Mode Alimentation	Type d'alimentation	Bus Powered	bmAttributes
Alimentation Suffisante	Suffisance du port	✅ Oui / ⚠️ Non	Calcul normatif
Firmware Requis	Nécessite pilote spécifique	✅ Non / ⚠️ Oui	Classe 255
Device Class	Classe du périphérique	0 [unknown]	bDeviceClass
Interface Classes	Classes d'interface (normative)	8 (Mass Storage)	bInterfaceClass

Indicateurs Visuels

Alimentation Suffisante

• ✅ Oui : Le port peut alimenter le périphérique
  • USB 2.0 : MaxPower ≤ 500 mA
  • USB 3.x : MaxPower ≤ 900 mA
• ⚠️ Non : Risque d'alimentation insuffisante

Firmware Requis

• ✅ Non : Utilise des classes USB standard
• ⚠️ Oui (classe 255) : Nécessite pilote + microcode spécifique (Vendor Specific)

Implémentation Technique

HTML Structure

<div class="form-section full-width" id="usb-details-section" style="display: none;">
    <h3>Informations USB Détaillées</h3>
    <div class="usb-details-grid">
        <div class="form-group">
            <label for="usb_vendor_id">
                Vendor ID
                <span class="help-text-inline">(idVendor)</span>
            </label>
            <input type="text" id="usb_vendor_id" readonly>
        </div>
        <!-- ... 11 autres champs ... -->
    </div>
</div>

CSS Grid

.usb-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.usb-details-grid .form-group input[readonly] {
    background-color: #1e1e1e;
    color: #a9b7c6;
    border: 1px solid #3a3a3a;
    cursor: default;
}

Avantages :

• Grille responsive s'adaptant à la largeur d'écran
• Minimum 250px par colonne
• Remplissage automatique de l'espace disponible

JavaScript Logic

function fillUSBDetails(caracteristiques) {
    if (!caracteristiques) {
        // Hide section if no data
        document.getElementById('usb-details-section').style.display = 'none';
        return;
    }

    // Check if we have USB-specific fields
    const hasUSBData = caracteristiques.vendor_id ||
                       caracteristiques.product_id ||
                       caracteristiques.usb_type ||
                       caracteristiques.interface_classes;

    if (!hasUSBData) {
        document.getElementById('usb-details-section').style.display = 'none';
        return;
    }

    // Show section and fill fields
    document.getElementById('usb-details-section').style.display = 'block';

    // Set all fields
    setField('usb_vendor_id', caracteristiques.vendor_id);
    setField('usb_product_id', caracteristiques.product_id);
    // ... etc

    // Format interface classes
    if (caracteristiques.interface_classes?.length > 0) {
        const interfaceClassesStr = caracteristiques.interface_classes
            .map(ic => `${ic.code} (${ic.name})`)
            .join(', ');
        setField('usb_interface_classes', interfaceClassesStr);
    }
}

Workflows Utilisateur

Workflow 1 : Import USB CLI (lsusb -v)

1. Utilisateur clique "Importer USB (lsusb)"
2. Colle la sortie de sudo lsusb -v
3. Sélectionne un périphérique
4. Click "Finaliser"
5. ✅ Formulaire pré-rempli avec section USB détaillée visible
6. Utilisateur vérifie les informations techniques
7. Enregistre le périphérique

Workflow 2 : Import USB Structuré (Info)

1. Utilisateur clique "Importer USB (Info)"
2. Colle les informations formatées
3. Click "Importer"
4. ✅ Formulaire pré-rempli avec section USB détaillée visible
5. Utilisateur complète et enregistre

Workflow 3 : Périphérique Non-USB

1. Utilisateur crée un périphérique manuel (câble, console, etc.)
2. Remplit les champs généraux
3. ❌ Section USB masquée (pas de données USB)
4. Enregistre normalement

Exemples de Rendu

Exemple 1 : Clé USB SanDisk

┌─────────────────────────────────────────────────────────────┐
│ Informations USB Détaillées                                 │
├─────────────────────────────────────────────────────────────┤
│ Vendor ID              │ Product ID                         │
│ 0x0781                 │ 0x55ab                             │
├────────────────────────┼────────────────────────────────────┤
│ Fabricant              │ Type USB Réel                      │
│ SanDisk Corp.          │ USB 3.0                            │
├────────────────────────┼────────────────────────────────────┤
│ Version USB Déclarée   │ Vitesse Négociée                   │
│ USB 3.20               │ SuperSpeed (5 Gbps)                │
├────────────────────────┼────────────────────────────────────┤
│ Puissance Max          │ Mode Alimentation                  │
│ 896 mA                 │ Bus Powered                        │
├────────────────────────┼────────────────────────────────────┤
│ Alimentation Suffisante│ Firmware Requis                    │
│ ✅ Oui                 │ ✅ Non                             │
├────────────────────────┼────────────────────────────────────┤
│ Device Class           │ Interface Classes                  │
│ 0 [unknown]            │ 8 (Mass Storage)                   │
└────────────────────────┴────────────────────────────────────┘

Observations :

• Type USB 3.0 détecté depuis vitesse SuperSpeed
• Alimentation suffisante : 896 mA ≤ 900 mA (USB 3.x)
• Classification normative via bInterfaceClass = 8

Exemple 2 : Adaptateur WiFi Realtek (Firmware Requis)

┌─────────────────────────────────────────────────────────────┐
│ Informations USB Détaillées                                 │
├─────────────────────────────────────────────────────────────┤
│ Vendor ID              │ Product ID                         │
│ 0x0bda                 │ 0x8176                             │
├────────────────────────┼────────────────────────────────────┤
│ Fabricant              │ Type USB Réel                      │
│ Realtek Semiconductor  │ USB 2.0                            │
├────────────────────────┼────────────────────────────────────┤
│ Puissance Max          │ Mode Alimentation                  │
│ 500 mA                 │ Bus Powered                        │
├────────────────────────┼────────────────────────────────────┤
│ Alimentation Suffisante│ Firmware Requis                    │
│ ✅ Oui                 │ ⚠️ Oui (classe 255)               │
├────────────────────────┼────────────────────────────────────┤
│ Interface Classes      │                                    │
│ 255 (Vendor Specific)  │                                    │
└────────────────────────┴────────────────────────────────────┘

Observations :

• ⚠️ Firmware Requis : Nécessite pilote Realtek spécifique
• Classe 255 (Vendor Specific) détectée

Fichiers Modifiés

Frontend

1. frontend/peripherals.html - Lignes 241-325

   • Nouvelle section id="usb-details-section"
   • 12 champs en lecture seule

2. frontend/css/peripherals.css - Lignes 668-685

   • Classe .usb-details-grid
   • Styles pour champs readonly

3. frontend/js/peripherals.js

   • Lignes 32-107 : Fonction fillUSBDetails()
   • Ligne 459 : Appel depuis import CLI
   • Ligne 629 : Appel depuis import structuré

Avantages

✅ Transparence : Toutes les informations USB visibles ✅ Pédagogique : Explications inline (tooltips) ✅ Diagnostic : Détection problèmes alimentation/firmware ✅ Normative : Affichage bInterfaceClass (critique) ✅ Responsive : Adaptation automatique à la taille d'écran ✅ Conditionnel : Masqué pour périphériques non-USB

Limitations

⚠️ Champs en lecture seule : Informations extraites automatiquement, non éditables ⚠️ Pas de validation : Les données proviennent directement de l'import ⚠️ Langue française : Labels en français uniquement

Améliorations Futures

1. Tooltips explicatifs : Au survol, explication détaillée de chaque champ
2. Copie rapide : Bouton pour copier vendor_id:product_id
3. Liens externes : Lien vers USB ID Database pour vendor/product
4. Codes couleur : Rouge/Orange/Vert selon type USB et puissance
5. Export : Bouton pour exporter les infos USB en JSON/YAML
6. Comparaison : Afficher différences avant/après mise à jour