Color fleet monitor rows: green operational, yellow degraded, red down
Some checks are pending
offline / test (push) Waiting to run

Paused or unhealthy replicas mark the service degraded even if the
tree-node floor is still met. Unmanaged NATS with no process is down.
This commit is contained in:
George Lambert 2026-09-11 13:15:52 -04:00
parent dd99ce1c64
commit 6fbc808bb1
4 changed files with 79 additions and 5 deletions

View file

@ -15,10 +15,13 @@
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); font-size:13px; }
th { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
tr.state-operational { background:#e3f6e8; }
tr.state-degraded { background:#fff3bf; }
tr.state-down { background:#f9d4d4; }
.pill { font:700 10px system-ui; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .35rem; border-radius:4px; }
.good { background:#d4efe6; color:var(--ok); }
.bad { background:#f8d4d4; color:var(--err); }
.warn { background:#f5e6c8; color:var(--warn); }
.good { background:#c8efd4; color:var(--ok); }
.bad { background:#f3c0c0; color:var(--err); }
.warn { background:#ffe08a; color:var(--warn); }
button { margin-right:.25rem; font:650 12px system-ui; border:1px solid var(--line); background:#fff; border-radius:5px; padding:.25rem .45rem; cursor:pointer; }
code { font:12px ui-monospace,Menlo,monospace; }
.inst { font:12px ui-monospace,Menlo,monospace; margin:.15rem 0; }
@ -32,7 +35,7 @@
<main>
<p id="meta"></p>
<table>
<thead><tr><th>Service</th><th>Config</th><th>min/max</th><th>available</th><th>instances</th><th>actions</th></tr></thead>
<thead><tr><th>Service</th><th>State</th><th>Config</th><th>min/max</th><th>available</th><th>instances</th><th>actions</th></tr></thead>
<tbody id="rows"></tbody>
</table>
</main>
@ -44,6 +47,9 @@ async function draw() {
document.getElementById('meta').textContent = 'probe ' + (s.monitor?.t || '—') + ' · NATS ' + (s.nats?.url || '');
const tb = document.getElementById('rows');
tb.innerHTML = Object.values(s.services).map((sv) => {
const health = sv.health || 'down';
const healthLabel = health === 'operational' ? 'operational' : health === 'degraded' ? 'degraded' : 'not operational';
const healthCls = health === 'operational' ? 'good' : health === 'degraded' ? 'warn' : 'bad';
const floor = sv.belowFloor ? '<span class="pill bad">below floor</span>' : (sv.keepFloor ? '<span class="pill good">floor ok</span>' : '');
const inst = (sv.instances || []).map((i) => {
const st = !i.pid ? 'dead' : i.paused ? 'paused' : i.healthy === false ? 'unhealthy' : 'up';
@ -54,8 +60,9 @@ async function draw() {
<button onclick="act('/api/instances/${i.id}/restart')">restart</button>
</div>`;
}).join('') || '<span style="color:#5b6d78">none</span>';
return `<tr>
return `<tr class="state-${health}">
<td><strong>${sv.id}</strong><br><span style="color:#5b6d78">${sv.title || ''}</span></td>
<td><span class="pill ${healthCls}">${healthLabel}</span></td>
<td><code>${sv.configPath || ''}</code></td>
<td>${sv.min} / ${sv.max} ${floor}</td>
<td>${sv.available} running=${sv.running} paused=${sv.paused}</td>