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
+151
-325
@@ -2,38 +2,30 @@
|
||||
<html>
|
||||
{% include 'head.html' %}
|
||||
|
||||
<link rel="stylesheet" href="/static/hbd-ui.css">
|
||||
<script src="/static/hbd-ui.js"></script>
|
||||
|
||||
<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 {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
max-height: calc(100vh - 120px);
|
||||
max-height: calc(100vh - var(--bars-h, 94px) - 30px);
|
||||
overflow-y: auto;
|
||||
padding-right: 10px;
|
||||
padding: 0 10px 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
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 cards: one record list per host ───────────────────── */
|
||||
.host-card {
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
||||
background: var(--st-surface);
|
||||
border: 1px solid var(--st-line);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.host-header {
|
||||
@@ -42,115 +34,74 @@
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 6px;
|
||||
padding: 8px 14px;
|
||||
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-card.collapsed .host-header:hover { border-radius: 6px; }
|
||||
|
||||
.host-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.host-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
|
||||
.collapse-icon {
|
||||
font-size: 1em;
|
||||
color: #888;
|
||||
font-size: .85em;
|
||||
color: var(--st-faint);
|
||||
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-name {
|
||||
font-size: 1.05em;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-family: var(--st-mono);
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
color: var(--st-ink);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Glance strip ───────────────────────────────────────────── */
|
||||
|
||||
.glance-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.glance-strip { display: flex; align-items: center; gap: 5px; flex: 1; flex-wrap: wrap; padding: 0 8px; }
|
||||
|
||||
.glance-chip {
|
||||
font-size: 0.78em;
|
||||
padding: 2px 9px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
display: inline-flex; align-items: center;
|
||||
font-family: var(--st-mono); font-size: 11px; line-height: 1.3;
|
||||
padding: 3px 7px; border-radius: 4px; white-space: nowrap;
|
||||
background: var(--st-ok-soft); color: var(--st-ok);
|
||||
}
|
||||
|
||||
.glance-chip.warn { background: #fff3e0; color: #e65100; }
|
||||
.glance-chip.crit { background: #ffebee; color: #b71c1c; }
|
||||
.glance-chip.neutral { background: #f5f5f5; color: #555; }
|
||||
.glance-loading { font-size: 0.8em; color: #bbb; font-style: italic; }
|
||||
.glance-chip.warn { background: var(--st-warn-soft); color: var(--st-warn); }
|
||||
.glance-chip.crit { background: var(--st-crit-soft); color: var(--st-crit); }
|
||||
.glance-chip.neutral { background: var(--st-surface-2); color: var(--st-muted); }
|
||||
.glance-loading { font-size: 11.5px; color: var(--st-faint); font-style: italic; }
|
||||
|
||||
/* ── Host right zone ────────────────────────────────────────── */
|
||||
|
||||
.host-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.host-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
|
||||
.nagios-badge {
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
background: #9e9e9e;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
font-family: var(--st-mono); font-size: 10.5px; font-weight: 700;
|
||||
padding: 3px 9px; border-radius: 4px;
|
||||
background: var(--st-surface-2); color: var(--st-muted);
|
||||
text-transform: uppercase; white-space: nowrap;
|
||||
}
|
||||
|
||||
.nagios-badge.ok { background: #4caf50; }
|
||||
.nagios-badge.warning { background: #ff9800; }
|
||||
.nagios-badge.critical { background: #f44336; }
|
||||
.nagios-badge.ok { background: var(--st-ok-soft); color: var(--st-ok); }
|
||||
.nagios-badge.warning { background: var(--st-warn-soft); color: var(--st-warn); }
|
||||
.nagios-badge.critical { background: var(--st-crit-soft); color: var(--st-crit); }
|
||||
|
||||
.os-label {
|
||||
font-size: 0.75em;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 11px; color: var(--st-faint); white-space: nowrap;
|
||||
max-width: 200px; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.host-action-btn {
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font: 600 12px/1 inherit;
|
||||
padding: 4px 10px; border-radius: 6px;
|
||||
border: 1px solid var(--st-line);
|
||||
background: var(--st-surface);
|
||||
cursor: pointer; text-decoration: none; white-space: nowrap;
|
||||
}
|
||||
.host-action-btn.update-btn {
|
||||
background: #e3f2fd;
|
||||
color: #1565c0;
|
||||
}
|
||||
.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; }
|
||||
.host-action-btn.update-btn { color: var(--st-accent); }
|
||||
.host-action-btn.update-btn:hover { background: var(--st-accent-soft); border-color: var(--st-accent); }
|
||||
.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); }
|
||||
|
||||
/* ── Action result toast ───────────────────────────────────── */
|
||||
#action-toast {
|
||||
@@ -158,8 +109,8 @@
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
background: #323232;
|
||||
color: #fff;
|
||||
background: var(--st-ink);
|
||||
color: var(--st-paper);
|
||||
padding: 12px 22px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9em;
|
||||
@@ -171,296 +122,171 @@
|
||||
z-index: 9000;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
#action-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
#action-toast.error { background: #c62828; }
|
||||
#action-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
#action-toast.error { background: var(--st-crit); color: #fff; }
|
||||
|
||||
/* ── Host body ──────────────────────────────────────────────── */
|
||||
|
||||
.host-body {
|
||||
padding: 8px 15px 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.host-body { padding: 8px 14px 12px; border-top: 1px solid var(--st-line-soft); }
|
||||
.host-card.collapsed .host-body { display: none; }
|
||||
|
||||
/* ── Plugin accordions ──────────────────────────────────────── */
|
||||
|
||||
.plugin-accordion {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--st-line-soft);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plugin-acc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 7px 12px;
|
||||
cursor: pointer;
|
||||
background: #fafafa;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 12px; cursor: pointer;
|
||||
background: var(--st-surface-2);
|
||||
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: #999;
|
||||
transition: transform 0.15s;
|
||||
min-width: 12px;
|
||||
}
|
||||
|
||||
.acc-icon { font-size: 0.7em; color: var(--st-faint); transition: transform 0.15s; min-width: 12px; }
|
||||
.plugin-accordion:not(.collapsed) .acc-icon { transform: rotate(90deg); }
|
||||
|
||||
.plugin-label {
|
||||
font-weight: 600;
|
||||
font-size: 1.00em;
|
||||
color: #444;
|
||||
font-family: var(--st-mono);
|
||||
font-weight: 600; font-size: 12.5px;
|
||||
color: var(--st-ink);
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.plugin-summary {
|
||||
font-size: 0.82em;
|
||||
color: #888;
|
||||
flex: 1;
|
||||
}
|
||||
.plugin-summary { font-family: var(--st-mono); font-size: 11.5px; color: var(--st-faint); flex: 1; }
|
||||
|
||||
.plugin-accordion.collapsed .plugin-acc-body { display: none; }
|
||||
|
||||
.plugin-acc-body { padding: 10px 12px; }
|
||||
|
||||
/* ── Tables ─────────────────────────────────────────────────── */
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 1.00em;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
border-radius: 4px;
|
||||
font-size: 12.5px;
|
||||
background: var(--st-surface);
|
||||
border: 1px solid var(--st-line-soft);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.data-table thead { background: #2196f3; color: white; }
|
||||
|
||||
.data-table thead { background: var(--st-surface-2); }
|
||||
.data-table th {
|
||||
padding: 7px 10px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75em;
|
||||
letter-spacing: 0.4px;
|
||||
font-family: var(--st-mono);
|
||||
font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
|
||||
color: var(--st-faint); font-weight: 600;
|
||||
text-align: left; padding: 5px 8px;
|
||||
border-bottom: 1px solid var(--st-line);
|
||||
}
|
||||
|
||||
.data-table th.num { text-align: right; }
|
||||
.data-table th.center { text-align: center; }
|
||||
|
||||
.data-table td {
|
||||
/* padding: 6px 10px; */
|
||||
border-top: 1px solid #e8e8e8;
|
||||
color: #333;
|
||||
padding: 4px 8px;
|
||||
border-top: 1px solid var(--st-line-soft);
|
||||
color: var(--st-ink);
|
||||
}
|
||||
|
||||
.data-table td.num {
|
||||
text-align: right;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.data-table td.num { text-align: right; font-family: var(--st-mono); }
|
||||
.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; }
|
||||
.data-table tbody tr:hover { background: #f0f4ff; }
|
||||
|
||||
.iface-name { font-weight: bold; color: #2196f3; }
|
||||
.iface-name { font-family: var(--st-mono); font-weight: 600; color: var(--st-accent); }
|
||||
|
||||
/* ── Percent bars ───────────────────────────────────────────── */
|
||||
|
||||
.bar-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bar-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
|
||||
.bar-track {
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
height: 6px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
flex: 1; height: 7px; border-radius: 4px;
|
||||
background: var(--st-line-soft); overflow: hidden; min-width: 60px;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: #4caf50;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.bar-fill.warn { background: #ff9800; }
|
||||
.bar-fill.crit { background: #f44336; }
|
||||
.bar-fill { height: 100%; border-radius: 4px; background: var(--st-ok); }
|
||||
.bar-fill.warn { background: var(--st-warn); }
|
||||
.bar-fill.crit { background: var(--st-crit); }
|
||||
|
||||
/* ── 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; }
|
||||
|
||||
.table-section-label {
|
||||
font-size: 0.78em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: #888;
|
||||
letter-spacing: 0.4px;
|
||||
margin-bottom: 4px;
|
||||
font-family: var(--st-mono);
|
||||
font-size: 11px; font-weight: 600; color: var(--st-faint);
|
||||
text-transform: uppercase; letter-spacing: .05em;
|
||||
margin: 4px 0 6px;
|
||||
}
|
||||
|
||||
/* ── 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; }
|
||||
.status-down { color: #f44336; font-weight: bold; }
|
||||
.pct-ok { color: var(--st-ok); 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; }
|
||||
.pct-warn { color: #e65100; font-weight: bold; }
|
||||
.pct-crit { color: #b71c1c; font-weight: bold; }
|
||||
.check-ok { background: var(--st-ok-soft); }
|
||||
.check-warning { background: var(--st-warn-soft); }
|
||||
.check-critical { background: var(--st-crit-soft); }
|
||||
.check-unknown { background: var(--st-surface-2); }
|
||||
|
||||
.check-ok { background: #e8f5e9; }
|
||||
.check-warning { background: #fff3e0; }
|
||||
.check-critical { background: #ffebee; }
|
||||
.check-unknown { background: #f5f5f5; }
|
||||
.check-status-ok { color: var(--st-ok); font-weight: bold; }
|
||||
.check-status-warning { color: var(--st-warn); font-weight: bold; }
|
||||
.check-status-critical { color: var(--st-crit); font-weight: bold; }
|
||||
.check-status-unknown { color: var(--st-faint); font-weight: bold; }
|
||||
|
||||
.check-status-ok { color: #2e7d32; font-weight: bold; }
|
||||
.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; }
|
||||
.check-output { font-size: 0.9em; color: var(--st-muted); }
|
||||
|
||||
.timestamp {
|
||||
color: #bbb;
|
||||
font-size: 0.75em;
|
||||
margin-top: 8px;
|
||||
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;
|
||||
font-size: 11px; color: var(--st-faint);
|
||||
margin-top: 6px; padding-top: 6px;
|
||||
border-top: 1px solid var(--st-line-soft);
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: #ffebee;
|
||||
border-left: 3px solid #f44336;
|
||||
padding: 8px 12px;
|
||||
margin: 8px 0;
|
||||
border-radius: 3px;
|
||||
color: #c62828;
|
||||
font-size: 1.00em;
|
||||
background: var(--st-crit-soft);
|
||||
border-left: 3px solid var(--st-crit);
|
||||
padding: 12px 16px; margin: 10px 0;
|
||||
border-radius: 6px; color: var(--st-crit);
|
||||
}
|
||||
|
||||
/* ── Scrollbar ──────────────────────────────────────────────── */
|
||||
|
||||
.container::-webkit-scrollbar { width: 8px; }
|
||||
.container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
|
||||
.container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
|
||||
.container::-webkit-scrollbar-thumb:hover { background: #999; }
|
||||
.container::-webkit-scrollbar-track { background: var(--st-surface-2); border-radius: 4px; }
|
||||
.container::-webkit-scrollbar-thumb { background: var(--st-line); border-radius: 4px; }
|
||||
.container::-webkit-scrollbar-thumb:hover { background: var(--st-faint); }
|
||||
|
||||
/* ── Host info section ──────────────────────────────────────────────────── */
|
||||
/* ── Host info section ──────────────────────────────────────── */
|
||||
.host-info-section {
|
||||
padding: 12px 16px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-size: 1.00em;
|
||||
background: var(--st-surface-2);
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.info-meta {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 3px 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.info-label { font-weight: 600; color: #555; white-space: nowrap; }
|
||||
.info-value { color: #222; }
|
||||
.info-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
|
||||
.info-label { font-family: var(--st-mono); font-size: 11px; font-weight: 600; color: var(--st-faint); white-space: nowrap; }
|
||||
.info-value { color: var(--st-ink); }
|
||||
.info-thresholds-title {
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
margin-bottom: 6px;
|
||||
font-family: var(--st-mono);
|
||||
font-size: 11px; font-weight: 600; color: var(--st-faint);
|
||||
text-transform: uppercase; letter-spacing: .05em;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
.info-note { color: #888; font-style: italic; }
|
||||
.info-loading { color: #bbb; font-style: italic; }
|
||||
.threshold-covers { font-size: 1.00em; color: #777; 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); }
|
||||
.info-note { color: var(--st-faint); font-style: italic; }
|
||||
.info-loading { color: var(--st-faint); font-style: italic; }
|
||||
.threshold-covers { font-size: 11.5px; color: var(--st-faint); font-style: italic; }
|
||||
</style>
|
||||
|
||||
<body>
|
||||
{% 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">
|
||||
<h1>{{ header }}</h1>
|
||||
<p class="subtitle">Per-host system metrics — expand a host to see plugin details</p>
|
||||
|
||||
{% if not hosts %}
|
||||
<div class="no-data">
|
||||
|
||||
Reference in New Issue
Block a user