jobq-graph: re-add per-node cancel button

Fixes #3067.

<hive-jobq-graph> gains a `cancellable` attribute: any non-terminal
node (Pending/Running/Finishing) gets a small cancel button, and a
click dispatches `hive-jobq-graph-cancel` (`detail: { id }`) rather
than POSTing anything itself -- which endpoint actually cancels a
node is the host's domain concept, same "push data out, host decides"
shape `hive-jobq-graph-update` already uses.

builds.js turns it on for R3BU1LD QU3U3, confirms via themedConfirm,
then POSTs the existing `/api/rebuild-queue/{id}/cancel` endpoint.
No manual refresh needed -- cancelling flips node state, which
already fires rebuild_queue_changed over SSE, and the page's existing
handler for that tick already calls jobqGraphEl.refresh().

Also removed ~130 lines of dead `.rqe-*` CSS in system-sections.css
left over from the bespoke pre-<hive-jobq-graph> queue renderer
(confirmed zero JS references before deleting each rule; kept the
still-used `.rqe-kind`/`.rqe-agent`/`.rqe-source*`).

docs/web-ui/dashboard.md's R3BU1LD QU3U3 section updated to match
current behaviour (cancel button, waits-on text instead of the old
"no per-node actions" note, sibling order no longer implies anything
since deps render as text not a reordered rail).
This commit is contained in:
iris 2026-08-09 17:40:39 +02:00
commit aa14339be7
5 changed files with 117 additions and 176 deletions

View file

@ -13,6 +13,7 @@
import { $, fmtAgeSecs, openStream, openBuildLogStream, initServerWarnings } from './common.js';
import { el } from '@hive/shared/dom.js';
import { bindAsyncForms } from '@hive/shared/forms.js';
import { themedConfirm } from '@hive/shared/modal.js';
import { fmtAgo, fmtDuration, truncate } from './util.js';
import '@hive/shared/hive-tab-strip.js';
import '@hive/shared/jobq-graph.js';
@ -128,25 +129,46 @@ function renderMetaInputs(s) {
// ─── rebuild queue ────────────────────────────────────────────────────────────
// R3BU1LD QU3U3 is <hive-jobq-graph> directly (mara: "replace the build
// queue tab with this component") — no hand-rolled
// tree/roll-up/cancel-button rendering here anymore. The component owns
// fetching GET /api/jobq/graph and its own refresh(); this page just
// listens for its `hive-jobq-graph-update` event to keep `jobqNodes` (the
// flat array) in sync for the two things the generic view doesn't render:
// the count-pill and the live-log panel below. No cancel button or
// build-log deep-link on rows either — the generic component has no
// per-node action affordances; per "dont feel constrained by what the ui
// does currently," not reinventing those here for the first cut.
// queue tab with this component") — no hand-rolled tree/roll-up rendering
// here anymore. The component owns fetching GET /api/jobq/graph and its
// own refresh(); this page just listens for its `hive-jobq-graph-update`
// event to keep `jobqNodes` (the flat array) in sync for the two things
// the generic view doesn't render itself: the count-pill and the live-log
// panel below.
//
// Cancel is the one action this page *does* wire up: the
// `cancellable` attribute turns on the component's own per-node cancel
// button, which dispatches `hive-jobq-graph-cancel` rather than posting
// anything — the endpoint (`/api/rebuild-queue/{id}/cancel`) is this
// page's domain concept, not the generic component's.
function mountJobqGraph() {
const root = $('rebuild-queue-section');
if (!root) return;
root.replaceChildren();
jobqGraphEl = el('hive-jobq-graph', { endpoint: '/api/jobq/graph' });
jobqGraphEl = el('hive-jobq-graph', { endpoint: '/api/jobq/graph', cancellable: '' });
jobqGraphEl.addEventListener('hive-jobq-graph-update', (e) => {
jobqNodes = e.detail.nodes || [];
renderRebuildLiveLog();
updateRebuildCount();
});
jobqGraphEl.addEventListener('hive-jobq-graph-cancel', async (e) => {
const { id } = e.detail;
const node = jobqNodes.find((n) => n.id === id);
const label = node ? node.payload.label : 'node ' + id;
if (!(await themedConfirm({
message: `cancel ${label}? a group root cancels the whole subtree; a mid-tree node cancels just that branch.`,
danger: true, confirmLabel: '✕ cancel',
}))) return;
try {
const r = await fetch('/api/rebuild-queue/' + id + '/cancel', { method: 'POST' });
if (!r.ok) throw new Error('http ' + r.status);
// No manual refresh: cancel flips node state, which fires
// rebuild_queue_changed over SSE — the existing handler below
// already calls jobqGraphEl.refresh() on that tick.
} catch (err) {
console.error('cancel failed', err);
}
});
root.append(jobqGraphEl);
}