Add an admin page, and move the behaviour settings into the database

Closes #5. Three of the server's tunables were environment variables,
which meant changing how long an incident waits before being paged again
required editing a chart, merging it and waiting for a reconcile. They
are behaviour rather than infrastructure, and the difference is who needs
to change them and how often.

The split is by who owns the value. What stays in the environment is
where the server is plugged in: the listen address, the DSN, the ntfy URL
and token, the public URL. Those are needed before the database is open
and two of them are credentials -- the settings endpoint reports that
ntfy is configured and that a token is set, and never what either is.

What moves is how it behaves: the notify repeat interval, the stale
window and the archive window. The environment variable becomes the seed
rather than the setting, written once on first start and never
overwritten, so a redeploy cannot put a chart's default back over an
administrator's edit -- the rule the per-team dead man's switches already
follow. The loops read the current value per tick, so a change at 02:00
is obeyed at 02:00.

Key/value rather than a column per knob: #6 and #7 will both add
settings, and a table shaped one-column-per-setting needs a migration for
each. The cost is that values are text and the accessor has to say what
type it wanted, which settings.go does in one place. Unknown keys are
refused rather than stored -- a typo that wrote notify_repeat_second
would otherwise sit in the table looking like configuration and doing
nothing -- and each value has bounds loose enough to catch a slipped
decimal point without having an opinion about anybody's rota.

Disabling an account is new, and is not deleting one. Deleting a user
nulls acknowledged_by and assigned_to, which quietly rewrites who did
what during an incident months after the fact. A disabled user cannot
authenticate by either credential, loses their sessions immediately, and
stays the name on every acknowledgement they made. The check is part of
the lookup in serveAs rather than a test afterwards, so there is no path
where the row is loaded and the flag is then forgotten.

The page itself is a fourth tab, shown only to an administrator and only
as a courtesy: every endpoint under it is refused with 403 regardless, so
somebody who types /admin gets an explanation rather than a blank screen.
It lists teams with their size and open-incident count, users with their
flags, and the settings with their bounds -- plus the environment half,
read-only, so somebody hunting for the ntfy URL learns where it lives
instead of concluding the server has none.

Delete is disabled rather than offered-and-refused for a team with open
incidents, and neither admin action is offered on your own account, since
the server refuses both.

Claude-Session: https://claude.ai/code/session_01RHPj4ggeFdEjKKfm4SHbD7

internal/web/static/app.css

@@ -630,3 +630,30 @@ kbd {
   .toast, .app.detail-open ~ .toast { bottom: 24px; }
   .only-desktop { display: block; }
 }
+
+/* --- admin ---------------------------------------------------------------
+   The admin page is three tables of things you act on, so it needs table
+   styling the rest of the app never did: the queue is a list of links and the
+   account page is a form. */
+.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.admin-table th {
+  text-align: left; font-weight: 600; color: var(--muted); font-size: 12px;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border);
+}
+.admin-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
+.admin-table tr:last-child td { border-bottom: none; }
+.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
+.admin-table td .btn-sm + .btn-sm { margin-left: 6px; }
+/* A disabled account stays readable — it is still the name on old
+   acknowledgements — but should not look like a working one. */
+.disabled-row td { opacity: 0.55; }
+.btn-sm.danger { color: var(--crit); border-color: var(--crit-soft); }
+
+.inline-form { display: flex; gap: 8px; margin-top: 12px; }
+.inline-form input { flex: 1; min-width: 0; }
+
+.admin-settings .setting-value { width: 5.5em; margin-right: 6px; }
+.admin-settings .setting-unit { max-width: 8em; }
+.admin-settings button[type="submit"] { margin-top: 12px; }
+.small { font-size: 13px; }

internal/web/static/index.html

@@ -59,6 +59,13 @@
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg>
         <span class="nav-label">Alerts</span>
       </a>
+      <!-- Hidden unless the signed-in user is a system administrator; app.js
+           unhides it once /api/me says so. The server refuses every admin
+           endpoint regardless, so this is a courtesy and not a gate. -->
+      <a class="nav-link" href="/admin" data-section="admin" id="nav-admin" hidden>
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z"/></svg>
+        <span class="nav-label">Admin</span>
+      </a>
       <a class="nav-link" href="/more" data-section="more">
         <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3.5"/><path d="M5 20a7 7 0 0 1 14 0"/></svg>
         <span class="nav-label">Account</span>
