Modo Customize en dashboards de monitorización (Wireless, UPS, Signage, Observatory)

Valor para el usuario

Los paneles de seguimiento (Wireless Monitor, UPS Monitor, Digital Signage y Observatory) están bloqueados por defecto para evitar cambios accidentales. Un botón Customize abre modo de edición: arrastra widgets por el título, redimensiónalos por los tiradores (esquina/lados), oculta los que no usas desde la lista Widgets, o vuelve a la disposición de fábrica con Restore default. Done guarda tus cambios y Cancel descarta. Lo guardado es por persona y te sigue a cualquier navegador (ya no se usa la memoria del navegador). En pantalla estrecha (tablet en vertical) los widgets se apilan automáticamente y la edición se desactiva.

Cómo usarla

1. En Wireless › Overview (o UPS, Signage, Observatory), pulsa Customize.
2. Arrastra un widget por su título; redimensiona desde las esquinas/lados.
3. En Widgets, marca/desmarca widgets para ocultarlos temporalmente (dejan de pedir datos).
4. Restore default vuelve a la disposición de fábrica de tu organización.
5. Done para guardar; Cancel para descartar cambios.
6. La disposición se guarda por persona y organización — se ve igual en cualquier navegador.

Detalles técnicos

Arquitectura

• Módulo base (static/js/pages/monitoring/MonitoringDashboard.js + nuevo DashboardCustomize.js): rejilla nace con staticGrid: true (bloqueada). Customize desbloquea vía GridStack y muestra barra de edición.
• Persistencia: POST /api/<app>/dashboard-layout guardando {id, hidden: true} para ocultos. Lectura persona → organización → fábrica en esa prioridad. Signage pasó a layout por usuario (era el único compartido hasta v1.135.0).
• GridStack 12.4.2 → 13.3.0: soporte moderno para tiradores y redimensionamiento fluido.
• Pantallas estrechas: breakpoint 768px. Debajo, columna única + Customize oculto.
• Widget oculto = parado: updateHealthScore, loadRankings, etc. salen temprano si su widget está hidden: true.

Hitos

• v1.133.0 (15-09): Wireless, UPS, Signage con Customize + base compartida.
• v1.133.1 (15-09): Fix de visibilidad de barra de edición (atributo hidden vs display:flex).
• v1.134.0 (15-09): Observatory Overview incorpora Customize.
• v1.135.0 (16-09): Diseño por defecto de organización + Signage multi-usuario.
• v1.136.0 (16-09): Disposición móvil editable (variante ?variant=mobile con guardado separado).

Tests

• Frontend: monitoring_dashboard_customize.test.js (7 casos en v1.133, +52 en v1.135, +61 en v1.136), observatory_customize.test.js (222 LOC).
• Backend: 20 pytest en v1.135 + 4 vitest; 16 pytest + 4 vitest en v1.136.
• Contrato: cada métrica nombrada en un widget debe existir en la API. Prevención de regresiones de datos vacíos.

Cambios secundarios

• CSS: reglas de modo edición en components.css (tokens --space-*, --accent); cursor y tiradores acotados a .is-editing.
• Cache-bust: ?v= incremental en DashboardCustomize.js, MonitoringDashboard.js, plantillas.
• Migración: si había layout guardado en localStorage, se pasa al servidor una sola vez.

Véase también

• [[feature—monitoring—group-toolbar]]
• [[feature—monitoring—group-reports]]