CreaRack-SL

Network Observatory - Documentación Técnica

Network Observatory - Documentación Técnica

Versión: 4.5.0 Fecha: 10-02-2026 Estado: ✅ Producción - Apache ECharts + VictoriaMetrics + Global Alerts


Resumen

Sistema de monitoreo de red en tiempo real integrado en CreaRack Pro. Incluye:

  • Heartbeat/Ping monitoring (latencia, packet loss, uptime)
  • Ping Console: Panel tipo terminal con pings en tiempo real
  • Bandwidth monitoring via SNMP
  • HTTP Health Check (status codes, response time, SSL validation)
  • Global Alerts: Sistema de alertas centralizado con “Apply to All Devices”
  • Asteroids Alert Mode: Efecto visual rojo global cuando hay alertas críticas
  • Gráficos en tiempo real con Apache ECharts (actualizaciones suaves)
  • Peak DataLabels: Muestra valores numéricos en los top 4 picos
  • Drag & Drop Threshold Lines: Ajuste gráfico de umbrales con drag
  • WebSocket streaming para actualizaciones instantáneas
  • Histórico con agregación y retención configurable
  • Auto-start: Monitoreo inicia automáticamente al abrir pestaña
  • Auto-refresh cada 10 segundos (polling automático)
  • Selector de tiempo: 01m, 1h, 6h, 24h con multiplicador click-to-extend (hasta 20m, 8h, 48h, 7d)
  • Animation Toggle (Ani): Botón para habilitar/deshabilitar efecto visual de pulso en cada refresh
  • Global Shine: Brillo global ajustable (100%/120%/140%) desde botón “Shine” en barra superior
  • Settings Modals: Configuración SNMP/HTTP en modales separados

Cambios v4.4.0 (05-02-2026) - ASYNC METRICS WRITE (PERFORMANCE)

Fire-and-Forget VictoriaMetrics Writes:

  • MetricsWriter._fire_and_forget() — nuevo método central para escrituras no bloqueantes
  • Contexto async (Daphne): loop.create_task() sin bloqueo
  • Contexto sync (Ninja views): threading.Thread(daemon=True) fire-and-forget
  • Impacto UX: Gráficas cargan instantáneamente, sin esperar confirmación de VM
  • Errores de VM se loguean sin afectar la respuesta HTTP al usuario

Cambios v4.3.0 (05-02-2026) - GLOBAL SHINE

Global Brightness Toggle:

  • Botón “Shine” en barra superior (templates/base.html), junto a “Wide View”
  • 3 niveles: Off (100%) → Shine 1 (120%) → Shine 2 (140%)
  • CSS filter: brightness() en <body> — GPU-accelerated
  • Persistencia localStorage key crearack_shine
  • restoreShine() al DOMContentLoaded en static/js/base.js
  • Texto y tooltip dinámicos según nivel activo

Cambios v4.2.0 (05-02-2026) - MINUTE RANGE + REFRESH PERSISTENCE

Minute-level Range Selector:

  • Nuevo botón “01m” con ciclo click-to-extend: 01m→05m→10m→20m
  • Backend hours: float en todos los endpoints (VM y PostgreSQL)
  • MetricsReader._hours_to_promql_duration() para conversión de fracciones a PromQL
  • Labels en minúsculas: 01m, 1h, 6h, 24h, 7d
  • formatRangeLabel() centralizado en ObservatoryTabs.js

Refresh Interval Persistence:

  • loadRefreshIntervalFromStorage() se ejecuta antes del render del selector
  • El botón activo (5s/10s/20s) refleja correctamente el estado guardado al restaurar tabs

Cambios v4.1.0 (05-02-2026) - UX IMPROVEMENTS

Animation Toggle (Ani button):

  • Botón “Ani” en las 3 secciones (Heartbeat, Bandwidth, HTTP), entre dropdown de estilos y botón “AL”
  • Efecto de pulso de brillo CSS (brightness 1.0→1.2→1.0) en cada refresh de datos
  • Toggle ON (azul) / OFF (naranja) con persistencia en localStorage
  • EChartsService._flashChart() y EChartsService.toggleAnimation()

Time Range Multiplier:

  • Click repetido en botones Range cicla: 1H→2H→4H→8H, 6H→12H→24H→48H, 24H→48H→72H→7D
  • Texto del botón se actualiza dinámicamente (ej. “4H” en vez de “1H”)
  • Toast informativo la primera vez
  • Observatory.cycleTimeRange() con _rangeMultipliers map

