[TECH DEBT] Alert Threshold Configuration UI

[humanauction]

---

name: Technical Debt Enhancement Template
about: Track future improvements, refactor tasks
title: "[TECH DEBT] Alert Threshold Configuration UI"
labels: 'enhancement, ui, monitoring'
assignees: ''

---

Context

Currently, the dashboard displays real-time network metrics (bandwidth, active connections, protocol breakdown) but does not provide any alerting mechanism when metrics exceed normal operating thresholds. Users must manually monitor the dashboard to detect anomalies like bandwidth spikes, excessive connections, or suspicious traffic patterns.

The dashboard has all the underlying data needed to implement threshold-based alerting, but lacks:

• A UI component to display alerts
• Backend logic to evaluate thresholds
• Configuration interface for setting custom thresholds

Motivation

• Proactive Monitoring: Users need to be notified of anomalies without constant visual monitoring
• Security: Detect potential attacks (port scans, DDoS attempts, unusual protocol usage)
• Performance: Identify bandwidth bottlenecks or connection leaks before they impact operations
• Compliance: Many security frameworks require automated alerting for threshold breaches
• Best Practice: Modern monitoring tools provide threshold-based alerting as a standard feature
• User Experience: Visual indicators help users quickly identify issues requiring attention

Proposed Changes

Option A: Simple Alert Panel (1-4 hours)

• Add alert panel section to dashboard HTML
• Define fixed thresholds in sample-config.yaml:
  • Bandwidth limit (MB/s)
  • Max active connections
  • Max protocol percentage (e.g., UDP >80%)
• Implement backend threshold evaluation in /metrics endpoint
• Return alerts array in metrics JSON response
• Display alerts in dashboard with color coding:
  • 🔴 Critical (red): Immediate action required
  • 🟡 Warning (yellow): Monitor closely
  • 🟢 Info (green): Informational notice
• Show last 5-10 alerts with timestamp
• Auto-dismiss alerts after 60 seconds
• Add CSS styling for alert panel

Option B: Full Configuration UI (Advanced - 4-8 hours)

• All features from Option A
• Add "Settings" section to dashboard
• Create input fields for threshold configuration:
  • Bandwidth limit (MB/s)
  • Connection count limit
  • Protocol distribution percentages
  • Alert retention time
• Add new API endpoints:
  • POST /api/thresholds - Save user-defined thresholds
  • GET /api/thresholds - Retrieve current thresholds
  • GET /api/alerts/history - Get alert history
• Persist thresholds in SQLite database
• Implement alert history log with pagination
• Add "Clear All Alerts" button
• Add "Mute Alerts" toggle (per-session)
• Add unit tests for threshold evaluation logic

Example Alert Messages

• 🔴 Critical: "Bandwidth exceeded 10 MB/s (current: 15.2 MB/s)"
• 🟡 Warning: "100+ active connections detected (current: 127)"
• 🔴 Critical: "Port scan detected from 192.168.1.50 (50+ ports in 10s)"
• 🟡 Warning: "Unusual UDP spike detected (UDP: 85% of traffic)"

Priority

• Low (future enhancement) - Core monitoring functionality is complete; alerting is a value-add feature for production environments

References

• Dashboard implementation: www/app.js, www/index.html, www/style.css
• Backend metrics endpoint: src/daemon/NetMonDaemon.cpp (lines 214-270)
• Configuration file: examples/sample-config.yaml
• Session management: src/core/SessionManager.cpp (for user-specific thresholds)
• Related user story: Stage 5 completion (85% → 100%)
• Design patterns: Threshold-based monitoring, event-driven alerting