CSS: remove remaining fixable inline styles across templates

- Suppress modal form groups: strip margin-bottom:12px (lt-form-group already has margin-bottom in TDS); use lt-form-group--last for the final group where zero margin is needed - Keyboard shortcuts table: remove width:100% (lt-table is already full- width in base.css) - Settings divider: replace style=margin override with .lt-divider--compact - Topology bus section: move max-width:860px into .topo-bus-section rule Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
CSS: convert all topology inline styles to modifier classes
2026-05-10 23:15:15 -04:00 · 2026-05-10 23:13:24 -04:00 · 2026-05-10 23:11:15 -04:00 · 2026-05-10 23:09:25 -04:00
8 changed files with 68 additions and 24 deletions
@@ -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(),
@@ -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>
@@ -118,6 +118,12 @@
  padding: 0.2rem 0.45rem;
 }

+/* ── Form group modifiers ────────────────────────────────────────── */
+.lt-form-group--last { margin-bottom: 0; }
+
+/* ── Divider compact variant ─────────────────────────────────────── */
+.lt-divider--compact { margin: 1rem 0 0.75rem; }
+
 /* ── Topology section collapse toggle ────────────────────────────── */
 .topo-collapse-btn {
  margin-left: auto;
@@ -203,6 +209,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,
@@ -408,6 +416,9 @@
  background: linear-gradient(to bottom, var(--cyan), var(--green));
  opacity: .7;
 }
+.topo-vc-wire--wan  { background: linear-gradient(to bottom, var(--cyan), rgba(0,212,255,.3)); opacity: .7; }
+.topo-vc-wire--10g  { background: var(--amber); opacity: .6; }
+.topo-vc-wire--mgmt { background: var(--border-color); opacity: .5; }
 /* Blurred copy of the wire for a soft glow halo */
 .topo-vc-wire::before {
  content: '';
@@ -465,6 +476,7 @@
 .topo-v2-sub   { font-size: .58em; color: var(--text-muted); letter-spacing: .02em; }
 .topo-v2-vlan  { font-size: .54em; color: var(--cyan); opacity: .75; }

+.topo-v2-host--bus { min-width: 80px; max-width: 96px; }
 .topo-v2-internet { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); box-shadow: 0 0 12px rgba(0,212,255,.12); }
 .topo-v2-router   { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); box-shadow: 0 0 12px rgba(0,212,255,.14); }
 .topo-v2-switch   { border-color: var(--amber); color: var(--amber); text-shadow: var(--glow-amber); box-shadow: 0 0 12px rgba(255,179,0,.12); }
@@ -514,6 +526,7 @@
 /* Bus rails */
 .topo-bus-section {
  width: 100%;
+  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
@@ -594,6 +607,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; }
@@ -207,7 +207,7 @@
      </div>
      <form id="suppress-form">
        <div class="lt-modal-body">
-          <div class="lt-form-group" style="margin-bottom:12px">
+          <div class="lt-form-group">
            <label class="lt-label" for="sup-type">Target Type</label>
            <select class="lt-select" id="sup-type" name="target_type">
              <option value="host">Host (all interfaces)</option>
@@ -216,20 +216,20 @@
              <option value="all">Global Maintenance</option>
            </select>
          </div>
-          <div class="lt-form-group" id="sup-name-group" style="margin-bottom:12px">
+          <div class="lt-form-group" id="sup-name-group">
            <label class="lt-label" for="sup-name">Target Name</label>
            <input type="text" class="lt-input" id="sup-name" name="target_name" placeholder="e.g. large1">
          </div>
-          <div class="lt-form-group" id="sup-detail-group" style="margin-bottom:12px;display:none">
+          <div class="lt-form-group" id="sup-detail-group" style="display:none">
            <label class="lt-label" for="sup-detail">Interface <span class="lt-field-hint">(interface type only)</span></label>
            <input type="text" class="lt-input" id="sup-detail" name="target_detail" placeholder="e.g. enp35s0">
          </div>
-          <div class="lt-form-group" style="margin-bottom:12px">
+          <div class="lt-form-group">
            <label class="lt-label" for="sup-reason">Reason <span class="required">*</span></label>
            <input type="text" class="lt-input" id="sup-reason" name="reason"
                   placeholder="e.g. Planned switch reboot" required>
          </div>
-          <div class="lt-form-group" style="margin-bottom:0">
+          <div class="lt-form-group lt-form-group--last">
            <label class="lt-label">Duration</label>
            <div class="duration-pills">
              <button type="button" class="pill" data-duration="30">30 min</button>
@@ -258,7 +258,7 @@
        <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
      </div>
      <div class="lt-modal-body">
-        <table class="lt-table" style="width:100%">
+        <table class="lt-table">
          <thead><tr><th>Shortcut</th><th>Action</th></tr></thead>
          <tbody>
            <tr><td>Ctrl / &#x2318; + K</td><td>Command palette</td></tr>
