Feature: show suppression status on active alert rows

Active events now carry an is_suppressed boolean (added in api_status()
and the index() route via check_suppressed() against the pre-loaded
suppression list). The events table renders a muted '🔕 sup' badge next
to the severity and dims the entire row (.row-suppressed) so operators
can immediately see which firing alerts are silenced.

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

app.py

@@ -160,6 +160,16 @@ def index():
     last_check = db.get_state('last_check', 'Never')
     snapshot = json.loads(snapshot_raw) if snapshot_raw else {}
     suppressions = db.get_active_suppressions()
+    for ev in events:
+        sup_type = (
+            'unifi_device' if ev.get('event_type') == 'unifi_device_offline'
+            else 'interface' if ev.get('event_type') == 'interface_down'
+            else 'host'
+        )
+        ev['is_suppressed'] = db.check_suppressed(
+            suppressions, sup_type,
+            ev.get('target_name', ''), ev.get('target_detail', '') or '',
+        )
     recent_resolved = db.get_recent_resolved(hours=24, limit=10)
     return render_template(
         'index.html',
@@ -214,6 +224,17 @@ def suppressions_page():
 @require_auth
 def api_status():
     active = db.get_active_events(limit=_PAGE_LIMIT)
+    suppressions = db.get_active_suppressions()
+    for ev in active:
+        sup_type = (
+            'unifi_device' if ev.get('event_type') == 'unifi_device_offline'
+            else 'interface' if ev.get('event_type') == 'interface_down'
+            else 'host'
+        )
+        ev['is_suppressed'] = db.check_suppressed(
+            suppressions, sup_type,
+            ev.get('target_name', ''), ev.get('target_detail', '') or '',
+        )
     last_check = db.get_state('last_check', 'Never')
     return jsonify({
         'summary': db.get_status_summary(),

static/app.js

@@ -222,9 +222,12 @@ function updateEventsTable(events, totalActive) {
       ? `<a href="${lt.escHtml(ticketBase)}${lt.escHtml(String(e.ticket_id))}" target="_blank"
             class="ticket-link">#${e.ticket_id}</a>`
       : '–';
+    const supBadge = e.is_suppressed
+      ? `<span class="lt-badge badge-suppressed" title="Alert suppressed">🔕 sup</span>`
+      : '';
     return `
-      <tr class="row-${e.severity}">
-        <td><span class="lt-badge badge-${e.severity}">${e.severity}</span></td>
+      <tr class="row-${e.severity}${e.is_suppressed ? ' row-suppressed' : ''}">
+        <td><span class="lt-badge badge-${e.severity}">${e.severity}</span>${supBadge}</td>
         <td>${lt.escHtml(e.event_type.replace(/_/g,' '))}</td>
         <td><strong>${lt.escHtml(e.target_name)}</strong></td>
         <td>${lt.escHtml(e.target_detail || '–')}</td>

static/style.css

@@ -203,6 +203,8 @@
 .lt-table tr.row-warning  td              { background: rgba(255,107,0,.04); }
 .lt-table tr.row-warning  td:first-child  { border-left: 2px solid var(--orange); }
 .lt-table tr.row-resolved td              { opacity: .65; }
+.lt-table tr.row-suppressed td            { opacity: .6; }
+.lt-table tr.row-suppressed td:first-child{ border-left-color: var(--text-muted) !important; }
 
 /* ── Table size modifier ─────────────────────────────────────────── */
 .lt-table-sm th,
@@ -594,6 +596,10 @@
   color: var(--text-muted);
   font-family: var(--font);
 }
+.topo-legend-item--offrack {
+  border: 1px dashed var(--border-color);
+  padding: 1px 5px;
+}
 .topo-legend-line-10g { width: 24px; height: 2px; background: var(--green); display: inline-block; box-shadow: 0 0 4px rgba(0,255,136,.5); }
 .topo-legend-line-1g  { width: 24px; height: 0; border-top: 2px dashed var(--amber); display: inline-block; }
 .topo-legend-line-wan { width: 24px; height: 2px; background: linear-gradient(to right, var(--cyan), var(--green)); display: inline-block; }

templates/index.html

@@ -111,8 +111,11 @@
         <tbody>
           {% for e in events %}
           {% if e.severity != 'info' %}
-          <tr class="row-{{ e.severity }}">
-            <td><span class="lt-badge badge-{{ e.severity }}">{{ e.severity }}</span></td>
+          <tr class="row-{{ e.severity }}{% if e.is_suppressed %} row-suppressed{% endif %}">
+            <td>
+              <span class="lt-badge badge-{{ e.severity }}">{{ e.severity }}</span>
+              {% if e.is_suppressed %}<span class="lt-badge badge-suppressed" title="Alert suppressed">🔕 sup</span>{% endif %}
+            </td>
             <td>{{ e.event_type | replace('_', ' ') }}</td>
             <td><strong>{{ e.target_name }}</strong></td>
             <td>{{ e.target_detail or '–' }}</td>
@@ -302,7 +305,7 @@
       <div class="topo-legend-item"><span class="topo-legend-line-wan"></span> WAN / uplink</div>
       <div class="topo-legend-item"><span class="topo-legend-line-10g"></span> 10G SFP+ (Ceph / VLAN90)</div>
       <div class="topo-legend-item"><span class="topo-legend-line-1g"></span> 1G DHCP (mgmt)</div>
-      <div class="topo-legend-item" style="border:1px dashed var(--border-color); padding:1px 5px; font-size:.56em; color:var(--text-muted);">dashed border = off-rack</div>
+      <div class="topo-legend-item topo-legend-item--offrack">dashed border = off-rack</div>
     </div>
 
   </div><!-- /topo-v2 -->

templates/inspector.html

@@ -6,7 +6,7 @@
 <div class="lt-page-header">
   <div>
     <h1 class="lt-page-title">Network Inspector</h1>
-    <p class="g-page-sub" style="margin-top:4px">
+    <p class="g-page-sub">
       Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
       <span id="inspector-updated" style="margin-left:8px"></span>
     </p>

templates/links.html

@@ -6,7 +6,7 @@
 <div class="lt-page-header">
   <div>
     <h1 class="lt-page-title">Link Debug</h1>
-    <p class="g-page-sub" style="margin-top:4px">
+    <p class="g-page-sub">
       Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
       <span id="links-updated" style="margin-left:8px"></span>
     </p>

templates/suppressions.html

@@ -6,7 +6,7 @@
 <div class="lt-page-header">
   <div>
     <h1 class="lt-page-title">Alert Suppressions</h1>
-    <p class="g-page-sub" style="margin-top:4px">Manage maintenance windows and per-target alert suppression rules.</p>
+    <p class="g-page-sub">Manage maintenance windows and per-target alert suppression rules.</p>
   </div>
 </div>
 
@@ -188,7 +188,7 @@
     <span class="lt-frame-bl">&#x255A;</span>
     <span class="lt-frame-br">&#x255D;</span>
     <div class="lt-section-header">Host &amp; Interface Reference</div>
-    <div style="padding:12px 14px">
+    <div class="lt-section-body">
       <div class="targets-grid">
         {% for name, host in snapshot.hosts.items() %}
         <div class="target-card">