Complete rewrite: full-featured network monitoring dashboard

- Two-service architecture: Flask web app (gandalf.service) + background
  polling daemon (gandalf-monitor.service)
- Monitor polls Prometheus node_network_up for physical NIC states on all
  6 hypervisors (added storage-01 at 10.10.10.11:9100)
- UniFi API monitoring for switches, APs, and gateway device status
- Ping reachability for hosts without node_exporter (pbs only now)
- Smart baseline: interfaces first seen as down are never alerted on;
  only UP→DOWN regressions trigger tickets
- Cluster-wide P1 ticket when 3+ hosts have genuine simultaneous
  interface regressions (guards against false positives on startup)
- Tinker Tickets integration with 24-hour hash-based deduplication
- Alert suppression: manual toggle or timed windows (30m/1h/4h/8h)
- Authelia SSO via forward-auth headers, admin group required
- Network topology: Internet → UDM-Pro → Agg Switch (10G DAC) →
  PoE Switch (10G DAC) → Hosts
- MariaDB schema, suppression management UI, host/interface cards

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/app.js

@@ -1,147 +1,272 @@
-// Initialization
-const UPDATE_INTERVALS = {
-    deviceStatus: 30000,
-    diagnostics: 60000
-};
+'use strict';
 
-// Core update functions
-function updateDeviceStatus() {
-    console.log('Fetching device status...');
-    fetch('/api/status')
-        .then(response => response.json())
-        .then(data => {
-            console.log('Received status data:', data);
-            Object.entries(data).forEach(([deviceName, status]) => {
-                const deviceElement = document.querySelector(`.device-status[data-device-name="${deviceName}"]`);
-                if (deviceElement) {
-                    const indicator = deviceElement.querySelector('.status-indicator');
-                    indicator.className = `status-indicator status-${status ? 'up' : 'down'}`;
-                }
-            });
-        });
+// ── Toast notifications ───────────────────────────────────────────────
+function showToast(msg, type = 'success') {
+  let container = document.querySelector('.toast-container');
+  if (!container) {
+    container = document.createElement('div');
+    container.className = 'toast-container';
+    document.body.appendChild(container);
+  }
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type}`;
+  toast.textContent = msg;
+  container.appendChild(toast);
+  setTimeout(() => toast.remove(), 3500);
 }
 
-function toggleInterfaces(header) {
-    const list = header.nextElementSibling;
-    const icon = header.querySelector('.expand-icon');
-    list.classList.toggle('collapsed');
-    icon.style.transform = list.classList.contains('collapsed') ? 'rotate(-90deg)' : 'rotate(0deg)';
+// ── Dashboard auto-refresh ────────────────────────────────────────────
+async function refreshAll() {
+  try {
+    const [netResp, statusResp] = await Promise.all([
+      fetch('/api/network'),
+      fetch('/api/status'),
+    ]);
+    if (!netResp.ok || !statusResp.ok) return;
+
+    const net    = await netResp.json();
+    const status = await statusResp.json();
+
+    updateHostGrid(net.hosts || {});
+    updateUnifiTable(net.unifi || []);
+    updateEventsTable(status.events || []);
+    updateStatusBar(status.summary || {}, status.last_check || '');
+    updateTopology(net.hosts || {});
+
+  } catch (e) {
+    console.warn('Refresh failed:', e);
+  }
 }
 
-function updateInterfaceStatus(deviceName, interfaces) {
-    const interfaceList = document.querySelector(`.interface-group[data-device-name="${deviceName}"] .interface-list`);
-    if (interfaceList && interfaces) {
-        interfaceList.innerHTML = '';
-        Object.entries(interfaces.ports || {}).forEach(([portName, port]) => {
-            interfaceList.innerHTML += `
-                <div class="interface-item">
-                    <span class="port-name">${portName}</span>
-                    <span class="port-speed">${port.speed.current}/${port.speed.max} Mbps</span>
-                    <span class="port-status ${port.state}">${port.state}</span>
-                </div>
-            `;
-        });
+function updateStatusBar(summary, lastCheck) {
+  const bar = document.querySelector('.status-chips');
+  if (!bar) return;
+  const chips = [];
+  if (summary.critical) chips.push(`<span class="chip chip-critical">⬤ ${summary.critical} Critical</span>`);
+  if (summary.warning)  chips.push(`<span class="chip chip-warning">⬤ ${summary.warning} Warning</span>`);
+  if (!summary.critical && !summary.warning) chips.push('<span class="chip chip-ok">✔ All systems nominal</span>');
+  bar.innerHTML = chips.join('');
+
+  const lc = document.getElementById('last-check');
+  if (lc && lastCheck) lc.textContent = `Last check: ${lastCheck}`;
+}
+
+function updateHostGrid(hosts) {
+  for (const [name, host] of Object.entries(hosts)) {
+    const card = document.querySelector(`.host-card[data-host="${CSS.escape(name)}"]`);
+    if (!card) continue;
+
+    // Update card border class
+    card.className = card.className.replace(/host-card-(up|down|degraded|unknown)/g, '');
+    card.classList.add(`host-card-${host.status}`);
+
+    // Update status dot in header
+    const dot = card.querySelector('.host-status-dot');
+    if (dot) dot.className = `host-status-dot dot-${host.status}`;
+
+    // Update interface rows
+    const ifaceList = card.querySelector('.iface-list');
+    if (ifaceList && host.interfaces && Object.keys(host.interfaces).length > 0) {
+      ifaceList.innerHTML = Object.entries(host.interfaces)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([iface, state]) => `
+          <div class="iface-row">
+            <span class="iface-dot dot-${state}"></span>
+            <span class="iface-name">${escHtml(iface)}</span>
+            <span class="iface-state state-${state}">${state}</span>
+          </div>
+        `).join('');
     }
+  }
 }
 
-function updateSystemHealth(deviceName, diagnostics) {
-    const metricsContainer = document.querySelector(`.health-metrics[data-device-name="${deviceName}"] .metrics-list`);
-    if (metricsContainer && diagnostics) {
-        const cpu = metricsContainer.querySelector('.cpu');
-        const memory = metricsContainer.querySelector('.memory');
-        const temperature = metricsContainer.querySelector('.temperature');
-
-        cpu.innerHTML = `CPU: ${diagnostics.system?.cpu || 'N/A'}%`;
-        memory.innerHTML = `Memory: ${diagnostics.system?.memory || 'N/A'}%`;
-        temperature.innerHTML = `Temp: ${diagnostics.system?.temperature || 'N/A'}°C`;
+function updateTopology(hosts) {
+  document.querySelectorAll('.topo-host').forEach(node => {
+    const name = node.dataset.host;
+    const host = hosts[name];
+    if (!host) return;
+    node.className = node.className.replace(/topo-status-(up|down|degraded|unknown)/g, '');
+    node.classList.add(`topo-status-${host.status}`);
+    const badge = node.querySelector('.topo-badge');
+    if (badge) {
+      badge.className = `topo-badge topo-badge-${host.status}`;
+      badge.textContent = host.status;
     }
+  });
 }
 
-function updateSystemMetrics() {
-    fetch('/api/metrics')
-        .then(response => response.json())
-        .then(data => {
-            updateInterfaceStatus(data.interfaces);
-            updatePowerMetrics(data.power);
-            updateSystemHealth(data.health);
-        });
+function updateUnifiTable(devices) {
+  const tbody = document.querySelector('#unifi-table tbody');
+  if (!tbody || !devices.length) return;
+
+  tbody.innerHTML = devices.map(d => {
+    const statusClass = d.connected ? '' : 'row-critical';
+    const dotClass    = d.connected ? 'dot-up' : 'dot-down';
+    const statusText  = d.connected ? 'Online' : 'Offline';
+    const suppressBtn = !d.connected
+      ? `<button class="btn-sm btn-suppress"
+            onclick="openSuppressModal('unifi_device','${escHtml(d.name)}','')">🔕 Suppress</button>`
+      : '';
+    return `
+      <tr class="${statusClass}">
+        <td><span class="${dotClass}"></span> ${statusText}</td>
+        <td><strong>${escHtml(d.name)}</strong></td>
+        <td>${escHtml(d.type)}</td>
+        <td>${escHtml(d.model)}</td>
+        <td>${escHtml(d.ip)}</td>
+        <td>${suppressBtn}</td>
+      </tr>`;
+  }).join('');
 }
 
-//Metric updates like interfaces, power, and health
+function updateEventsTable(events) {
+  const wrap = document.getElementById('events-table-wrap');
+  if (!wrap) return;
 
-function updateDiagnostics() {
-    fetch('/api/diagnostics')
-        .then(response => response.json())
-        .then(data => {
-            Object.entries(data).forEach(([deviceName, diagnostics]) => {
-                updateInterfaceStatus(deviceName, diagnostics.interfaces);
-                updateSystemHealth(deviceName, diagnostics);
-            });
-        });
+  const active = events.filter(e => e.severity !== 'info');
+  if (!active.length) {
+    wrap.innerHTML = '<p class="empty-state">No active alerts ✔</p>';
+    return;
+  }
+
+  const rows = active.map(e => {
+    const supType = e.event_type === 'unifi_device_offline' ? 'unifi_device'
+                  : e.event_type === 'interface_down'       ? 'interface'
+                  : 'host';
+    const ticket = e.ticket_id
+      ? `<a href="http://t.lotusguild.org/ticket/${e.ticket_id}" target="_blank"
+            class="ticket-link">#${e.ticket_id}</a>`
+      : '–';
+    return `
+      <tr class="row-${e.severity}">
+        <td><span class="badge badge-${e.severity}">${e.severity}</span></td>
+        <td>${escHtml(e.event_type.replace(/_/g,' '))}</td>
+        <td><strong>${escHtml(e.target_name)}</strong></td>
+        <td>${escHtml(e.target_detail || '–')}</td>
+        <td class="desc-cell" title="${escHtml(e.description || '')}">${escHtml((e.description||'').substring(0,60))}${(e.description||'').length>60?'…':''}</td>
+        <td class="ts-cell">${escHtml(e.first_seen||'')}</td>
+        <td>${e.consecutive_failures}</td>
+        <td>${ticket}</td>
+        <td>
+          <button class="btn-sm btn-suppress"
+            onclick="openSuppressModal('${supType}','${escHtml(e.target_name)}','${escHtml(e.target_detail||'')}')">
+            🔕
+          </button>
+        </td>
+      </tr>`;
+  }).join('');
+
+  wrap.innerHTML = `
+    <table class="data-table" id="events-table">
+      <thead>
+        <tr>
+          <th>Severity</th><th>Type</th><th>Target</th><th>Detail</th>
+          <th>Description</th><th>First Seen</th><th>Failures</th><th>Ticket</th><th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>`;
 }
 