Fixes:

  • Threshold drag snap a enteros (sin decimales) con convertToPixel para snap magnético visual
  • Alert events se acumulan sin deduplicación (antes solo se creaba 1 evento por alerta activa)
  • Modal “Critical Alerts” se auto-cierra al confirmar “Archive All”
  • Lazy tab init — tabs en background no generan warnings; se inicializan al hacer click

Cambios v4.0.0 (05-02-2026) - GLOBAL ALERTS SYSTEM

Modelo centralizado de alertas globales:

  • MonitoringAlert.is_global — Una sola alerta que aplica a TODOS los targets de la organización
  • MonitoringAlert.organization FK — Permite consultas sin necesitar target
  • AlertEvent.target FK — Rastrea qué dispositivo disparó la alerta global
  • Endpoint POST /alerts/global — Crea alerta global (target=NULL)
  • GET /alerts?target_id=X — Devuelve per-device + globales con Q objects

UI del Alert Manager:

  • Checkbox “Apply to All Devices” en el formulario de creación
  • Badge “Global” azul en alertas globales
  • Device Tag prominente en el modal de severidad
  • Delete/Edit/Toggle operan directamente sobre la alerta centralizada

Threshold Lines globales:

  • Las líneas de umbral globales aparecen en TODOS los tabs de dispositivos
  • Distinción visual: etiqueta [Global], grosor 1.5px, dash pattern [6, 4]
  • switchTab() refresca threshold lines al activar un tab

Asteroids Red Alert Mode:

  • Asteroids cambia a rojo cuando hay alertas críticas activas
  • Persistencia cross-page (localStorage) y cross-tab (storage event)
  • Botón estrella se ilumina en rojo
  • Al archivar todas las alertas rojas, restaura el tema del usuario

Cambios v2.3.0 (31-01-2026) - PING CONSOLE

Ping Console (Consola de Ping en Vivo):

  • Panel tipo terminal en la sección Heartbeat
  • Botón “Console” toggle en el header de la sección
  • Al activar, aparece panel a la izquierda (360px ancho)
  • La gráfica se desplaza a la derecha automáticamente
  • Pings en tiempo real cada 2 segundos
  • Colores: verde (success), rojo (timeout/error), gris (info)
  • Scroll vertical automático, altura fija 250px
  • Límite de 50 líneas (auto-limpieza)
  • Font monospace 12px estilo consola

Gráficas uniformes:

  • Todas las gráficas con altura 250px (Heartbeat, Bandwidth, HTTP)
  • Consistencia visual entre todas las secciones

DataLabels en picos:

  • Muestra valores numéricos solo en los top 4 valores más altos
  • Sin unidades (solo número) para no sobrecargar la visualización
  • Texto gris sutil sin fondo
  • Implementado en EChartsService.toggleDataLabels()

Cambios v2.2.0 (31-01-2026) - SETTINGS MODALS

Modales de configuración:

  • SNMP Settings Modal: Community, Port, Interface en modal separado
  • HTTP Settings Modal: URL, Method en modal separado
  • Botón “Settings” en header de cada sección junto al botón Enable/Disable
  • Config-inline eliminado de las secciones (más espacio para gráficas)

Reducción de espacio vertical:

  • Tab content padding: 20px → 12px
  • Header margin/font-size reducidos
  • Metric cards compact: height 60px → 40px
  • Section padding/margin reducidos a 8px

Cambios v2.1.0 (31-01-2026) - UX IMPROVEMENTS

Auto-start de monitoreo:

  • Al abrir una pestaña de dispositivo, se ejecutan automáticamente:
    • Ping inicial (si ping_enabled)
    • SNMP poll inicial (si snmp_enabled)
    • HTTP check inicial (si http_enabled)
  • No es necesario hacer clic en “Ping Now”, “Poll Now” o “Check Now”

Gráficas estables:

  • Las gráficas usan updateSeries() en lugar de recrearse
  • Actualizaciones suaves sin parpadeo
  • Verificación de DOM antes de actualizar (evita errores NaN)

Selector de tiempo (Time Range):

  • Dropdown en cada sección: 1H, 6H, 24H
  • Default: 1 hora
  • Persiste por dispositivo y tipo de gráfica

