Watchtower NOC Dashboard

[+] Status: In Progress [+] Origin: Polk State College [+] Date: 2026.01
>> TECH_STACK:
[FastAPI][React][TypeScript][Redis][WebSocket][ReactFlow][Zustand][TailwindCSS][Proxmox API][LibreNMS API]

A real-time network operations center dashboard built for Polk State College's IT department. Watchtower aggregates data from LibreNMS, Netdisco, Proxmox, and Speedtest into a unified monitoring interface with interactive topology maps, live device status, and WebSocket-driven updates. It replaces the need for expensive commercial NMS platforms by combining open-source tools into a single, purpose-built dashboard.

solomonneas/watchtower-noc 59 commits, TypeScript 52% / Python 43%
Live Demo View Repository 59 Commits Star

The Numbers: Cost Avoidance

SolarWinds NPM Commercial
SLA 100 License $2,877/yr
NTA Module $1,915/yr
NCM Module $1,687/yr
SAM Module $2,644/yr
Annual Total $9,123/yr
$9,123 saved/yr
Watchtower Open Source
LibreNMS $0
Netdisco $0
Redis + FastAPI $0
Development Time Student Project
Annual Total $0/yr
$9,123 annual cost avoidance vs. SolarWinds equivalent stack
🏫
State College Spending Florida state colleges operate under tight IT budgets. Polk State's total IT spend serves 20,000+ students across multiple campuses. See Polk State Budget.
📊
Market Context SolarWinds NPM starts at $2,877/yr for just 100 nodes. Full-stack monitoring (NPM + NTA + NCM + SAM) runs $9,123+/yr. See SolarWinds Pricing and Gartner NMS Reviews.

Sources: SolarWinds NPM Pricing, NTA Pricing, NCM Pricing, SAM Pricing. Prices as of January 2026, SLA 100 tier.

Architecture

Data Sources
LibreNMS
SNMP Metrics
Device status, interfaces, port traffic, CDP/LLDP neighbors
Netdisco
L2 Discovery
MAC tables, device inventory, switch port mappings
Proxmox
Virtualization
VM/container lists, CPU/memory, storage pools
Speedtest CLI
WAN Health
Download/upload speeds, latency, jitter
▼ ▼ ▼ ▼
REST APIs + SNMP Polling
Backend (Python)
APScheduler
Timed polling jobs per data source
▶
Aggregator
Normalize + merge multi-source data
▶
Redis
In-memory topology + metrics cache
▶
FastAPI
REST endpoints + WebSocket server
▼ WebSocket ▼
Real-time push + REST fallback
Frontend (React + TypeScript)
TopologyCanvas
ReactFlow, drag/zoom, clusters, L2/L3 toggle
Sidebar Widgets
Port grid, speedtest, port groups, Proxmox panel
Zustand Store
Global state, WebSocket sync, optimistic updates

Features

🗺️ Interactive Topology Canvas

Draggable network map with expandable clusters, device status indicators, and animated connection links

ReactFlow + Zustand + WebSocket
🔌 Cisco-Style Port Grid

Visual switch port layout with real-time status colors and hover tooltips

Custom React components
📶 Speedtest Widget

Scheduled WAN health tests with CSV history and external link coloring

Ookla CLI + Redis cache
📊 Port Group Monitoring

Aggregate traffic across ports matching a pattern (e.g., all lab ports)

SNMP ifOctets aggregation
⚡ Real-Time Updates

WebSocket pushes live device status, health metrics, and link changes without polling

FastAPI WebSocket + APScheduler
🔗 CDP/LLDP Link Discovery

Automatic discovery of physical connections via CDP/LLDP, merged with static topology.yaml

LibreNMS API + Redis cache
🔀 L2/L3 View Toggle

Switch between Physical (cable connections) and Logical (VLAN relationships) topology views

ReactFlow layout transforms
🖥️ Proxmox Panel

Live dashboard of VMs, containers, and storage pools for selected hypervisor nodes

Proxmox API integration
🔍 Port Search

Find switch ports by searching SNMP descriptions (ifAlias)

LibreNMS API query
📝 Mermaid Export

Export topology as Mermaid diagram for documentation with built-in viewer