@@ -80,6 +87,7 @@
 
     <section id="view-oncall" class="view view-page" data-view="oncall" hidden></section>
     <section id="view-alerts" class="view view-page" data-view="alerts" hidden></section>
+    <section id="view-admin" class="view view-page" data-view="admin" hidden></section>
     <section id="view-more" class="view view-page" data-view="more" hidden></section>
   </div>
 

internal/web/static/js/admin.js

@@ -0,0 +1,308 @@
+// Administration: the teams on this server, the people who can sign in, and
+// the settings that change how the server behaves.
+//
+// Only rendered for a system administrator. The server enforces that on every
+// endpoint regardless — hiding a section is a courtesy to the reader, not a
+// permission — so this view simply says so rather than pretending to be a
+// gate.
+
+import * as api from './api.js';
+import { h, clear, spinner, confirm } from './ui.js';
+import { state, myID } from './state.js';
+
+const view = () => document.getElementById('view-admin');
+
+let data = null; // { teams, users, settings }
+let error = null;
+let busy = false;
+
+export function show() {
+  if (!data) clear(view(), spinner());
+  refresh();
+}
+
+export async function refresh() {
+  if (!state.me?.user?.is_admin) {
+    data = null;
+    render();
+    return;
+  }
+  try {
+    const [teams, users, settings] = await Promise.all([
+      api.adminTeams(),
+      api.users(),
+      api.adminSettings(),
+    ]);
+    data = { teams, users, settings };
+    error = null;
+  } catch (err) {
+    error = err.message;
+  }
+  render();
+}
+
+function render() {
+  if (!state.me?.user?.is_admin) {
+    clear(view(), h('div', { class: 'card' },
+      h('p', { class: 'muted', text: 'Administration is for system administrators. Ask one for access.' })));
+    return;
+  }
+  if (!data) {
+    clear(view(), error ? h('div', { class: 'load-error', text: error }) : spinner());
+    return;
+  }
+  clear(view(),
+    error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
+    teamsCard(),
+    usersCard(),
+    settingsCard(),
+  );
+}
+
+// --- teams -----------------------------------------------------------------
+
+function teamsCard() {
+  const rows = data.teams.map((t) =>
+    h('tr', {},
+      h('td', {}, h('strong', { text: t.name })),
+      h('td', { class: 'num', text: String(t.members) }),
+      h('td', { class: 'num', text: String(t.open_incidents) }),
+      h('td', {},
+        h('button', {
+          class: 'btn-sm',
+          type: 'button',
+          text: 'Rename',
+          onclick: () => renameTeam(t),
+        }),
+        // A team with open incidents cannot be deleted, and saying so before
+        // the click is kinder than a 409 afterwards.
+        h('button', {
+          class: 'btn-sm danger',
+          type: 'button',
+          text: 'Delete',
+          disabled: t.open_incidents > 0,
+          title: t.open_incidents > 0 ? 'Resolve its open incidents first' : '',
+          onclick: () => deleteTeam(t),
+        }),
+      ),
+    ));
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Teams' }),
+    h('table', { class: 'admin-table' },
+      h('thead', {}, h('tr', {},
+        h('th', { text: 'Name' }),
+        h('th', { class: 'num', text: 'Members' }),
+        h('th', { class: 'num', text: 'Open' }),
+        h('th', { text: '' }))),
+      h('tbody', {}, rows)),
+    newTeamForm(),
+  );
+}
+
+function newTeamForm() {
+  const name = h('input', { name: 'name', type: 'text', placeholder: 'New team name', required: true });
+  const form = h('form', { class: 'inline-form' }, name,
+    h('button', { class: 'btn', type: 'submit', text: 'Create' }));
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (busy) return;
+    busy = true;
+    try {
+      await api.createTeam(name.value.trim());
+      name.value = '';
+      await refresh();
+    } catch (err) {
+      error = err.message;
+      render();
+    } finally {
+      busy = false;
+    }
+  });
+  return form;
+}
+
+async function renameTeam(team) {
+  const next = window.prompt(`Rename ${team.name} to:`, team.name);
+  if (!next || next === team.name) return;
+  try {
+    await api.renameTeam(team.id, next);
+  } catch (err) {
+    error = err.message;
+  }
+  refresh();
+}
+
+async function deleteTeam(team) {
+  if (!(await confirm({
+    title: `Delete ${team.name}?`,
+    text: 'Its alerts, incidents, schedule and integrations go with it. This cannot be undone.',
+    confirmLabel: 'Delete',
+    danger: true,
+  }))) return;
+  try {
+    await api.deleteTeam(team.id);
+  } catch (err) {
+    error = err.message;
+  }
+  refresh();
+}
+
+// --- users -----------------------------------------------------------------
+
+function usersCard() {
+  const rows = data.users.map((u) => {
+    const self = u.id === myID();
+    return h('tr', { class: u.disabled_at ? 'disabled-row' : '' },
+      h('td', {},
+        h('strong', { text: u.username }),
+        u.disabled_at && h('span', { class: 'row-team', text: 'disabled' }),
+        self && h('span', { class: 'you', text: 'you' })),
+      h('td', { class: 'muted', text: u.email }),
+      h('td', {}, u.is_admin ? h('span', { class: 'row-team', text: 'admin' }) : null),
+      h('td', {},
+        // Neither action is offered for your own account: the server refuses
+        // both, and an enabled-looking button that always fails is worse than
+        // no button.
+        !self && h('button', {
+          class: 'btn-sm',
+          type: 'button',
+          text: u.is_admin ? 'Revoke admin' : 'Make admin',
+          onclick: () => setAdmin(u, !u.is_admin),
+        }),
+        !self && h('button', {
+          class: 'btn-sm danger',
+          type: 'button',
+          text: u.disabled_at ? 'Enable' : 'Disable',
+          onclick: () => setDisabled(u, !u.disabled_at),
+        }),
+      ),
+    );
+  });
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Users' }),
+    h('p', { class: 'muted small' },
+      'Disabling an account stops it signing in and stops its API keys, and keeps ',
+      'its acknowledgements and timeline entries. Deleting a user erases those.'),
+    h('table', { class: 'admin-table' },
+      h('thead', {}, h('tr', {},
+        h('th', { text: 'User' }),
+        h('th', { text: 'Email' }),
+        h('th', { text: '' }),
+        h('th', { text: '' }))),
+      h('tbody', {}, rows)),
+  );
+}
+
+async function setAdmin(user, next) {
+  if (next && !(await confirm({
+    title: `Make ${user.username} an administrator?`,
+    text: 'They will be able to create and delete users, and grant this to others.',
+    confirmLabel: 'Make admin',
+  }))) return;
+  try {
+    await api.setUserAdmin(user.id, next);
+  } catch (err) {
+    error = err.message;
+  }
+  refresh();
+}
+
+async function setDisabled(user, next) {
+  if (next && !(await confirm({
+    title: `Disable ${user.username}?`,
+    text: 'They cannot sign in and their API keys stop working. Their history stays.',
+    confirmLabel: 'Disable',
+    danger: true,
+  }))) return;
+  try {
+    await api.setUserDisabled(user.id, next);
+  } catch (err) {
+    error = err.message;
+  }
+  refresh();
+}
+
+// --- settings --------------------------------------------------------------
+
+// Seconds are what the API speaks; people think in minutes and hours. The two
+// are converted here rather than in the server, which should keep exactly one
+// unit.
+const UNITS = [
+  { label: 'minutes', seconds: 60 },
+  { label: 'hours', seconds: 3600 },
+  { label: 'days', seconds: 86400 },
+];
+
+function bestUnit(seconds) {
+  for (const u of [...UNITS].reverse()) {
+    if (seconds > 0 && seconds % u.seconds === 0) return u;
+  }
+  return UNITS[0];
+}
+
+function settingsCard() {
+  const editable = data.settings.editable || {};
+  const inputs = new Map();
+
+  const rows = Object.entries(editable).map(([key, s]) => {
+    const unit = bestUnit(s.seconds);
+    const value = h('input', {
+      type: 'number',
+      min: '0',
+      value: String(Math.round(s.seconds / unit.seconds)),
+      class: 'setting-value',
+    });
+    const select = h('select', { class: 'setting-unit' },
+      ...UNITS.map((u) => h('option', {
+        value: String(u.seconds),
+        text: u.label,
+        selected: u.seconds === unit.seconds,
+      })));
+    inputs.set(key, () => Number(value.value) * Number(select.value));
+
+    return h('tr', {},
+      h('td', {}, h('strong', { text: key.replace(/_seconds$/, '').replace(/_/g, ' ') })),
+      h('td', { class: 'muted small', text: s.description }),
+      h('td', {}, value, select),
+    );
+  });
+
+  const form = h('form', { class: 'admin-settings' },
+    h('table', { class: 'admin-table' }, h('tbody', {}, rows)),
+    h('button', { class: 'btn', type: 'submit', text: 'Save settings' }));
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (busy) return;
+    busy = true;
+    const body = {};
+    for (const [key, read] of inputs) body[key] = read();
+    try {
+      await api.setAdminSettings(body);
+      await refresh();
+    } catch (err) {
+      error = err.message;
+      render();
+    } finally {
+      busy = false;
+    }
+  });
+
+  const env = Object.entries(data.settings.from_env || {}).map(([k, v]) =>
+    h('tr', {},
+      h('td', {}, h('code', { text: k })),
+      h('td', { class: 'muted', text: v === '' ? '(unset)' : v })));
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Settings' }),
+    h('p', { class: 'muted small', text: 'Saved changes take effect on the next sweep — no restart.' }),
+    form,
+    h('h3', { text: 'From the environment' }),
+    h('p', { class: 'muted small' },
+      'Where the server is plugged in, rather than how it behaves. These are set ',
+      'in the deployment and are read-only here. Credentials are never shown.'),
+    h('table', { class: 'admin-table' }, h('tbody', {}, env)),
+  );
+}

