serv_benchmark/docs/FEATURE_PCI_FORM_PREFILL.md

Pré-remplissage complet du formulaire PCI

Contexte

Lors de l'import de périphériques PCI, certains champs n'étaient pas pré-remplis dans le formulaire:

• Le sous-type n'était pas sélectionné (select vide)
• Le Device ID (slot PCI comme 08:00.0) n'était pas rempli
• Le fabricant de carte (pour GPU) n'était pas rempli

Problèmes résolus

1. Sous-type non sélectionné

Problème: Le champ type_principal était pré-rempli avec "PCI", mais le select sous_type restait vide car les options n'étaient pas chargées avant de tenter de sélectionner la valeur.

Solution: Appeler loadPeripheralSubtypes() après avoir défini le type_principal, puis définir le sous_type.

// Fill type_principal and trigger sous_type loading
if (suggested.type_principal) {
    document.getElementById('type_principal').value = suggested.type_principal;
    // Load subtypes for this type
    await loadPeripheralSubtypes();
    // Then set the sous_type value
    if (suggested.sous_type) {
        document.getElementById('sous_type').value = suggested.sous_type;
    }
}

2. Device ID manquant

Problème: Le slot PCI (ex: 08:00.0) n'était pas pré-rempli dans le champ device_id.

Solution: Ajouter le slot dans les données suggérées du backend.

Backend - peripherals.py

suggested = {
    "nom": nom,
    "type_principal": type_principal,
    "sous_type": sous_type,
    "marque": brand or device_info.get("vendor_name"),
    "modele": model or device_info.get("device_name"),
    "device_id": device_info.get("slot"),  # PCI slot (e.g., 08:00.0)
    "pci_device_id": device_info.get("pci_device_id"),  # vendor:device (e.g., 10de:2504)
    "cli_raw": device_section,
    "caracteristiques_specifiques": caracteristiques_specifiques
}

Frontend - peripherals.js

// Fill Device ID (PCI slot like 08:00.0)
if (suggested.device_id) {
    const deviceIdField = document.getElementById('device_id');
    if (deviceIdField) deviceIdField.value = suggested.device_id;
}

3. Fabricant de carte manquant

Problème: Pour les cartes graphiques, le fabricant de la carte (ex: Gigabyte) extrait du subsystem n'était pas pré-rempli.

Solution: Le backend extrait déjà le fabricant, il suffit de le pré-remplir dans le frontend.

// Fill fabricant if present (for GPU cards)
if (suggested.fabricant) {
    const fabricantField = document.getElementById('fabricant');
    if (fabricantField) fabricantField.value = suggested.fabricant;
}

Champs pré-remplis automatiquement

Lors de l'import d'un périphérique PCI, le formulaire pré-remplit maintenant:

Champs de base

• ✅ Nom: Construit à partir de marque + modèle (ex: NVIDIA GeForce RTX 3060 Lite Hash Rate)
• ✅ Type principal: PCI
• ✅ Sous-type: Classification automatique (ex: Carte graphique, SSD NVMe, etc.)
• ✅ Marque: Premier mot du vendor (ex: NVIDIA, Micron)
• ✅ Modèle: Nom commercial du périphérique (ex: GeForce RTX 3060 Lite Hash Rate)

Champs spécifiques PCI

• ✅ Device ID: Slot PCI (ex: 08:00.0)
• ✅ PCI Device ID: Identifiant vendor:device (ex: 10de:2504)
• ✅ Fabricant: Fabricant de la carte pour GPU (ex: Gigabyte)

Champs techniques

• ✅ CLI Raw: Sortie complète de lspci pour ce périphérique
• ✅ Caractéristiques spécifiques: JSON avec:
  • Slot PCI
  • Device class
  • Vendor name
  • Subsystem
  • Driver
  • IOMMU group
  • Revision
  • Modules

Exemple complet - NVIDIA RTX 3060

Données d'entrée

08:00.0 VGA compatible controller: NVIDIA Corporation GA106 [GeForce RTX 3060 Lite Hash Rate] (rev a1) (prog-if 00 [VGA controller])
    Subsystem: Gigabyte Technology Co., Ltd Device 4074
    Flags: bus master, fast devsel, latency 0, IRQ 84, IOMMU group 16
    Kernel driver in use: nvidia

Formulaire pré-rempli

Champ	Valeur	Source
Nom	NVIDIA GeForce RTX 3060 Lite Hash Rate	brand + model
Type principal	PCI ✅	Classification automatique
Sous-type	Carte graphique ✅	Classification automatique
Marque	NVIDIA	Premier mot de "NVIDIA Corporation"
Modèle	GeForce RTX 3060 Lite Hash Rate	Contenu des brackets [...]
Fabricant	Gigabyte ✅	Premier mot du subsystem
Device ID	08:00.0 ✅	Slot PCI
PCI Device ID	10de:2504	Vendor:device depuis lspci -n

