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

shared: add <hive-jobq-graph>, a generic renderer for /api/jobq/graph

Browse source 
Shadow-DOM custom element (attachShadowCss, own <style>, matches the
<hive-dialog>/<hive-toast> pattern) that renders any hive_jobq graph
from the wire shape hive-jobq-wire serves: a tree from parent/child
structure, a state glyph per node, payload.label verbatim, and
payload.data as a generic key/value list. Never branches on what a
label or data key means, per the wire type's own opaque-payload
contract.

Fetch endpoint is a configurable attribute
(<hive-jobq-graph endpoint="/api/jobq/graph">) rather than
hardcoded, and a public render(nodes) method lets a host push
pre-fetched data (e.g. from its own SSE stream) instead. No transport
of its own beyond the initial self-fetch — refresh() is public so the
host decides its own refresh cadence.

Verified against real production data (61-node live rebuild-queue
graph, fetched from this hive's own /api/jobq/graph) via a jsdom
render: correct tree shape, correct state glyphs, correct data-list
presence count, both the self-fetching and render()-pushed paths,
and the empty-graph path.

Not wired into any page yet — the builds.js migration (hyperhive#2812)
follows once the open payload-gap question there is settled.
This commit is contained in:
iris 2026-08-03 01:11:20 +02:00 • committed by mara
commit 57c9ff6d6c
2 changed files with 218 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

79
frontend/packages/shared/src/jobq-graph/hive-jobq-graph.css Normal file
View file

@ -0,0 +1,79 @@
/* hive-jobq-graph.css — shadow-scoped styles for <hive-jobq-graph>. Theme
custom properties (--fg, --red, ...) pierce the shadow boundary by
inheritance and are used directly; only plain class rules live here,
same split every other shadow-DOM component (<hive-dialog>, ...) uses. */
:host {
display: block;
font-family: inherit;
font-size: inherit;
color: var(--fg);
}
.jg-body {
display: flex;
flex-direction: column;
gap: 0.15em;
}
.jg-node {
margin: 0;
}
/* Nested groups indent + get a guide line, rather than a hand-rolled
connector-glyph tree — cheaper to build and reads fine at any depth. */
.jg-node .jg-node {
margin-left: 1.1em;
padding-left: 0.6em;
border-left: 1px solid var(--muted);
margin-top: 0.15em;
}
.jg-row {
display: flex;
align-items: baseline;
gap: 0.35em;
flex-wrap: wrap;
}
.jg-state {
font-weight: bold;
min-width: 1.2em;
text-align: center;
}
.jg-state-pending { color: var(--muted); }
.jg-state-running { color: var(--cyan); }
.jg-state-finishing { color: var(--cyan); opacity: 0.75; }
.jg-state-done { color: var(--green); }
.jg-state-failed { color: var(--red); }
.jg-state-cancelled { color: var(--muted); text-decoration: line-through; }
.jg-state-skipped { color: var(--muted); opacity: 0.5; }
.jg-label {
color: var(--fg);
}
.jg-data {
margin: 0.1em 0 0 1.6em;
font-size: 0.85em;
color: var(--muted);
display: grid;
grid-template-columns: auto 1fr;
gap: 0 0.5em;
}
.jg-data dt { font-weight: 600; }
.jg-data dd { margin: 0; word-break: break-word; }
.jg-error {
color: var(--red);
font-size: 0.85em;
margin: 0.2em 0 0.2em 1.6em;
white-space: pre-wrap;
}
.jg-empty,
.jg-error-msg {
color: var(--muted);
font-style: italic;
margin: 0;
}