-// Element creation functions
-function createDiagnosticElement(device, diagnostics) {
-    const element = document.createElement('div');
-    element.className = `diagnostic-item ${diagnostics.connection_type}-diagnostic`;
-    
-    const content = `
-        <h3>${device}</h3>
-        <div class="diagnostic-details">
-            <div class="status-group">
-                <span class="label">Status:</span>
-                <span class="value ${diagnostics.state.toLowerCase()}">${diagnostics.state}</span>
-            </div>
-            <div class="firmware-group">
-                <span class="label">Firmware:</span>
-                <span class="value">${diagnostics.firmware.version}</span>
-            </div>
-            ${createInterfaceHTML(diagnostics.interfaces)}
-        </div>
-    `;
-    
-    element.innerHTML = content;
-    return element;
+// ── Suppression modal (dashboard) ────────────────────────────────────
+function openSuppressModal(type, name, detail) {
+  const modal = document.getElementById('suppress-modal');
+  if (!modal) return;
+
+  document.getElementById('sup-type').value   = type;
+  document.getElementById('sup-name').value   = name;
+  document.getElementById('sup-detail').value = detail;
+  document.getElementById('sup-reason').value = '';
+  document.getElementById('sup-expires').value = '';
+
+  updateSuppressForm();
+  modal.style.display = 'flex';
+
+  document.querySelectorAll('#suppress-modal .pill').forEach(p => p.classList.remove('active'));
+  const manualPill = document.querySelector('#suppress-modal .pill-manual');
+  if (manualPill) manualPill.classList.add('active');
+  const hint = document.getElementById('duration-hint');
+  if (hint) hint.textContent = 'Suppression will persist until manually removed.';
 }
 
-function createInterfaceHTML(interfaces) {
-    let html = '<div class="interfaces-group">';
-    
-    // Add port information
-    Object.entries(interfaces.ports || {}).forEach(([portName, port]) => {
-        html += `
-            <div class="interface-item">
-                <span class="label">${portName}:</span>
-                <span class="value">${port.speed.current}/${port.speed.max} Mbps</span>
-                <span class="state ${port.state.toLowerCase()}">${port.state}</span>
-            </div>
-        `;
+function closeSuppressModal() {
+  const modal = document.getElementById('suppress-modal');
+  if (modal) modal.style.display = 'none';
+}
+
+function updateSuppressForm() {
+  const type      = document.getElementById('sup-type').value;
+  const nameGrp   = document.getElementById('sup-name-group');
+  const detailGrp = document.getElementById('sup-detail-group');
+  if (nameGrp)   nameGrp.style.display   = (type === 'all') ? 'none' : '';
+  if (detailGrp) detailGrp.style.display = (type === 'interface') ? '' : 'none';
+}
+
+function setDuration(mins) {
+  document.getElementById('sup-expires').value = mins || '';
+
+  document.querySelectorAll('#suppress-modal .pill').forEach(p => p.classList.remove('active'));
+  event.currentTarget.classList.add('active');
+
+  const hint = document.getElementById('duration-hint');
+  if (hint) {
+    if (mins) {
+      const h = Math.floor(mins / 60), m = mins % 60;
+      hint.textContent = `Expires in ${h ? h + 'h ' : ''}${m ? m + 'm' : ''}.`;
+    } else {
+      hint.textContent = 'Suppression will persist until manually removed.';
+    }
+  }
+}
+
+async function submitSuppress(e) {
+  e.preventDefault();
+  const type    = document.getElementById('sup-type').value;
+  const name    = document.getElementById('sup-name').value;
+  const detail  = document.getElementById('sup-detail').value;
+  const reason  = document.getElementById('sup-reason').value;
+  const expires = document.getElementById('sup-expires').value;
+
+  if (!reason.trim()) { showToast('Reason is required', 'error'); return; }
+  if (type !== 'all' && !name.trim()) { showToast('Target name is required', 'error'); return; }
+
+  try {
+    const resp = await fetch('/api/suppressions', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        target_type: type,
+        target_name: name,
+        target_detail: detail,
+        reason: reason,
+        expires_minutes: expires ? parseInt(expires) : null,
+      }),
     });
-    
-    // Add radio information
-    Object.entries(interfaces.radios || {}).forEach(([radioName, radio]) => {
-        html += `
-            <div class="interface-item">
-                <span class="label">${radioName}:</span>
-                <span class="value">${radio.standard} - Ch${radio.channel} (${radio.width})</span>
-            </div>
-        `;
-    });
-    
-    html += '</div>';
-    return html;
+    const data = await resp.json();
+    if (data.success) {
+      closeSuppressModal();
+      showToast('Suppression applied ✔', 'success');
+      setTimeout(refreshAll, 500);
+    } else {
+      showToast(data.error || 'Failed to apply suppression', 'error');
+    }
+  } catch (err) {
+    showToast('Network error', 'error');
+  }
 }
 
-// Initialize updates
-function initializeUpdates() {
-    // Set update intervals
-    setInterval(updateDeviceStatus, UPDATE_INTERVALS.deviceStatus);
-    setInterval(updateDiagnostics, UPDATE_INTERVALS.diagnostics);
+// ── Close modal on backdrop click ─────────────────────────────────────
+document.addEventListener('click', e => {
+  const modal = document.getElementById('suppress-modal');
+  if (modal && e.target === modal) closeSuppressModal();
+});
 
-    // Initial updates
-    updateDeviceStatus();
-    updateDiagnostics();
+// ── Utility ───────────────────────────────────────────────────────────
+function escHtml(str) {
+  if (str === null || str === undefined) return '';
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
 }
-
-// Start the application
-initializeUpdates();