Caractéristiques spécifiques (JSON)

{
  "slot": "08:00.0",
  "device_class": "VGA compatible controller",
  "vendor_name": "NVIDIA Corporation",
  "subsystem": "Gigabyte Technology Co., Ltd Device 4074",
  "driver": "nvidia",
  "iommu_group": "16",
  "revision": "a1",
  "modules": "nvidia"
}

Exemple complet - Micron NVMe SSD

Données d'entrée

01:00.0 Non-Volatile memory controller: Micron/Crucial Technology P2 [Nick P2] / P3 / P3 Plus NVMe PCIe SSD (DRAM-less) (rev 01)
    Subsystem: Micron/Crucial Technology P2 [Nick P2] / P3 / P3 Plus NVMe PCIe SSD (DRAM-less)
    Kernel driver in use: nvme

Formulaire pré-rempli

Champ	Valeur	Source
Nom	Micron P2/P3/P3 Plus NVMe PCIe SSD (DRAM-less)	brand + model
Type principal	PCI ✅	Classification automatique
Sous-type	SSD NVMe ✅	Classification automatique
Marque	Micron	Premier mot de "Micron/Crucial Technology"
Modèle	P2/P3/P3 Plus NVMe PCIe SSD (DRAM-less)	Nettoyé des brackets
Device ID	01:00.0 ✅	Slot PCI
PCI Device ID	c0a9:5407	Vendor:device depuis lspci -n

Workflow de pré-remplissage

1. User colle lspci -v et lspci -n
2. Backend détecte les périphériques
3. User sélectionne un périphérique (ex: 08:00.0)
4. Backend extrait et parse les informations
   ├─ Parse vendor/device name intelligemment
   ├─ Classifie le périphérique (type + sous-type)
   ├─ Extrait marque et modèle
   ├─ Extrait fabricant (pour GPU)
   └─ Construit les caractéristiques spécifiques
5. Frontend ouvre le formulaire d'ajout
6. Pré-remplissage séquentiel:
   ├─ Champs de base (nom, marque, modèle)
   ├─ Type principal → déclenche chargement sous-types
   ├─ Sous-type (une fois les options chargées) ✅
   ├─ Fabricant (si GPU)
   ├─ Device ID (slot PCI) ✅
   ├─ PCI Device ID (vendor:device)
   └─ Caractéristiques spécifiques (JSON)
7. User valide/modifie et sauvegarde

Code modifié

Backend - peripherals.py (ligne 1507)

"device_id": device_info.get("slot"),  # Ajouté: slot PCI

Frontend - peripherals.js

Lignes 1822-1830: Chargement async des sous-types

if (suggested.type_principal) {
    document.getElementById('type_principal').value = suggested.type_principal;
    await loadPeripheralSubtypes();  // IMPORTANT: async
    if (suggested.sous_type) {
        document.getElementById('sous_type').value = suggested.sous_type;
    }
}

Lignes 1833-1836: Fabricant

if (suggested.fabricant) {
    const fabricantField = document.getElementById('fabricant');
    if (fabricantField) fabricantField.value = suggested.fabricant;
}

Lignes 1839-1842: Device ID (slot PCI)

if (suggested.device_id) {
    const deviceIdField = document.getElementById('device_id');
    if (deviceIdField) deviceIdField.value = suggested.device_id;
}

Bénéfices

✅ Formulaire complet: Tous les champs pertinents sont pré-remplis ✅ Gain de temps: L'utilisateur n'a plus qu'à valider ✅ Moins d'erreurs: Les types et sous-types sont correctement sélectionnés ✅ Traçabilité: Le slot PCI permet d'identifier précisément le périphérique ✅ Distinction GPU: Le fabricant de carte est séparé du fabricant du chipset

Tests

Pour tester le pré-remplissage complet:

1. Importer un périphérique PCI (GPU ou NVMe)
2. Vérifier que le formulaire affiche:
   • Type principal: PCI ✅
   • Sous-type: Sélectionné automatiquement ✅
   • Device ID: Slot PCI (ex: 08:00.0) ✅
   • Fabricant: Pour GPU uniquement ✅
   • PCI Device ID: vendor:device (ex: 10de:2504) ✅

Fichiers modifiés

1. backend/app/api/endpoints/peripherals.py - Ajout du device_id (slot)
2. frontend/js/peripherals.js - Pré-remplissage async du sous-type + device_id + fabricant

Conclusion

Le formulaire d'import PCI pré-remplit maintenant tous les champs disponibles, offrant une expérience utilisateur optimale avec validation minimale requise.