Fix: inspector empty states and diagnostic button accessibility

- Replace .empty-state (removed class) with TDS lt-empty-state--sm in both error branches of renderInspector() and loadInspector() - Diagnostic run button: add aria-label, apply lt-btn TDS classes for consistent styling instead of custom btn-diag-only styling Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
CSS: migrate links.html static inline styles to classes
2026-05-10 23:21:27 -04:00 · 2026-05-10 23:19:32 -04:00 · 2026-05-10 23:18:33 -04:00 · 2026-05-10 23:17:22 -04:00
5 changed files with 57 additions and 27 deletions
@@ -121,8 +121,35 @@
 /* ── Form group modifiers ────────────────────────────────────────── */
 .lt-form-group--last { margin-bottom: 0; }

-/* ── Divider compact variant ─────────────────────────────────────── */
+/* ── Search input size variant ───────────────────────────────────── */
+.lt-search-input--sm { width: 180px; }
+
+/* ── Notification panel helpers ──────────────────────────────────── */
+.lt-notif-empty {
+  padding: 1rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+.lt-notif-view-all {
+  width: 100%;
+  text-align: center;
+  display: block;
+  font-size: 0.72rem;
+}
+.lt-notif-dot {
+  border-radius: 50%;
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+
+/* ── Divider variants ────────────────────────────────────────────── */
 .lt-divider--compact { margin: 1rem 0 0.75rem; }
+.lt-divider--unifi   { margin: 20px 0 12px; }
+.lt-divider-label--unifi { color: var(--cyan); letter-spacing: .1em; }
+
+/* ── Stats grid spacing variant ──────────────────────────────────── */
+.lt-stats-grid--mb { margin-bottom: 16px; }

 /* ── Topology section collapse toggle ────────────────────────────── */
 .topo-collapse-btn {
@@ -191,6 +218,7 @@
 .events-filter-bar .lt-input-sm { width: 220px; }
 .sev-pills          { display: flex; gap: 4px; }
 .g-page-sub { font-size: .78em; color: var(--text-muted); margin-top: 4px; }
+.g-page-sub-aside { font-size: .78em; color: var(--text-muted); margin-left: 8px; }

 /* ── Badge severity color variants (used with lt-badge) ───────────── */
 .badge-critical { color: var(--red);    border-color: var(--red);    text-shadow: var(--glow-red); }
@@ -133,10 +133,10 @@
            <button type="button" class="lt-notif-panel-clear" id="lt-notif-clear-btn">Mark all read</button>
          </div>
          <div class="lt-notif-panel-list" id="lt-notif-list">
-            <div style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Loading&hellip;</div>
+            <div class="lt-notif-empty">Loading&hellip;</div>
          </div>
          <div class="lt-notif-panel-footer">
-            <a href="{{ url_for('index') }}" class="lt-btn lt-btn-ghost lt-btn-sm" style="width:100%;text-align:center;display:block;font-size:0.72rem">View dashboard</a>
+            <a href="{{ url_for('index') }}" class="lt-btn lt-btn-ghost lt-btn-sm lt-notif-view-all">View dashboard</a>
          </div>
        </div>
      </div>
@@ -455,14 +455,14 @@
        lt.notif.set(bell, unreadCount);

        if (!active.length) {
-          list.innerHTML = '<div style="padding:1rem;font-size:0.75rem;color:var(--text-muted);text-align:center">&#x2714; No active alerts</div>';
+          list.innerHTML = '<div class="lt-notif-empty">&#x2714; No active alerts</div>';
          return;
        }
        list.innerHTML = active.slice(0, 25).map(function(e) {
          var isUnread = toMs(e.last_seen) > readBefore;
          var dotColor = SEV_DOT[e.severity] || 'var(--text-muted)';
          return '<div class="lt-notif-item' + (isUnread ? ' lt-notif-item--unread' : '') + '">' +
-            '<div class="lt-notif-dot' + (isUnread ? '' : ' lt-notif-dot--read') + '" style="background:' + dotColor + ';border-radius:50%;margin-top:4px"></div>' +
+            '<div class="lt-notif-dot' + (isUnread ? '' : ' lt-notif-dot--read') + '" style="background:' + dotColor + '"></div>' +
            '<div class="lt-notif-item-body">' +
              '<div class="lt-notif-item-title">' + esc(e.target_name) + (e.target_detail ? ' &middot; ' + esc(e.target_detail) : '') + '</div>' +
              '<div class="lt-notif-item-time">' + esc(e.event_type.replace(/_/g,' ')) + ' &middot; ' + fmtAgo(e.last_seen) + '</div>' +
@@ -486,7 +486,7 @@
            }
          })
          .catch(function() {
-            if (andRender) list.innerHTML = '<div style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Could not load</div>';
+            if (andRender) list.innerHTML = '<div class="lt-notif-empty">Could not load</div>';
          });
      }

@@ -31,32 +31,32 @@
  <div class="lt-stat-card{% if summary.critical %} lt-stat-card--alert{% endif %}"
       id="stat-critical" role="button" tabindex="0"
       data-stat-filter="critical" aria-label="{{ summary.critical or 0 }} critical alerts">
-    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--red);text-shadow:var(--glow-red)">●</span>
+    <span class="lt-stat-icon lt-text-red" aria-hidden="true">●</span>
    <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-critical-val" style="color:var(--red)">{{ summary.critical or 0 }}</span>
