niklas/terdut-server
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 69 Wiki Activity

Draw boolean alert metrics as an on/off timeline

Browse Source 
A metric that only ever reads 0 or 1 (up == 0, anything with bool) gave the
line chart nothing to show: a flat line or a square wave on a y axis padded
to -1..2. When every drawn series is 0/1 the incident page now draws one row
per series instead, filled where the value was 1, a thin mark where it was
0, and the bare track where Prometheus returned no samples, which for these
expressions means the condition did not hold.

The decision is per chart, so one chart never mixes styles; any other value
keeps the line chart as before. Frontend only: the endpoint already returns
the points and step_seconds, which pick() now passes on so the last sample
gets a width and a gap in the samples shows as a gap.

Claude-Session: https://claude.ai/code/session_016mBLURvJoMuUEr9cB2RpUN
This commit is contained in:
Niklas Ye
2026-10-25 19:00:24 +01:00
parent cd3b2c2bea
commit 6e95c86521
4 changed files with 107 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/incident_test.go
+3 -2
View File
@@ -12,8 +12,9 @@ func TestCopyIncidentIsEmbedded(t *testing.T) {
t.Fatal(err)
}
for file, want := range map[string]string{
"js/incident.js": "copyIncident",
"js/ui.js": "copy:",
"js/incident.js": "copyIncident",
"js/ui.js": "copy:",
"js/metricchart.js": "isBool",
} {
b, err := fs.ReadFile(sub, file)
if err != nil {
internal/web/static/app.css
+4
View File
@@ -622,6 +622,10 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
.mc-line.s4, .mc-swatch.s4 { stroke: var(--muted); background: var(--muted); }
.mc-dot.s0 { fill: var(--accent); } .mc-dot.s1 { fill: var(--warn); } .mc-dot.s2 { fill: var(--ok); }
.mc-dot.s3 { fill: var(--crit); } .mc-dot.s4 { fill: var(--muted); }
.mc-track { fill: var(--border); opacity: .45; }
.mc-off { fill: var(--faint); opacity: .6; }
.mc-on.s0 { fill: var(--accent); } .mc-on.s1 { fill: var(--warn); } .mc-on.s2 { fill: var(--ok); }
.mc-on.s3 { fill: var(--crit); } .mc-on.s4 { fill: var(--muted); }
.mc-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.metrics-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--muted); }
.metrics-legend li { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
internal/web/static/js/metricchart.js
+96 -10
View File
@@ -74,13 +74,14 @@ function pick(entry) {
from: Math.min(live.window_start, snaps.opened ? snaps.opened.window_start : Infinity),
to: live.window_end,
current: live.current || [],
step: live.step_seconds,
isLive: true,
};
}
const snap = snaps.closed || snaps.opened;
if (snap && !snap.error) {
return {
series: merge(parseSeries(snap.series)), from: snap.window_start, to: snap.window_end, current: [], isLive: false,
series: merge(parseSeries(snap.series)), from: snap.window_start, to: snap.window_end, current: [], step: snap.step_seconds, isLive: false,
};
}
return null;
@@ -105,7 +106,7 @@ export function alertMetrics(entry, startsAtISO, resolvedISO) {
const endSec = resolvedISO ? Date.parse(resolvedISO) / 1000 : null;
return h('div', { class: 'metrics' },
currentLine(entry, data),
data.series.length ? chart(data, startSec, endSec) : h('div', { class: 'metrics-note', text: 'No samples in this window.' }),
data.series.length ? (isBool(data.series) ? timeline(data, startSec, endSec) : chart(data, startSec, endSec)) : h('div', { class: 'metrics-note', text: 'No samples in this window.' }),
legend(data.series),
entry.expr && h('code', { class: 'metrics-expr', text: entry.expr }),
);
@@ -130,6 +131,98 @@ function legend(series) {
h('li', {}, h('span', { class: `mc-swatch s${i}` }), h('span', { text: seriesName(s.labels) }))));
}
// addMarkers draws the dashed "Alert started" / "Incident resolved" lines.
function addMarkers(root, { t0, t1, x, top, bottom, startSec, endSec }) {
const marker = (t, cls, text) => {
if (t == null || t < t0 || t > t1) return;
const m = svg('line', { class: `mc-marker ${cls}`, x1: x(t), x2: x(t), y1: top, y2: bottom });
m.appendChild(svg('title', {}, `${text} ${when(iso(t))}`));
root.appendChild(m);
};
marker(startSec, 'start', 'Alert started');
marker(endSec, 'end', 'Incident resolved');
}
// isBool is true when every drawn series only ever reads 0 or 1; such a metric
// says when something was on, so it is drawn as a timeline, not a line.
function isBool(allSeries) {
const series = allSeries.slice(0, MAX_SERIES);
let any = false;
for (const s of series) {
for (const [, v] of s.points) {
if (v !== 0 && v !== 1) return false;
any = true;
}
}
return any;
}
// runsOf folds a series into [from, to, value] spans. A sample lasts until the
// next one, or one step when the next is missing or more than 1.5 steps away.
function runsOf(points, step, tEnd) {
const runs = [];
points.forEach(([t, v], n) => {
const next = points[n + 1];
const contiguous = next && (!step || next[0] - t <= step * 1.5);
const end = Math.min(contiguous ? next[0] : t + (step || 0), tEnd);
const last = runs[runs.length - 1];
if (last && last[2] === v && last[1] === t) last[1] = end;
else runs.push([t, end, v]);
});
return runs;
}
function timeline(data, startSec, endSec) {
const W = 480;
const padL = 40;
const padR = 8;
const padT = 8;
const padB = 18;
const rowH = 16;
const rowGap = 4;
const series = data.series.slice(0, MAX_SERIES);
const H = padT + padB + series.length * rowH + (series.length - 1) * rowGap;
let t0 = data.from; let t1 = data.to;
for (const s of series) {
for (const [t] of s.points) {
if (t < t0) t0 = t;
if (t > t1) t1 = t;
}
}
if (t1 === t0) t1 = t0 + 1;
const x = (t) => padL + ((t - t0) / (t1 - t0)) * (W - padL - padR);
const root = svg('svg', {
class: 'metric-chart', viewBox: `0 0 ${W} ${H}`, role: 'img',
'aria-label': `On/off timeline from ${when(iso(t0))} to ${when(iso(t1))}`,
});
root.appendChild(svg('text', { class: 'mc-label', x: padL, y: H - 4, 'text-anchor': 'start' }, when(iso(t0))));
root.appendChild(svg('text', { class: 'mc-label', x: W - padR, y: H - 4, 'text-anchor': 'end' }, when(iso(t1))));
series.forEach((s, i) => {
const top = padT + i * (rowH + rowGap);
const name = seriesName(s.labels);
// Without a sample the alert condition did not hold: the bare track.
root.appendChild(svg('rect', { class: 'mc-track', x: padL, y: top, width: W - padL - padR, height: rowH }));
if (series.length > 1) {
root.appendChild(svg('text', { class: 'mc-label', x: padL - 4, y: top + rowH / 2 + 3, 'text-anchor': 'end' }, `${i + 1}`));
}
for (const [from, to, v] of runsOf(s.points, data.step, t1)) {
const w = Math.max(x(to) - x(from), 1.5);
const on = v === 1;
const rect = svg('rect', {
class: on ? `mc-on s${i}` : 'mc-off',
x: x(from), y: on ? top : top + rowH / 2 - 1.5, width: w, height: on ? rowH : 3,
});
rect.appendChild(svg('title', {}, `${name}: ${v} from ${when(iso(from))} to ${when(iso(to))}`));
root.appendChild(rect);
}
});
addMarkers(root, { t0, t1, x, top: padT, bottom: H - padB, startSec, endSec });
return root;
}
function chart(data, startSec, endSec) {
const W = 480;
const H = 130;
@@ -172,14 +265,7 @@ function chart(data, startSec, endSec) {
root.appendChild(svg('text', { class: 'mc-label', x: padL, y: H - 4, 'text-anchor': 'start' }, when(iso(t0))));
root.appendChild(svg('text', { class: 'mc-label', x: W - padR, y: H - 4, 'text-anchor': 'end' }, when(iso(t1))));
const marker = (t, cls, text) => {
if (t == null || t < t0 || t > t1) return;
const m = svg('line', { class: `mc-marker ${cls}`, x1: x(t), x2: x(t), y1: padT, y2: H - padB });
m.appendChild(svg('title', {}, `${text} ${when(iso(t))}`));
root.appendChild(m);
};
marker(startSec, 'start', 'Alert started');
marker(endSec, 'end', 'Incident resolved');
addMarkers(root, { t0, t1, x, top: padT, bottom: H - padB, startSec, endSec });
series.forEach((s, i) => {
if (!s.points.length) return;