internal/web/static/js/api.js

@@ -88,6 +88,19 @@ export const alerts = (query, opts) => call('GET', '/alerts', { query, ...opts }
 
 // schedule
 export const teams = () => call('GET', '/teams');
+export const createTeam = (name) => call('POST', '/teams', { body: { name } });
+export const renameTeam = (id, name) => call('PUT', `/teams/${id}`, { body: { name } });
+export const deleteTeam = (id) => call('DELETE', `/teams/${id}`);
+
+// Administration. Every one of these is refused with 403 for anybody without
+// the flag, so the UI hides the section rather than guarding it.
+export const adminTeams = () => call('GET', '/admin/teams');
+export const adminSettings = () => call('GET', '/admin/settings');
+export const setAdminSettings = (body) => call('PUT', '/admin/settings', { body });
+export const setUserAdmin = (id, isAdmin) =>
+  call('PUT', `/users/${id}/admin`, { body: { is_admin: isAdmin } });
+export const setUserDisabled = (id, disabled) =>
+  call('PUT', `/users/${id}/disabled`, { body: { disabled } });
 export const schedule = (teamID, from, to) =>
   call('GET', `/teams/${teamID}/schedule`, { query: { from, to } });
 

internal/web/static/js/app.js

@@ -9,6 +9,7 @@ import * as incident from './incident.js';
 import * as oncall from './oncall.js';
 import * as alerts from './alerts.js';
 import * as account from './account.js';
+import * as admin from './admin.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -17,6 +18,7 @@ const SECTIONS = {
   queue: { title: 'Queue', view: queue },
   oncall: { title: 'On-call', view: oncall },
   alerts: { title: 'Alerts', view: alerts },
+  admin: { title: 'Admin', view: admin },
   more: { title: 'Account', view: account },
 };
 
@@ -24,7 +26,7 @@ function parseRoute(pathname) {
   const m = pathname.match(/^\/incidents\/(\d+)\/?$/);
   if (m) return { section: 'queue', incident: Number(m[1]) };
   const name = pathname.replace(/^\/|\/$/g, '');
-  if (name === 'oncall' || name === 'alerts' || name === 'more') return { section: name };
+  if (name === 'oncall' || name === 'alerts' || name === 'admin' || name === 'more') return { section: name };
   return { section: 'queue', incident: null };
 }
 
@@ -142,6 +144,9 @@ async function boot() {
   try {
     state.me = await api.me();
     await loadTeams();
+    // The Admin tab exists only for an administrator. Somebody who types /admin
+    // anyway gets the view's own "ask an administrator" card, not a blank page.
+    $('nav-admin').hidden = !state.me?.user?.is_admin;
     showApp();
   } catch (err) {
     if (err.status === 401) showLogin();