Auto-Provision UX — panel en vivo + asignación inline (s115)

Funcionalidaddraftcreado Mon Jun 08#network #auto-provision #ux #product #s115 #discovery #frontend #device-management

Resumen

En la sesión s115, se completaron las Partes 2 y 3 de la iniciativa Auto-Provision UX, cerrando la iniciativa conjuntamente con el botón Refresh y las búsquedas guardadas. Dos mejoras sustanciales que simplifican el flujo de descubrimiento e ingesta masiva de equipos de red.

Parte 2: Panel de descubrimiento en vivo

Durante el escaneo (single device o subnet scan), dentro del modal de Auto-Provision aparece un panel en vivo que muestra:

Lista de fases (izquierda): Ping → ARP → SNMP → HTTP → Enrich. Cada fase pasa por estados:
- Pending (defecto, gris).
- Active (latido azul con anillo expansivo).
- Done (check verde + hito fijo, p.ej. “3 hosts alive”, “2 SNMP OK”).
- Skipped (línea punteada, si la fase es opcional o falla).
Feed de dispositivos (derecha): lista scrollable que se rellena conforme aparecen dispositivos en cada fase. Cada item muestra:
- IP del dispositivo (monospace).
- Vendor + tipo detectado (p.ej. “Cisco · Switch”).
- Badge de método de descubrimiento (SNMP/SSH/PING con colores).
- Micro-animación de entrada (respeta prefers-reduced-motion).

Componentes:

Nuevo módulo static/js/network/auto_provision/live_panel.js (LivePanel).
HTML en #discovery-progress (debajo de la barra existente).
CSS en static/css/pages/auto_provision.css.
Mock de diseño: _design/autoprovision-live-panel.html (716 líneas, funcional y documentado).

Interfaz pública (LivePanel):

LivePanel.setPhaseActive(phase)                    // marca fase actual
LivePanel.setPhaseDone(phase, milestone)           // fija fase + hito
LivePanel.setPhaseSkipped(phase, milestone)        // fase omitida
LivePanel.addDevice({ip, vendor, type, method})    // inserta dispositivo en feed
LivePanel.reset()                                  // resetea para nuevo escaneo

Parte 3: Asignación de destino inline + Apply

El Step 2 (tabla de resultados) ahora incluye:

Columna “Destination” por dispositivo: desplegable con opciones prerellenadas según tipo detectado:
- Rack
- Wireless AP
- Wireless Controller
- UPS
- Digital Signage
- Observatory
Barra de asignación masiva:
- “Apply to selected” — selecciona filas marcadas y asigna el mismo destino en bloque.
- “Auto by type” — rellena todos automáticamente según sus tipos detectados.
Botón “Apply” (parpadeo + globo informativo):
- Llama al nuevo endpoint POST /auto-provision/assign-types (Parte 3).
- Crea/rutea todo en una pasada (no requiere pasos intermedios).
- Persist device_type en DeviceProfile (clave que usan monitores para incluir el equipo).

Se elimina el Step 3 (selector de destinos que había antes). El asistente queda en 2 pasos únicamente.

Nuevo endpoint:

POST /auto-provision/assign-types (network/api/assign.py)
Requiere: require_perm(network, edit) + scope org (cross-tenant safe).
Payload: lista de {profile_id, device_type}.
Respuesta: {updated: n}.
5 tests en test_network_assign_types.py.

Beneficios

Antes	Después
Barra de progreso opaca (solo %).	Panel que muestra en directo cada fase completándose + hitos + dispositivos encontrados.
3 pasos: discovery → selector destinos → aplicar.	2 pasos: discovery → asignar y aplicar en la misma tabla.
Destino decidido antes de ver resultados.	Destino asignado después de inspeccionar los dispositivos descubiertos (con opción masiva).
Sin opción masiva; requería repetir por tipo.	Masivo integrado (“Apply to selected”, “Auto by type”).

Cierre de iniciativa

Junto con:

Botón Refresh en el modal (Parte 1, sesión anterior).
Búsquedas guardadas persistidas en BD (Parte 4b, sesión s115).

Se cierra completamente la iniciativa “Auto-Provision UX”. El asistente es ahora intuitivo, rápido y visual.

Véase también

[[entity—network—endpoint—assign-types]]
[[entity—network—service—live-panel]]
[[concept—network—device-discovery]]
[[concept—saas—multi-tenancy]]
[[feature—network—autoprovision-saved-searches]]