feat: extend the record-row design system to Host Overview, Alerts, and About
Extract the settings redesign's tokens and components into shared static/hbd-ui.css + hbd-ui.js and dedupe settings.html against them. About becomes yaml-key sections with kv rows; Alerts gets stat tiles, chip filters, and alert record rows (same fetch/ack logic); Host Overview keeps its DOM and live-update JS but is re-skinned to the token system with a page toolbar. Live Dashboard intentionally untouched pending its own redesign. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NfPpSpccTWBfZg1FTveyaU
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,155 @@
|
|||||||
|
/* hbd-ui.css — shared design system for hbd pages.
|
||||||
|
*
|
||||||
|
* Green-biased neutrals, teal accent, mono identifiers. Pages link this
|
||||||
|
* after static/style.css and build on the tokens + components below.
|
||||||
|
* Introduced with the settings-page redesign; see settings.html for the
|
||||||
|
* fullest use of the row/editor idiom.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--st-paper: #f4f6f4;
|
||||||
|
--st-surface: #ffffff;
|
||||||
|
--st-surface-2: #eef1ee;
|
||||||
|
--st-ink: #1d2420;
|
||||||
|
--st-muted: #5f6a63;
|
||||||
|
--st-faint: #8a948d;
|
||||||
|
--st-line: #dde3de;
|
||||||
|
--st-line-soft: #e8ece8;
|
||||||
|
--st-accent: #0e7280;
|
||||||
|
--st-accent-ink: #ffffff;
|
||||||
|
--st-accent-soft: #e0eef0;
|
||||||
|
--st-ok: #3f9c5a;
|
||||||
|
--st-ok-soft: #e2f2e7;
|
||||||
|
--st-warn: #d9982a;
|
||||||
|
--st-warn-soft: #f9efdc;
|
||||||
|
--st-crit: #d64545;
|
||||||
|
--st-crit-soft: #f9e3e3;
|
||||||
|
--st-badge-owner: #ede7f6; --st-badge-owner-ink: #5e35b1;
|
||||||
|
--st-badge-mgr: #e3f2fd; --st-badge-mgr-ink: #1565c0;
|
||||||
|
--st-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
|
||||||
|
}
|
||||||
|
html[data-theme="dark"] {
|
||||||
|
--st-paper: #131816;
|
||||||
|
--st-surface: #1b211e;
|
||||||
|
--st-surface-2: #222925;
|
||||||
|
--st-ink: #e4eae6;
|
||||||
|
--st-muted: #9aa69e;
|
||||||
|
--st-faint: #6e7a72;
|
||||||
|
--st-line: #2c342f;
|
||||||
|
--st-line-soft: #252c28;
|
||||||
|
--st-accent: #4cc4d4;
|
||||||
|
--st-accent-ink: #0d2326;
|
||||||
|
--st-accent-soft: #143b40;
|
||||||
|
--st-ok: #5cba77;
|
||||||
|
--st-ok-soft: #1c2f22;
|
||||||
|
--st-warn: #e0ad4e;
|
||||||
|
--st-warn-soft: #33290f;
|
||||||
|
--st-crit: #e06c6c;
|
||||||
|
--st-crit-soft: #3a1a1a;
|
||||||
|
--st-badge-owner: #33294a; --st-badge-owner-ink: #b39ddb;
|
||||||
|
--st-badge-mgr: #1b3350; --st-badge-mgr-ink: #90caf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── sticky toolbar under the site nav ── */
|
||||||
|
.st-toolbar {
|
||||||
|
position: sticky; top: var(--nav-h, 48px); z-index: 90;
|
||||||
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
||||||
|
padding: 9px 20px;
|
||||||
|
background: var(--st-surface); border-bottom: 1px solid var(--st-line);
|
||||||
|
}
|
||||||
|
.st-toolbar .brand { font-family: var(--st-mono); font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--st-ink); }
|
||||||
|
.st-toolbar .brand .tld { color: var(--st-accent); }
|
||||||
|
.st-toolbar .hintline { font-size: 12px; color: var(--st-faint); }
|
||||||
|
.st-toolbar .spacer { flex: 1; }
|
||||||
|
|
||||||
|
/* ── ECG pulse divider ── */
|
||||||
|
.pulse { display: block; width: 100%; height: 14px; }
|
||||||
|
.pulse polyline { fill: none; stroke: var(--st-accent); stroke-width: 1.5; opacity: .55; }
|
||||||
|
|
||||||
|
/* ── buttons ── */
|
||||||
|
.btn {
|
||||||
|
font: 600 13px/1 inherit; border: 1px solid var(--st-line); border-radius: 6px;
|
||||||
|
background: var(--st-surface); color: var(--st-ink); padding: 7px 14px; cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
|
||||||
|
.btn.primary { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-accent-ink); }
|
||||||
|
.btn.quiet { border-color: transparent; background: transparent; color: var(--st-muted); }
|
||||||
|
.btn.small { padding: 4px 10px; font-size: 12px; }
|
||||||
|
.btn.danger { color: var(--st-crit); }
|
||||||
|
.btn:disabled { opacity: .6; cursor: default; }
|
||||||
|
|
||||||
|
/* ── section headers as config keys ── */
|
||||||
|
section.st { margin-top: 26px; scroll-margin-top: calc(var(--bars-h, 94px) + 12px); }
|
||||||
|
.sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
|
||||||
|
.sec-head h2 { margin: 0; font-family: var(--st-mono); font-size: 15px; font-weight: 700; color: var(--st-ink); }
|
||||||
|
.sec-head h2 .colon { color: var(--st-accent); }
|
||||||
|
.sec-head .count { font-family: var(--st-mono); font-size: 11.5px; color: var(--st-faint); }
|
||||||
|
.sec-head .sub { font-size: 12px; color: var(--st-muted); }
|
||||||
|
.sec-head .add { margin-left: auto; }
|
||||||
|
|
||||||
|
/* ── record list + row ── */
|
||||||
|
.list { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; }
|
||||||
|
.row {
|
||||||
|
display: grid; grid-template-columns: 190px minmax(0,1fr) auto;
|
||||||
|
gap: 4px 14px; align-items: center;
|
||||||
|
padding: 8px 14px; border-bottom: 1px solid var(--st-line-soft);
|
||||||
|
transition: background .12s ease;
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) { .row { transition: none; } }
|
||||||
|
.row:last-child { border-bottom: none; }
|
||||||
|
.row:hover { background: var(--st-surface-2); }
|
||||||
|
.row .id { font-family: var(--st-mono); font-size: 13px; font-weight: 600; color: var(--st-ink); display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||||
|
.row .id .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.row .act { display: flex; gap: 4px; justify-content: flex-end; }
|
||||||
|
|
||||||
|
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
|
||||||
|
.dot.ok { background: var(--st-ok); }
|
||||||
|
.dot.warn { background: var(--st-warn); }
|
||||||
|
.dot.crit { background: var(--st-crit); }
|
||||||
|
.dot.off { background: transparent; border: 1.5px solid var(--st-faint); }
|
||||||
|
|
||||||
|
.facts { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; }
|
||||||
|
.chip {
|
||||||
|
display: inline-flex; align-items: center; gap: 4px;
|
||||||
|
font-family: var(--st-mono); font-size: 11px; line-height: 1.3;
|
||||||
|
padding: 3px 7px; border-radius: 4px;
|
||||||
|
background: var(--st-surface-2); color: var(--st-muted);
|
||||||
|
}
|
||||||
|
.chip.owner { background: var(--st-badge-owner); color: var(--st-badge-owner-ink); }
|
||||||
|
.chip.mgr { background: var(--st-badge-mgr); color: var(--st-badge-mgr-ink); }
|
||||||
|
.chip.level { background: transparent; border: 1px solid var(--st-line); }
|
||||||
|
.chip.private { background: transparent; border: 1px dashed var(--st-badge-owner-ink); color: var(--st-badge-owner-ink); }
|
||||||
|
.chip.ok { background: var(--st-ok-soft); color: var(--st-ok); }
|
||||||
|
.chip.warn { background: var(--st-warn-soft); color: var(--st-warn); }
|
||||||
|
.chip.crit { background: var(--st-crit-soft); color: var(--st-crit); }
|
||||||
|
.chip .k { color: var(--st-faint); }
|
||||||
|
.chip .w { color: var(--st-warn); font-weight: 700; }
|
||||||
|
.chip .c { color: var(--st-crit); font-weight: 700; }
|
||||||
|
|
||||||
|
/* ── key/value rows (server groups, about page) ── */
|
||||||
|
.kv .row { grid-template-columns: 230px minmax(0,1fr); padding: 6px 14px; }
|
||||||
|
.group {
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
padding: 7px 14px 5px; font-family: var(--st-mono); font-size: 11px; color: var(--st-faint);
|
||||||
|
background: var(--st-surface); border-bottom: 1px solid var(--st-line-soft);
|
||||||
|
}
|
||||||
|
.group .gbtn { margin-left: auto; }
|
||||||
|
.kv .val { font-family: var(--st-mono); font-size: 12.5px; color: var(--st-muted); min-width: 0; }
|
||||||
|
.kv .val a { color: var(--st-accent); text-decoration: none; }
|
||||||
|
.kv .val a:hover { text-decoration: underline; }
|
||||||
|
.kv .desc { display: block; font-size: 11px; color: var(--st-faint); margin-top: 2px; }
|
||||||
|
.val-masked { color: var(--st-faint); letter-spacing: 2px; }
|
||||||
|
|
||||||
|
.note { margin: 8px 2px 0; font-size: 12px; color: var(--st-faint); }
|
||||||
|
|
||||||
|
/* ── handheld defaults for rows ── */
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.st-toolbar { padding: 8px 10px; }
|
||||||
|
.st-toolbar .hintline { display: none; }
|
||||||
|
.row { grid-template-columns: minmax(0,1fr) auto; padding: 9px 12px; }
|
||||||
|
.row .id { grid-row: 1; grid-column: 1; }
|
||||||
|
.row .act { grid-row: 1; grid-column: 2; }
|
||||||
|
.row .facts { grid-column: 1 / -1; }
|
||||||
|
.kv .row { grid-template-columns: 1fr; }
|
||||||
|
section.st { scroll-margin-top: calc(var(--bars-h, 94px) + 50px); }
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
/* hbd-ui.js — shared helpers for pages using hbd-ui.css.
|
||||||
|
*
|
||||||
|
* Keeps sticky toolbars stuck just below the fixed site nav, whose height
|
||||||
|
* varies with viewport width and wrapping.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function _setStickyOffsets() {
|
||||||
|
const nav = document.querySelector('.nav');
|
||||||
|
const tb = document.querySelector('.st-toolbar');
|
||||||
|
const navH = nav ? nav.offsetHeight : 48;
|
||||||
|
const barsH = navH + (tb ? tb.offsetHeight : 46);
|
||||||
|
document.documentElement.style.setProperty('--nav-h', navH + 'px');
|
||||||
|
document.documentElement.style.setProperty('--bars-h', barsH + 'px');
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', _setStickyOffsets);
|
||||||
|
document.addEventListener('DOMContentLoaded', _setStickyOffsets);
|
||||||
+85
-164
@@ -1,189 +1,110 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
{% include 'head.html' %}
|
{% include 'head.html' %}
|
||||||
|
<link rel="stylesheet" href="/static/hbd-ui.css">
|
||||||
|
<script src="/static/hbd-ui.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html, body { overflow: visible; }
|
html, body { height: auto; overflow: visible; }
|
||||||
|
body { background: var(--st-paper); padding: 60px 0 0; }
|
||||||
|
|
||||||
.container {
|
.about-main { max-width: 700px; margin: 0 auto; padding: 0 20px 60px; }
|
||||||
max-width: 700px;
|
|
||||||
margin: 0 auto;
|
.hero {
|
||||||
|
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
|
||||||
|
padding: 26px 2px 0;
|
||||||
}
|
}
|
||||||
|
.hero .hb-logo {
|
||||||
h1 {
|
font-family: var(--st-mono); font-size: 30px; font-weight: 700;
|
||||||
color: #333;
|
letter-spacing: -.03em; color: var(--st-ink);
|
||||||
margin-bottom: 4px;
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
}
|
||||||
|
.hero .hb-logo .tld { color: var(--st-accent); }
|
||||||
.subtitle {
|
.hero .version { font-family: var(--st-mono); font-size: 13px; color: var(--st-accent);
|
||||||
color: #666;
|
background: var(--st-accent-soft); border-radius: 999px; padding: 3px 12px; }
|
||||||
margin-bottom: 24px;
|
.hero .tagline { flex-basis: 100%; font-size: 13px; color: var(--st-muted); }
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 1px 6px rgba(0,0,0,0.1);
|
|
||||||
padding: 20px 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section h2 {
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #333;
|
|
||||||
margin: 0 0 16px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
padding: 8px 0;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
.info-row:last-child { border-bottom: none; }
|
|
||||||
|
|
||||||
.info-label {
|
|
||||||
width: 160px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: #666;
|
|
||||||
font-size: 0.88em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-value {
|
|
||||||
color: #222;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-value a {
|
|
||||||
color: #0066cc;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.info-value a:hover { text-decoration: underline; }
|
|
||||||
|
|
||||||
.version-badge {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 3px 12px;
|
|
||||||
background: #e8f0fe;
|
|
||||||
color: #1a73e8;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 1.00em;
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hb-logo {
|
|
||||||
font-size: 2.5em;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #0066cc;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hb-tagline {
|
|
||||||
color: #555;
|
|
||||||
font-size: 0.95em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
padding: 8px 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-text { flex: 1; }
|
|
||||||
|
|
||||||
/* ── Dark mode ── */
|
|
||||||
html[data-theme="dark"] h1 { color: var(--text); }
|
|
||||||
html[data-theme="dark"] .subtitle { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .section { background: var(--surface); box-shadow: 0 1px 6px var(--shadow); }
|
|
||||||
html[data-theme="dark"] .section h2 { color: var(--text); border-bottom-color: var(--border); }
|
|
||||||
html[data-theme="dark"] .info-row { border-bottom-color: var(--border-4); }
|
|
||||||
html[data-theme="dark"] .info-label { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .info-value { color: var(--text); }
|
|
||||||
html[data-theme="dark"] .info-value a { color: var(--link); }
|
|
||||||
html[data-theme="dark"] .hb-logo { color: var(--link); }
|
|
||||||
html[data-theme="dark"] .hb-tagline { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .version-badge { background: #1a3255; color: #60a5fa; }
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{% include 'nav.html' %}
|
{% include 'nav.html' %}
|
||||||
|
|
||||||
<div class="container">
|
<div class="st-toolbar">
|
||||||
<h1>{{ header }}</h1>
|
<span class="brand">hbd<span class="tld">·about</span></span>
|
||||||
<p class="subtitle">Heartbeat monitoring system</p>
|
<span class="hintline">heartbeat monitoring system</span>
|
||||||
|
</div>
|
||||||
|
<svg class="pulse" viewBox="0 0 1200 14" preserveAspectRatio="none" aria-hidden="true">
|
||||||
|
<polyline points="0,10 340,10 352,10 358,3 364,13 370,1 378,12 384,10 560,10 572,10 578,3 584,13 590,1 598,12 604,10 1200,10"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<div class="section">
|
<div class="about-main">
|
||||||
<div class="logo-section">
|
<div class="hero">
|
||||||
<div class="logo-text">
|
<span class="hb-logo">heart<span class="tld">beat</span></span>
|
||||||
<div class="hb-logo">Heartbeat</div>
|
<span class="version">v{{ hbd_version }}</span>
|
||||||
<div class="hb-tagline">Lightweight host monitoring over UDP</div>
|
<span class="tagline">Lightweight host monitoring over UDP</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="st">
|
||||||
|
<div class="sec-head">
|
||||||
|
<h2>version<span class="colon">:</span></h2>
|
||||||
|
</div>
|
||||||
|
<div class="list kv">
|
||||||
|
<div class="row">
|
||||||
|
<span class="id"><span class="name">server</span></span>
|
||||||
|
<span class="val">{{ hbd_version }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="id"><span class="name">python</span></span>
|
||||||
|
<span class="val">{{ python_version }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="id"><span class="name">license</span></span>
|
||||||
|
<span class="val">MIT</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="version-badge">v{{ hbd_version }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<div class="section">
|
<section class="st">
|
||||||
<h2>Version</h2>
|
<div class="sec-head">
|
||||||
<div class="info-row">
|
<h2>runtime<span class="colon">:</span></h2>
|
||||||
<span class="info-label">Server version</span>
|
|
||||||
<span class="info-value">{{ hbd_version }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row">
|
<div class="list kv">
|
||||||
<span class="info-label">Python</span>
|
<div class="row">
|
||||||
<span class="info-value">{{ python_version }}</span>
|
<span class="id"><span class="name">host</span></span>
|
||||||
|
<span class="val">{{ server_hostname }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="id"><span class="name">started</span></span>
|
||||||
|
<span class="val">{{ start_time_str }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="id"><span class="name">uptime</span></span>
|
||||||
|
<span class="val" id="uptime-value">{{ uptime_str }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="id"><span class="name">hosts_monitored</span></span>
|
||||||
|
<span class="val">{{ host_count }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row">
|
</section>
|
||||||
<span class="info-label">License</span>
|
|
||||||
<span class="info-value">MIT</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
<section class="st">
|
||||||
<h2>Runtime</h2>
|
<div class="sec-head">
|
||||||
<div class="info-row">
|
<h2>contact<span class="colon">:</span></h2>
|
||||||
<span class="info-label">Host</span>
|
|
||||||
<span class="info-value">{{ server_hostname }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row">
|
<div class="list kv">
|
||||||
<span class="info-label">Started</span>
|
<div class="row">
|
||||||
<span class="info-value">{{ start_time_str }}</span>
|
<span class="id"><span class="name">author</span></span>
|
||||||
|
<span class="val">Andreas Wrede</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="id"><span class="name">email</span></span>
|
||||||
|
<span class="val"><a href="mailto:aew.hbd@wrede.ca">aew.hbd@wrede.ca</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="id"><span class="name">repository</span></span>
|
||||||
|
<span class="val"><a href="https://git.wrede.ca/andreas/heartbeat" target="_blank" rel="noopener">git.wrede.ca/andreas/heartbeat</a></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row">
|
</section>
|
||||||
<span class="info-label">Uptime</span>
|
|
||||||
<span class="info-value" id="uptime-value">{{ uptime_str }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="info-label">Hosts monitored</span>
|
|
||||||
<span class="info-value">{{ host_count }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h2>Contact & Source</h2>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="info-label">Author</span>
|
|
||||||
<span class="info-value">Andreas Wrede</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="info-label">Email</span>
|
|
||||||
<span class="info-value"><a href="mailto:aew.hbd@wrede.ca">aew.hbd@wrede.ca</a></span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="info-label">Repository</span>
|
|
||||||
<span class="info-value"><a href="https://git.wrede.ca/andreas/heartbeat" target="_blank" rel="noopener">git.wrede.ca/andreas/heartbeat</a></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
+142
-493
@@ -1,376 +1,97 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
{% include 'head.html' %}
|
{% include 'head.html' %}
|
||||||
|
<link rel="stylesheet" href="/static/hbd-ui.css">
|
||||||
|
<script src="/static/hbd-ui.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
html, body { height: auto; overflow: visible; }
|
||||||
|
body { background: var(--st-paper); padding: 60px 0 0; }
|
||||||
|
|
||||||
html, body {
|
.alerts-main { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
|
||||||
height: auto;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
/* summary tiles */
|
||||||
max-width: 1400px;
|
.stats { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 18px; }
|
||||||
margin: 0 auto;
|
.stat {
|
||||||
|
flex: 1 1 140px; display: flex; align-items: baseline; gap: 10px;
|
||||||
|
background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 8px;
|
||||||
|
padding: 10px 14px;
|
||||||
}
|
}
|
||||||
|
.stat .num { font-family: var(--st-mono); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||||
|
.stat .lbl { font-family: var(--st-mono); font-size: 11.5px; color: var(--st-faint); }
|
||||||
|
.stat.crit .num { color: var(--st-crit); }
|
||||||
|
.stat.warn .num { color: var(--st-warn); }
|
||||||
|
.stat.ok .num { color: var(--st-ok); }
|
||||||
|
|
||||||
h1 { color: #333; margin-bottom: 5px; margin-top: 15px; font-size: 1.5em; }
|
/* filter bar */
|
||||||
|
.filterbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; }
|
||||||
|
.filterbar .fbtn {
|
||||||
|
font-family: var(--st-mono); font-size: 12px; cursor: pointer;
|
||||||
|
color: var(--st-muted); background: var(--st-surface); border: 1px solid var(--st-line);
|
||||||
|
border-radius: 999px; padding: 5px 12px;
|
||||||
|
}
|
||||||
|
.filterbar .fbtn.active { background: var(--st-accent-soft); border-color: var(--st-accent); color: var(--st-accent); font-weight: 600; }
|
||||||
|
.filterbar input {
|
||||||
|
font: 12px var(--st-mono); color: var(--st-ink);
|
||||||
|
background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 999px;
|
||||||
|
padding: 5px 12px; min-width: 170px;
|
||||||
|
}
|
||||||
|
.filterbar input.invalid { border-color: var(--st-crit); }
|
||||||
|
.filterbar .upd { margin-left: auto; font-size: 11.5px; color: var(--st-faint); }
|
||||||
|
|
||||||
.subtitle {
|
/* alert row specifics */
|
||||||
color: #666;
|
.row.alert-crit { border-left: 3px solid var(--st-crit); padding-left: 11px; }
|
||||||
margin-bottom: 30px;
|
.row.alert-warn { border-left: 3px solid var(--st-warn); padding-left: 11px; }
|
||||||
}
|
.row.acked { opacity: .55; border-left-style: dashed; }
|
||||||
|
.row .id a { color: inherit; text-decoration: none; }
|
||||||
|
.row .id a:hover { color: var(--st-accent); }
|
||||||
|
.acked-chip { color: var(--st-ok); font-size: 12px; white-space: nowrap; }
|
||||||
|
|
||||||
.summary-cards {
|
.empty {
|
||||||
display: flex;
|
padding: 36px 14px; text-align: center; color: var(--st-faint); font-size: 13px;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
}
|
||||||
|
.empty .big { font-size: 26px; color: var(--st-ok); display: block; margin-bottom: 6px; }
|
||||||
.summary-card {
|
.errorbox {
|
||||||
background: white;
|
background: var(--st-crit-soft); color: var(--st-crit);
|
||||||
border-radius: 6px;
|
border-radius: 8px; padding: 14px 16px; font-size: 13px;
|
||||||
padding: 6px 14px;
|
|
||||||
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
border-left: 4px solid #ddd;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-card.critical { border-left-color: #ea1e0f; }
|
|
||||||
.summary-card.warning { border-left-color: #ff9800; }
|
|
||||||
.summary-card.ok { border-left-color: #4caf50; }
|
|
||||||
|
|
||||||
.summary-number {
|
|
||||||
font-size: 1.4em;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-number.critical { color: #ea1e0f; }
|
|
||||||
.summary-number.warning { color: #ff9800; }
|
|
||||||
.summary-number.ok { color: #4caf50; }
|
|
||||||
|
|
||||||
.summary-label {
|
|
||||||
color: #666;
|
|
||||||
font-size: 1.00em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters {
|
|
||||||
background: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 15px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-button {
|
|
||||||
padding: 8px 16px;
|
|
||||||
border: 2px solid #ddd;
|
|
||||||
background: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-button:hover {
|
|
||||||
border-color: #2196f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-button.active {
|
|
||||||
background: #2196f3;
|
|
||||||
color: white;
|
|
||||||
border-color: #2196f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
padding: 7px 12px;
|
|
||||||
border: 2px solid #ddd;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
outline: none;
|
|
||||||
width: 200px;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input:focus {
|
|
||||||
border-color: #2196f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input.invalid {
|
|
||||||
border-color: #f44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alerts-container {
|
|
||||||
background: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-item {
|
|
||||||
border-left: 5px solid #ddd;
|
|
||||||
padding: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
background: #fafafa;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-item.acknowledged {
|
|
||||||
opacity: 0.8;
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-item:hover {
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
||||||
transform: translateX(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-item.critical {
|
|
||||||
border-left-color: #f44336;
|
|
||||||
background: #ffebee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-item.warning {
|
|
||||||
border-left-color: #ff9800;
|
|
||||||
background: #fff3e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-item.unknown {
|
|
||||||
border-left-color: #9e9e9e;
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-main {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-level {
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 0.75em;
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-level.critical {
|
|
||||||
background: #f44336;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-level.warning {
|
|
||||||
background: #ff9800;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-level.unknown {
|
|
||||||
background: #9e9e9e;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-hostname {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #0066cc;
|
|
||||||
font-size: 1.1em;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.alert-hostname:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-metric {
|
|
||||||
color: #0066cc;
|
|
||||||
font-size: 1.1em;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-details {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
color: #666;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-value {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-duration {
|
|
||||||
color: #999;
|
|
||||||
font-size: 1.00em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.acknowledge-btn {
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: #2196f3;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1.00em;
|
|
||||||
transition: all 0.2s;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.acknowledge-btn:hover {
|
|
||||||
background: #1976d2;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.acknowledge-btn:disabled {
|
|
||||||
background: #ccc;
|
|
||||||
cursor: not-allowed;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.acknowledged-badge {
|
|
||||||
padding: 4px 8px;
|
|
||||||
background: #4caf50;
|
|
||||||
color: white;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.75em;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-alerts {
|
|
||||||
text-align: center;
|
|
||||||
padding: 60px 20px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-alerts-icon {
|
|
||||||
font-size: 4em;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
background: #ffebee;
|
|
||||||
border-left: 4px solid #f44336;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #c62828;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-info {
|
|
||||||
text-align: center;
|
|
||||||
color: #999;
|
|
||||||
font-size: 1.00em;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.last-update {
|
|
||||||
color: #666;
|
|
||||||
font-size: 0.9em;
|
|
||||||
text-align: right;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Dark mode ── */
|
|
||||||
html[data-theme="dark"] h1 { color: var(--text); }
|
|
||||||
html[data-theme="dark"] .subtitle { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .summary-card { background: var(--surface); }
|
|
||||||
html[data-theme="dark"] .summary-label { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .filters { background: var(--surface); }
|
|
||||||
html[data-theme="dark"] .filter-label { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .filter-button { background: var(--surface-2); border-color: var(--border); color: var(--text); }
|
|
||||||
html[data-theme="dark"] .filter-button.active { background: #2196f3; color: #fff; border-color: #2196f3; }
|
|
||||||
html[data-theme="dark"] .filter-input { background: var(--input-bg); border-color: var(--input-border); color: var(--text); }
|
|
||||||
html[data-theme="dark"] .alerts-container { background: var(--surface); }
|
|
||||||
html[data-theme="dark"] .alert-item { background: var(--surface-2); }
|
|
||||||
html[data-theme="dark"] .alert-item.acknowledged { background: var(--surface-3); }
|
|
||||||
html[data-theme="dark"] .alert-item.critical { background: #2e0a0a; border-left-color: #f44336; }
|
|
||||||
html[data-theme="dark"] .alert-item.warning { background: #2e1a00; border-left-color: #ff9800; }
|
|
||||||
html[data-theme="dark"] .alert-item.unknown { background: var(--surface-2); }
|
|
||||||
html[data-theme="dark"] .alert-hostname { color: var(--link); }
|
|
||||||
html[data-theme="dark"] .alert-details { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .alert-value { color: var(--text); }
|
|
||||||
html[data-theme="dark"] .alert-duration { color: var(--text-muted); }
|
|
||||||
html[data-theme="dark"] .last-update { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .refresh-info { color: var(--text-muted); border-top-color: var(--border); }
|
|
||||||
html[data-theme="dark"] .no-alerts,
|
|
||||||
html[data-theme="dark"] .loading { color: var(--text-muted); }
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{% include 'nav.html' %}
|
{% include 'nav.html' %}
|
||||||
|
|
||||||
<div class="container">
|
<div class="st-toolbar">
|
||||||
<h1>{{ header }}</h1>
|
<span class="brand">hbd<span class="tld">·alerts</span></span>
|
||||||
<p class="subtitle">Real-time monitoring alerts and threshold violations</p>
|
<span class="hintline">threshold violations and reachability — refreshes every 15 s</span>
|
||||||
|
</div>
|
||||||
|
<svg class="pulse" viewBox="0 0 1200 14" preserveAspectRatio="none" aria-hidden="true">
|
||||||
|
<polyline points="0,10 340,10 352,10 358,3 364,13 370,1 378,12 384,10 560,10 572,10 578,3 584,13 590,1 598,12 604,10 1200,10"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<div class="summary-cards" id="summary-cards">
|
<div class="alerts-main">
|
||||||
<div class="summary-card critical">
|
<div class="stats">
|
||||||
<div class="summary-label">Critical</div>
|
<div class="stat crit"><span class="num" id="critical-count">–</span><span class="lbl">critical</span></div>
|
||||||
<div class="summary-number critical" id="critical-count">-</div>
|
<div class="stat warn"><span class="num" id="warning-count">–</span><span class="lbl">warning</span></div>
|
||||||
</div>
|
<div class="stat ok"><span class="num" id="host-count">–</span><span class="lbl">hosts</span></div>
|
||||||
<div class="summary-card warning">
|
|
||||||
<div class="summary-label">Warning</div>
|
|
||||||
<div class="summary-number warning" id="warning-count">-</div>
|
|
||||||
</div>
|
|
||||||
<div class="summary-card ok">
|
|
||||||
<div class="summary-label">Total Hosts</div>
|
|
||||||
<div class="summary-number ok" id="host-count">-</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filters">
|
<div class="filterbar">
|
||||||
<span class="filter-label">Show:</span>
|
<button class="fbtn active" onclick="filterAlerts('all', this)">all</button>
|
||||||
<button class="filter-button active" onclick="filterAlerts('all')">All</button>
|
<button class="fbtn" onclick="filterAlerts('critical', this)">critical</button>
|
||||||
<button class="filter-button" onclick="filterAlerts('critical')">Critical Only</button>
|
<button class="fbtn" onclick="filterAlerts('warning', this)">warning</button>
|
||||||
<button class="filter-button" onclick="filterAlerts('warning')">Warning Only</button>
|
<input id="host-filter" type="text" placeholder="host filter (regex)" oninput="onHostFilterInput(this)">
|
||||||
<input id="host-filter" class="filter-input" type="text" placeholder="host filter (regex)" oninput="onHostFilterInput(this)">
|
<span class="upd">updated <span id="last-update-time">never</span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="alerts-container">
|
<section class="st" id="alerts">
|
||||||
<div class="last-update">Last updated: <span id="last-update-time">Never</span></div>
|
<div class="sec-head">
|
||||||
<div id="alerts-list">
|
<h2>alerts<span class="colon">:</span></h2>
|
||||||
<div class="loading">Loading alerts...</div>
|
<span class="count" id="alert-count"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="refresh-info">
|
<div class="list" id="alerts-list">
|
||||||
Auto-refreshing every 15 seconds
|
<div class="empty">Loading alerts…</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -378,207 +99,138 @@
|
|||||||
let allAlerts = [];
|
let allAlerts = [];
|
||||||
let hostFilterRe = null;
|
let hostFilterRe = null;
|
||||||
|
|
||||||
|
function escHtml(s) {
|
||||||
|
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');
|
||||||
|
}
|
||||||
|
|
||||||
async function loadAlerts() {
|
async function loadAlerts() {
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/0/alerts');
|
const response = await fetch('/api/0/alerts');
|
||||||
if (!response.ok) {
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||||
throw new Error(`HTTP ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
allAlerts = data.alerts;
|
allAlerts = data.alerts;
|
||||||
|
|
||||||
// Update summary cards
|
|
||||||
document.getElementById('critical-count').textContent = data.summary.critical || 0;
|
document.getElementById('critical-count').textContent = data.summary.critical || 0;
|
||||||
document.getElementById('warning-count').textContent = data.summary.warning || 0;
|
document.getElementById('warning-count').textContent = data.summary.warning || 0;
|
||||||
document.getElementById('host-count').textContent = data.host_count || 0;
|
document.getElementById('host-count').textContent = data.host_count || 0;
|
||||||
|
|
||||||
// Update last update time
|
|
||||||
document.getElementById('last-update-time').textContent = new Date().toLocaleTimeString();
|
document.getElementById('last-update-time').textContent = new Date().toLocaleTimeString();
|
||||||
|
|
||||||
// Render alerts
|
|
||||||
renderAlerts(allAlerts);
|
renderAlerts(allAlerts);
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
document.getElementById('alerts-list').innerHTML =
|
document.getElementById('alerts-list').innerHTML =
|
||||||
`<div class="error">Failed to load alerts: ${error.message}</div>`;
|
`<div class="errorbox">Failed to load alerts: ${escHtml(error.message)}. Retrying automatically.</div>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderAlerts(alerts) {
|
function renderAlerts(alerts) {
|
||||||
const container = document.getElementById('alerts-list');
|
const container = document.getElementById('alerts-list');
|
||||||
|
|
||||||
// Filter alerts based on current filter
|
let filtered = alerts;
|
||||||
let filteredAlerts = alerts;
|
|
||||||
if (currentFilter !== 'all') {
|
if (currentFilter !== 'all') {
|
||||||
filteredAlerts = filteredAlerts.filter(alert =>
|
filtered = filtered.filter(a => a.level.toLowerCase() === currentFilter);
|
||||||
alert.level.toLowerCase() === currentFilter
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
if (hostFilterRe) {
|
if (hostFilterRe) {
|
||||||
filteredAlerts = filteredAlerts.filter(alert => hostFilterRe.test(alert.hostname));
|
filtered = filtered.filter(a => hostFilterRe.test(a.hostname));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (filteredAlerts.length === 0) {
|
document.getElementById('alert-count').textContent =
|
||||||
if (currentFilter === 'all' && alerts.length === 0) {
|
filtered.length === alerts.length ? alerts.length : `${filtered.length} of ${alerts.length}`;
|
||||||
container.innerHTML = `
|
|
||||||
<div class="no-alerts">
|
if (filtered.length === 0) {
|
||||||
<div class="no-alerts-icon">✓</div>
|
container.innerHTML = (currentFilter === 'all' && !hostFilterRe && alerts.length === 0)
|
||||||
<h2>All Systems Normal</h2>
|
? `<div class="empty"><span class="big">✓</span>All systems normal — no active alerts.</div>`
|
||||||
<p>No active alerts at this time</p>
|
: `<div class="empty">No matching alerts.</div>`;
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
} else {
|
|
||||||
container.innerHTML = `
|
|
||||||
<div class="no-alerts">
|
|
||||||
<p>No ${currentFilter} alerts</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let html = '';
|
container.innerHTML = filtered.map(renderAlert).join('');
|
||||||
for (const alert of filteredAlerts) {
|
|
||||||
html += renderAlert(alert);
|
|
||||||
}
|
|
||||||
container.innerHTML = html;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderAlert(alert) {
|
function renderAlert(alert) {
|
||||||
const level = alert.level.toLowerCase();
|
const level = alert.level.toLowerCase();
|
||||||
|
const cls = level === 'critical' ? 'crit' : (level === 'warning' ? 'warn' : 'level');
|
||||||
const duration = getDuration(alert.since);
|
const duration = getDuration(alert.since);
|
||||||
const acknowledged = alert.acknowledged || false;
|
const acked = alert.acknowledged || false;
|
||||||
|
|
||||||
// Use formatted message if available, otherwise build from individual fields
|
const metric = (alert.metric_path.includes('.')
|
||||||
let valueText = `Value: <span class="alert-value">${formatValue(alert.last_value)}</span>`;
|
? alert.metric_path.slice(alert.metric_path.indexOf('.') + 1)
|
||||||
|
: alert.metric_path).replace(/_status_code$/, '');
|
||||||
|
|
||||||
|
let chips = `<span class="chip ${cls}">${escHtml(alert.level)}</span>`;
|
||||||
|
chips += `<span class="chip"><span class="k">metric</span> ${escHtml(metric)}</span>`;
|
||||||
if (alert.formatted_message) {
|
if (alert.formatted_message) {
|
||||||
valueText += ` <span class="threshold-info">${alert.formatted_message}</span>`;
|
chips += `<span class="chip">${escHtml(alert.formatted_message)}</span>`;
|
||||||
} else if (alert.threshold_value !== undefined && alert.threshold_value !== null && alert.operator) {
|
} else {
|
||||||
valueText += ` <span class="threshold-info">(threshold: ${alert.operator} ${formatValue(alert.threshold_value)})</span>`;
|
chips += `<span class="chip"><span class="k">value</span> ${escHtml(formatValue(alert.last_value))}</span>`;
|
||||||
|
if (alert.threshold_value !== undefined && alert.threshold_value !== null && alert.operator) {
|
||||||
|
chips += `<span class="chip level">${escHtml(alert.operator)} ${escHtml(formatValue(alert.threshold_value))}</span>`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (alert.recovery_threshold !== undefined && alert.recovery_threshold !== null) {
|
if (alert.recovery_threshold !== undefined && alert.recovery_threshold !== null) {
|
||||||
const recOp = (alert.operator === '>' || alert.operator === '>=') ? '<' : '>';
|
const recOp = (alert.operator === '>' || alert.operator === '>=') ? '<' : '>';
|
||||||
valueText += ` <span class="threshold-info" style="color:#888">(recovers ${recOp} ${formatValue(alert.recovery_threshold)})</span>`;
|
chips += `<span class="chip level">recovers ${recOp} ${escHtml(formatValue(alert.recovery_threshold))}</span>`;
|
||||||
}
|
}
|
||||||
|
chips += `<span class="chip"><span class="k">for</span> ${duration}</span>`;
|
||||||
// Build actions section
|
|
||||||
let actionsHtml = '';
|
const act = acked
|
||||||
if (acknowledged) {
|
? `<span class="acked-chip">✓ acknowledged</span>`
|
||||||
actionsHtml = `
|
: `<button class="btn small" onclick="acknowledgeAlert('${escHtml(alert.hostname)}', '${escHtml(alert.metric_path)}', event)">Acknowledge</button>`;
|
||||||
<div class="alert-actions">
|
|
||||||
<div class="acknowledged-badge">✓ Acknowledged</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
} else {
|
|
||||||
actionsHtml = `
|
|
||||||
<div class="alert-actions">
|
|
||||||
<button class="acknowledge-btn" onclick="acknowledgeAlert('${alert.hostname}', '${alert.metric_path}', event)">
|
|
||||||
Acknowledge
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="alert-item ${level} ${acknowledged ? 'acknowledged' : ''}">
|
<div class="row alert-${cls === 'level' ? 'warn' : cls}${acked ? ' acked' : ''}">
|
||||||
<div class="alert-main">
|
<span class="id">
|
||||||
<div class="alert-header">
|
<span class="dot ${cls === 'crit' ? 'crit' : 'warn'}"></span>
|
||||||
<span class="alert-level ${level}">${alert.level}</span>
|
<a class="name" href="/plugins#${encodeURIComponent(alert.hostname)}">${escHtml(alert.hostname)}</a>
|
||||||
<a class="alert-hostname" href="/plugins#${alert.hostname}">${alert.hostname}</a>
|
</span>
|
||||||
<span class="alert-metric">${(alert.metric_path.includes('.') ? alert.metric_path.slice(alert.metric_path.indexOf('.') + 1) : alert.metric_path).replace(/_status_code$/, '')}</span>
|
<span class="facts">${chips}</span>
|
||||||
</div>
|
<span class="act">${act}</span>
|
||||||
<div class="alert-details">
|
</div>`;
|
||||||
<span>${valueText}</span>
|
|
||||||
<span class="alert-duration">Active for ${duration}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
${actionsHtml}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatValue(value) {
|
function formatValue(value) {
|
||||||
if (typeof value === 'number') {
|
if (typeof value === 'number') {
|
||||||
if (value > 1000) {
|
if (value > 1000) return value.toLocaleString();
|
||||||
return value.toLocaleString();
|
|
||||||
}
|
|
||||||
return value.toFixed(2);
|
return value.toFixed(2);
|
||||||
}
|
}
|
||||||
return value;
|
return value;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDuration(timestamp) {
|
function getDuration(timestamp) {
|
||||||
const now = Date.now() / 1000;
|
const seconds = Math.floor(Date.now() / 1000 - timestamp);
|
||||||
const seconds = Math.floor(now - timestamp);
|
if (seconds < 60) return `${seconds}s`;
|
||||||
|
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
|
||||||
if (seconds < 60) {
|
if (seconds < 86400) {
|
||||||
return `${seconds}s`;
|
return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
|
||||||
} else if (seconds < 3600) {
|
|
||||||
return `${Math.floor(seconds / 60)}m`;
|
|
||||||
} else if (seconds < 86400) {
|
|
||||||
const hours = Math.floor(seconds / 3600);
|
|
||||||
const minutes = Math.floor((seconds % 3600) / 60);
|
|
||||||
return `${hours}h ${minutes}m`;
|
|
||||||
} else {
|
|
||||||
const days = Math.floor(seconds / 86400);
|
|
||||||
const hours = Math.floor((seconds % 86400) / 3600);
|
|
||||||
return `${days}d ${hours}h`;
|
|
||||||
}
|
}
|
||||||
|
return `${Math.floor(seconds / 86400)}d ${Math.floor((seconds % 86400) / 3600)}h`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function filterAlerts(filter) {
|
function filterAlerts(filter, btn) {
|
||||||
currentFilter = filter;
|
currentFilter = filter;
|
||||||
|
document.querySelectorAll('.filterbar .fbtn').forEach(b => b.classList.remove('active'));
|
||||||
// Update active button
|
btn.classList.add('active');
|
||||||
document.querySelectorAll('.filter-button').forEach(btn => {
|
|
||||||
btn.classList.remove('active');
|
|
||||||
});
|
|
||||||
event.target.classList.add('active');
|
|
||||||
|
|
||||||
// Re-render with new filter
|
|
||||||
renderAlerts(allAlerts);
|
renderAlerts(allAlerts);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function acknowledgeAlert(hostname, metricPath, event) {
|
async function acknowledgeAlert(hostname, metricPath, event) {
|
||||||
// Prevent event bubbling
|
if (event) event.stopPropagation();
|
||||||
if (event) {
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Disable the button
|
|
||||||
const button = event.target;
|
const button = event.target;
|
||||||
button.disabled = true;
|
button.disabled = true;
|
||||||
button.textContent = 'Acknowledging...';
|
button.textContent = 'Acknowledging…';
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/0/alerts/acknowledge', {
|
const response = await fetch('/api/0/alerts/acknowledge', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {'Content-Type': 'application/json'},
|
||||||
'Content-Type': 'application/json',
|
body: JSON.stringify({hostname: hostname, metric_path: metricPath}),
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
hostname: hostname,
|
|
||||||
metric_path: metricPath,
|
|
||||||
}),
|
|
||||||
});
|
});
|
||||||
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await response.json();
|
const result = await response.json();
|
||||||
|
const a = allAlerts.find(x => x.hostname === hostname && x.metric_path === metricPath);
|
||||||
// Update the alert in our local data
|
if (a) {
|
||||||
const alert = allAlerts.find(a => a.hostname === hostname && a.metric_path === metricPath);
|
a.acknowledged = true;
|
||||||
if (alert) {
|
a.acknowledged_at = result.acknowledged_at;
|
||||||
alert.acknowledged = true;
|
|
||||||
alert.acknowledged_at = result.acknowledged_at;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Re-render alerts
|
|
||||||
renderAlerts(allAlerts);
|
renderAlerts(allAlerts);
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
alert(`Failed to acknowledge alert: ${error.message}`);
|
alert(`Failed to acknowledge alert: ${error.message}`);
|
||||||
button.disabled = false;
|
button.disabled = false;
|
||||||
@@ -603,10 +255,8 @@
|
|||||||
renderAlerts(allAlerts);
|
renderAlerts(allAlerts);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Auto-refresh every 15 seconds
|
|
||||||
setInterval(loadAlerts, 15000);
|
setInterval(loadAlerts, 15000);
|
||||||
|
|
||||||
// Initialise filter from URL query string (?filter=...)
|
|
||||||
(function () {
|
(function () {
|
||||||
const param = new URLSearchParams(window.location.search).get('filter');
|
const param = new URLSearchParams(window.location.search).get('filter');
|
||||||
if (param) {
|
if (param) {
|
||||||
@@ -616,7 +266,6 @@
|
|||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
// Initial load
|
|
||||||
loadAlerts();
|
loadAlerts();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
+151
-325
@@ -2,38 +2,30 @@
|
|||||||
<html>
|
<html>
|
||||||
{% include 'head.html' %}
|
{% include 'head.html' %}
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/static/hbd-ui.css">
|
||||||
|
<script src="/static/hbd-ui.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body { overflow: hidden; }
|
body { overflow: hidden; background: var(--st-paper); }
|
||||||
|
|
||||||
|
/* This page scrolls inside .container, not the body — the toolbar is
|
||||||
|
always in view, and sticky misbehaves inside an overflow:hidden body. */
|
||||||
|
.st-toolbar { position: static; }
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-height: calc(100vh - 120px);
|
max-height: calc(100vh - var(--bars-h, 94px) - 30px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-right: 10px;
|
padding: 0 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
/* ── Host cards: one record list per host ───────────────────── */
|
||||||
color: #333;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
margin-top: 15px;
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Host cards ─────────────────────────────────────────────── */
|
|
||||||
|
|
||||||
.host-card {
|
.host-card {
|
||||||
background: white;
|
background: var(--st-surface);
|
||||||
border-radius: 6px;
|
border: 1px solid var(--st-line);
|
||||||
padding: 0;
|
border-radius: 8px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 8px;
|
||||||
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.host-header {
|
.host-header {
|
||||||
@@ -42,115 +34,74 @@
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
padding: 10px 15px;
|
padding: 8px 14px;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
.host-header:hover { background: var(--st-surface-2); border-radius: 8px 8px 0 0; }
|
||||||
|
.host-card.collapsed .host-header:hover { border-radius: 8px; }
|
||||||
|
|
||||||
.host-header:hover { background: #f9f9f9; border-radius: 6px 6px 0 0; }
|
.host-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||||
.host-card.collapsed .host-header:hover { border-radius: 6px; }
|
|
||||||
|
|
||||||
.host-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapse-icon {
|
.collapse-icon {
|
||||||
font-size: 1em;
|
font-size: .85em;
|
||||||
color: #888;
|
color: var(--st-faint);
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
min-width: 16px;
|
min-width: 14px;
|
||||||
}
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) { .collapse-icon, .acc-icon { transition: none; } }
|
||||||
.host-card.collapsed .collapse-icon { transform: rotate(-90deg); }
|
.host-card.collapsed .collapse-icon { transform: rotate(-90deg); }
|
||||||
|
|
||||||
.host-name {
|
.host-name {
|
||||||
font-size: 1.05em;
|
font-family: var(--st-mono);
|
||||||
font-weight: bold;
|
font-size: 13.5px;
|
||||||
color: #333;
|
font-weight: 600;
|
||||||
|
color: var(--st-ink);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Glance strip ───────────────────────────────────────────── */
|
/* ── Glance strip ───────────────────────────────────────────── */
|
||||||
|
.glance-strip { display: flex; align-items: center; gap: 5px; flex: 1; flex-wrap: wrap; padding: 0 8px; }
|
||||||
.glance-strip {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
flex: 1;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glance-chip {
|
.glance-chip {
|
||||||
font-size: 0.78em;
|
display: inline-flex; align-items: center;
|
||||||
padding: 2px 9px;
|
font-family: var(--st-mono); font-size: 11px; line-height: 1.3;
|
||||||
border-radius: 10px;
|
padding: 3px 7px; border-radius: 4px; white-space: nowrap;
|
||||||
font-weight: 500;
|
background: var(--st-ok-soft); color: var(--st-ok);
|
||||||
white-space: nowrap;
|
|
||||||
background: #e8f5e9;
|
|
||||||
color: #2e7d32;
|
|
||||||
}
|
}
|
||||||
|
.glance-chip.warn { background: var(--st-warn-soft); color: var(--st-warn); }
|
||||||
.glance-chip.warn { background: #fff3e0; color: #e65100; }
|
.glance-chip.crit { background: var(--st-crit-soft); color: var(--st-crit); }
|
||||||
.glance-chip.crit { background: #ffebee; color: #b71c1c; }
|
.glance-chip.neutral { background: var(--st-surface-2); color: var(--st-muted); }
|
||||||
.glance-chip.neutral { background: #f5f5f5; color: #555; }
|
.glance-loading { font-size: 11.5px; color: var(--st-faint); font-style: italic; }
|
||||||
.glance-loading { font-size: 0.8em; color: #bbb; font-style: italic; }
|
|
||||||
|
|
||||||
/* ── Host right zone ────────────────────────────────────────── */
|
/* ── Host right zone ────────────────────────────────────────── */
|
||||||
|
.host-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||||
.host-right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nagios-badge {
|
.nagios-badge {
|
||||||
font-size: 0.75em;
|
font-family: var(--st-mono); font-size: 10.5px; font-weight: 700;
|
||||||
font-weight: bold;
|
padding: 3px 9px; border-radius: 4px;
|
||||||
padding: 2px 10px;
|
background: var(--st-surface-2); color: var(--st-muted);
|
||||||
border-radius: 10px;
|
text-transform: uppercase; white-space: nowrap;
|
||||||
background: #9e9e9e;
|
|
||||||
color: white;
|
|
||||||
text-transform: uppercase;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
.nagios-badge.ok { background: var(--st-ok-soft); color: var(--st-ok); }
|
||||||
.nagios-badge.ok { background: #4caf50; }
|
.nagios-badge.warning { background: var(--st-warn-soft); color: var(--st-warn); }
|
||||||
.nagios-badge.warning { background: #ff9800; }
|
.nagios-badge.critical { background: var(--st-crit-soft); color: var(--st-crit); }
|
||||||
.nagios-badge.critical { background: #f44336; }
|
|
||||||
|
|
||||||
.os-label {
|
.os-label {
|
||||||
font-size: 0.75em;
|
font-size: 11px; color: var(--st-faint); white-space: nowrap;
|
||||||
color: #999;
|
max-width: 200px; overflow: hidden; text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 200px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.host-action-btn {
|
.host-action-btn {
|
||||||
font-size: 0.75em;
|
font: 600 12px/1 inherit;
|
||||||
font-weight: bold;
|
padding: 4px 10px; border-radius: 6px;
|
||||||
padding: 3px 10px;
|
border: 1px solid var(--st-line);
|
||||||
border-radius: 4px;
|
background: var(--st-surface);
|
||||||
border: none;
|
cursor: pointer; text-decoration: none; white-space: nowrap;
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
.host-action-btn.update-btn {
|
.host-action-btn.update-btn { color: var(--st-accent); }
|
||||||
background: #e3f2fd;
|
.host-action-btn.update-btn:hover { background: var(--st-accent-soft); border-color: var(--st-accent); }
|
||||||
color: #1565c0;
|
.host-action-btn.delete-btn { color: var(--st-crit); }
|
||||||
}
|
.host-action-btn.delete-btn:hover { background: var(--st-crit-soft); border-color: var(--st-crit); }
|
||||||
.host-action-btn.update-btn:hover { background: #bbdefb; }
|
|
||||||
.host-action-btn.delete-btn {
|
|
||||||
background: #ffebee;
|
|
||||||
color: #c62828;
|
|
||||||
}
|
|
||||||
.host-action-btn.delete-btn:hover { background: #ffcdd2; }
|
|
||||||
|
|
||||||
/* ── Action result toast ───────────────────────────────────── */
|
/* ── Action result toast ───────────────────────────────────── */
|
||||||
#action-toast {
|
#action-toast {
|
||||||
@@ -158,8 +109,8 @@
|
|||||||
bottom: 24px;
|
bottom: 24px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%) translateY(20px);
|
transform: translateX(-50%) translateY(20px);
|
||||||
background: #323232;
|
background: var(--st-ink);
|
||||||
color: #fff;
|
color: var(--st-paper);
|
||||||
padding: 12px 22px;
|
padding: 12px 22px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
@@ -171,296 +122,171 @@
|
|||||||
z-index: 9000;
|
z-index: 9000;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
#action-toast.show {
|
#action-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||||
opacity: 1;
|
#action-toast.error { background: var(--st-crit); color: #fff; }
|
||||||
transform: translateX(-50%) translateY(0);
|
|
||||||
}
|
|
||||||
#action-toast.error { background: #c62828; }
|
|
||||||
|
|
||||||
/* ── Host body ──────────────────────────────────────────────── */
|
/* ── Host body ──────────────────────────────────────────────── */
|
||||||
|
.host-body { padding: 8px 14px 12px; border-top: 1px solid var(--st-line-soft); }
|
||||||
.host-body {
|
|
||||||
padding: 8px 15px 12px;
|
|
||||||
border-top: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-card.collapsed .host-body { display: none; }
|
.host-card.collapsed .host-body { display: none; }
|
||||||
|
|
||||||
/* ── Plugin accordions ──────────────────────────────────────── */
|
/* ── Plugin accordions ──────────────────────────────────────── */
|
||||||
|
|
||||||
.plugin-accordion {
|
.plugin-accordion {
|
||||||
border: 1px solid #e8e8e8;
|
border: 1px solid var(--st-line-soft);
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plugin-acc-header {
|
.plugin-acc-header {
|
||||||
display: flex;
|
display: flex; align-items: center; gap: 10px;
|
||||||
align-items: center;
|
padding: 6px 12px; cursor: pointer;
|
||||||
gap: 10px;
|
background: var(--st-surface-2);
|
||||||
padding: 7px 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
background: #fafafa;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
.plugin-acc-header:hover { background: var(--st-accent-soft); }
|
||||||
|
|
||||||
.plugin-acc-header:hover { background: #f0f4ff; }
|
.acc-icon { font-size: 0.7em; color: var(--st-faint); transition: transform 0.15s; min-width: 12px; }
|
||||||
|
|
||||||
.acc-icon {
|
|
||||||
font-size: 0.7em;
|
|
||||||
color: #999;
|
|
||||||
transition: transform 0.15s;
|
|
||||||
min-width: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plugin-accordion:not(.collapsed) .acc-icon { transform: rotate(90deg); }
|
.plugin-accordion:not(.collapsed) .acc-icon { transform: rotate(90deg); }
|
||||||
|
|
||||||
.plugin-label {
|
.plugin-label {
|
||||||
font-weight: 600;
|
font-family: var(--st-mono);
|
||||||
font-size: 1.00em;
|
font-weight: 600; font-size: 12.5px;
|
||||||
color: #444;
|
color: var(--st-ink);
|
||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
}
|
}
|
||||||
|
.plugin-summary { font-family: var(--st-mono); font-size: 11.5px; color: var(--st-faint); flex: 1; }
|
||||||
.plugin-summary {
|
|
||||||
font-size: 0.82em;
|
|
||||||
color: #888;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plugin-accordion.collapsed .plugin-acc-body { display: none; }
|
.plugin-accordion.collapsed .plugin-acc-body { display: none; }
|
||||||
|
|
||||||
.plugin-acc-body { padding: 10px 12px; }
|
.plugin-acc-body { padding: 10px 12px; }
|
||||||
|
|
||||||
/* ── Tables ─────────────────────────────────────────────────── */
|
/* ── Tables ─────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.data-table {
|
.data-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 1.00em;
|
font-size: 12.5px;
|
||||||
background: #fff;
|
background: var(--st-surface);
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
border: 1px solid var(--st-line-soft);
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
.data-table thead { background: var(--st-surface-2); }
|
||||||
.data-table thead { background: #2196f3; color: white; }
|
|
||||||
|
|
||||||
.data-table th {
|
.data-table th {
|
||||||
padding: 7px 10px;
|
font-family: var(--st-mono);
|
||||||
text-align: left;
|
font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
|
||||||
font-weight: 600;
|
color: var(--st-faint); font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-align: left; padding: 5px 8px;
|
||||||
font-size: 0.75em;
|
border-bottom: 1px solid var(--st-line);
|
||||||
letter-spacing: 0.4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table th.num { text-align: right; }
|
.data-table th.num { text-align: right; }
|
||||||
.data-table th.center { text-align: center; }
|
.data-table th.center { text-align: center; }
|
||||||
|
|
||||||
.data-table td {
|
.data-table td {
|
||||||
/* padding: 6px 10px; */
|
padding: 4px 8px;
|
||||||
border-top: 1px solid #e8e8e8;
|
border-top: 1px solid var(--st-line-soft);
|
||||||
color: #333;
|
color: var(--st-ink);
|
||||||
}
|
}
|
||||||
|
.data-table td.num { text-align: right; font-family: var(--st-mono); }
|
||||||
.data-table td.num {
|
|
||||||
text-align: right;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
font-size: 0.95em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-table td.center { text-align: center; }
|
.data-table td.center { text-align: center; }
|
||||||
.data-table td.key { color: #666; font-weight: 500; width: 38%; }
|
.data-table td.key { color: var(--st-muted); font-weight: 500; width: 38%; }
|
||||||
|
.data-table tbody tr:hover { background: var(--st-surface-2); }
|
||||||
|
|
||||||
.data-table tbody tr:nth-child(even) { background: #fafafa; }
|
.iface-name { font-family: var(--st-mono); font-weight: 600; color: var(--st-accent); }
|
||||||
.data-table tbody tr:hover { background: #f0f4ff; }
|
|
||||||
|
|
||||||
.iface-name { font-weight: bold; color: #2196f3; }
|
|
||||||
|
|
||||||
/* ── Percent bars ───────────────────────────────────────────── */
|
/* ── Percent bars ───────────────────────────────────────────── */
|
||||||
|
.bar-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
|
||||||
.bar-wrap {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-track {
|
.bar-track {
|
||||||
display: inline-block;
|
flex: 1; height: 7px; border-radius: 4px;
|
||||||
width: 70px;
|
background: var(--st-line-soft); overflow: hidden; min-width: 60px;
|
||||||
height: 6px;
|
|
||||||
background: #e0e0e0;
|
|
||||||
border-radius: 3px;
|
|
||||||
vertical-align: middle;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
|
.bar-fill { height: 100%; border-radius: 4px; background: var(--st-ok); }
|
||||||
.bar-fill {
|
.bar-fill.warn { background: var(--st-warn); }
|
||||||
height: 6px;
|
.bar-fill.crit { background: var(--st-crit); }
|
||||||
border-radius: 3px;
|
|
||||||
background: #4caf50;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-fill.warn { background: #ff9800; }
|
|
||||||
.bar-fill.crit { background: #f44336; }
|
|
||||||
|
|
||||||
/* ── Disk two-table layout ──────────────────────────────────── */
|
/* ── Disk two-table layout ──────────────────────────────────── */
|
||||||
|
.flex-tables { display: flex; gap: 14px; flex-wrap: wrap; }
|
||||||
.flex-tables {
|
|
||||||
display: flex;
|
|
||||||
gap: 14px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-tables > div { flex: 1 1 380px; }
|
.flex-tables > div { flex: 1 1 380px; }
|
||||||
|
|
||||||
.table-section-label {
|
.table-section-label {
|
||||||
font-size: 0.78em;
|
font-family: var(--st-mono);
|
||||||
font-weight: 600;
|
font-size: 11px; font-weight: 600; color: var(--st-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase; letter-spacing: .05em;
|
||||||
color: #888;
|
margin: 4px 0 6px;
|
||||||
letter-spacing: 0.4px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Status / misc ──────────────────────────────────────────── */
|
/* ── Status / misc ──────────────────────────────────────────── */
|
||||||
|
.status-up { color: var(--st-ok); font-weight: bold; }
|
||||||
|
.status-down { color: var(--st-crit); font-weight: bold; }
|
||||||
|
|
||||||
.status-up { color: #4caf50; font-weight: bold; }
|
.pct-ok { color: var(--st-ok); font-weight: bold; }
|
||||||
.status-down { color: #f44336; font-weight: bold; }
|
.pct-warn { color: var(--st-warn); font-weight: bold; }
|
||||||
|
.pct-crit { color: var(--st-crit); font-weight: bold; }
|
||||||
|
|
||||||
.pct-ok { color: #2e7d32; font-weight: bold; }
|
.check-ok { background: var(--st-ok-soft); }
|
||||||
.pct-warn { color: #e65100; font-weight: bold; }
|
.check-warning { background: var(--st-warn-soft); }
|
||||||
.pct-crit { color: #b71c1c; font-weight: bold; }
|
.check-critical { background: var(--st-crit-soft); }
|
||||||
|
.check-unknown { background: var(--st-surface-2); }
|
||||||
|
|
||||||
.check-ok { background: #e8f5e9; }
|
.check-status-ok { color: var(--st-ok); font-weight: bold; }
|
||||||
.check-warning { background: #fff3e0; }
|
.check-status-warning { color: var(--st-warn); font-weight: bold; }
|
||||||
.check-critical { background: #ffebee; }
|
.check-status-critical { color: var(--st-crit); font-weight: bold; }
|
||||||
.check-unknown { background: #f5f5f5; }
|
.check-status-unknown { color: var(--st-faint); font-weight: bold; }
|
||||||
|
|
||||||
.check-status-ok { color: #2e7d32; font-weight: bold; }
|
.check-output { font-size: 0.9em; color: var(--st-muted); }
|
||||||
.check-status-warning { color: #e65100; font-weight: bold; }
|
|
||||||
.check-status-critical { color: #b71c1c; font-weight: bold; }
|
|
||||||
.check-status-unknown { color: #777; font-weight: bold; }
|
|
||||||
|
|
||||||
.check-output { font-size: 0.9em; color: #555; }
|
|
||||||
|
|
||||||
.timestamp {
|
.timestamp {
|
||||||
color: #bbb;
|
font-size: 11px; color: var(--st-faint);
|
||||||
font-size: 0.75em;
|
margin-top: 6px; padding-top: 6px;
|
||||||
margin-top: 8px;
|
border-top: 1px solid var(--st-line-soft);
|
||||||
padding-top: 6px;
|
|
||||||
border-top: 1px solid #f0f0f0;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-data {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
color: #aaa;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
text-align: center;
|
|
||||||
padding: 12px;
|
|
||||||
color: #aaa;
|
|
||||||
font-size: 1.00em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-data { text-align: center; padding: 40px; color: var(--st-faint); }
|
||||||
|
.loading { text-align: center; padding: 12px; color: var(--st-faint); font-style: italic; }
|
||||||
.error {
|
.error {
|
||||||
background: #ffebee;
|
background: var(--st-crit-soft);
|
||||||
border-left: 3px solid #f44336;
|
border-left: 3px solid var(--st-crit);
|
||||||
padding: 8px 12px;
|
padding: 12px 16px; margin: 10px 0;
|
||||||
margin: 8px 0;
|
border-radius: 6px; color: var(--st-crit);
|
||||||
border-radius: 3px;
|
|
||||||
color: #c62828;
|
|
||||||
font-size: 1.00em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Scrollbar ──────────────────────────────────────────────── */
|
/* ── Scrollbar ──────────────────────────────────────────────── */
|
||||||
|
|
||||||
.container::-webkit-scrollbar { width: 8px; }
|
.container::-webkit-scrollbar { width: 8px; }
|
||||||
.container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
|
.container::-webkit-scrollbar-track { background: var(--st-surface-2); border-radius: 4px; }
|
||||||
.container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
|
.container::-webkit-scrollbar-thumb { background: var(--st-line); border-radius: 4px; }
|
||||||
.container::-webkit-scrollbar-thumb:hover { background: #999; }
|
.container::-webkit-scrollbar-thumb:hover { background: var(--st-faint); }
|
||||||
|
|
||||||
/* ── Host info section ──────────────────────────────────────────────────── */
|
/* ── Host info section ──────────────────────────────────────── */
|
||||||
.host-info-section {
|
.host-info-section {
|
||||||
padding: 12px 16px;
|
background: var(--st-surface-2);
|
||||||
background: #fafafa;
|
border-radius: 6px;
|
||||||
border-bottom: 1px solid #e0e0e0;
|
padding: 8px 12px;
|
||||||
font-size: 1.00em;
|
margin-bottom: 8px;
|
||||||
|
font-size: 12.5px;
|
||||||
}
|
}
|
||||||
.info-meta {
|
.info-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
|
||||||
display: grid;
|
.info-label { font-family: var(--st-mono); font-size: 11px; font-weight: 600; color: var(--st-faint); white-space: nowrap; }
|
||||||
grid-template-columns: max-content 1fr;
|
.info-value { color: var(--st-ink); }
|
||||||
gap: 3px 14px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.info-label { font-weight: 600; color: #555; white-space: nowrap; }
|
|
||||||
.info-value { color: #222; }
|
|
||||||
.info-thresholds-title {
|
.info-thresholds-title {
|
||||||
font-weight: 600;
|
font-family: var(--st-mono);
|
||||||
color: #555;
|
font-size: 11px; font-weight: 600; color: var(--st-faint);
|
||||||
margin-bottom: 6px;
|
text-transform: uppercase; letter-spacing: .05em;
|
||||||
|
margin: 8px 0 4px;
|
||||||
}
|
}
|
||||||
.info-note { color: #888; font-style: italic; }
|
.info-note { color: var(--st-faint); font-style: italic; }
|
||||||
.info-loading { color: #bbb; font-style: italic; }
|
.info-loading { color: var(--st-faint); font-style: italic; }
|
||||||
.threshold-covers { font-size: 1.00em; color: #777; font-style: italic; }
|
.threshold-covers { font-size: 11.5px; color: var(--st-faint); font-style: italic; }
|
||||||
|
|
||||||
/* ── Dark mode ── */
|
|
||||||
html[data-theme="dark"] h1 { color: var(--text); }
|
|
||||||
html[data-theme="dark"] .subtitle { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .host-card { background: var(--surface); }
|
|
||||||
html[data-theme="dark"] .host-header:hover { background: var(--surface-2); }
|
|
||||||
html[data-theme="dark"] .host-name { color: var(--text); }
|
|
||||||
html[data-theme="dark"] .collapse-icon,
|
|
||||||
html[data-theme="dark"] .acc-icon { color: var(--text-muted); }
|
|
||||||
html[data-theme="dark"] .host-body { border-top-color: var(--border-3); }
|
|
||||||
html[data-theme="dark"] .plugin-accordion { border-color: var(--border); }
|
|
||||||
html[data-theme="dark"] .plugin-acc-header { background: var(--surface-2); }
|
|
||||||
html[data-theme="dark"] .plugin-acc-header:hover { background: var(--surface-3); }
|
|
||||||
html[data-theme="dark"] .plugin-label { color: var(--text-2); }
|
|
||||||
html[data-theme="dark"] .plugin-summary { color: var(--text-muted); }
|
|
||||||
html[data-theme="dark"] .data-table { background: var(--surface); }
|
|
||||||
html[data-theme="dark"] .data-table td { border-top-color: var(--border); color: var(--text); }
|
|
||||||
html[data-theme="dark"] .data-table td.key { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .data-table tbody tr:nth-child(even) { background: var(--surface-2); }
|
|
||||||
html[data-theme="dark"] .data-table tbody tr:hover { background: #1e3a5f; }
|
|
||||||
html[data-theme="dark"] .bar-track { background: var(--border); }
|
|
||||||
html[data-theme="dark"] .table-section-label { color: var(--text-muted); }
|
|
||||||
html[data-theme="dark"] .no-data,
|
|
||||||
html[data-theme="dark"] .loading { color: var(--text-dim); }
|
|
||||||
html[data-theme="dark"] .timestamp { color: var(--text-dim); border-top-color: var(--border-3); }
|
|
||||||
html[data-theme="dark"] .glance-chip.neutral { background: var(--surface-3); color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .os-label { color: var(--text-muted); }
|
|
||||||
html[data-theme="dark"] .host-info-section { background: var(--surface-2); border-bottom-color: var(--border); }
|
|
||||||
html[data-theme="dark"] .info-label { color: var(--text-3); }
|
|
||||||
html[data-theme="dark"] .info-value { color: var(--text); }
|
|
||||||
html[data-theme="dark"] .info-thresholds-title { color: var(--text-3); }
|
|
||||||
html[data-theme="dark"] .info-note,
|
|
||||||
html[data-theme="dark"] .info-loading,
|
|
||||||
html[data-theme="dark"] .threshold-covers { color: var(--text-muted); }
|
|
||||||
html[data-theme="dark"] .check-ok { background: #0d2e17; }
|
|
||||||
html[data-theme="dark"] .check-warning { background: #2e1a00; }
|
|
||||||
html[data-theme="dark"] .check-critical { background: #2e0a0a; }
|
|
||||||
html[data-theme="dark"] .check-unknown { background: var(--surface-2); }
|
|
||||||
html[data-theme="dark"] .check-output { color: var(--text-sec); }
|
|
||||||
html[data-theme="dark"] .container::-webkit-scrollbar-track { background: var(--surface-2); }
|
|
||||||
html[data-theme="dark"] .container::-webkit-scrollbar-thumb { background: var(--border); }
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{% include 'nav.html' %}
|
{% include 'nav.html' %}
|
||||||
|
|
||||||
|
<div class="st-toolbar">
|
||||||
|
<span class="brand">hbd<span class="tld">·overview</span></span>
|
||||||
|
<span class="hintline">per-host metrics — expand a host for plugin details</span>
|
||||||
|
</div>
|
||||||
|
<svg class="pulse" viewBox="0 0 1200 14" preserveAspectRatio="none" aria-hidden="true">
|
||||||
|
<polyline points="0,10 340,10 352,10 358,3 364,13 370,1 378,12 384,10 560,10 572,10 578,3 584,13 590,1 598,12 604,10 1200,10"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>{{ header }}</h1>
|
|
||||||
<p class="subtitle">Per-host system metrics — expand a host to see plugin details</p>
|
|
||||||
|
|
||||||
{% if not hosts %}
|
{% if not hosts %}
|
||||||
<div class="no-data">
|
<div class="no-data">
|
||||||
|
|||||||
@@ -1,82 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
{% include 'head.html' %}
|
{% include 'head.html' %}
|
||||||
|
<link rel="stylesheet" href="/static/hbd-ui.css">
|
||||||
|
<script src="/static/hbd-ui.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* ── Settings page tokens (green-biased neutrals, teal accent) ── */
|
|
||||||
:root {
|
|
||||||
--st-paper: #f4f6f4;
|
|
||||||
--st-surface: #ffffff;
|
|
||||||
--st-surface-2: #eef1ee;
|
|
||||||
--st-ink: #1d2420;
|
|
||||||
--st-muted: #5f6a63;
|
|
||||||
--st-faint: #8a948d;
|
|
||||||
--st-line: #dde3de;
|
|
||||||
--st-line-soft: #e8ece8;
|
|
||||||
--st-accent: #0e7280;
|
|
||||||
--st-accent-ink: #ffffff;
|
|
||||||
--st-accent-soft: #e0eef0;
|
|
||||||
--st-ok: #3f9c5a;
|
|
||||||
--st-warn: #d9982a;
|
|
||||||
--st-crit: #d64545;
|
|
||||||
--st-badge-owner: #ede7f6; --st-badge-owner-ink: #5e35b1;
|
|
||||||
--st-badge-mgr: #e3f2fd; --st-badge-mgr-ink: #1565c0;
|
|
||||||
--st-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
html[data-theme="dark"] {
|
|
||||||
--st-paper: #131816;
|
|
||||||
--st-surface: #1b211e;
|
|
||||||
--st-surface-2: #222925;
|
|
||||||
--st-ink: #e4eae6;
|
|
||||||
--st-muted: #9aa69e;
|
|
||||||
--st-faint: #6e7a72;
|
|
||||||
--st-line: #2c342f;
|
|
||||||
--st-line-soft: #252c28;
|
|
||||||
--st-accent: #4cc4d4;
|
|
||||||
--st-accent-ink: #0d2326;
|
|
||||||
--st-accent-soft: #143b40;
|
|
||||||
--st-ok: #5cba77;
|
|
||||||
--st-warn: #e0ad4e;
|
|
||||||
--st-crit: #e06c6c;
|
|
||||||
--st-badge-owner: #33294a; --st-badge-owner-ink: #b39ddb;
|
|
||||||
--st-badge-mgr: #1b3350; --st-badge-mgr-ink: #90caf9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* static/style.css pins html/body to 100% height with overflow:hidden
|
/* static/style.css pins html/body to 100% height with overflow:hidden
|
||||||
for the dashboard pages — this page scrolls normally */
|
for the dashboard pages — this page scrolls normally */
|
||||||
html, body { height: auto; overflow: visible; }
|
html, body { height: auto; overflow: visible; }
|
||||||
body { background: var(--st-paper); padding: 60px 0 0; }
|
body { background: var(--st-paper); padding: 60px 0 0; }
|
||||||
|
|
||||||
/* ── sticky toolbar under the site nav ── */
|
|
||||||
.st-toolbar {
|
|
||||||
position: sticky; top: var(--nav-h, 48px); z-index: 90;
|
|
||||||
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
||||||
padding: 9px 20px;
|
|
||||||
background: var(--st-surface); border-bottom: 1px solid var(--st-line);
|
|
||||||
}
|
|
||||||
.st-toolbar .brand { font-family: var(--st-mono); font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--st-ink); }
|
|
||||||
.st-toolbar .brand .tld { color: var(--st-accent); }
|
|
||||||
.st-toolbar .hintline { font-size: 12px; color: var(--st-faint); }
|
|
||||||
.st-toolbar .spacer { flex: 1; }
|
|
||||||
.pending-pill {
|
.pending-pill {
|
||||||
display: none; align-items: center; gap: 8px;
|
display: none; align-items: center; gap: 8px;
|
||||||
font-size: 12.5px; color: var(--st-warn); font-weight: 600;
|
font-size: 12.5px; color: var(--st-warn); font-weight: 600;
|
||||||
}
|
}
|
||||||
.pending-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st-warn); }
|
.pending-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st-warn); }
|
||||||
.btn {
|
|
||||||
font: 600 13px/1 inherit; border: 1px solid var(--st-line); border-radius: 6px;
|
|
||||||
background: var(--st-surface); color: var(--st-ink); padding: 7px 14px; cursor: pointer;
|
|
||||||
}
|
|
||||||
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
|
|
||||||
.btn.primary { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-accent-ink); }
|
|
||||||
.btn.quiet { border-color: transparent; background: transparent; color: var(--st-muted); }
|
|
||||||
.btn.small { padding: 4px 10px; font-size: 12px; }
|
|
||||||
.btn.danger { color: var(--st-crit); }
|
|
||||||
.btn:disabled { opacity: .6; cursor: default; }
|
|
||||||
|
|
||||||
.pulse { display: block; width: 100%; height: 14px; }
|
|
||||||
.pulse polyline { fill: none; stroke: var(--st-accent); stroke-width: 1.5; opacity: .55; }
|
|
||||||
|
|
||||||
/* ── shell: rail + main ── */
|
/* ── shell: rail + main ── */
|
||||||
.shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 28px; max-width: 1100px; margin: 0 auto; padding: 0 20px 90px; }
|
.shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 28px; max-width: 1100px; margin: 0 auto; padding: 0 20px 90px; }
|
||||||
.rail { position: sticky; top: calc(var(--bars-h, 94px) + 8px); align-self: start; padding-top: 18px; max-height: calc(100vh - var(--bars-h, 94px) - 20px); overflow-y: auto; }
|
.rail { position: sticky; top: calc(var(--bars-h, 94px) + 8px); align-self: start; padding-top: 18px; max-height: calc(100vh - var(--bars-h, 94px) - 20px); overflow-y: auto; }
|
||||||
@@ -92,48 +30,6 @@
|
|||||||
|
|
||||||
.chips-nav { display: none; }
|
.chips-nav { display: none; }
|
||||||
|
|
||||||
/* ── sections ── */
|
|
||||||
section.st { margin-top: 26px; scroll-margin-top: calc(var(--bars-h, 94px) + 12px); }
|
|
||||||
.sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
|
|
||||||
.sec-head h2 { margin: 0; font-family: var(--st-mono); font-size: 15px; font-weight: 700; color: var(--st-ink); }
|
|
||||||
.sec-head h2 .colon { color: var(--st-accent); }
|
|
||||||
.sec-head .count { font-family: var(--st-mono); font-size: 11.5px; color: var(--st-faint); }
|
|
||||||
.sec-head .sub { font-size: 12px; color: var(--st-muted); }
|
|
||||||
.sec-head .add { margin-left: auto; }
|
|
||||||
|
|
||||||
.list { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; }
|
|
||||||
|
|
||||||
/* ── unified record row ── */
|
|
||||||
.row {
|
|
||||||
display: grid; grid-template-columns: 190px minmax(0,1fr) auto;
|
|
||||||
gap: 4px 14px; align-items: center;
|
|
||||||
padding: 8px 14px; border-bottom: 1px solid var(--st-line-soft);
|
|
||||||
transition: background .12s ease;
|
|
||||||
}
|
|
||||||
@media (prefers-reduced-motion: reduce) { .row { transition: none; } }
|
|
||||||
.row:last-child { border-bottom: none; }
|
|
||||||
.row:hover { background: var(--st-surface-2); }
|
|
||||||
.row .id { font-family: var(--st-mono); font-size: 13px; font-weight: 600; color: var(--st-ink); display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
||||||
.row .id .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
||||||
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
|
|
||||||
.dot.ok { background: var(--st-ok); }
|
|
||||||
.dot.off { background: transparent; border: 1.5px solid var(--st-faint); }
|
|
||||||
.facts { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; }
|
|
||||||
.chip {
|
|
||||||
display: inline-flex; align-items: center; gap: 4px;
|
|
||||||
font-family: var(--st-mono); font-size: 11px; line-height: 1.3;
|
|
||||||
padding: 3px 7px; border-radius: 4px;
|
|
||||||
background: var(--st-surface-2); color: var(--st-muted);
|
|
||||||
}
|
|
||||||
.chip.owner { background: var(--st-badge-owner); color: var(--st-badge-owner-ink); }
|
|
||||||
.chip.mgr { background: var(--st-badge-mgr); color: var(--st-badge-mgr-ink); }
|
|
||||||
.chip.level { background: transparent; border: 1px solid var(--st-line); }
|
|
||||||
.chip.private { background: transparent; border: 1px dashed var(--st-badge-owner-ink); color: var(--st-badge-owner-ink); }
|
|
||||||
.chip .k { color: var(--st-faint); }
|
|
||||||
.chip .w { color: var(--st-warn); font-weight: 700; }
|
|
||||||
.chip .c { color: var(--st-crit); font-weight: 700; }
|
|
||||||
.row .act { display: flex; gap: 4px; justify-content: flex-end; }
|
|
||||||
|
|
||||||
/* row inline editor (one idiom for every type) */
|
/* row inline editor (one idiom for every type) */
|
||||||
.row .editor { display: none; }
|
.row .editor { display: none; }
|
||||||
.row.expanded { background: var(--st-surface-2); border-left: 3px solid var(--st-accent); padding-left: 11px; }
|
.row.expanded { background: var(--st-surface-2); border-left: 3px solid var(--st-accent); padding-left: 11px; }
|
||||||
@@ -153,24 +49,6 @@
|
|||||||
.editor .foot { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding-top: 2px; flex-wrap: wrap; }
|
.editor .foot { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding-top: 2px; flex-wrap: wrap; }
|
||||||
.editor .foot .danger { margin-left: auto; }
|
.editor .foot .danger { margin-left: auto; }
|
||||||
|
|
||||||
/* server key/value groups */
|
|
||||||
.kv .row { grid-template-columns: 230px minmax(0,1fr); padding: 6px 14px; }
|
|
||||||
.group {
|
|
||||||
display: flex; align-items: center; gap: 10px;
|
|
||||||
padding: 7px 14px 5px; font-family: var(--st-mono); font-size: 11px; color: var(--st-faint);
|
|
||||||
background: var(--st-surface); border-bottom: 1px solid var(--st-line-soft);
|
|
||||||
}
|
|
||||||
.group .gbtn { margin-left: auto; }
|
|
||||||
.kv .val { font-family: var(--st-mono); font-size: 12.5px; color: var(--st-muted); min-width: 0; }
|
|
||||||
.kv input.field-input, .kv .val input, .kv .val select {
|
|
||||||
width: 100%; max-width: 420px; font: 12.5px var(--st-mono); color: var(--st-ink);
|
|
||||||
background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 5px; padding: 4px 8px;
|
|
||||||
}
|
|
||||||
.kv .desc { display: block; font-size: 11px; color: var(--st-faint); margin-top: 2px; }
|
|
||||||
.val-masked { color: var(--st-faint); letter-spacing: 2px; }
|
|
||||||
|
|
||||||
.note { margin: 8px 2px 0; font-size: 12px; color: var(--st-faint); }
|
|
||||||
|
|
||||||
/* threshold metric table inside editor */
|
/* threshold metric table inside editor */
|
||||||
.thr-table { border-collapse: collapse; width: 100%; font-family: var(--st-mono); font-size: 12px; }
|
.thr-table { border-collapse: collapse; width: 100%; font-family: var(--st-mono); font-size: 12px; }
|
||||||
.thr-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--st-faint); padding: 4px 6px; border-bottom: 1px solid var(--st-line); }
|
.thr-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--st-faint); padding: 4px 6px; border-bottom: 1px solid var(--st-line); }
|
||||||
@@ -228,14 +106,6 @@
|
|||||||
border-radius: 999px; padding: 5px 12px;
|
border-radius: 999px; padding: 5px 12px;
|
||||||
}
|
}
|
||||||
.chips-nav a.active { background: var(--st-accent-soft); border-color: var(--st-accent); color: var(--st-accent); font-weight: 600; }
|
.chips-nav a.active { background: var(--st-accent-soft); border-color: var(--st-accent); color: var(--st-accent); font-weight: 600; }
|
||||||
.st-toolbar { padding: 8px 10px; }
|
|
||||||
.st-toolbar .hintline { display: none; }
|
|
||||||
.row { grid-template-columns: minmax(0,1fr) auto; padding: 9px 12px; }
|
|
||||||
.row .id { grid-row: 1; grid-column: 1; }
|
|
||||||
.row .act { grid-row: 1; grid-column: 2; }
|
|
||||||
.row .facts { grid-column: 1 / -1; }
|
|
||||||
.kv .row { grid-template-columns: 1fr; }
|
|
||||||
section.st { scroll-margin-top: calc(var(--bars-h, 94px) + 50px); }
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -1444,20 +1314,7 @@
|
|||||||
}, { threshold: 0.2 });
|
}, { threshold: 0.2 });
|
||||||
_navSections.forEach(s => _navObserver.observe(s));
|
_navSections.forEach(s => _navObserver.observe(s));
|
||||||
|
|
||||||
// Keep the toolbar stuck just below the fixed site nav (whose height
|
|
||||||
// varies with viewport width and wrapping).
|
|
||||||
function _setStickyOffsets() {
|
|
||||||
const nav = document.querySelector('.nav');
|
|
||||||
const tb = document.querySelector('.st-toolbar');
|
|
||||||
const navH = nav ? nav.offsetHeight : 48;
|
|
||||||
const barsH = navH + (tb ? tb.offsetHeight : 46);
|
|
||||||
document.documentElement.style.setProperty('--nav-h', navH + 'px');
|
|
||||||
document.documentElement.style.setProperty('--bars-h', barsH + 'px');
|
|
||||||
}
|
|
||||||
window.addEventListener('resize', _setStickyOffsets);
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
_setStickyOffsets();
|
|
||||||
_loadChannelSchemas();
|
_loadChannelSchemas();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user