Frontend Mermaid generator
🔔 Alert System

Real-time alerts from device status changes with acknowledgment

Derived from device state

Data Flow Example

When a switch goes offline, here is what happens end-to-end:

1
Detection
APScheduler polls LibreNMS API. Device status changed from "up" to "down".
2
Aggregation
Aggregator merges new status with existing topology. Marks device and its links as degraded.
3
Cache Update
Updated topology written to Redis. Old cache invalidated atomically.
4
Broadcast
FastAPI WebSocket pushes topology_update message to all connected clients.
5
State Update
Zustand store receives WebSocket message, updates device and edge state immutably.
6
Re-render
ReactFlow re-renders affected node (red border) and edges (dashed/gray). Alert appears in sidebar.

Key Technical Decisions

WebSocket over polling
Reduces latency and server load for real-time updates
Redis caching
Fast in-memory access for frequently-read topology data
Multi-source aggregation
No single monitoring tool has complete network visibility
ReactFlow for topology
Handles complex graph layouts with built-in pan/zoom/interactions
Zustand over Redux
Simpler state management for medium complexity app
APScheduler
Reliable job scheduling with configurable intervals per data type
YAML configuration
Human-readable, easy to version control (minus secrets)
TypeScript throughout
Type safety for complex nested data models

API Surface

REST Endpoints
  • GET /api/topology - Full topology (nodes + edges)
  • GET /api/devices - All monitored devices with status
  • GET /api/devices/{id}/ports - Port details for a device
  • GET /api/speedtest - Latest speedtest results
  • GET /api/speedtest/history - Historical speedtest CSV
  • GET /api/proxmox/nodes - Proxmox cluster overview
  • GET /api/proxmox/nodes/{node} - VMs and containers for a node
  • GET /api/port-groups - Configured port group aggregations
  • GET /api/alerts - Active alerts
  • POST /api/alerts/{id}/ack - Acknowledge an alert
  • GET /api/mermaid - Topology as Mermaid diagram
  • POST /api/auth/login - Authenticate and receive JWT
  • POST /api/auth/logout - Invalidate session
  • GET /api/settings - Current configuration
  • PUT /api/settings - Update configuration
WebSocket
  • WS /ws - Real-time topology updates, device status changes, alerts

WebSocket messages use JSON with a type field: topology_update, device_status, speedtest_result, alert.

Development Roadmap

Phase 1 ✓
Core Dashboard
  • FastAPI backend
  • React frontend
  • Basic topology
Phase 2 ✓
Dual-View Topology
  • L2/L3 toggle
  • VLAN filtering
  • Cluster nodes
Phase 3 ✓
Integrations
  • LibreNMS polling
  • Proxmox panel
  • Netdisco data
Phase 4 ✓
Auto-Discovery
  • CDP/LLDP links
  • Dynamic topology
  • Collision detection
Phase 5 ✓
Monitoring Widgets
  • Speedtest
  • Port groups
  • Port search
Phase 6 ✓
Export & Polish
  • Mermaid export
  • CSV logging
  • Collapsible widgets
Phase 7 ✓
Authentication
  • JWT auth
  • User sessions
  • Login/logout flow
Phase 8 ✓
Settings UI
  • Config editor
  • Polling controls
  • Theme options
Phase 9 ○
Remote Notifications
  • Discord webhooks
  • Email alerts
  • Escalation rules
Phase 10 ○
Role-Based Access
  • User roles
  • Permission levels
  • Admin panel
Phase 11 ✓
Historical Data
  • InfluxDB integration
  • Time-series metrics
  • Historical charts

Current Status

In Progress
  • FastAPI backend with Redis caching
  • React frontend with ReactFlow topology
  • LibreNMS + Netdisco + Proxmox integrations
  • WebSocket real-time updates
  • CDP/LLDP auto-discovery
  • L2/L3 topology view toggle
  • Cisco-style port grid visualization
  • Speedtest widget with CSV export
  • Port group traffic monitoring
  • Mermaid diagram export
  • JWT authentication and user sessions
  • Settings UI with config editor
  • Historical data with InfluxDB
  • Remote notifications (Discord, email)
  • Role-based access control