+      <span class="lt-stat-value lt-text-red" id="stat-critical-val">{{ summary.critical or 0 }}</span>
      <span class="lt-stat-label">Critical</span>
    </div>
  </div>
  <div class="lt-stat-card"
       id="stat-warning" role="button" tabindex="0"
       data-stat-filter="warning" aria-label="{{ summary.warning or 0 }} warning alerts">
-    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--amber)">●</span>
+    <span class="lt-stat-icon lt-text-amber" aria-hidden="true">●</span>
    <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-warning-val" style="color:var(--amber)">{{ summary.warning or 0 }}</span>
+      <span class="lt-stat-value lt-text-amber" id="stat-warning-val">{{ summary.warning or 0 }}</span>
      <span class="lt-stat-label">Warning</span>
    </div>
  </div>
  <div class="lt-stat-card" id="stat-hosts" aria-label="Monitored hosts">
-    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--cyan)">⬡</span>
+    <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">⬡</span>
    <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-hosts-val" style="color:var(--cyan)">{{ snapshot.hosts | length }}</span>
+      <span class="lt-stat-value lt-text-cyan" id="stat-hosts-val">{{ snapshot.hosts | length }}</span>
      <span class="lt-stat-label">Hosts</span>
    </div>
  </div>
  <div class="lt-stat-card" id="stat-resolved" aria-label="{{ recent_resolved | length }} alerts resolved in last 24 hours">
-    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--green);text-shadow:var(--glow)">✔</span>
+    <span class="lt-stat-icon lt-text-green" aria-hidden="true">✔</span>
    <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-resolved-val" style="color:var(--green)">{{ recent_resolved | length }}</span>
+      <span class="lt-stat-value lt-text-green" id="stat-resolved-val">{{ recent_resolved | length }}</span>
      <span class="lt-stat-label">Resolved 24h</span>
    </div>
  </div>
@@ -315,8 +315,8 @@
  <div class="lt-toolbar" id="host-toolbar">
    <div class="lt-toolbar-left">
      <div class="lt-search">
-        <input type="search" class="lt-input lt-search-input" id="host-search"
-               placeholder="Filter hosts…" autocomplete="off" style="width:180px">
+        <input type="search" class="lt-input lt-search-input lt-search-input--sm" id="host-search"
+               placeholder="Filter hosts…" autocomplete="off">
      </div>
    </div>
  </div>
@@ -8,7 +8,7 @@
    <h1 class="lt-page-title">Network Inspector</h1>
    <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>
+      <span id="inspector-updated" class="g-page-sub-aside"></span>
    </p>
  </div>
 </div>
@@ -320,7 +320,9 @@ function renderPanel(swName, idx) {
    _apiData.hosts && _apiData.hosts[d.lldp.system_name]);
  const diagHtml = hasDiagTarget ? `
    <div class="diag-bar">
-      <button class="btn-diag" data-action="run-diagnostic" data-sw="${escHtml(swName)}" data-idx="${idx}">Run Link Diagnostics</button>
+      <button class="btn-diag lt-btn lt-btn-secondary lt-btn-sm" data-action="run-diagnostic"
+              data-sw="${escHtml(swName)}" data-idx="${idx}"
+              aria-label="Run link diagnostics for port ${idx} on ${escHtml(swName)}">Run Diagnostics</button>
      <span class="diag-status" id="diag-status"></span>
    </div>
    <div class="diag-results" id="diag-results"></div>` : '';
@@ -433,7 +435,7 @@ function renderInspector(data) {
  }

  if (!Object.keys(switches).length) {
-    main.innerHTML = '<p class="empty-state">No switch data available. Monitor may still be initialising.</p>';
+    main.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">⬡</div><div class="lt-empty-state-title">No switch data available</div><div class="lt-empty-state-body">Monitor may still be initialising.</div></div>';
    return;
  }

@@ -460,7 +462,7 @@ async function loadInspector() {
    renderInspector(data);
  } catch (e) {
    document.getElementById('inspector-main').innerHTML =
-      '<p class="empty-state">Failed to load inspector data.</p>';
+      '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">✕</div><div class="lt-empty-state-title">Failed to load inspector data</div></div>';
    lt.toast.error('Failed to load inspector data');
  }
 }