Botones Enable/Disable:

  • Cada sección (SNMP, HTTP) tiene botón para habilitar/deshabilitar
  • “Enabled” (azul) cuando está activo
  • “Disabled” (neutro) cuando está inactivo
  • Al habilitar, se ejecuta check inicial automáticamente

Auto-save de configuración:

  • Campos de SNMP (Community, Port, Interface) se guardan automáticamente
  • Campos de HTTP (URL, Method) se guardan automáticamente
  • Debounce de 1 segundo (guarda tras dejar de escribir)
  • Toast de confirmación “Config saved”

Modal para crear alertas:

  • Modal propio de la aplicación (no prompt del navegador)
  • Campos: Nombre, Condición, Umbral
  • Alertas aparecen inmediatamente en la sección Alerts de la pestaña

Nuevo endpoint API:

  • PATCH /api/monitoring/targets/{id}/config - Actualizar solo configuración

Bug fixes:

  • Selector de tiempo ya no cierra la sección al seleccionar
  • Alertas se muestran inmediatamente después de crearlas
  • Gráficas no generan errores NaN al recargar contenido

Cambios v2.0.0 (31-01-2026) - REESTRUCTURACIÓN MAYOR

Nueva arquitectura Device-centric:

  • Sidebar basado en Devices: Muestra dispositivos con Network Management (como Terminal Hub)
  • Tabs unificados por dispositivo: Una pestaña contiene todas las gráficas del dispositivo
  • Secciones colapsables: Heartbeat, Bandwidth, HTTP y Alerts con Hide/Show
  • Chart combinado dual-axis: Latency + Packet Loss en una sola gráfica
  • Métricas compactas: 6 columnas con 60px de altura

Código modular:

  • static/js/services/EChartsService.js - Factory DRY para Apache ECharts
  • static/js/services/ApiService.js - Wrapper fetch con CSRF automático
  • static/js/pages/observatory.js - Lógica principal (~430 líneas)
  • static/js/pages/observatory/ObservatoryCharts.js - Funciones de gráficas
  • static/css/pages/observatory.css - Estilos extraídos (~300 líneas)
  • Template reducido: 3,053 → 330 líneas

Nuevos endpoints API:

  • POST /api/monitoring/devices/{id}/enable-monitoring - Crear target desde device
  • GET /api/monitoring/devices - Listar devices con Network Management

Backend sync Device → Target:

  • MonitoringTarget.get_or_create_for_device(device, org) - Auto-sincronización
  • observatory_view inyecta devices desde Django (no solo targets API)

Cambios v1.2.0 (31-01-2026)

  • HTTP Health Check completo: Monitoreo de endpoints HTTP/HTTPS
    • Status codes, response time, content length
    • Validación de certificados SSL y días hasta expiración
    • Detección de redirects
    • Configuración por target: URL, método (GET/HEAD), verificar SSL
    • Alertas: http_response_time_above, http_status_error, http_status_not_ok
  • Multi-View mejorado: Grid de 3 columnas máximo con mini-gráficas de latencia
  • Auto-refresh optimizado: HTTP checks solo para pestañas abiertas (evita timeouts)
  • WebSocket probado: Conexión y suscripción funcionando correctamente
  • Logs de debug limpios: Mensajes de auto-refresh movidos a console.debug

Cambios v1.1.0 (31-01-2026)

  • Multi-tipo de monitoreo: Un target puede tener ping_enabled, snmp_enabled, http_enabled habilitados simultáneamente
  • Menú contextual: Click en target muestra opciones de vista (Heartbeat, Bandwidth, HTTP)
  • Configuración centralizada de gráficas (chartDefaults): Todas las gráficas usan opciones unificadas
  • Botón “Show Values”: Muestra valores en gráficas temporalmente (3 segundos)
  • Auto-refresh SNMP: Polling automático cada 10 segundos para targets con snmp_enabled
  • Delete targets: Botón de eliminar funcional con confirmación
  • Curvas rectas: Gráficas usan curve: 'straight' para evitar artefactos visuales
  • ASGI con Uvicorn: Soporte para WebSockets

Acceso

  • URL: /monitoring/
  • API Base: /api/monitoring/
  • WebSocket: ws://host/ws/monitoring/

Arquitectura

Stack Tecnológico

