refactor: replace inline onclick with data-action event delegation

The command palette button used an inline onclick handler while every
other interactive element in base.html uses data-action + event
delegation. Now consistent: data-action="open-cmdpalette" handled in
the global footer click listener.

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

app.py

@@ -5,6 +5,7 @@ management UI. Authentication via Authelia forward-auth headers.
 All monitoring and alerting is handled by the separate monitor.py daemon.
 """
 import hashlib
+import html
 import ipaddress
 import json
 import logging
@@ -73,8 +74,8 @@ def _purge_old_jobs_loop():
             for jid, j in list(_diag_jobs.items()):
                 if j['status'] == 'running' and j.get('created_at', 0) < stuck_cutoff:
                     j['status'] = 'done'
-                    j['result'] = {'status': 'error', 'error': 'Diagnostic timed out (thread crash)'}
-                    logger.error(f'Diagnostic job {jid} appeared stuck; marked as errored')
+                    j['result'] = {'status': 'error', 'error': 'Diagnostic abandoned — no activity for 5 minutes.'}
+                    logger.error(f'Diagnostic job {jid} stuck (no activity for 5 min); marked done/error')
 
 
 _purge_thread = threading.Thread(target=_purge_old_jobs_loop, daemon=True)
@@ -132,10 +133,12 @@ def require_auth(f):
             )
         allowed = _config().get('auth', {}).get('allowed_groups', ['admin'])
         if not any(g in allowed for g in user['groups']):
+            safe_user   = html.escape(user['username'])
+            safe_groups = html.escape(', '.join(allowed))
             return (
                 f'<h1>403 – Access denied</h1>'
-                f'<p>Your account ({user["username"]}) is not in an allowed group '
-                f'({", ".join(allowed)}).</p>',
+                f'<p>Your account ({safe_user}) is not in an allowed group '
+                f'({safe_groups}).</p>',
                 403,
             )
         return f(*args, **kwargs)
@@ -143,12 +146,31 @@ def require_auth(f):
 
 
 # ---------------------------------------------------------------------------
-# Page routes
+# Helpers
 # ---------------------------------------------------------------------------
 
 _PAGE_LIMIT = 200  # max events returned per request
 
 
+def _annotate_suppressions(events: list, suppressions: list) -> None:
+    """Annotate each event dict in-place with an is_suppressed bool."""
+    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 '',
+        )
+
+
+# ---------------------------------------------------------------------------
+# Page routes
+# ---------------------------------------------------------------------------
+
+
 @app.route('/')
 @require_auth
 def index():
@@ -160,16 +182,7 @@ 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 '',
-        )
+    _annotate_suppressions(events, suppressions)
     recent_resolved = db.get_recent_resolved(hours=24, limit=10)
     return render_template(
         'index.html',
@@ -225,16 +238,7 @@ def suppressions_page():
 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 '',
-        )
+    _annotate_suppressions(active, suppressions)
     last_check = db.get_state('last_check', 'Never')
     return jsonify({
         'summary': db.get_status_summary(),

static/style.css

@@ -214,8 +214,6 @@
   padding: 1px 7px;
 }
 .g-section-actions  { margin-left: auto; }
-.events-filter-bar  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.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; }

templates/base.html

@@ -144,9 +144,9 @@
       <!-- ⌘K affordance -->
       <button type="button"
               class="lt-btn lt-btn-ghost lt-btn-sm lt-cmd-hint-btn"
+              data-action="open-cmdpalette"
               title="Command palette (Ctrl+K)"
-              aria-label="Open command palette"
-              onclick="if(window.lt&&lt.cmdPalette)lt.cmdPalette.open()">&#x2315;&nbsp;K</button>
+              aria-label="Open command palette">&#x2315;&nbsp;K</button>
 
       <button type="button" class="lt-theme-btn" id="lt-theme-btn"
               aria-label="Toggle theme" title="Toggle light/dark mode">&#x2600;</button>
@@ -324,7 +324,7 @@
       lt.init({ bootName: 'GANDALF' });
 
       // Theme toggle
-      var themeBtn = document.getElementById('lt-theme-btn');
+      const themeBtn = document.getElementById('lt-theme-btn');
       if (themeBtn) themeBtn.addEventListener('click', function() { lt.theme.toggle(); });
 
       // Command palette
@@ -343,11 +343,12 @@
 
     // ── Global footer + key actions ───────────────────────────────────────
     document.addEventListener('click', function(e) {
-      var btn = e.target.closest('[data-action]');
+      const btn = e.target.closest('[data-action]');
       if (!btn) return;
-      var action = btn.getAttribute('data-action');
-      if (action === 'show-keyboard-help' && window.lt)  lt.modal.open('lt-keys-help');
-      if (action === 'open-settings' && window.lt)       lt.modal.open('lt-settings-modal');
+      const action = btn.getAttribute('data-action');
+      if (action === 'open-cmdpalette' && window.lt && lt.cmdPalette) lt.cmdPalette.open();
+      if (action === 'show-keyboard-help' && window.lt)               lt.modal.open('lt-keys-help');
+      if (action === 'open-settings' && window.lt)                    lt.modal.open('lt-settings-modal');
     });
 
     lt.keys.on('r', function() { lt.autoRefresh.now(); });
@@ -366,8 +367,8 @@
 
     // ── Settings modal ────────────────────────────────────────────────────
     (function() {
-      var LS_KEY = 'gandalf_settings';
-      var DEFAULT = { refreshInterval: 30 };
+      const LS_KEY = 'gandalf_settings';
+      const DEFAULT = { refreshInterval: 30 };
 
       function loadSettings() {
         try { return Object.assign({}, DEFAULT, JSON.parse(localStorage.getItem(LS_KEY) || '{}')); }
@@ -381,11 +382,11 @@
 
       function applyRefreshPillUI(interval) {
         document.querySelectorAll('#settings-refresh-pills .pill').forEach(function(p) {
-          var isActive = parseInt(p.dataset.refreshInterval) === interval;
+          const isActive = parseInt(p.dataset.refreshInterval) === interval;
           p.classList.toggle('active', isActive);
           p.setAttribute('aria-pressed', isActive ? 'true' : 'false');
         });
-        var hint = document.getElementById('settings-refresh-hint');
+        const hint = document.getElementById('settings-refresh-hint');
         if (hint) {
           if (interval === 0)        hint.textContent = 'Auto-refresh disabled.';
           else if (interval < 60)    hint.textContent = 'Refreshes every ' + interval + ' seconds.';
@@ -394,16 +395,16 @@
       }
 
       // Init pill UI from saved settings
-      var _settings = loadSettings();
+      const _settings = loadSettings();
       applyRefreshPillUI(_settings.refreshInterval);
 
       // Expose for pages that need to read it (e.g. index.html for autoRefresh)
       window.gandalfSettings = _settings;
 
       document.addEventListener('click', function(e) {
-        var pill = e.target.closest('#settings-refresh-pills .pill[data-refresh-interval]');
+        const pill = e.target.closest('#settings-refresh-pills .pill[data-refresh-interval]');
         if (!pill) return;
-        var interval = parseInt(pill.dataset.refreshInterval);
+        const interval = parseInt(pill.dataset.refreshInterval);
         _settings.refreshInterval = interval;
         saveSettings(_settings);
         applyRefreshPillUI(interval);
@@ -412,16 +413,16 @@
 
     // ── Notification Bell — shows active monitoring alerts ────────────────
     (function() {
-      var bell     = document.getElementById('lt-notif-bell');
-      var panel    = document.getElementById('lt-notif-panel');
-      var list     = document.getElementById('lt-notif-list');
-      var clearBtn = document.getElementById('lt-notif-clear-btn');
-      var wrapEl   = document.getElementById('lt-notif-wrap');
+      const bell     = document.getElementById('lt-notif-bell');
+      const panel    = document.getElementById('lt-notif-panel');
+      const list     = document.getElementById('lt-notif-list');
+      const clearBtn = document.getElementById('lt-notif-clear-btn');
+      const wrapEl   = document.getElementById('lt-notif-wrap');
       if (!bell || !panel) return;
 
-      var _open      = false;
-      var _lastEvents = [];
-      var LS_READ_KEY = 'gandalf_notif_read_before';
+      let _open       = false;
+      let _lastEvents = [];
+      const LS_READ_KEY = 'gandalf_notif_read_before';
 
       function getReadBefore() {
         try { return parseInt(localStorage.getItem(LS_READ_KEY) || '0'); } catch(_) { return 0; }
@@ -440,20 +441,20 @@
       }
 
       function fmtAgo(dateStr) {
-        var diff = Math.floor((Date.now() - toMs(dateStr)) / 1000);
+        const diff = Math.floor((Date.now() - toMs(dateStr)) / 1000);
         if (diff < 60)    return diff + 's ago';
         if (diff < 3600)  return Math.floor(diff/60) + 'm ago';
         if (diff < 86400) return Math.floor(diff/3600) + 'h ago';
         return Math.floor(diff/86400) + 'd ago';
       }
 
-      var SEV_DOT = { critical: 'var(--red)', warning: 'var(--amber)' };
+      const SEV_DOT = { critical: 'var(--red)', warning: 'var(--amber)' };
 
       function renderAlerts(events) {
         _lastEvents = events || [];
-        var readBefore = getReadBefore();
-        var active = _lastEvents.filter(function(e) { return e.severity !== 'info'; });
-        var unreadCount = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
+        const readBefore = getReadBefore();
+        const active = _lastEvents.filter(function(e) { return e.severity !== 'info'; });
+        const unreadCount = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
         lt.notif.set(bell, unreadCount);
 
         if (!active.length) {
@@ -461,8 +462,8 @@
           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)';
+          const isUnread = toMs(e.last_seen) > readBefore;
+          const 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 + '"></div>' +
             '<div class="lt-notif-item-body">' +
@@ -476,14 +477,14 @@
         fetch('/api/status', { credentials: 'same-origin' })
           .then(function(r) { return r.json(); })
           .then(function(data) {
-            var events = data.events || [];
+            const events = data.events || [];
             if (andRender) {
               renderAlerts(events);
             } else {
               _lastEvents = events;
-              var readBefore = getReadBefore();
-              var active = events.filter(function(e) { return e.severity !== 'info'; });
-              var unread = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
+              const readBefore = getReadBefore();
+              const active = events.filter(function(e) { return e.severity !== 'info'; });
+              const unread = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
               lt.notif.set(bell, unread);
             }
           })

templates/index.html

@@ -466,7 +466,7 @@
 {% block scripts %}
 <script>
   // Start auto-refresh using saved settings interval (default 30 s)
-  var _savedInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 30;
+  const _savedInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 30;
   if (_savedInterval > 0) lt.autoRefresh.start(refreshAll, _savedInterval * 1000);
 
   // When settings change, restart auto-refresh with new interval
@@ -477,9 +477,9 @@
 
   // ── Topology collapse toggle ───────────────────────────────────
   (function() {
-    var LS_KEY = 'gandalf_topo_collapsed';
-    var btn    = document.getElementById('topo-toggle-btn');
-    var wrap   = document.getElementById('topo-collapsible-wrap');
+    const LS_KEY = 'gandalf_topo_collapsed';
+    const btn    = document.getElementById('topo-toggle-btn');
+    const wrap   = document.getElementById('topo-collapsible-wrap');
     if (!btn || !wrap) return;
 
     function setCollapsed(v) {
@@ -489,7 +489,7 @@
       try { localStorage.setItem(LS_KEY, v ? '1' : '0'); } catch(_) {}
     }
 
-    var saved = false;
+    let saved = false;
     try { saved = localStorage.getItem(LS_KEY) === '1'; } catch(_) {}
     setCollapsed(saved);
 

templates/inspector.html

@@ -14,10 +14,10 @@
 </div>
 
 <div class="inspector-layout">
-  <div class="inspector-main" id="inspector-main">
+  <div class="inspector-main" id="inspector-main" role="region" aria-label="Switch chassis diagrams">
     <div class="link-loading">Loading inspector data</div>
   </div>
-  <div class="inspector-panel" id="inspector-panel">
+  <div class="inspector-panel" id="inspector-panel" role="complementary" aria-label="Port detail panel">
     <div class="inspector-panel-inner" id="inspector-panel-inner"></div>
   </div>
 </div>

templates/links.html

@@ -36,6 +36,7 @@
 {% block scripts %}
 <script>
 const escHtml = s => lt.escHtml(s);
+const _toIso  = s => s ? s.replace(' UTC', 'Z').replace(' ', 'T') : s;
 
 // ── Formatting helpers ────────────────────────────────────────────
 function fmtRate(bytesPerSec) {
@@ -326,7 +327,7 @@ function renderPortCard(portName, d) {
 function renderUnifiSwitches(unifiSwitches, dataUpdated) {
   if (!unifiSwitches || !Object.keys(unifiSwitches).length) return '';
   const updStr = dataUpdated
-    ? new Date(dataUpdated.replace(' UTC', 'Z').replace(' ', 'T')).toLocaleTimeString()
+    ? new Date(_toIso(dataUpdated)).toLocaleTimeString()
     : '';
   const html = Object.entries(unifiSwitches).map(([swName, sw]) => {
     const ports = sw.ports || {};
@@ -348,7 +349,7 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
 
     return `
       <div class="link-host-panel" id="panel-${CSS.escape(swName)}">
-        <div class="link-host-title" data-action="toggle-panel">
+        <div class="link-host-title" data-action="toggle-panel" role="button" tabindex="0" aria-expanded="true">
           <span class="link-host-name">${escHtml(swName)}</span>
           <span class="link-host-ip">${escHtml(sw.ip || '')}</span>
           <span class="link-host-upd">${escHtml(sw.model || '')}${updStr ? ' · ' + updStr : ''}${poeLoad}</span>
@@ -365,8 +366,11 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
 // ── Panel collapse / expand ───────────────────────────────────────
 function togglePanel(panel) {
   panel.classList.toggle('collapsed');
-  const btn = panel.querySelector('.panel-toggle');
-  if (btn) btn.textContent = panel.classList.contains('collapsed') ? '[+]' : '[–]';
+  const isCollapsed = panel.classList.contains('collapsed');
+  const btn   = panel.querySelector('.panel-toggle');
+  const title = panel.querySelector('.link-host-title');
+  if (btn)   btn.textContent = isCollapsed ? '[+]' : '[–]';
+  if (title) title.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
   const id = panel.id;
   if (id) {
     const collapsed = JSON.parse(sessionStorage.getItem('linksCollapsed') || '{}');
@@ -382,8 +386,10 @@ function restoreCollapseState() {
     if (!panel) continue;
     if (isCollapsed) {
       panel.classList.add('collapsed');
-      const btn = panel.querySelector('.panel-toggle');
-      if (btn) btn.textContent = '[+]';
+      const btn   = panel.querySelector('.panel-toggle');
+      const title = panel.querySelector('.link-host-title');
+      if (btn)   btn.textContent = '[+]';
+      if (title) title.setAttribute('aria-expanded', 'false');
     }
   }
 }
@@ -462,12 +468,12 @@ function renderLinks(data) {
     const sample  = Object.values(ifaces)[0] || {};
     const ip      = sample.host_ip || '';
     const updStr  = data.updated
-      ? new Date(data.updated.replace(' UTC', 'Z').replace(' ', 'T')).toLocaleTimeString()
+      ? new Date(_toIso(data.updated)).toLocaleTimeString()
       : '';
 
     parts.push(`
       <div class="link-host-panel" id="panel-${CSS.escape(hostname)}">
-        <div class="link-host-title" data-action="toggle-panel">
+        <div class="link-host-title" data-action="toggle-panel" role="button" tabindex="0" aria-expanded="true">
           <span class="link-host-name">${escHtml(hostname)}</span>
           <span class="link-host-ip">${escHtml(ip)}</span>
           <span class="link-host-upd">${updStr}</span>
@@ -497,8 +503,10 @@ function applyLinksSearch() {
 function collapseAll() {
   document.querySelectorAll('.link-host-panel').forEach(p => {
     p.classList.add('collapsed');
-    const btn = p.querySelector('.panel-toggle');
-    if (btn) btn.textContent = '[+]';
+    const btn   = p.querySelector('.panel-toggle');
+    const title = p.querySelector('.link-host-title');
+    if (btn)   btn.textContent = '[+]';
+    if (title) title.setAttribute('aria-expanded', 'false');
   });
   sessionStorage.setItem('linksCollapsed', JSON.stringify(
     Object.fromEntries([...document.querySelectorAll('.link-host-panel')].map(p => [p.id, true]))
@@ -508,8 +516,10 @@ function collapseAll() {
 function expandAll() {
   document.querySelectorAll('.link-host-panel').forEach(p => {
     p.classList.remove('collapsed');
-    const btn = p.querySelector('.panel-toggle');
-    if (btn) btn.textContent = '[–]';
+    const btn   = p.querySelector('.panel-toggle');
+    const title = p.querySelector('.link-host-title');
+    if (btn)   btn.textContent = '[–]';
+    if (title) title.setAttribute('aria-expanded', 'true');
   });
   sessionStorage.setItem('linksCollapsed', '{}');
 }
@@ -558,7 +568,7 @@ async function loadLinks() {
 }
 
 loadLinks();
-var _linksInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
+const _linksInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
 if (_linksInterval > 0) lt.autoRefresh.start(loadLinks, Math.max(_linksInterval, 15) * 1000);
 
 window.onGandalfSettingsChanged = function(s) {
@@ -574,6 +584,12 @@ document.addEventListener('click', e => {
   if (e.target.closest('[data-action="expand-all"]'))   { expandAll();   return; }
 });
 
+document.addEventListener('keydown', e => {
+  if (e.key !== 'Enter' && e.key !== ' ') return;
+  const toggleTitle = e.target.closest('[data-action="toggle-panel"]');
+  if (toggleTitle) { e.preventDefault(); togglePanel(toggleTitle.closest('.link-host-panel')); }
+});
+
 document.getElementById('links-search')?.addEventListener('input', applyLinksSearch);
 </script>
 {% endblock %}