Serve a web UI for the incident queue, built for phones
Whoever is on call gets paged on a phone, and until now the only ways to
act on a page were the notification's Acknowledge button or a terminal.
Tapping the notification itself opened /api/incidents/{id}, which a
browser can only answer with a 401 in JSON. The server now serves a web
UI at / covering the incident queue, each incident's alerts and timeline
with every action on it, who is on call, the alert feed, and changing
your own password. The notification link now points at /incidents/{id}
in that UI.
It is embedded in the binary and has no build step: plain HTML, CSS and
ES modules under internal/web/static, served with an ETag per file and a
CSP that allows nothing from any other origin. That is how rd-web is
built. It avoids adding a node toolchain to the Dockerfile and the
pipeline for a page this size, and it keeps the page on the same origin
as the API, so no CORS is needed and nothing else has to be deployed.
Paths without a file extension fall back to index.html, so a deep link
survives a reload. An unknown path under /api/ still gets a JSON 404
rather than the page.
Signing in uses a username and password, because pasting a 64-character
API key into a phone at 3am is not a sign-in flow. Users have no
password until one is set through PUT /api/users/{id}/password, or
optionally at bootstrap. A user without a password is exactly where they
were before this commit and can only use API keys. A login sets an
HttpOnly, SameSite=Lax session cookie. It lasts 30 days and slides
forward while in use, so an on-call phone does not sign itself out.
Only the token's hash is stored, as for API keys.
The cookie needs a CSRF guard where a bearer header does not, because
browsers attach cookies to requests other sites make. So cookie-
authenticated requests go through Go 1.25's http.CrossOriginProtection,
and bearer requests do not. A request carrying an Authorization header
is judged on that header alone and never falls back to the cookie.
Changing a password ends every other session of that user. Changing
your own requires the current password, so a phone left signed in
cannot be used to take the account over.
Failed logins are counted per username and per client address. Ten
failures for one username in 15 minutes refuse that username for the
rest of the window, even with the right password. That makes locking
somebody out possible for anyone who knows their username. It was
accepted because the alternative is unlimited guessing, and during a
lockout the notification's Acknowledge button and API keys keep
working. The address limit reads the first X-Forwarded-For hop, since
behind the gateway RemoteAddr is Envoy. It is looser, because a whole
office behind one NAT shares it.
The Secure flag follows TERDUT_PUBLIC_URL, since TLS terminates at the
gateway and the server itself only ever sees plain HTTP. The chart
already defaults that variable to https://<hostname>.
Schedule editing, statistics and user management stay in terdut-tui for
now. The API they use is unchanged, and bearer authentication behaves
exactly as before.
This commit is contained in:
Niklas Ye
@@ -0,0 +1,173 @@
|
||||
// DOM helpers, the bottom sheet, confirmation and toasts.
|
||||
|
||||
// h builds an element. attrs: class, text, on<event>, dataset, aria/other
|
||||
// attributes; boolean true sets an empty attribute, false/null skips it.
|
||||
export function h(tag, attrs = {}, ...children) {
|
||||
const el = document.createElement(tag);
|
||||
for (const [k, v] of Object.entries(attrs || {})) {
|
||||
if (v == null || v === false) continue;
|
||||
if (k === 'class') el.className = v;
|
||||
else if (k === 'text') el.textContent = v;
|
||||
else if (k === 'dataset') Object.assign(el.dataset, v);
|
||||
else if (k.startsWith('on') && typeof v === 'function') el.addEventListener(k.slice(2), v);
|
||||
else if (k in el && typeof v !== 'string') el[k] = v;
|
||||
else el.setAttribute(k, v === true ? '' : v);
|
||||
}
|
||||
append(el, children);
|
||||
return el;
|
||||
}
|
||||
|
||||
function append(el, children) {
|
||||
for (const c of children.flat(Infinity)) {
|
||||
if (c == null || c === false) continue;
|
||||
el.append(c instanceof Node ? c : document.createTextNode(String(c)));
|
||||
}
|
||||
}
|
||||
|
||||
export function clear(el, ...children) {
|
||||
el.replaceChildren();
|
||||
append(el, children);
|
||||
return el;
|
||||
}
|
||||
|
||||
// Stroke icons, 24×24. Built as SVG nodes so the CSP needs no inline anything.
|
||||
const ICONS = {
|
||||
back: ['M15 18l-6-6 6-6'],
|
||||
more: ['M5 12h.01M12 12h.01M19 12h.01'],
|
||||
check: ['M5 12.5l4.5 4.5L19 7'],
|
||||
checkCircle: ['M8 12.5l3 3 5-6', 'circle:12,12,9'],
|
||||
undo: ['M9 14L4 9l5-5', 'M4 9h10a6 6 0 0 1 0 12h-3'],
|
||||
user: ['circle:12,8,3.5', 'M5 20a7 7 0 0 1 14 0'],
|
||||
clock: ['circle:12,12,9', 'M12 7v5l3 2'],
|
||||
bell: ['M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z', 'M10 20.5a2 2 0 0 0 4 0'],
|
||||
note: ['M5 4h14v12l-4 4H5z', 'M15 20v-4h4', 'M9 9h6M9 13h4'],
|
||||
archive: ['M3.5 5h17v4h-17z', 'M5 9v10h14V9', 'M10 13h4'],
|
||||
flag: ['M5 21V4', 'M5 4h11l-2 4 2 4H5'],
|
||||
trash: ['M4 7h16', 'M9 7V4h6v3', 'M6 7l1 13h10l1-13'],
|
||||
chevronLeft: ['M15 18l-6-6 6-6'],
|
||||
chevronRight: ['M9 6l6 6-6 6'],
|
||||
external: ['M14 4h6v6', 'M20 4l-9 9', 'M18 14v6H4V6h6'],
|
||||
logout: ['M15 4h4v16h-4', 'M10 17l5-5-5-5', 'M15 12H4'],
|
||||
};
|
||||
|
||||
const SVG = 'http://www.w3.org/2000/svg';
|
||||
export function icon(name, cls = 'icon') {
|
||||
const svg = document.createElementNS(SVG, 'svg');
|
||||
svg.setAttribute('viewBox', '0 0 24 24');
|
||||
svg.setAttribute('aria-hidden', 'true');
|
||||
svg.setAttribute('class', cls);
|
||||
for (const d of ICONS[name] || []) {
|
||||
let node;
|
||||
if (d.startsWith('circle:')) {
|
||||
const [cx, cy, r] = d.slice(7).split(',');
|
||||
node = document.createElementNS(SVG, 'circle');
|
||||
node.setAttribute('cx', cx);
|
||||
node.setAttribute('cy', cy);
|
||||
node.setAttribute('r', r);
|
||||
} else {
|
||||
node = document.createElementNS(SVG, 'path');
|
||||
node.setAttribute('d', d);
|
||||
}
|
||||
svg.append(node);
|
||||
}
|
||||
return svg;
|
||||
}
|
||||
|
||||
// ---------- sheet ----------
|
||||
|
||||
const sheet = () => document.getElementById('sheet');
|
||||
let sheetResolve = null;
|
||||
|
||||
// openSheet shows content in the bottom sheet (a centred dialog on desktop)
|
||||
// and resolves with whatever closeSheet is given, or null when dismissed.
|
||||
export function openSheet(build) {
|
||||
const dlg = sheet();
|
||||
if (dlg.open) closeSheet(null);
|
||||
const inner = h('div', { class: 'sheet-inner' }, h('div', { class: 'sheet-grab' }));
|
||||
append(inner, [build()]);
|
||||
clear(dlg, inner);
|
||||
dlg.showModal();
|
||||
const first = dlg.querySelector('[autofocus]');
|
||||
if (first) first.focus();
|
||||
return new Promise((resolve) => {
|
||||
sheetResolve = resolve;
|
||||
});
|
||||
}
|
||||
|
||||
export function closeSheet(value = null) {
|
||||
const dlg = sheet();
|
||||
const resolve = sheetResolve;
|
||||
sheetResolve = null;
|
||||
if (dlg.open) dlg.close();
|
||||
if (resolve) resolve(value);
|
||||
}
|
||||
|
||||
export function sheetIsOpen() {
|
||||
return sheet().open;
|
||||
}
|
||||
|
||||
export function initSheet() {
|
||||
const dlg = sheet();
|
||||
// A tap on the backdrop lands on the dialog element itself.
|
||||
dlg.addEventListener('click', (e) => {
|
||||
if (e.target === dlg) closeSheet(null);
|
||||
});
|
||||
dlg.addEventListener('cancel', (e) => {
|
||||
e.preventDefault();
|
||||
closeSheet(null);
|
||||
});
|
||||
}
|
||||
|
||||
// confirm asks a yes/no question in the sheet.
|
||||
export function confirm({ title, text, confirmLabel = 'Confirm', danger = false }) {
|
||||
return openSheet(() => [
|
||||
h('h2', { class: 'sheet-title', text: title }),
|
||||
text && h('p', { class: 'sheet-text', text }),
|
||||
h('div', { class: 'sheet-actions' },
|
||||
h('button', { class: 'btn', type: 'button', onclick: () => closeSheet(false), text: 'Cancel' }),
|
||||
h('button', {
|
||||
class: `btn ${danger ? 'btn-danger' : 'btn-primary'}`,
|
||||
type: 'button',
|
||||
autofocus: true,
|
||||
onclick: () => closeSheet(true),
|
||||
text: confirmLabel,
|
||||
}),
|
||||
),
|
||||
]).then((v) => v === true);
|
||||
}
|
||||
|
||||
// ---------- toast ----------
|
||||
|
||||
let toastTimer = 0;
|
||||
export function toast(message, kind = '') {
|
||||
const el = document.getElementById('toast');
|
||||
el.textContent = message;
|
||||
el.className = `toast ${kind}`;
|
||||
el.hidden = false;
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => {
|
||||
el.hidden = true;
|
||||
}, kind === 'error' ? 5000 : 2500);
|
||||
}
|
||||
|
||||
// ---------- misc ----------
|
||||
|
||||
export function badge(text, cls = '') {
|
||||
return h('span', { class: `badge ${cls}`, text });
|
||||
}
|
||||
|
||||
export function labelChip(k, v) {
|
||||
return h('span', { class: 'label', title: `${k}=${v}` }, h('span', { text: k }), h('span', { text: v }));
|
||||
}
|
||||
|
||||
export function emptyState(title, text, iconName) {
|
||||
return h('div', { class: 'empty' },
|
||||
iconName && icon(iconName),
|
||||
h('strong', { text: title }),
|
||||
text && h('span', { text }),
|
||||
);
|
||||
}
|
||||
|
||||
export function spinner() {
|
||||
return h('div', { class: 'empty' }, h('span', { class: 'spinner' }));
|
||||
}
|
||||
Reference in New Issue
Block a user