ComponenteTecnología
BackendDjango 6 + Ninja API
WebSocketDjango Channels
GráficosApache ECharts 5.5.0
SNMPpysnmp-lextudio 6.3
HTTP Clienthttpx
Base de datosPostgreSQL

Modelos de Datos

monitoring/models.py
├── MonitoringTarget      # Dispositivo/IP a monitorear
│   ├── ping_enabled      # Bool: Habilitar ping monitoring
│   ├── snmp_enabled      # Bool: Habilitar SNMP bandwidth
│   ├── http_enabled      # Bool: Habilitar HTTP health check
│   └── monitor_types     # Property: Lista de tipos habilitados
├── MetricSample          # Muestras individuales (granular)
├── AggregatedMetric      # Métricas agregadas por hora
├── MonitoringAlert       # Configuración de alertas
└── AlertEvent            # Historial de alertas disparadas

API Endpoints

Targets (CRUD)

MétodoEndpointDescripción
GET/api/monitoring/targetsListar targets
POST/api/monitoring/targetsCrear target
GET/api/monitoring/targets/{id}Obtener target
PUT/api/monitoring/targets/{id}Actualizar target
DELETE/api/monitoring/targets/{id}Eliminar target

Métricas y Ping

MétodoEndpointDescripción
POST/api/monitoring/targets/{id}/pingEjecutar ping y guardar métricas
GET/api/monitoring/targets/{id}/metricsMétricas históricas (params: metric_type, hours)
GET/api/monitoring/targets/{id}/historyHistórico agregado (params: metric_type, days)
GET/api/monitoring/targets/{id}/statsEstadísticas (uptime%, avg, min, max)

SNMP/Bandwidth

MétodoEndpointDescripción
POST/api/monitoring/targets/{id}/snmp/testTest conexión SNMP
GET/api/monitoring/targets/{id}/snmp/interfacesListar interfaces SNMP
POST/api/monitoring/targets/{id}/snmp/pollPoll métricas SNMP
GET/api/monitoring/targets/{id}/bandwidthHistórico bandwidth (Mbps)

HTTP Health Check

MétodoEndpointDescripción
POST/api/monitoring/targets/{id}/http/checkEjecutar HTTP check
GET/api/monitoring/targets/{id}/http/historyHistórico response times

Respuesta de HTTP check:

{
    "status": "up",
    "status_code": 200,
    "response_time_ms": 45.2,
    "content_length": 12456,
    "ssl_valid": true,
    "ssl_expires_days": 89,
    "redirect_url": null,
    "url_checked": "https://example.com/",
    "timestamp": "2026-01-31T17:00:00Z",
    "alerts_triggered": 0,
    "error": null
}

Alertas

MétodoEndpointDescripción
GET/api/monitoring/alertsListar alertas configuradas
POST/api/monitoring/targets/{id}/alertsCrear alerta
DELETE/api/monitoring/alerts/{id}Eliminar alerta
GET/api/monitoring/alerts/activeAlertas activas (sin resolver)
POST/api/monitoring/alerts/{id}/acknowledgeReconocer alerta

Tipos de condición soportados:

  • latency_above - Latencia ping supera umbral (ms)
  • packet_loss_above - Pérdida de paquetes supera umbral (%)
  • down_for - Target caído
  • bandwidth_above - Bandwidth supera umbral (Mbps)
  • http_response_time_above - Response time HTTP supera umbral (ms)
  • http_status_error - Status code >= 400
  • http_status_not_ok - Status code no es 2xx

Overview

MétodoEndpointDescripción
GET/api/monitoring/overviewResumen general (up, down, avg latency)

WebSocket

Conexión

const ws = new WebSocket('ws://localhost:8000/ws/monitoring/');

Mensajes Client → Server

// Suscribirse a targets
{"type": "subscribe", "target_ids": [1, 2, 3]}

// Desuscribirse
{"type": "unsubscribe", "target_ids": [2]}

// Heartbeat
{"type": "ping"}

Mensajes Server → Client

// Actualización de métricas
{
    "type": "metric_update",
    "target_id": 1,
    "metrics": {"status": "up", "latency_ms": 15.2, "packet_loss": 0},
    "timestamp": "2026-01-30T22:00:00Z"
}

// Alerta disparada
{
    "type": "alert_triggered",
    "alert_id": 5,
    "alert_name": "High Latency",
    "target_id": 1,
    "target_name": "Google DNS",
    "value": 150.5,
    "timestamp": "2026-01-30T22:00:00Z"
}

