bvandeusenandClaude Opus 5.5
414c942cbf
Traefik: routers are graded from their latest scrape (router_state: crit on any real 5xx share, warn on p95 past the latency critical cutoff or a high 4xx share). Failing and slow routers lead as cards that say why; healthy ones fold into one table that stays open or shut across polls. Proxy counts are stat tiles; certificates are graded by Settings -> Thresholds (tls_days). UniFi: WAN health is a stat strip (latency graded by the thresholds), devices carry status dots, event categories and firewall actions are badges, the alarm count reuses .count-badge (renamed from .nav-count). SNMP: each device wears a status badge and its readings are stat tiles. Agent fleet: the table comes first, with a Status column (Reporting / Silent / Never reported, by the host page's stale_after_seconds), silent agents first, hosts linked, last seen as |ago. Audit: entries name their entity (one query per type, steward/audit/ service.py) and link it; something deleted since keeps the name its entry recorded and says "(deleted)". Tokens: charts read colours through chart-colors.js (stewardColor resolves a token to the rgb the browser computed; Chart.js defaults take the page's text and border colours), so host, history, Traefik and SNMP charts drop their hex. Template hex colours reach 0 (HEX_CEILING = 0), the last rgba pills go, and heavy weights (600/700/bold, 60 of them) become 500, the house pair being 400/500; a guard keeps templates there. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
24 lines
955 B
JavaScript
24 lines
955 B
JavaScript
// Design tokens as colours a <canvas> can paint with. A chart is drawn on a
|
|
// canvas, which can't read var(--green), so each token is resolved through a
|
|
// hidden element to the rgb() the browser computed for it.
|
|
//
|
|
// Loaded after the stylesheets (a script waits for the sheets above it), so the
|
|
// tokens are defined by the time this runs. It also gives every Chart.js chart
|
|
// the page's text and grid colours, so a chart config only names its series.
|
|
(function () {
|
|
function stewardColor(name) {
|
|
var probe = document.createElement('span');
|
|
probe.style.display = 'none';
|
|
probe.style.color = 'var(' + name + ')';
|
|
document.documentElement.appendChild(probe);
|
|
var value = getComputedStyle(probe).color;
|
|
probe.remove();
|
|
return value;
|
|
}
|
|
window.stewardColor = stewardColor;
|
|
if (window.Chart) {
|
|
Chart.defaults.color = stewardColor('--text-muted');
|
|
Chart.defaults.borderColor = stewardColor('--border');
|
|
}
|
|
})();
|