diff --git a/static/app.js b/static/app.js index c47dd34..c077aef 100644 --- a/static/app.js +++ b/static/app.js @@ -334,6 +334,10 @@ async function submitSuppress(e) { } } +// ── Suppress form – wired here so the modal works from any page ────── +document.getElementById('suppress-form')?.addEventListener('submit', submitSuppress); +document.getElementById('sup-type')?.addEventListener('change', updateSuppressForm); + // ── Global click delegation ─────────────────────────────────────────── document.addEventListener('click', e => { // Refresh button diff --git a/static/style.css b/static/style.css index ce13f91..fdf2c03 100644 --- a/static/style.css +++ b/static/style.css @@ -96,6 +96,45 @@ content: '…'; } +/* ── Secondary button – dark-mode definition ───────────────────────── + base.css only defines .lt-btn-secondary in its light-theme block, + so dark mode falls back to the default cyan primary appearance. + This restores a visually distinct secondary look in dark mode. */ +.lt-btn-secondary { + background: var(--cyan-dim); + border-color: rgba(0,212,255,.28); + color: var(--cyan); +} +.lt-btn-secondary:hover { + background: rgba(0,212,255,.18); + border-color: rgba(0,212,255,.5); +} + +/* ── ⌘K hint button in header ────────────────────────────────────── */ +.lt-cmd-hint-btn { + font-size: 0.65rem; + opacity: 0.55; + letter-spacing: 0.03em; + padding: 0.2rem 0.45rem; +} + +/* ── Topology section collapse toggle ────────────────────────────── */ +.topo-collapse-btn { + margin-left: auto; + font-size: .7em; + color: var(--text-muted); + background: transparent; + border: 1px solid var(--border-color); + padding: 2px 8px; + cursor: pointer; + font-family: var(--font); + letter-spacing: .04em; + transition: border-color .15s, color .15s; +} +.topo-collapse-btn:hover { border-color: var(--amber); color: var(--amber); } +.topo-collapsible { overflow: hidden; transition: max-height .25s ease; } +.topo-collapsible.is-collapsed { display: none; } + /* ── Animations used by custom components ─────────────────────────── */ @keyframes pulse-red { 0%,100% { box-shadow: 0 0 0 0 rgba(255,45,85,.5); } @@ -145,13 +184,6 @@ .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-header { margin-bottom: 20px; } -.g-page-title { - font-size: 1em; - font-weight: bold; - color: var(--text-accent); - letter-spacing: .06em; -} .g-page-sub { font-size: .78em; color: var(--text-muted); margin-top: 4px; } /* ── Badge severity color variants (used with lt-badge) ───────────── */ @@ -180,7 +212,6 @@ .ts-cell { color: var(--text-muted); font-size: .75em; white-space: nowrap; } .desc-cell { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticket-link{ color: var(--amber); text-shadow: var(--glow-amber); font-weight: bold; } -.empty-state { padding: 28px; text-align: center; color: var(--text-muted); font-size: .82em; } .pagination-notice { font-size: .8em; color: var(--text-muted); padding: 6px 0 8px; } .pagination-notice a { color: var(--amber); } diff --git a/templates/base.html b/templates/base.html index 2cd0920..8e5b2b0 100644 --- a/templates/base.html +++ b/templates/base.html @@ -73,7 +73,6 @@ GANDALF Network Monitor // LotusGuild @@ -96,28 +95,6 @@ Inspector {% if user.groups and 'admin' in user.groups %} -
- - -
- {% else %} @@ -166,11 +143,10 @@ + onclick="if(window.lt&<.cmdPalette)lt.cmdPalette.open()">⌕ K @@ -221,6 +197,59 @@ GANDALF — TDS v1.2 + + + diff --git a/templates/index.html b/templates/index.html index d43be41..0041a33 100644 --- a/templates/index.html +++ b/templates/index.html @@ -62,11 +62,112 @@ + +
+
+

Active Alerts