Management Commands

Ping automático a todos los targets

# Una ejecución
python manage.py ping_targets

# Modo continuo (cada 10 segundos)
python manage.py ping_targets --continuous --interval 10

Limpieza de datos antiguos

# Eliminar métricas > 30 días y alertas resueltas > 90 días
python manage.py cleanup_metrics

# Personalizar retención
python manage.py cleanup_metrics --days 7 --alert-days 30

# Dry run (ver qué se eliminaría)
python manage.py cleanup_metrics --dry-run

Agregación de métricas

# Agregar últimas 24 horas en buckets de 1 hora
python manage.py aggregate_metrics

# Agregar más horas
python manage.py aggregate_metrics --hours 168

Crontab recomendado (producción)

# Ping cada 10 segundos (usar supervisor/systemd para modo continuo)
*/1 * * * * cd /app && python manage.py ping_targets

# Agregación cada hora
0 * * * * cd /app && python manage.py aggregate_metrics

# Limpieza diaria a las 3 AM
0 3 * * * cd /app && python manage.py cleanup_metrics

Frontend

Sistema de Pestañas

  • Overview: Dashboard general con métricas agregadas y target cards
  • Heartbeat: Monitoreo de ping por target (latencia, packet loss)
  • Bandwidth: Monitoreo SNMP por target (In/Out Mbps)
  • HTTP: Health check HTTP/HTTPS por target
  • Multi-View: Comparación de múltiples targets con mini-gráficas

Menú Contextual

Click en un target del sidebar o en Overview muestra un menú con opciones:

  • Heartbeat (Ping): Abrir tab de monitoreo ping
  • Bandwidth (SNMP): Abrir tab de monitoreo SNMP
  • HTTP Check: Abrir tab de monitoreo HTTP

Pestañas HTTP

Cada pestaña HTTP muestra:

  • Métricas: Status, Code, Response Time, SSL Cert
  • Gráfica: Response time history (actualiza cada 10s)
  • Configuración: URL, Method (GET/HEAD), Verify SSL

Multi-View

  • Grid de máximo 3 columnas (responsive: 2 en pantallas medianas, 1 en pequeñas)
  • Cada tarjeta muestra: Status, Latency, Packet Loss, indicador de tendencia
  • Mini-gráfica sparkline de latencia (última hora)
  • Auto-refresh cada 10 segundos

Persistencia

Las pestañas abiertas se guardan en localStorage con key observatory_tabs y se restauran al recargar.

Apache ECharts - Configuración Centralizada

Todas las gráficas usan EChartsService (static/js/services/EChartsService.js) como factory centralizada. Esto significa que modificando un solo método o valor en EChartsService se ajustan las tres gráficas de cada dispositivo.

Configuración compartida (un cambio afecta a las 3 gráficas)

Qué se comparteMétodo / FuenteEfecto
Grid layoutgetBaseOptions()Márgenes idénticos (left:65, right:65, top:40, bottom:65)
TooltipgetBaseOptions()Formato hora es-ES, crosshair, estilo oscuro
DataZoom (scroll + slider)getDataZoom()Slider inferior y zoom con rueda del ratón
ToolboxgetToolbox()Zoom rect, reset, export PNG, data view
xAxis type: 'time'getBaseOptions()Auto-rango basado en datos, formato HH:mm
Threshold linesgetThresholdMarkLines()Estilo de líneas de alerta (colores por severidad)
Threshold areasgetThresholdMarkAreas()Zonas sombreadas de alerta

Sincronización entre gráficas (echarts.connect)

Las 3 gráficas de un dispositivo se conectan mediante echarts.connect() en ObservatoryCharts.js:connectDeviceCharts():

// Se ejecuta automáticamente al crear cada gráfica
echarts.connect([heartbeatChart, bandwidthChart, httpChart]);

Lo que sincroniza connect:

  • Hover/tooltip cruzado (mover ratón en una gráfica muestra tooltip en las otras)
  • DataZoom porcentual (zoom en una gráfica aplica el mismo % en las otras)

Lo que NO sincroniza (es independiente por gráfica):

  • Escala del yAxis (cada métrica tiene su unidad: ms, %, Mbps)
  • Series data (cada gráfica fetches su endpoint)
  • Zoom state en localStorage (key por chart: observatory_zoom_{chartKey})