@@ -8,7 +8,7 @@
    <h1 class="lt-page-title">Link Debug</h1>
    <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>
+      <span id="links-updated" class="g-page-sub-aside"></span>
    </p>
  </div>
 </div>
@@ -358,7 +358,7 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
      </div>`;
  }).join('');

-  return `<div class="lt-divider" style="margin:20px 0 12px"><span class="lt-divider-label" style="color:var(--cyan);letter-spacing:.1em">UNIFI SWITCH PORTS</span></div>${html}`;
+  return `<div class="lt-divider lt-divider--unifi"><span class="lt-divider-label lt-divider-label--unifi">UNIFI SWITCH PORTS</span></div>${html}`;
 }

 // ── Panel collapse / expand ───────────────────────────────────────
@@ -412,18 +412,18 @@ function buildLinkSummary(hosts, unifiSwitches) {
  const downCardCls = allDown  > 0 ? ' lt-stat-card--alert' : '';
  const poeCard = totalPoe > 0 ? `
    <div class="lt-stat-card">
-      <span class="lt-stat-icon" aria-hidden="true" style="color:var(--amber)">⚡</span>
+      <span class="lt-stat-icon lt-text-amber" aria-hidden="true">⚡</span>
      <div class="lt-stat-info">
-        <span class="lt-stat-value" style="color:var(--amber)">${totalPoe.toFixed(1)}</span>
+        <span class="lt-stat-value lt-text-amber">${totalPoe.toFixed(1)}</span>
        <span class="lt-stat-label">PoE Load (W)</span>
      </div>
    </div>` : '';
  return `
-    <div class="lt-stats-grid" style="margin-bottom:16px">
+    <div class="lt-stats-grid lt-stats-grid--mb">
      <div class="lt-stat-card">
-        <span class="lt-stat-icon" aria-hidden="true" style="color:var(--cyan)">⬡</span>
+        <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">⬡</span>
        <div class="lt-stat-info">
-          <span class="lt-stat-value" style="color:var(--cyan)">${allTotal}</span>
+          <span class="lt-stat-value lt-text-cyan">${allTotal}</span>
          <span class="lt-stat-label">Interfaces</span>
        </div>
      </div>
Author	SHA1	Message	Date
jared	a3c0818fef	Fix: inspector empty states and diagnostic button accessibility Lint / Python (flake8) (push) Successful in 57s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 45s Details Test / Python Tests (pytest) (push) Successful in 1m13s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - Replace .empty-state (removed class) with TDS lt-empty-state--sm in both error branches of renderInspector() and loadInspector() - Diagnostic run button: add aria-label, apply lt-btn TDS classes for consistent styling instead of custom btn-diag-only styling Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:21:27 -04:00
jared	4dd7fc16f3	CSS: migrate links.html static inline styles to classes Lint / Python (flake8) (push) Successful in 41s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 40s Details Test / Python Tests (pytest) (push) Successful in 48s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 4s Details - lt-divider--unifi / lt-divider-label--unifi: replace hardcoded margin and cyan label color on the UniFi switch section divider - lt-text-amber / lt-text-cyan on stat card icons and values (matches same migration done in index.html) - lt-stats-grid--mb: margin-bottom:16px on the summary stats grid - g-page-sub-aside: replaces margin-left:8px on the updated timestamp span in links and inspector page subtitle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:19:32 -04:00
jared	0b33589106	CSS: extract notification panel inline styles to classes Lint / Python (flake8) (push) Successful in 40s Details Lint / JS (eslint) (push) Successful in 8s Details Security / Python Security (bandit) (push) Successful in 1m7s Details Test / Python Tests (pytest) (push) Successful in 1m42s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - lt-notif-empty: replaces all hardcoded padding/font/color/align on the empty-state and loading/error text in the notification bell panel - lt-notif-view-all: replaces width/text-align/display/font-size inline style on the 'View dashboard' footer link - lt-notif-dot: moves border-radius:50%;margin-top from inline style (only background color remains inline, which is dynamic per-severity) - Initial 'Loading…' text in the panel HTML uses lt-notif-empty Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:18:33 -04:00
jared	ca4bcef26c	CSS: replace remaining inline color/size styles with TDS utilities Lint / Python (flake8) (push) Successful in 57s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 53s Details Test / Python Tests (pytest) (push) Successful in 1m13s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 9s Details - Stat card icons and values: style="color:var(--red)" etc replaced with lt-text-red, lt-text-amber, lt-text-cyan, lt-text-green (defined in base.css with both color and glow-shadow) - Host search input: style="width:180px" extracted to .lt-search-input--sm - base.html: suppress modal form groups use lt-form-group--last for last item (already committed); lt-divider--compact applied to settings divider Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:17:22 -04:00