@@ -295,7 +295,7 @@
          </div>
          <div class="lt-field-hint" id="settings-refresh-hint"></div>
        </div>
-        <div class="lt-divider" style="margin:1rem 0 0.75rem"></div>
+        <div class="lt-divider lt-divider--compact"></div>
        <div class="lt-kv-grid">
          <span class="lt-kv-key">User</span>
          <span class="lt-kv-val lt-kv-val--cyan">{{ user.name or user.username }}</span>
@@ -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>
@@ -185,9 +188,9 @@
      </div>
    </div>

-    <!-- WAN wire: cyan → green gradient, labeled -->
+    <!-- WAN wire: cyan → WAN gradient -->
    <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),rgba(0,212,255,.3)); opacity:.7;"></div>
+      <div class="topo-vc-wire topo-vc-wire--wan"></div>
      <span class="topo-vc-label">WAN · 10G SFP+</span>
    </div>

@@ -205,7 +208,7 @@

    <!-- UDM-Pro → USW-Agg (10G SFP+) -->
    <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
      <span class="topo-vc-label">10G SFP+</span>
    </div>

@@ -224,7 +227,7 @@

    <!-- USW-Agg → Pro 24 PoE (10G trunk) -->
    <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
      <span class="topo-vc-label">10G trunk</span>
    </div>

@@ -243,14 +246,14 @@

    <!-- Pro 24 PoE → host bus section -->
    <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--border-color);opacity:.5;"></div>
+      <div class="topo-vc-wire topo-vc-wire--mgmt"></div>
    </div>

    <!-- ══════════════════════════════════════════════════════════════
         TIER 4 connecting bus – two rails (10G green + 1G amber dashed)
         showing dual-homing for all 6 servers
         ══════════════════════════════════════════════════════════ -->
-    <div class="topo-bus-section" style="max-width:860px;">
+    <div class="topo-bus-section">

      <!-- 10G storage bus (Agg → VLAN90) -->
      <div class="topo-bus-10g">
@@ -283,8 +286,8 @@
            <div class="topo-v2-wire-1g"  data-host="{{ hname }}" title="1G → Pro 24 PoE"></div>
          </div>
          <!-- host box -->
-          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }}"
-               data-host="{{ hname }}" style="min-width:80px; max-width:96px;">
+          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }} topo-v2-host--bus"
+               data-host="{{ hname }}">
            <span class="topo-v2-icon">▣</span>
            <span class="topo-v2-label">{{ hlabel }}</span>
            <span class="topo-v2-sub">{{ hsub }}</span>
@@ -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 -->
@@ -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>
@@ -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>
@@ -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">
Author	SHA1	Message	Date
jared	15120a280f	CSS: remove remaining fixable inline styles across templates Lint / Python (flake8) (push) Successful in 48s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 42s Details Test / Python Tests (pytest) (push) Successful in 54s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - Suppress modal form groups: strip margin-bottom:12px (lt-form-group already has margin-bottom in TDS); use lt-form-group--last for the final group where zero margin is needed - Keyboard shortcuts table: remove width:100% (lt-table is already full- width in base.css) - Settings divider: replace style=margin override with .lt-divider--compact - Topology bus section: move max-width:860px into .topo-bus-section rule Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:15:15 -04:00
jared	906869f425	CSS: convert all topology inline styles to modifier classes Lint / Python (flake8) (push) Successful in 41s Details Lint / JS (eslint) (push) Successful in 9s Details Security / Python Security (bandit) (push) Successful in 1m0s Details Test / Python Tests (pytest) (push) Successful in 55s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 4s Details Replace style= attributes on topology wire/node elements with semantic modifier classes: - topo-vc-wire--wan, --10g, --mgmt (wire colour semantics in CSS) - topo-v2-host--bus (bus-section node size constraint) - topo-legend-item--offrack already done in prior commit Zero inline styles remain in the topology section. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:13:24 -04:00
jared	c027b5422a	Feature: show suppression status on active alert rows Lint / Python (flake8) (push) Successful in 45s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 47s Details Test / Python Tests (pytest) (push) Successful in 1m11s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details 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>	2026-05-10 23:11:15 -04:00
jared	d3e8191f26	Cleanup: strip redundant inline styles, add CSS classes Lint / Python (flake8) (push) Successful in 41s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 44s Details Test / Python Tests (pytest) (push) Successful in 52s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - Remove style="margin-top:4px" from .g-page-sub in all three secondary pages (the value is already defined in .g-page-sub rule in style.css) - suppressions.html: replace inline style="padding:12px 14px" with TDS lt-section-body class - index.html topology legend: replace inline dashed-border style with .topo-legend-item--offrack modifier class in style.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:09:25 -04:00