vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

42
frontend/packages/dashboard/src/builds.js
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);
}

137
frontend/packages/dashboard/src/system-sections.css
View file

@ -105,15 +105,6 @@
align-items: baseline;
gap: 0.4em;
}
.rebuild-queue-entry.rqe-running {
border-color: var(--purple);
background: color-mix(in srgb, var(--purple) 12%, transparent);
animation: badge-pulse 1.6s ease-in-out infinite;
}
.rebuild-queue-entry.rqe-failed { border-color: var(--red); color: var(--red); }
.rebuild-queue-entry.rqe-cancelled { opacity: 0.6; }
.rebuild-queue-entry.rqe-done { opacity: 0.7; color: var(--green); }
.rqe-state { font-weight: bold; min-width: 1.2em; text-align: center; }
.rqe-kind { color: var(--cyan); }
.rqe-agent { color: var(--amber); font-weight: bold; }
.rqe-source {
@ -130,134 +121,6 @@
.rqe-source-auto_update { color: var(--muted); }
.rqe-source-crash_recover { color: var(--amber); border-color: var(--amber); }
.rqe-source-approval { color: var(--green); border-color: var(--green); }
.rqe-when { color: var(--muted); font-size: 0.85em; }
.rqe-reason { color: var(--muted); font-size: 0.85em; flex: 1 1 auto; }
/* Per-node DAG chain: one chip per primitive node, dependency order. */
.rqe-nodes {
flex-basis: 100%;
margin: 0.15em 0 0 1.8em;
font-size: 0.85em;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.15em;
}
/* ─── jobq node tree (replaces .rqe-nodes for tree-structured payloads) ──── */
.rqe-nodes-tree {
flex-basis: 100%;
margin: 0.25em 0 0 1.8em;
font-size: 0.85em;
display: flex;
flex-direction: column;
gap: 3px;
}
.rqe-tree-row {
display: flex;
align-items: center;
gap: 0;
min-height: 1.6em;
}
/* Guide column: fixed-width spacer that optionally draws a vertical guide
line through rows where a sibling of an ancestor continues below. */
.rqe-tree-guide,
.rqe-tree-connector {
flex-shrink: 0;
width: 1.1em;
align-self: stretch;
position: relative;
}
.rqe-tree-guide-line::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
border-left: 1px solid var(--border);
}
/* Connector: vertical stem from top, horizontal spur to the right.
Last child (└): stem goes top→center. Mid child (├): stem is full height. */
.rqe-tree-connector::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 50%;
border-left: 1px solid var(--border);
}
.rqe-tree-connector-mid::before {
bottom: 0;
}
.rqe-tree-connector::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
right: 0;
border-top: 1px solid var(--border);
}
.rqe-node {
padding: 0.05em 0.45em;
border: 1px solid var(--border);
border-radius: 0.7em;
color: var(--muted);
white-space: nowrap;
}
.rqe-node-running {
color: var(--purple);
border-color: var(--purple);
animation: badge-pulse 1.6s ease-in-out infinite;
}
.rqe-node-done { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.rqe-node-failed { color: var(--red); border-color: var(--red); }
.rqe-node-cancelled { opacity: 0.55; text-decoration: line-through; }
/* Not-taken outcome branch — expected, quiet, distinct from cancelled
(dimmed only, no strikethrough: this wasn't dropped mid-flight, it was
never going to run). */
.rqe-node-skipped { opacity: 0.5; }
.rqe-node-arrow { color: var(--muted); }
.rqe-node-log { margin-left: 0.1em; text-decoration: none; }
.rqe-error {
flex-basis: 100%;
margin: 0.3em 0 0;
padding: 0.3em 0.5em;
background: color-mix(in srgb, var(--red) 10%, transparent);
border-left: 2px solid var(--red);
color: var(--red);
font-size: 0.8em;
white-space: pre-wrap;
}
.rqe-cancel {
margin-left: auto;
}
.rqe-cancel-btn {
background: transparent;
border: 1px solid var(--purple-dim);
color: var(--muted);
border-radius: 999px;
width: 1.6em;
height: 1.6em;
font-size: 0.85em;
line-height: 1;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.rqe-cancel-btn:hover:not(:disabled),
.rqe-cancel-btn:focus-visible {
color: var(--red);
border-color: var(--red);
box-shadow: 0 0 8px -2px var(--red);
outline: none;
}
.rqe-cancel-btn:disabled {
opacity: 0.5;
cursor: default;
}
/* ─── running-rebuild live log (renderRebuildLiveLog in builds.js) ──────────
Streams the currently-running rebuild's build log inline under the queue.
Hidden (native `hidden` attr) when nothing is building. Used on