Files
state-hub/dashboard/src/interventions.md
tegwick 9f744dd7f3 feat(ep-td+dashboard): complete CUST-WP-0004 EP/TD tracking workstream
EP catalogue (all domains):
- EP-RAIL-001 ep_id patched (schema fix: add ep_id to EPUpdate)
- EP-RAIL-003 (git bare-repo mirrors) and EP-RAIL-004 (offsite secondary
  backup) registered from railiance-cluster/docs/backup-restore.md
- EP-CUST-003..007 ep_ids assigned to existing custodian EPs
- EP-CUST-008 (State Hub API auth) and EP-CUST-009 (update_workstream MCP
  tool) registered as new custodian extension points

TD catalogue (railiance — first 5 items):
- TD-RAIL-001: backup cron runs as root without audit trail (high/security)
- TD-RAIL-002: k3s kubeconfig world-readable mode 644 (medium/security)
- TD-RAIL-003: no Ansible role unit tests (medium/test)
- TD-RAIL-004: age key extracted via awk — fragile (medium/impl)
- TD-RAIL-005: etcd snapshot retention uncoordinated (low/impl)

Dashboard (T08 + T10):
- Extract API URL and POLL to src/components/config.js; all 15 pages
  now import from the shared module (contributions/goals keep custom POLL)
- Shared .kpi-infobox, .filter-bar, .filter-search/.filter-owner CSS
  moved to observablehq.config.js head <style> block; removed from 9 pages
- Build: 0 errors, 0 warnings

API (T09):
- progress.py: limit param now Query(100, le=1000) — prevents unbounded
  list requests; closes TD-CUST-004 for the only endpoint that had limit

CUST-WP-0004 marked completed (all 10 tasks done).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-11 01:40:52 +01:00

9.7 KiB

title
title
Interventions
import {API, POLL} from "./components/config.js";
// Live poll: all tasks (filtered client-side) + workstreams + topics
const interventionState = (async function*() {
  while (true) {
    let tasks = [], wsMap = {}, ok = false;
    try {
      const [rt, rw, rto, rr] = await Promise.all([
        fetch(`${API}/tasks/?limit=500`),
        fetch(`${API}/workstreams/`),
        fetch(`${API}/topics/`),
        fetch(`${API}/repos/`),
      ]);
      ok = rt.ok && rw.ok && rto.ok && rr.ok;
      if (ok) {
        const [taskList, wsList, topicList, repoList] = await Promise.all([
          rt.json(), rw.json(), rto.json(), rr.json(),
        ]);
        const topicMap = Object.fromEntries(topicList.map(t => [t.id, t]));
        const repoMap  = Object.fromEntries(repoList.map(r => [r.id, r]));
        wsMap = Object.fromEntries(wsList.map(w => [w.id, {
          ...w,
          domain: repoMap[w.repo_id]?.domain_slug ?? topicMap[w.topic_id]?.domain_slug ?? "unknown",
        }]));
        tasks = taskList.map(t => ({
          ...t,
          workstream_title: wsMap[t.workstream_id]?.title ?? "—",
          domain:           wsMap[t.workstream_id]?.domain ?? "unknown",
        }));
      }
    } catch {}
    yield {tasks, ok, ts: new Date()};
    await new Promise(res => setTimeout(res, POLL));
  }
})();
const tasks = interventionState.tasks ?? [];
const _ok   = interventionState.ok    ?? false;
const _ts   = interventionState.ts;
const OPEN_STATUSES = new Set(["todo", "in_progress", "blocked"]);
// open  = currently flagged for human action
// closed = previously flagged (intervention_note records the resolution comment)
const open   = tasks.filter(t => t.needs_human === true);
const closed = tasks.filter(t => t.intervention_note && !OPEN_STATUSES.has(t.status) && !t.needs_human);

// Domain breakdown for top-3
const domainCounts = {};
for (const t of open) {
  domainCounts[t.domain] = (domainCounts[t.domain] ?? 0) + 1;
}
const top3Domains = Object.entries(domainCounts)
  .sort((a, b) => b[1] - a[1])
  .slice(0, 3);

const critHighCount = open.filter(t => t.priority === "critical" || t.priority === "high").length;

Interventions

import {injectTocTop} from "./components/toc-sidebar.js";
import {withDocHelp}  from "./components/doc-overlay.js";

// ── KPI sidebar card ──────────────────────────────────────────────────────────
const _kpiBox = html`<div class="kpi-infobox">
  <div class="kpi-infobox-title">Interventions</div>
  <div class="kpi-row">
    <span class="kpi-row-label">open</span>
    <div class="kpi-row-right">
      <div class="kpi-row-value">${open.length}</div>
    </div>
  </div>
  <div class="kpi-row">
    <span class="kpi-row-label">critical / high</span>
    <div class="kpi-row-right">
      <div class="kpi-row-value" style="color:${critHighCount > 0 ? '#dc2626' : 'inherit'}">${critHighCount}</div>
    </div>
  </div>
  ${top3Domains.map(([domain, count]) => html`
  <div class="kpi-row">
    <span class="kpi-row-label">${domain}</span>
    <div class="kpi-row-right">
      <div class="kpi-row-value" style="font-size:1rem">${count}</div>
    </div>
  </div>`)}
</div>`;

// ── Live indicator ────────────────────────────────────────────────────────────
const _liveEl = html`<div class="live-indicator">
  <span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
  ${_ok
    ? `Live · updated ${_ts?.toLocaleTimeString()}`
    : html`<span style="color:red">Offline — run: <code>make api</code></span>`}
</div>`;
withDocHelp(_liveEl, "/docs/live-data");