Controles globales por dispositivo (Observatory Alpine.js)

Estos controles aplican a las 3 gráficas simultáneamente desde observatory.js:

ControlMétodoEfecto en las 3 gráficas
Range (01m, 1h, 6h, 24h)setGlobalTimeRange()Re-fetches datos con las mismas hours
Chart Style dropdownEChartsService.setChartStyle()Aplica estilo (line, area, bar, scatter…)
Animation (Ani)EChartsService.toggleAnimation()On/Off pulso visual en refresh
Show ValuesEChartsService.toggleDataLabels()Top 4 picos durante 3 segundos
Alert Lines (AL)EChartsService.toggleMarkLines()Muestra/oculta líneas de umbral
Pause/ResumeEChartsService.pauseDeviceCharts()Brush-zoom pausa las 3, resume las despausa
Reset ZoomresetDeviceZoom()Reset dataZoom 0-100% en las 3
Export PNGexportDeviceCharts()Exporta las 3 como PNG

Patrón de actualización (identico en las 3)

Las tres funciones de update siguen el mismo patrón — solo actualizan series data, dejando que ECharts auto-escale los ejes:

// Heartbeat
chart.setOption({ series: [{ data: latencyData }, { data: lossData }] });

// Bandwidth
chart.setOption({ series: [{ data: inData }, { data: outData }, { data: aggregateData }] });

// HTTP
chart.setOption({ series: [{ data: responseData }, { data: mirrorData }] });

Importante: Ningún updateX() modifica xAxis ni yAxis — esto garantiza que ECharts mantenga sincronía perfecta entre las 3 gráficas cuando están conectadas.

Colores por defecto

// Heartbeat
latency:    '#3b82f6'  // Azul
packetLoss: '#ff9800'  // Naranja

// Bandwidth
inbound:    '#4caf50'  // Verde
outbound:   '#2196f3'  // Azul
aggregate:  '#ff9800'  // Naranja (dashed, hidden by default)

// HTTP
response:   '#10b981'  // Esmeralda (con visualMap: verde → amarillo → rojo)

Estilos de gráfica disponibles

13 estilos configurables desde el dropdown, aplicables a cualquier gráfica:

EstiloDescripción
line-smoothLínea suave (default)
line-sharpLínea recta
line-thickLínea gruesa sin área
line-dotsLínea con puntos
area-solidÁrea sólida (estilo PRTG)
area-stackedÁrea apilada
area-gradientGradiente dual-color (estilo ECharts demo)
step / step-areaEscalón con/sin área
bar / bar-thinBarras normales/finas
scatter / scatter-largePuntos dispersos

Auto-Refresh

El sistema ejecuta automáticamente cada 10 segundos:

  1. Ping a todos los targets con ping_enabled
  2. SNMP poll a todos los targets con snmp_enabled
  3. HTTP check solo para targets con pestaña HTTP abierta (evita timeouts)
  4. Actualización de gráficas y métricas en pestañas abiertas
  5. Refresh de Multi-View tabs

Configuración SNMP

Para monitorear bandwidth de un dispositivo:

  1. Crear target con snmp_enabled: true
  2. En la pestaña Bandwidth, configurar:
    • Community: public (o la community string del dispositivo)
    • Port: 161 (puerto SNMP estándar)
    • Interface: índice de la interfaz a monitorear (1, 2, etc.)
  3. Click “Save Config”
  4. Click “Test SNMP” para verificar conectividad
  5. Click “Poll Now” para recolectar datos

SNMPv3 (v1.0.37)

Las credenciales v3 se almacenan en MonitoringTarget.config (JSONField):

{
  "snmp_version": "v3",
  "snmp_v3_username": "snmpuser",
  "snmp_v3_auth_protocol": "SHA256",
  "snmp_v3_auth_key": "authPassphrase",
  "snmp_v3_priv_protocol": "AES128",
  "snmp_v3_priv_key": "privPassphrase"
}

SNMPService.from_config() detecta v3 automáticamente y construye UsmUserData via build_snmp_auth(). Los dispositivos descubiertos con v3 en Auto-Provision propagan sus credenciales al crear el MonitoringTarget.