+ {{ (summary.critical or 0) + (summary.warning or 0) }} +
+
+
+
+ +
+
+ + + +
+
+
+
+ ╚ + ╝ +
Alert Queue
+
+ {% if events %} + {% if total_active is defined and total_active > events|length %} +
Showing {{ events|length }} of {{ total_active }} active alerts — view all via API
+ {% endif %} +
+ + + + + + + + + + + + + + + + + + {% for e in events %} + {% if e.severity != 'info' %} + + + + + + + + + + + + + {% endif %} + {% else %} + + {% endfor %} + +
Active network alerts
SevTypeTargetDetailDescriptionFirst SeenLast SeenFailuresTicketActions
{{ e.severity }}{{ e.event_type | replace('_', ' ') }}{{ e.target_name }}{{ e.target_detail or '–' }}{{ e.description | truncate(60) }} + {{ e.first_seen }} + + {{ e.last_seen }} + {{ e.consecutive_failures }} + {% if e.ticket_id %} + #{{ e.ticket_id }} + {% else %}–{% endif %} + + +
+
+
✔
+
No active alerts
+
+
+
+ {% else %} +
+
✔
+
No active alerts
+
+ {% endif %} +
+
+
+

Network Hosts

+
+
@@ -208,7 +309,7 @@
-
@@ -325,104 +427,6 @@ {% endif %} - -
-
-

Active Alerts

- {{ (summary.critical or 0) + (summary.warning or 0) }} -
-
-
-
- -
-
- - - -
-
-
-
- ╚ - ╝ -
Alert Queue
-
- {% if events %} - {% if total_active is defined and total_active > events|length %} -
Showing {{ events|length }} of {{ total_active }} active alerts — view all via API
- {% endif %} -
- - - - - - - - - - - - - - - - - - {% for e in events %} - {% if e.severity != 'info' %} - - - - - - - - - - - - - {% endif %} - {% else %} - - {% endfor %} - -
Active network alerts
SevTypeTargetDetailDescriptionFirst SeenLast SeenFailuresTicketActions
{{ e.severity }}{{ e.event_type | replace('_', ' ') }}{{ e.target_name }}{{ e.target_detail or '–' }}{{ e.description | truncate(60) }} - {{ e.first_seen }} - - {{ e.last_seen }} - {{ e.consecutive_failures }} - {% if e.ticket_id %} - #{{ e.ticket_id }} - {% else %}–{% endif %} - - -
-
-
✔
-
No active alerts
-
-
-
- {% else %} -
-
✔
-
No active alerts
-
- {% endif %} -
-
-
- {% if recent_resolved %}
@@ -452,59 +456,6 @@
{% endif %} - - - {% endblock %} {% block scripts %} @@ -519,8 +470,28 @@ if (s.refreshInterval > 0) lt.autoRefresh.start(refreshAll, s.refreshInterval * 1000); }; - document.getElementById('suppress-form')?.addEventListener('submit', submitSuppress); - document.getElementById('sup-type')?.addEventListener('change', updateSuppressForm); + // ── Topology collapse toggle ─────────────────────────────────── + (function() { + var LS_KEY = 'gandalf_topo_collapsed'; + var btn = document.getElementById('topo-toggle-btn'); + var wrap = document.getElementById('topo-collapsible-wrap'); + if (!btn || !wrap) return; + + function setCollapsed(v) { + wrap.classList.toggle('is-collapsed', v); + btn.setAttribute('aria-expanded', v ? 'false' : 'true'); + btn.textContent = v ? '▾ Expand' : '▴ Collapse'; + try { localStorage.setItem(LS_KEY, v ? '1' : '0'); } catch(_) {} + } + + var saved = false; + try { saved = localStorage.getItem(LS_KEY) === '1'; } catch(_) {} + setCollapsed(saved); + + btn.addEventListener('click', function() { + setCollapsed(!wrap.classList.contains('is-collapsed')); + }); + })(); function updateEventAges() { document.querySelectorAll('.event-age[data-ts]').forEach(el => {