injectTocTop("intervention-kpi-box", _kpiBox);
injectTocTop("live-indicator", _liveEl);

const _h1 = document.querySelector("#observablehq-main h1");
if (_h1) { _h1.style.position = "relative"; withDocHelp(_h1, "/docs/interventions"); }

Tasks flagged needs_human=true — actions only a human can take.


Open

import {openActionConfirm} from "./components/action-confirm.js";

const PRIORITY_ORDER = {critical: 0, high: 1, medium: 2, low: 3};
const STATUS_ORDER   = {blocked: 0, in_progress: 1, todo: 2};

function sortTasks(arr) {
  return [...arr].sort((a, b) => {
    const pd = (PRIORITY_ORDER[a.priority] ?? 9) - (PRIORITY_ORDER[b.priority] ?? 9);
    if (pd !== 0) return pd;
    return (STATUS_ORDER[a.status] ?? 9) - (STATUS_ORDER[b.status] ?? 9);
  });
}

function renderCard(t) {
  const isOpen = OPEN_STATUSES.has(t.status);
  const borderColor = isOpen ? "#f59e0b" : "#22c55e";

  function onMarkDone() {
    openActionConfirm({
      title:        "Mark Intervention as Done",
      entityTitle:  t.title,
      label:        "Resolution comment",
      placeholder:  "What was done to resolve this?",
      confirmLabel: "Mark Done",
      onConfirm: async (comment) => {
        const res = await fetch(`${API}/tasks/${t.id}/`, {
          method: "PATCH",
          headers: {"Content-Type": "application/json"},
          body: JSON.stringify({status: "done", needs_human: false, intervention_note: comment}),
        });
        if (!res.ok) throw new Error(`API error ${res.status}`);
      },
    });
  }

  return html`<div class="intervention-card" style="border-left-color:${borderColor}">
    <div class="int-card-header">
      <span class="task-badge task-priority-${t.priority}">${t.priority}</span>
      <span class="task-status-chip status-chip-${t.status}">${t.status.replace("_", " ")}</span>
      <span class="task-context">${t.domain}</span>
      <span class="task-context task-ws-name">${t.workstream_title}</span>
      ${isOpen ? html`<button class="done-btn" onclick=${onMarkDone}>Mark done</button>` : ""}
    </div>
    <div class="int-action">${t.intervention_note ?? "(no note)"}</div>
    ${t.title !== t.intervention_note ? html`<details class="int-desc"><summary>Task: ${t.title}</summary>${t.description ?? ""}</details>` : ""}
  </div>`;
}

if (open.length === 0) {
  display(html`<p class="dim">No open interventions — you're clear! ✓</p>`);
} else {
  display(html`<div class="task-list">${sortTasks(open).map(renderCard)}</div>`);
}

Completed / Cancelled

if (closed.length === 0) {
  display(html`<p class="dim">No completed interventions yet.</p>`);
} else {
  display(html`<div class="task-list">${[...closed].reverse().map(renderCard)}</div>`);
}
<style> /* ── Live indicator ───────────────────────────────────────────────────────── */ .live-indicator { font-size: 0.8rem; color: gray; position: relative; padding: 0.55rem 1.8rem 0.55rem 0.7rem; margin-bottom: 0.75rem; } /* ── KPI infobox ──────────────────────────────────────────────────────────── */ .kpi-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.3rem 0; } .kpi-row + .kpi-row { border-top: 1px solid var(--theme-foreground-faint, #eee); } .kpi-row-label { font-size: 0.8rem; color: var(--theme-foreground-muted, #666); white-space: nowrap; } .kpi-row-right { text-align: right; } .kpi-row-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } /* ── Intervention cards ───────────────────────────────────────────────────── */ .task-list { display: flex; flex-direction: column; gap: 0.6rem; } .intervention-card { border-left: 4px solid #f59e0b; border-radius: 0 6px 6px 0; background: var(--theme-background-alt); padding: 0.7rem 1rem; } .int-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; font-size: 0.75rem; } .int-action { font-weight: 600; font-size: 0.95rem; color: var(--theme-foreground, #222); margin-bottom: 0.2rem; } .int-desc { font-size: 0.8rem; color: var(--theme-foreground-muted, #666); margin-top: 0.3rem; } .int-desc summary { cursor: pointer; } .done-btn { margin-left: auto; padding: 0.15rem 0.6rem; border-radius: 6px; border: 1px solid #22c55e; background: #f0fdf4; color: #166534; font-size: 0.7rem; font-weight: 600; cursor: pointer; } .done-btn:hover { background: #dcfce7; } /* ── Shared badges ────────────────────────────────────────────────────────── */ .task-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .task-priority-critical { background: #fee2e2; color: #991b1b; } .task-priority-high { background: #ffedd5; color: #9a3412; } .task-priority-medium { background: #dbeafe; color: #1e40af; } .task-priority-low { background: #f1f5f9; color: #475569; } .task-status-chip { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 10px; font-size: 0.7rem; font-weight: 500; } .status-chip-blocked { background: #fee2e2; color: #991b1b; } .status-chip-in_progress { background: #dbeafe; color: #1e40af; } .status-chip-todo { background: #f1f5f9; color: #475569; } .status-chip-done { background: #dcfce7; color: #166534; } .status-chip-cancelled { background: #f1f5f9; color: #64748b; } .task-context { color: var(--theme-foreground-muted, #666); } .task-ws-name { font-style: italic; } .dim { color: gray; font-style: italic; } </style>