OIDs Soportados

  • ifDescr (1.3.6.1.2.1.2.2.1.2)
  • ifSpeed (1.3.6.1.2.1.2.2.1.5)
  • ifOperStatus (1.3.6.1.2.1.2.2.1.8)
  • ifInOctets / ifHCInOctets
  • ifOutOctets / ifHCOutOctets
  • ifInErrors / ifOutErrors

Configuración HTTP

Para monitorear un endpoint HTTP/HTTPS:

  1. Crear target con http_enabled: true
  2. Abrir pestaña HTTP desde el menú contextual
  3. Configurar:
    • URL: Endpoint a monitorear (ej: https://example.com/health)
    • Method: GET o HEAD
    • Verify SSL: Activar para validar certificados
  4. Click “Save Config”
  5. Click “Check Now” para ejecutar check manual

Métricas recolectadas

  • Status Code: Código HTTP de respuesta
  • Response Time: Tiempo de respuesta en ms
  • Content Length: Tamaño de respuesta en bytes
  • SSL Valid: Si el certificado es válido
  • SSL Expires Days: Días hasta expiración del certificado
  • Redirect URL: URL final si hubo redirects

Archivos Principales

monitoring/
├── __init__.py
├── models.py              # MonitoringTarget, MetricSample, etc.
├── api.py                 # Endpoints Django Ninja
├── views.py               # Vista observatory_view
├── urls.py                # URL /monitoring/
├── routing.py             # WebSocket routing
├── consumers.py           # MonitoringConsumer (WebSocket)
├── admin.py               # Admin interfaces
├── services/
│   ├── __init__.py
│   ├── ping_service.py    # PingService (icmplib)
│   ├── snmp_service.py    # SNMPService para bandwidth
│   ├── http_service.py    # HttpService para health checks
│   └── alert_service.py   # Evaluación de alertas
└── management/
    └── commands/
        ├── ping_targets.py      # Ping automático
        ├── cleanup_metrics.py   # Limpieza de datos
        └── aggregate_metrics.py # Agregación horaria

templates/monitoring/
└── observatory.html       # Página principal con todo el JS

static/js/vendor/
└── echarts.min.js         # Apache ECharts local (evita CSP)

Dependencias

# requirements.txt
pysnmp-lextudio>=6.3.0    # SNMP polling
icmplib>=3.0              # Ping nativo (sin subprocess)
httpx>=0.27.0             # HTTP client async
# Dockerfile
iputils-ping              # Comando ping en contenedor (fallback)

Notas de Desarrollo

Para continuar el desarrollo

  1. Leer este documento
  2. Revisar Documentation/archive/plans/NETWORK_OBSERVATORY_PLAN.md para el plan original
  3. Ejecutar la batería de pruebas en tests/monitoring/TEST_CHECKLIST.md

Completado en v2.1.0

  • Auto-start de monitoreo al abrir pestaña
  • Gráficas estables con updateSeries() (sin recrear)
  • Selector de tiempo (1H, 6H, 24H) por sección
  • Botones Enable/Disable para SNMP y HTTP
  • Auto-save de configuración con debounce
  • Modal para crear alertas (reemplaza prompt nativo)
  • Endpoint PATCH para actualizar config

Completado en v1.2.0

  • Multi-tipo de monitoreo por target
  • Menú contextual para selección de vista
  • Botón “Show Values” para valores temporales
  • Configuración centralizada de gráficas
  • Auto-refresh con SNMP polling
  • Curvas rectas para evitar artefactos visuales
  • Delete de targets funcional
  • HTTP Health Check completo
  • Multi-View con mini-gráficas
  • WebSocket funcionando

Pendiente de pulir

  • Añadir tests automatizados
  • Documentar API en Swagger/OpenAPI
  • Exportar métricas a CSV

Última actualización: 10-02-2026 (v4.5.0 - Documentación sincronización centralizada de gráficas)

Véase también

  • [[crearack-tech—admin—monitoring-tools]] — herramientas admin de monitorización
  • [[crearack-tech—architecture—realtime-monitoring-plan]] — plan de monitorización en tiempo real
  • [[crearack-tech—architecture—wireless-monitor]] — plan de monitorización wireless
  • [[crearack-tech—agents—dev-observatory]] — agente técnico del Observatory
  • [[entity—monitoring—model—monitoringtarget]] — modelo MonitoringTarget
  • [[entity—monitoring—model—slapolicy]] — modelo SlaPolicy
  • [[crearack—monitoring—que-es-observatory]] — qué es Network Observatory