Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jared
|
1f8a99bbd4 | ||
|
jared
|
9d6583a08a |
@@ -8,6 +8,7 @@ import hashlib
|
||||
import ipaddress
|
||||
import json
|
||||
import logging
|
||||
import os
|
||||
import re
|
||||
import threading
|
||||
import time
|
||||
@@ -15,7 +16,7 @@ import uuid
|
||||
from datetime import datetime, timezone
|
||||
from functools import wraps
|
||||
|
||||
from flask import Flask, jsonify, render_template, request
|
||||
from flask import Flask, jsonify, make_response, render_template, request, send_file
|
||||
|
||||
import db
|
||||
import diagnose
|
||||
@@ -169,6 +170,7 @@ def index():
|
||||
last_check=last_check,
|
||||
suppressions=suppressions,
|
||||
recent_resolved=recent_resolved,
|
||||
daemon_ok=_daemon_ok(last_check),
|
||||
)
|
||||
|
||||
|
||||
@@ -442,6 +444,82 @@ def api_diagnose_poll(job_id: str):
|
||||
return jsonify({'status': job['status'], 'result': job.get('result')})
|
||||
|
||||
|
||||
@app.route('/api/avatar')
|
||||
@require_auth
|
||||
def api_avatar():
|
||||
"""Serve the current user's LDAP avatar photo (JPEG), cached to disk."""
|
||||
username = request.headers.get('Remote-User', '').strip()
|
||||
if not username:
|
||||
return '', 404
|
||||
|
||||
ldap_cfg = _config().get('ldap', {})
|
||||
if not ldap_cfg.get('host') or not ldap_cfg.get('bind_dn'):
|
||||
return '', 404
|
||||
|
||||
# Build a safe cache filename from the username (alphanumeric + - _ .)
|
||||
safe_name = re.sub(r'[^a-zA-Z0-9._-]', '_', username)
|
||||
cache_dir = ldap_cfg.get('cache_dir', '/tmp/gandalf_avatars')
|
||||
os.makedirs(cache_dir, exist_ok=True)
|
||||
cache_file = os.path.join(cache_dir, f'user_{safe_name}.jpg')
|
||||
sentinel = os.path.join(cache_dir, f'user_{safe_name}.none')
|
||||
cache_ttl = int(ldap_cfg.get('cache_ttl', 3600))
|
||||
|
||||
now = time.time()
|
||||
|
||||
# Serve cached image if fresh
|
||||
if os.path.exists(cache_file) and now - os.path.getmtime(cache_file) < cache_ttl:
|
||||
return send_file(cache_file, mimetype='image/jpeg',
|
||||
max_age=cache_ttl, conditional=True)
|
||||
|
||||
# Skip LDAP if we already know this user has no avatar
|
||||
if os.path.exists(sentinel) and now - os.path.getmtime(sentinel) < cache_ttl:
|
||||
return '', 404
|
||||
|
||||
# Query lldap
|
||||
avatar_data = None
|
||||
try:
|
||||
import ldap3
|
||||
server = ldap3.Server(ldap_cfg['host'], port=int(ldap_cfg.get('port', 3890)))
|
||||
conn = ldap3.Connection(server,
|
||||
user=ldap_cfg['bind_dn'],
|
||||
password=ldap_cfg.get('bind_pw', ''),
|
||||
auto_bind=True, receive_timeout=5)
|
||||
safe_uid = ldap3.utils.conv.escape_filter_chars(username)
|
||||
conn.search(ldap_cfg.get('user_base', 'ou=people,dc=example,dc=com'),
|
||||
f'(uid={safe_uid})', attributes=['avatar'])
|
||||
if conn.entries and conn.entries[0]['avatar'].value:
|
||||
avatar_data = conn.entries[0]['avatar'].value
|
||||
conn.unbind()
|
||||
except ImportError:
|
||||
logger.error('ldap3 not installed — run: pip install ldap3')
|
||||
return '', 404
|
||||
except Exception as e:
|
||||
logger.error(f'LDAP avatar lookup failed for {username}: {e}')
|
||||
return '', 404
|
||||
|
||||
if not avatar_data or len(avatar_data) < 100:
|
||||
open(sentinel, 'w').close()
|
||||
return '', 404
|
||||
|
||||
# Validate JPEG magic bytes (FF D8 FF)
|
||||
if isinstance(avatar_data, str):
|
||||
avatar_data = avatar_data.encode('latin-1')
|
||||
if avatar_data[:3] != b'\xFF\xD8\xFF':
|
||||
logger.warning(f'Non-JPEG avatar data for {username}')
|
||||
open(sentinel, 'w').close()
|
||||
return '', 404
|
||||
|
||||
with open(cache_file, 'wb') as f:
|
||||
f.write(avatar_data)
|
||||
if os.path.exists(sentinel):
|
||||
os.unlink(sentinel)
|
||||
|
||||
resp = make_response(avatar_data)
|
||||
resp.headers['Content-Type'] = 'image/jpeg'
|
||||
resp.headers['Cache-Control'] = f'private, max-age={cache_ttl}'
|
||||
return resp
|
||||
|
||||
|
||||
@app.route('/health')
|
||||
def health():
|
||||
"""Health check endpoint (no auth). Checks DB and monitor freshness."""
|
||||
|
||||
@@ -24,6 +24,15 @@
|
||||
"url": "http://10.10.10.45/create_ticket_api.php",
|
||||
"api_key": "5acc5d3c647b84f7c6f59082ce4450ee772e2d1633238b960136f653d20c93af"
|
||||
},
|
||||
"ldap": {
|
||||
"host": "10.10.10.39",
|
||||
"port": 3890,
|
||||
"bind_dn": "uid=gandalf,ou=people,dc=example,dc=com",
|
||||
"bind_pw": "AZ-eUFRxamnlLEELuDy5-Mh6z-2cJbL_YJZnu64Tf0A",
|
||||
"user_base": "ou=people,dc=example,dc=com",
|
||||
"cache_dir": "/tmp/gandalf_avatars",
|
||||
"cache_ttl": 3600
|
||||
},
|
||||
"auth": {
|
||||
"allowed_groups": ["admin"]
|
||||
},
|
||||
|
||||
+14
-9
@@ -877,8 +877,12 @@ class NetworkMonitor:
|
||||
# ------------------------------------------------------------------
|
||||
# Snapshot collection (for dashboard)
|
||||
# ------------------------------------------------------------------
|
||||
def _collect_snapshot(self, iface_states: Dict[str, Dict[str, bool]]) -> dict:
|
||||
unifi_devices = self.unifi.get_devices() or []
|
||||
def _collect_snapshot(
|
||||
self, iface_states: Dict[str, Dict[str, bool]],
|
||||
unifi_devices: Optional[List[dict]] = None,
|
||||
) -> dict:
|
||||
# Accept pre-fetched devices; fall back to empty list if unavailable
|
||||
display_unifi = unifi_devices if unifi_devices is not None else []
|
||||
|
||||
hosts = {}
|
||||
for instance, ifaces in iface_states.items():
|
||||
@@ -914,7 +918,7 @@ class NetworkMonitor:
|
||||
|
||||
return {
|
||||
'hosts': hosts,
|
||||
'unifi': unifi_devices,
|
||||
'unifi': display_unifi,
|
||||
'updated': datetime.utcnow().isoformat(),
|
||||
}
|
||||
|
||||
@@ -933,23 +937,24 @@ class NetworkMonitor:
|
||||
# 1. Fetch interface states once — shared by snapshot and alert processing
|
||||
iface_states = self.prom.get_interface_states()
|
||||
|
||||
# 2. Collect and store snapshot for dashboard
|
||||
snapshot = self._collect_snapshot(iface_states)
|
||||
# 2. Fetch UniFi devices once — used by both snapshot and alert processing
|
||||
unifi_devices = self.unifi.get_devices()
|
||||
|
||||
# 3. Collect and store snapshot for dashboard
|
||||
snapshot = self._collect_snapshot(iface_states, unifi_devices)
|
||||
db.set_state('network_snapshot', snapshot)
|
||||
db.set_state('last_check', _now_utc())
|
||||
|
||||
# 3. Collect link stats (ethtool + traffic metrics)
|
||||
# 4. Collect link stats (ethtool + traffic metrics)
|
||||
try:
|
||||
link_data = self.link_stats.collect(self._instance_map)
|
||||
db.set_state('link_stats', link_data)
|
||||
except Exception as e:
|
||||
logger.error(f'Link stats collection failed: {e}', exc_info=True)
|
||||
|
||||
# 4. Process alerts using already-fetched interface states
|
||||
# 5. Process alerts using already-fetched data
|
||||
suppressions = db.get_active_suppressions()
|
||||
self._process_interfaces(iface_states, suppressions)
|
||||
|
||||
unifi_devices = self.unifi.get_devices()
|
||||
self._process_unifi(unifi_devices, suppressions)
|
||||
|
||||
self._process_ping_hosts(suppressions)
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
flask>=2.2.0
|
||||
gunicorn>=20.1.0
|
||||
ldap3>=2.9
|
||||
pymysql>=1.1.0
|
||||
requests>=2.31.0
|
||||
urllib3>=2.0.0
|
||||
|
||||
+12
-4
@@ -33,7 +33,9 @@ function _toIso(s) {
|
||||
// ── Dashboard auto-refresh ────────────────────────────────────────────
|
||||
async function refreshAll() {
|
||||
const refreshBtn = document.querySelector('[data-action="refresh"]');
|
||||
const spinner = document.getElementById('refresh-spinner');
|
||||
if (refreshBtn) refreshBtn.classList.add('is-loading');
|
||||
if (spinner) spinner.style.display = '';
|
||||
try {
|
||||
const [netResult, statusResult] = await Promise.allSettled([
|
||||
lt.api.get('/api/network'),
|
||||
@@ -56,6 +58,7 @@ async function refreshAll() {
|
||||
}
|
||||
} finally {
|
||||
if (refreshBtn) refreshBtn.classList.remove('is-loading');
|
||||
if (spinner) spinner.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,6 +81,13 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
|
||||
else if (warnCount) document.title = `(${warnCount} WARN) GANDALF`;
|
||||
else document.title = 'GANDALF';
|
||||
|
||||
const alertBadge = document.getElementById('alert-count-badge');
|
||||
if (alertBadge) {
|
||||
const total = critCount + warnCount;
|
||||
alertBadge.textContent = total;
|
||||
alertBadge.style.display = total ? '' : 'none';
|
||||
}
|
||||
|
||||
// Stale data banner: warn if last_check is older than 15 minutes
|
||||
let staleBanner = document.getElementById('stale-banner');
|
||||
if (lastCheck) {
|
||||
@@ -132,9 +142,7 @@ function updateTopology(hosts) {
|
||||
const host = hosts[name];
|
||||
if (!host) return;
|
||||
node.className = node.className.replace(/topo-v2-status-(up|down|degraded|unknown)/g, '');
|
||||
node.className = node.className.replace(/topo-status-(up|down|degraded|unknown)/g, '');
|
||||
node.classList.add(`topo-v2-status-${host.status}`);
|
||||
node.classList.add(`topo-status-${host.status}`);
|
||||
const badge = node.querySelector('.topo-badge');
|
||||
if (badge) {
|
||||
badge.className = `topo-badge topo-badge-${host.status}`;
|
||||
@@ -155,7 +163,7 @@ function updateUnifiTable(devices) {
|
||||
tbody.innerHTML = devices.map(d => {
|
||||
const statusClass = d.connected ? '' : 'row-critical';
|
||||
const dotClass = d.connected ? 'dot-up' : 'dot-down';
|
||||
const statusText = d.connected ? 'Online' : 'Offline';
|
||||
const statusText = d.connected ? 'ONLINE' : 'OFFLINE';
|
||||
const suppressBtn = !d.connected
|
||||
? `<button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
|
||||
data-sup-type="unifi_device"
|
||||
@@ -181,7 +189,7 @@ function updateEventsTable(events, totalActive) {
|
||||
|
||||
const active = (events || []).filter(e => e.severity !== 'info');
|
||||
if (!active.length) {
|
||||
wrap.innerHTML = '<p class="empty-state">No active alerts ✔</p>';
|
||||
wrap.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">✔</div><div class="lt-empty-state-title">No active alerts</div></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
+93
-22
@@ -5,6 +5,12 @@
|
||||
This file adds only gandalf-specific components.
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── lt-avatar image overlay (base.css compat shim) ───────────────── */
|
||||
/* Older base.css missing position:relative + position:absolute on img */
|
||||
.lt-avatar { position: relative; }
|
||||
.lt-avatar img { position: absolute; inset: 0; }
|
||||
.lt-avatar img.lt-avatar-img-err { display: none; }
|
||||
|
||||
/* ── Variable aliases bridging to base.css palette ────────────────── */
|
||||
:root {
|
||||
/* Short names used throughout custom components */
|
||||
@@ -54,6 +60,28 @@
|
||||
--glow-cyan: none;
|
||||
--glow-xl: none;
|
||||
}
|
||||
[data-theme="light"] .topology {
|
||||
background-image: radial-gradient(circle, rgba(0,100,160,0.07) 1px, transparent 1px);
|
||||
}
|
||||
[data-theme="light"] .topo-vc-label {
|
||||
background: rgba(235,238,242,.88);
|
||||
}
|
||||
|
||||
/* ── Header overlap fix ───────────────────────────────────────────
|
||||
.lt-container's padding shorthand resets padding-top, defeating
|
||||
.lt-main's padding-top. The combined selector restores it. */
|
||||
.lt-main.lt-container {
|
||||
padding-top: calc(var(--header-height) + var(--space-lg));
|
||||
}
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.lt-main.lt-container { padding-top: calc(42px + var(--space-md)); }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.lt-main.lt-container { padding-top: calc(50px + var(--space-md)); }
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.lt-main.lt-container { padding-top: calc(46px + var(--space-sm)); }
|
||||
}
|
||||
|
||||
/* ── Refresh button loading state ────────────────────────────────── */
|
||||
[data-action="refresh"].is-loading {
|
||||
@@ -173,7 +201,7 @@
|
||||
border: 1px solid;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
.chip-critical { color: var(--red); border-color: var(--red); text-shadow: var(--glow-red); animation: pulse-glow 2s infinite; }
|
||||
.chip-critical { color: var(--red); border-color: var(--red); text-shadow: var(--glow-red); animation: topo-pulse-down 2s ease-in-out infinite; }
|
||||
.chip-warning { color: var(--orange); border-color: var(--orange); }
|
||||
.chip-ok { color: var(--green); border-color: var(--green-muted); text-shadow: var(--glow); }
|
||||
.status-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
|
||||
@@ -217,12 +245,27 @@
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color .2s, box-shadow .2s;
|
||||
}
|
||||
/* Corner accent triangle — mirrors test code's status-tinted corner */
|
||||
.host-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0;
|
||||
width: 0; height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px 0;
|
||||
border-color: transparent var(--border-color) transparent transparent;
|
||||
transition: border-color .2s;
|
||||
}
|
||||
.host-card:hover { border-color: var(--accent-orange); box-shadow: 0 0 12px rgba(255,107,0,.1); }
|
||||
.host-card-up { border-left: 3px solid var(--green); }
|
||||
.host-card-up::after { border-color: transparent rgba(0,255,136,.45) transparent transparent; }
|
||||
.host-card-down { border-left: 3px solid var(--red); box-shadow: inset 3px 0 10px rgba(255,45,85,.08); }
|
||||
.host-card-down::after { border-color: transparent rgba(255,45,85,.55) transparent transparent; }
|
||||
.host-card-degraded { border-left: 3px solid var(--orange); }
|
||||
.host-card-degraded::after { border-color: transparent rgba(255,107,0,.45) transparent transparent; }
|
||||
.host-card-header { margin-bottom: 8px; }
|
||||
.host-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
|
||||
.host-name { font-weight: bold; font-size: .88em; color: var(--amber); letter-spacing: .04em; }
|
||||
@@ -286,7 +329,9 @@
|
||||
|
||||
/* ── Topology diagram ─────────────────────────────────────────────── */
|
||||
.topology {
|
||||
background: var(--bg2);
|
||||
background-color: var(--bg2);
|
||||
background-image: radial-gradient(circle, rgba(0,212,255,0.07) 1px, transparent 1px);
|
||||
background-size: 22px 22px;
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 20px 16px 16px;
|
||||
margin-bottom: 16px;
|
||||
@@ -329,9 +374,18 @@
|
||||
background: linear-gradient(to bottom, var(--cyan), var(--green));
|
||||
opacity: .7;
|
||||
}
|
||||
/* Blurred copy of the wire for a soft glow halo */
|
||||
.topo-vc-wire::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: inherit;
|
||||
filter: blur(5px);
|
||||
opacity: .5;
|
||||
}
|
||||
.topo-vc-label {
|
||||
position: absolute;
|
||||
left: calc(50% + 6px);
|
||||
left: calc(50% + 7px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: .58em;
|
||||
@@ -339,6 +393,8 @@
|
||||
white-space: nowrap;
|
||||
letter-spacing: .06em;
|
||||
font-family: var(--font);
|
||||
background: rgba(3,5,8,.7);
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
.topo-v2-node {
|
||||
@@ -355,26 +411,45 @@
|
||||
min-width: 110px;
|
||||
text-align: center;
|
||||
transition: border-color .2s, box-shadow .2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Top highlight strip — color matches node type / status */
|
||||
.topo-v2-node::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
opacity: .4;
|
||||
}
|
||||
.topo-v2-status-up.topo-v2-node::before { background: var(--green); opacity: .65; }
|
||||
.topo-v2-status-down.topo-v2-node::before { background: var(--red); opacity: .75; }
|
||||
.topo-v2-status-degraded.topo-v2-node::before { background: var(--orange); opacity: .65; }
|
||||
.topo-v2-status-unknown.topo-v2-node::before { opacity: .15; }
|
||||
.topo-v2-icon { font-size: 1.3em; line-height: 1; }
|
||||
.topo-v2-label { font-weight: bold; letter-spacing: .04em; }
|
||||
.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-internet { border-color: var(--cyan); color: var(--cyan); text-shadow: var(--glow-cyan); }
|
||||
.topo-v2-router { border-color: var(--cyan); color: var(--cyan); text-shadow: var(--glow-cyan); }
|
||||
.topo-v2-switch { border-color: var(--amber); color: var(--amber); text-shadow: var(--glow-amber); }
|
||||
.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); }
|
||||
.topo-v2-host { border-color: var(--border-color); color: var(--text); cursor: default; }
|
||||
|
||||
@keyframes topo-pulse-down {
|
||||
0%,100% { box-shadow: 0 0 6px rgba(255,45,85,.3); }
|
||||
50% { box-shadow: 0 0 18px rgba(255,45,85,.75), 0 0 30px rgba(255,45,85,.2); }
|
||||
}
|
||||
|
||||
.topo-v2-status-up { border-color: var(--green); box-shadow: 0 0 8px rgba(0,255,136,.2); }
|
||||
.topo-v2-status-down { border-color: var(--red); box-shadow: 0 0 8px rgba(255,45,85,.35); animation: pulse-glow 2s infinite; }
|
||||
.topo-v2-status-down { border-color: var(--red); animation: topo-pulse-down 2s ease-in-out infinite; }
|
||||
.topo-v2-status-degraded { border-color: var(--orange); box-shadow: 0 0 8px rgba(255,107,0,.2); }
|
||||
.topo-v2-status-unknown { border-color: var(--border-color); }
|
||||
.topo-v2-offrack { border-style: dashed !important; }
|
||||
|
||||
.topo-badge { font-size: .68em; padding: 1px 5px; border: 1px solid; letter-spacing: .03em; }
|
||||
.topo-badge-up { color: var(--green); border-color: var(--green); text-shadow: var(--glow); }
|
||||
.topo-badge-down { color: var(--red); border-color: var(--red); animation: pulse-glow 1.5s infinite; }
|
||||
.topo-badge-down { color: var(--red); border-color: var(--red); animation: topo-pulse-down 1.5s ease-in-out infinite; }
|
||||
.topo-badge-degraded { color: var(--orange); border-color: var(--orange); }
|
||||
.topo-badge-unknown { color: var(--text-muted); border-color: var(--border-color); }
|
||||
|
||||
@@ -398,6 +473,7 @@
|
||||
background: repeating-linear-gradient(to bottom, var(--red) 0 6px, transparent 6px 10px) !important;
|
||||
background-size: 2px 10px !important;
|
||||
opacity: .9 !important;
|
||||
transition: none !important;
|
||||
animation: wire-dash-anim .7s linear infinite;
|
||||
}
|
||||
|
||||
@@ -419,8 +495,9 @@
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: var(--green);
|
||||
opacity: .45;
|
||||
opacity: .55;
|
||||
margin: 0 4px;
|
||||
box-shadow: 0 0 6px rgba(0,255,136,.4);
|
||||
}
|
||||
.topo-bus-10g-label {
|
||||
font-size: .56em;
|
||||
@@ -483,7 +560,7 @@
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font);
|
||||
}
|
||||
.topo-legend-line-10g { width: 24px; height: 2px; background: var(--green); display: inline-block; }
|
||||
.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; }
|
||||
|
||||
@@ -564,6 +641,8 @@
|
||||
.traffic-label { font-size: .62em; color: var(--text-muted); width: 20px; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
|
||||
.traffic-row .lt-progress { flex: 1; height: 5px; }
|
||||
.traffic-value { font-size: .7em; color: var(--text-dim); width: 68px; text-align: right; flex-shrink: 0; }
|
||||
/* Amber variant for lt-progress (65-85% utilisation warning) */
|
||||
.lt-progress--amber .lt-progress-bar { background: var(--amber); box-shadow: 0 0 5px var(--amber), 0 0 10px rgba(255,179,0,.35); }
|
||||
|
||||
/* SFP / optical panel */
|
||||
.sfp-panel {
|
||||
@@ -751,7 +830,7 @@
|
||||
.switch-port-block.poe-active:hover { box-shadow: var(--glow-amber); }
|
||||
.switch-port-block.uplink { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); }
|
||||
.switch-port-block.uplink:hover { box-shadow: var(--glow-cyan); }
|
||||
.switch-port-block.selected { outline: 2px solid #fff; outline-offset: 1px; }
|
||||
.switch-port-block.selected { outline: 2px solid rgba(255,255,255,.85); outline-offset: 1px; box-shadow: 0 0 8px rgba(255,255,255,.5); }
|
||||
.port-num { line-height: 1; font-weight: bold; }
|
||||
.port-speed { font-size: .72em; opacity: .7; line-height: 1; font-weight: normal; }
|
||||
.port-lldp { font-size: .62em; opacity: .65; line-height: 1; max-width: 32px; overflow: hidden; white-space: nowrap; text-overflow: clip; font-weight: normal; }
|
||||
@@ -820,17 +899,9 @@
|
||||
transition: all .15s;
|
||||
}
|
||||
.panel-close:hover { color: var(--red); border-color: var(--red); }
|
||||
.panel-section-title {
|
||||
font-size: .62em;
|
||||
font-weight: bold;
|
||||
color: var(--amber);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
margin: 10px 0 5px;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid rgba(255,107,0,.12);
|
||||
}
|
||||
.panel-section-title:first-of-type { margin-top: 0; }
|
||||
/* Inspector panel uses lt-divider — compact spacing overrides */
|
||||
.inspector-panel .lt-divider { margin: 8px 0 4px; }
|
||||
.inspector-panel .lt-divider-label { color: var(--amber); font-size: .6em; }
|
||||
.panel-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -133,6 +133,7 @@
|
||||
{% set _initials = (_words[0][0] ~ (_words[1][0] if _words|length > 1 else ''))|upper %}
|
||||
<div class="lt-avatar lt-avatar--sm {{ _uname | avatar_color }}"
|
||||
aria-hidden="true" title="{{ _uname }}">
|
||||
<img src="{{ url_for('api_avatar') }}" alt="" class="lt-avatar-img">
|
||||
<span class="lt-avatar-initials">{{ _initials }}</span>
|
||||
</div>
|
||||
<span class="lt-header-user">{{ _uname }}</span>
|
||||
@@ -245,6 +246,13 @@
|
||||
lt.keys.on('r', function() {
|
||||
if (typeof refreshAll === 'function') refreshAll();
|
||||
});
|
||||
|
||||
// Avatar image error fallback — hide broken img, reveal initials beneath
|
||||
document.addEventListener('error', function(e) {
|
||||
if (e.target.tagName === 'IMG' && e.target.closest('.lt-avatar')) {
|
||||
e.target.classList.add('lt-avatar-img-err');
|
||||
}
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
+29
-14
@@ -6,19 +6,23 @@
|
||||
<!-- ── Status bar ──────────────────────────────────────────────────── -->
|
||||
<div class="status-bar">
|
||||
<div class="status-chips">
|
||||
{% if not daemon_ok %}
|
||||
<span class="chip chip-critical">⚠ MONITOR OFFLINE</span>
|
||||
{% endif %}
|
||||
{% if summary.critical %}
|
||||
<span class="chip chip-critical">● {{ summary.critical }} CRITICAL</span>
|
||||
{% endif %}
|
||||
{% if summary.warning %}
|
||||
<span class="chip chip-warning">● {{ summary.warning }} WARNING</span>
|
||||
{% endif %}
|
||||
{% if not summary.critical and not summary.warning %}
|
||||
{% if daemon_ok and not summary.critical and not summary.warning %}
|
||||
<span class="chip chip-ok">✔ ALL SYSTEMS NOMINAL</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="status-meta">
|
||||
<span class="last-check" id="last-check">{{ last_check }}</span>
|
||||
<button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="refresh">↻ REFRESH</button>
|
||||
<span class="last-check" id="last-check" data-tooltip="Last monitor poll timestamp" data-tooltip-pos="bottom">{{ last_check }}</span>
|
||||
<span class="lt-spinner lt-spinner--sm lt-spinner--cyan" id="refresh-spinner" style="display:none"></span>
|
||||
<button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="refresh" data-tooltip="Refresh all data now" data-tooltip-pos="bottom">↻ REFRESH</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -46,7 +50,7 @@
|
||||
|
||||
<!-- WAN wire: cyan → green gradient, labeled -->
|
||||
<div class="topo-vc">
|
||||
<div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),var(--cyan)); opacity:.55;"></div>
|
||||
<div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),rgba(0,212,255,.3)); opacity:.7;"></div>
|
||||
<span class="topo-vc-label">WAN · 10G SFP+</span>
|
||||
</div>
|
||||
|
||||
@@ -215,7 +219,11 @@
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state">No host data yet – monitor is initializing.</p>
|
||||
<div class="lt-empty-state lt-empty-state--sm">
|
||||
<div class="lt-empty-state-icon">⌛</div>
|
||||
<div class="lt-empty-state-title">No host data yet</div>
|
||||
<div class="lt-empty-state-body">The monitor daemon may still be starting up.</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
@@ -272,9 +280,8 @@
|
||||
<section class="g-section">
|
||||
<div class="g-section-header">
|
||||
<h2 class="g-section-title">Active Alerts</h2>
|
||||
{% if summary.critical or summary.warning %}
|
||||
<span class="g-section-badge">{{ (summary.critical or 0) + (summary.warning or 0) }}</span>
|
||||
{% endif %}
|
||||
<span class="g-section-badge" id="alert-count-badge"
|
||||
{% if not summary.critical and not summary.warning %}style="display:none"{% endif %}>{{ (summary.critical or 0) + (summary.warning or 0) }}</span>
|
||||
<div class="g-section-actions">
|
||||
<div class="events-filter-bar">
|
||||
<input type="search" class="lt-input lt-input-sm" id="events-search"
|
||||
@@ -297,14 +304,14 @@
|
||||
<caption class="lt-sr-only">Active network alerts</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Sev</th>
|
||||
<th data-tooltip="Alert severity level" data-tooltip-pos="bottom">Sev</th>
|
||||
<th>Type</th>
|
||||
<th>Target</th>
|
||||
<th>Detail</th>
|
||||
<th>Description</th>
|
||||
<th>First Seen</th>
|
||||
<th>Last Seen</th>
|
||||
<th>Failures</th>
|
||||
<th data-tooltip="When this alert was first raised" data-tooltip-pos="bottom">First Seen</th>
|
||||
<th data-tooltip="Most recent check failure" data-tooltip-pos="bottom">Last Seen</th>
|
||||
<th data-tooltip="Consecutive check failures since first seen" data-tooltip-pos="bottom">Failures</th>
|
||||
<th>Ticket</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
@@ -341,13 +348,21 @@
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<tr><td colspan="10" class="empty-state">No active alerts ✔</td></tr>
|
||||
<tr><td colspan="10">
|
||||
<div class="lt-empty-state lt-empty-state--sm">
|
||||
<div class="lt-empty-state-icon">✔</div>
|
||||
<div class="lt-empty-state-title">No active alerts</div>
|
||||
</div>
|
||||
</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state">No active alerts ✔</p>
|
||||
<div class="lt-empty-state lt-empty-state--sm">
|
||||
<div class="lt-empty-state-icon">✔</div>
|
||||
<div class="lt-empty-state-title">No active alerts</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
+11
-11
@@ -114,7 +114,7 @@ function portBlockHtml(idx, port, swName, sfpBlock) {
|
||||
const speedHtml = speedTxt ? `<span class="port-speed">${speedTxt}</span>` : '';
|
||||
return `<div class="switch-port-block ${state}${sfpCls}"
|
||||
data-switch="${escHtml(swName)}" data-port-idx="${idx}"
|
||||
title="${title}"
|
||||
title="${title}" aria-label="${title}"
|
||||
data-action="select-port"><span class="port-num">${numLabel}</span>${speedHtml}${lldpHtml}</div>`;
|
||||
}
|
||||
|
||||
@@ -259,7 +259,7 @@ function renderPanel(swName, idx) {
|
||||
const poeMaxStr = d.poe_max_power != null ? ` / max ${d.poe_max_power.toFixed(1)}W` : '';
|
||||
const poeCurStr = (d.poe_power != null && d.poe_power > 0) ? ` / draw <span class="val-amber">${d.poe_power.toFixed(1)}W</span>` : '';
|
||||
poeHtml = `
|
||||
<div class="panel-section-title">PoE</div>
|
||||
<div class="lt-divider"><span class="lt-divider-label">PoE</span></div>
|
||||
<div class="panel-row"><span class="panel-label">Class</span><span class="panel-val">class ${d.poe_class}${poeMaxStr}</span></div>
|
||||
${d.poe_power != null ? `<div class="panel-row"><span class="panel-label">Draw</span><span class="panel-val">${d.poe_power > 0 ? `<span class="val-amber">${d.poe_power.toFixed(1)}W</span>` : '0W'}</span></div>` : ''}
|
||||
${d.poe_mode ? `<div class="panel-row"><span class="panel-label">Mode</span><span class="panel-val">${escHtml(d.poe_mode)}</span></div>` : ''}`;
|
||||
@@ -269,16 +269,16 @@ function renderPanel(swName, idx) {
|
||||
let trafficHtml = '';
|
||||
if (d.tx_bytes_rate != null || d.rx_bytes_rate != null) {
|
||||
trafficHtml = `
|
||||
<div class="panel-section-title">Traffic</div>
|
||||
<div class="panel-row"><span class="panel-label">TX</span><span class="panel-val">${fmtRate(d.tx_bytes_rate)}</span></div>
|
||||
<div class="panel-row"><span class="panel-label">RX</span><span class="panel-val">${fmtRate(d.rx_bytes_rate)}</span></div>`;
|
||||
<div class="lt-divider"><span class="lt-divider-label">Traffic</span></div>
|
||||
<div class="panel-row"><span class="panel-label" data-tooltip="Transmit — outgoing from this port">TX</span><span class="panel-val">${fmtRate(d.tx_bytes_rate)}</span></div>
|
||||
<div class="panel-row"><span class="panel-label" data-tooltip="Receive — incoming to this port">RX</span><span class="panel-val">${fmtRate(d.rx_bytes_rate)}</span></div>`;
|
||||
}
|
||||
|
||||
// Errors / drops section
|
||||
let errHtml = '';
|
||||
if (d.tx_errs_rate != null || d.rx_errs_rate != null) {
|
||||
errHtml = `
|
||||
<div class="panel-section-title">Errors / Drops</div>
|
||||
<div class="lt-divider"><span class="lt-divider-label">Errors / Drops</span></div>
|
||||
<div class="panel-row"><span class="panel-label">TX Err</span><span class="panel-val">${fmtErrors(d.tx_errs_rate)}</span></div>
|
||||
<div class="panel-row"><span class="panel-label">RX Err</span><span class="panel-val">${fmtErrors(d.rx_errs_rate)}</span></div>
|
||||
<div class="panel-row"><span class="panel-label">TX Drop</span><span class="panel-val">${fmtErrors(d.tx_drops_rate)}</span></div>
|
||||
@@ -291,7 +291,7 @@ function renderPanel(swName, idx) {
|
||||
if (d.lldp && d.lldp.system_name) {
|
||||
const l = d.lldp;
|
||||
lldpHtml = `
|
||||
<div class="panel-section-title">LLDP Neighbor</div>
|
||||
<div class="lt-divider"><span class="lt-divider-label">LLDP Neighbor</span></div>
|
||||
<div class="panel-row"><span class="panel-label">System</span><span class="panel-val val-cyan">${escHtml(l.system_name)}</span></div>
|
||||
${l.port_id ? `<div class="panel-row"><span class="panel-label">Port</span><span class="panel-val">${escHtml(l.port_id)}</span></div>` : ''}
|
||||
${l.port_desc ? `<div class="panel-row"><span class="panel-label">Port Desc</span><span class="panel-val">${escHtml(l.port_desc)}</span></div>` : ''}
|
||||
@@ -333,11 +333,11 @@ function renderPanel(swName, idx) {
|
||||
<button class="panel-close" data-action="close-panel" aria-label="Close panel">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-section-title">Link</div>
|
||||
<div class="lt-divider"><span class="lt-divider-label">Link</span></div>
|
||||
<div class="panel-row"><span class="panel-label">Status</span><span class="panel-val">${upStr}</span></div>
|
||||
<div class="panel-row"><span class="panel-label">Speed</span><span class="panel-val">${speedStr}</span></div>
|
||||
<div class="panel-row"><span class="panel-label">Duplex</span><span class="panel-val">${duplexStr}</span></div>
|
||||
<div class="panel-row"><span class="panel-label">Auto-neg</span><span class="panel-val val-neutral">${autoneg}</span></div>
|
||||
<div class="panel-row"><span class="panel-label" data-tooltip="Full = simultaneous send/receive. Half = one direction at a time.">Duplex</span><span class="panel-val">${duplexStr}</span></div>
|
||||
<div class="panel-row"><span class="panel-label" data-tooltip="Autonegotiation: NIC and switch automatically agree speed and duplex.">Auto-neg</span><span class="panel-val val-neutral">${autoneg}</span></div>
|
||||
<div class="panel-row"><span class="panel-label">Media</span><span class="panel-val">${escHtml(mediaStr)}</span></div>
|
||||
|
||||
${poeHtml}
|
||||
@@ -392,7 +392,7 @@ function buildPathDebug(swName, swPort, serverName, ifaceName, svrData) {
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="panel-section-title">Path Debug <span class="path-conn-type">${escHtml(connType)}</span></div>
|
||||
<div class="lt-divider"><span class="lt-divider-label">Path Debug · ${escHtml(connType)}</span></div>
|
||||
${duplexWarnHtml}${speedWarnHtml}
|
||||
<div class="path-debug-cols">
|
||||
<div class="path-col">
|
||||
|
||||
+18
-17
@@ -40,6 +40,7 @@ function fmtRateBar(bytesPerSec, linkSpeedMbps) {
|
||||
|
||||
function trafficBarClass(pct, isTx) {
|
||||
if (pct > 85) return 'lt-progress--red';
|
||||
if (pct > 65) return 'lt-progress--amber';
|
||||
return isTx ? '' : 'lt-progress--cyan';
|
||||
}
|
||||
|
||||
@@ -152,26 +153,26 @@ function renderIfaceCard(ifaceName, d) {
|
||||
</div>
|
||||
<div class="sfp-grid">
|
||||
<div class="sfp-stat">
|
||||
<span class="sfp-stat-label">Temp</span>
|
||||
<span class="sfp-stat-label" data-tooltip="SFP module temperature. Normal: below 70°C. Warn: 70–85°C. Critical: above 85°C.">Temp</span>
|
||||
<span class="sfp-stat-value ${tmpClass}">${fmtTemp(s.temp_c)}</span>
|
||||
</div>
|
||||
<div class="sfp-stat">
|
||||
<span class="sfp-stat-label">Voltage</span>
|
||||
<span class="sfp-stat-label" data-tooltip="SFP supply voltage. Normal: 3.1–3.5V.">Voltage</span>
|
||||
<span class="sfp-stat-value ${vClass}">${fmtVoltage(s.voltage_v)}</span>
|
||||
</div>
|
||||
<div class="sfp-stat">
|
||||
<span class="sfp-stat-label">Bias</span>
|
||||
<span class="sfp-stat-label" data-tooltip="Laser bias current in mA. High values may indicate end-of-life laser diode.">Bias</span>
|
||||
<span class="sfp-stat-value">${fmtBias(s.bias_ma)}</span>
|
||||
</div>
|
||||
<div class="sfp-stat">
|
||||
<span class="sfp-stat-label">TX Power</span>
|
||||
<span class="sfp-stat-label" data-tooltip="Optical transmit power in dBm. Typical good range: -3 to -9 dBm.">TX Power</span>
|
||||
<span class="sfp-stat-value ${txClass}">${fmtPower(s.tx_power_dbm)}</span>
|
||||
<div class="power-row">
|
||||
<div class="power-track"><div class="power-fill ${txClass === 'val-good' ? 'power-ok' : txClass === 'val-warn' ? 'power-warn' : 'power-crit'}" style="width:${txPct2}%"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sfp-stat">
|
||||
<span class="sfp-stat-label">RX Power</span>
|
||||
<span class="sfp-stat-label" data-tooltip="Optical receive power in dBm. Typical good range: -3 to -18 dBm. Below -20 dBm may indicate dirty/damaged fiber.">RX Power</span>
|
||||
<span class="sfp-stat-value ${rxClass}">${fmtPower(s.rx_power_dbm)}</span>
|
||||
<div class="power-row">
|
||||
<div class="power-track"><div class="power-fill ${rxClass === 'val-good' ? 'power-ok' : rxClass === 'val-warn' ? 'power-warn' : 'power-crit'}" style="width:${rxPct2}%"></div></div>
|
||||
@@ -179,7 +180,7 @@ function renderIfaceCard(ifaceName, d) {
|
||||
</div>
|
||||
${s.rx_power_dbm != null && s.tx_power_dbm != null ? `
|
||||
<div class="sfp-stat">
|
||||
<span class="sfp-stat-label">RX−TX Δ</span>
|
||||
<span class="sfp-stat-label" data-tooltip="Insertion loss: difference between transmit and receive power. Large negative values indicate fiber loss or connector issues.">RX−TX Δ</span>
|
||||
<span class="sfp-stat-value">${(s.rx_power_dbm - s.tx_power_dbm).toFixed(2)} dBm</span>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
@@ -200,42 +201,42 @@ function renderIfaceCard(ifaceName, d) {
|
||||
<span class="link-stat-value ${isDown ? 'val-crit' : 'val-good'}">${isDown ? 'DOWN' : 'UP'}</span>
|
||||
</div>
|
||||
<div class="link-stat">
|
||||
<span class="link-stat-label">Duplex</span>
|
||||
<span class="link-stat-label" data-tooltip="Full = simultaneous send/receive at full speed. Half = one direction at a time, can cause collisions.">Duplex</span>
|
||||
<span class="link-stat-value">${fmtDuplex(d.duplex)}</span>
|
||||
</div>
|
||||
<div class="link-stat">
|
||||
<span class="link-stat-label">Auto-neg</span>
|
||||
<span class="link-stat-label" data-tooltip="Autonegotiation: NIC and switch automatically agree on link speed and duplex mode.">Auto-neg</span>
|
||||
<span class="link-stat-value">${d.auto_neg == null ? '–' : d.auto_neg ? 'On' : 'Off'}</span>
|
||||
</div>
|
||||
<div class="link-stat">
|
||||
<span class="link-stat-label">Carrier Δ</span>
|
||||
<span class="link-stat-label" data-tooltip="Carrier changes: number of times the link went up or down. High values indicate a flapping or unstable cable/SFP.">Carrier Δ</span>
|
||||
<span class="link-stat-value">${fmtCarrier(d.carrier_changes)}</span>
|
||||
</div>
|
||||
<div class="link-stat">
|
||||
<span class="link-stat-label">TX Err/s</span>
|
||||
<span class="link-stat-label" data-tooltip="Transmit errors per second reported by the kernel network driver.">TX Err/s</span>
|
||||
<span class="link-stat-value">${fmtErrors(d.tx_errs_rate)}</span>
|
||||
</div>
|
||||
<div class="link-stat">
|
||||
<span class="link-stat-label">RX Err/s</span>
|
||||
<span class="link-stat-label" data-tooltip="Receive errors per second reported by the kernel network driver.">RX Err/s</span>
|
||||
<span class="link-stat-value">${fmtErrors(d.rx_errs_rate)}</span>
|
||||
</div>
|
||||
<div class="link-stat">
|
||||
<span class="link-stat-label">TX Drop/s</span>
|
||||
<span class="link-stat-label" data-tooltip="Transmit packets dropped per second (ring buffer full or driver overrun).">TX Drop/s</span>
|
||||
<span class="link-stat-value">${fmtErrors(d.tx_drops_rate)}</span>
|
||||
</div>
|
||||
<div class="link-stat">
|
||||
<span class="link-stat-label">RX Drop/s</span>
|
||||
<span class="link-stat-label" data-tooltip="Receive packets dropped per second (ring buffer full or driver overrun).">RX Drop/s</span>
|
||||
<span class="link-stat-value">${fmtErrors(d.rx_drops_rate)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="traffic-section">
|
||||
<div class="traffic-row">
|
||||
<span class="traffic-label">TX</span>
|
||||
<span class="traffic-label" data-tooltip="Transmit — outgoing traffic from this server">TX</span>
|
||||
<div class="lt-progress ${trafficBarClass(txPct, true)}"><div class="lt-progress-bar" style="width:${txPct}%"></div></div>
|
||||
<span class="traffic-value">${fmtRate(d.tx_bytes_rate)}</span>
|
||||
</div>
|
||||
<div class="traffic-row">
|
||||
<span class="traffic-label">RX</span>
|
||||
<span class="traffic-label" data-tooltip="Receive — incoming traffic to this server">RX</span>
|
||||
<div class="lt-progress ${trafficBarClass(rxPct, false)}"><div class="lt-progress-bar" style="width:${rxPct}%"></div></div>
|
||||
<span class="traffic-value">${fmtRate(d.rx_bytes_rate)}</span>
|
||||
</div>
|
||||
@@ -431,8 +432,8 @@ function renderLinks(data) {
|
||||
.map(([iname, d]) => renderIfaceCard(iname, d)).join('');
|
||||
const sample = Object.values(ifaces)[0] || {};
|
||||
const ip = sample.host_ip || '';
|
||||
const updStr = sample.updated
|
||||
? new Date(sample.updated + (sample.updated.includes('Z') ? '' : 'Z')).toLocaleTimeString()
|
||||
const updStr = data.updated
|
||||
? new Date(data.updated.replace(' UTC', 'Z').replace(' ', 'T')).toLocaleTimeString()
|
||||
: '';
|
||||
|
||||
parts.push(`
|
||||
|
||||
@@ -112,7 +112,11 @@
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state" id="no-active-msg">No active suppressions.</p>
|
||||
<div class="lt-empty-state lt-empty-state--sm" id="no-active-msg">
|
||||
<div class="lt-empty-state-icon">🔕</div>
|
||||
<div class="lt-empty-state-title">No active suppressions</div>
|
||||
<div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
@@ -156,7 +160,10 @@
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state">No suppression history yet.</p>
|
||||
<div class="lt-empty-state lt-empty-state--sm">
|
||||
<div class="lt-empty-state-icon">📋</div>
|
||||
<div class="lt-empty-state-title">No suppression history yet</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
@@ -210,7 +217,7 @@
|
||||
const wrap = document.getElementById('active-sup-wrap');
|
||||
const badge = document.getElementById('active-sup-badge');
|
||||
if (!rows || !rows.length) {
|
||||
wrap.innerHTML = '<p class="empty-state" id="no-active-msg">No active suppressions.</p>';
|
||||
wrap.innerHTML = '<div class="lt-empty-state lt-empty-state--sm" id="no-active-msg"><div class="lt-empty-state-icon">🔕</div><div class="lt-empty-state-title">No active suppressions</div><div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div></div>';
|
||||
if (badge) badge.textContent = '0';
|
||||
return;
|
||||
}
|
||||
@@ -245,7 +252,7 @@
|
||||
const rows = await lt.api.get('/api/suppressions');
|
||||
renderActiveRows(rows);
|
||||
} catch (err) {
|
||||
console.warn('Failed to refresh suppressions:', err);
|
||||
showToast('Failed to refresh suppressions', 'warning');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -287,7 +294,7 @@
|
||||
const tbody = document.querySelector('#active-sup-table tbody');
|
||||
if (tbody && !tbody.children.length) {
|
||||
document.getElementById('active-sup-wrap').innerHTML =
|
||||
'<p class="empty-state" id="no-active-msg">No active suppressions.</p>';
|
||||
'<div class="lt-empty-state lt-empty-state--sm" id="no-active-msg"><div class="lt-empty-state-icon">🔕</div><div class="lt-empty-state-title">No active suppressions</div><div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div></div>';
|
||||
if (badge) badge.textContent = '0';
|
||||
}
|
||||
showToast('Suppression removed', 'success');
|
||||
|
||||
Reference in New Issue
Block a user