075d1f63e3
mara, follow-up on PR#3365: "follow up with the same for jobq". Drops
mountJobqGraph the same way mountJobqRollup was dropped - builds.js
now calls render(h(JobqGraph, {...}), root) directly, split into
mountRebuildQueue() (the one-time replaceChildren() + first render,
called once at page init) and renderRebuildQueue() (the render-only
path the rebuild_queue_changed handler and the cancel flow reuse,
bumping a module-level jobqGraphToken instead of holding a mount
handle). The split matters here specifically: repeating
replaceChildren() on every refresh would wipe Preact's own tracked
children out from under its diffing instead of letting it update them
minimally - JobqRollup's simpler version didn't need this since it
only ever renders into its own dedicated section once per app
lifetime's worth of state, but the rebuild queue refreshes on every
`rebuild_queue_changed` tick.
Re-verified: npm run build (whole workspace) + swarm-ui typecheck
clean (JobqGraph is also used via JSX on swarm-ui's /jobs page,
untouched by this), comment-block + issue-ref lints clean, headless-
chromium screenshot of builds.html's R3BU1LD QU3U3 tab against a
mocked /api/jobq/graph payload - tree, filter checkboxes, and cancel
buttons all render identically to before.
559 lines
23 KiB
JavaScript
559 lines
23 KiB
JavaScript
// BU1LDS page entry (/builds.html). The build lifecycle hub — rebuild
|
|
// queue, live build log, meta inputs, and build log history on one page.
|
|
// Three sub-tabs via <hive-tab-strip> (default = Rebuild Queue):
|
|
// - R3BU1LD QU3U3: pending + running rebuilds + live build log inline
|
|
// - M3T4 1NPUTS: nix flake input selector + meta-update trigger
|
|
// - BUILD L0GS: all-agents build log history (lazy-loaded on tab show)
|
|
//
|
|
// Carved out of /core.html (rebuild queue + meta inputs) and /logs.html
|
|
// (BUILD tab) so the full build lifecycle is in one place. The section
|
|
// renderers here are direct copies from core.js / logs.js with only the
|
|
// deep-link URL and count-pill id adjusted.
|
|
|
|
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 { h, render } from 'preact';
|
|
import { fmtAgo, fmtDuration, truncate } from './util.js';
|
|
import '@hive/shared/hive-tab-strip.js';
|
|
import { JobqGraph } from '@hive/shared/jobq-graph.js';
|
|
|
|
// ─── derived state ───────────────────────────────────────────────────────────
|
|
let metaInputsState = [];
|
|
let metaUpdateRunning = false;
|
|
// Kept in sync from JobqGraph's `onUpdate` callback (see mountRebuildQueue
|
|
// below) — the component owns fetching GET /api/jobq/graph and renders
|
|
// the tree itself; this flat array exists only for the two things it
|
|
// doesn't render: the count-pill and the live-log panel.
|
|
let jobqNodes = [];
|
|
let jobqGraphToken = 0;
|
|
|
|
function syncFromSnapshot(s) {
|
|
metaInputsState = (s.meta_inputs || []).slice();
|
|
metaUpdateRunning = !!s.meta_update_running;
|
|
}
|
|
|
|
// ─── meta inputs ─────────────────────────────────────────────────────────────
|
|
function renderMetaInputs(s) {
|
|
const root = $('meta-inputs-section');
|
|
if (!root) return;
|
|
// Snapshot ticked checkboxes before wiping so a concurrent
|
|
// MetaInputsChanged doesn't silently clear a pending selection.
|
|
const checkedInputs = new Set(
|
|
Array.from(root.querySelectorAll('input[type="checkbox"][data-meta-input]:checked'))
|
|
.map((cb) => cb.dataset.metaInput),
|
|
);
|
|
root.replaceChildren();
|
|
const inputs = s.meta_inputs || [];
|
|
if (!inputs.length) {
|
|
root.append(el('p', { class: 'empty' }, 'meta repo not seeded yet'));
|
|
return;
|
|
}
|
|
if (metaUpdateRunning) {
|
|
root.append(el('p', { class: 'meta-update-running' },
|
|
'⏳ meta-update running — flake lock bump + affected agents rebuilding. '
|
|
+ 'watch the agent cards for per-rebuild progress.'));
|
|
}
|
|
const f = el('form', {
|
|
method: 'POST',
|
|
action: '/api/meta-update',
|
|
class: 'meta-inputs-form',
|
|
'data-async': '',
|
|
'data-no-refresh': '',
|
|
'data-confirm': 'update selected meta flake inputs + rebuild affected agents?',
|
|
});
|
|
const bulk = el('div', { class: 'meta-inputs-bulk' });
|
|
const selAll = el('button', { type: 'button', class: 'meta-bulk-btn' }, 'select all');
|
|
const selNone = el('button', { type: 'button', class: 'meta-bulk-btn' }, 'select none');
|
|
bulk.append('bulk: ', selAll, ' ', selNone);
|
|
f.append(bulk);
|
|
const ul = el('ul', { class: 'meta-inputs' });
|
|
for (const inp of inputs) {
|
|
const depth = (inp.name.match(/\//g) || []).length;
|
|
const leaf = inp.name.slice(inp.name.lastIndexOf('/') + 1);
|
|
const li = el('li');
|
|
if (depth > 0) li.style.marginLeft = (depth * 1.3) + 'em';
|
|
const id = 'meta-input-' + inp.name.replace(/[^a-z0-9-]/gi, '_');
|
|
const cb = el('input', {
|
|
type: 'checkbox',
|
|
name: 'meta_input_' + inp.name,
|
|
id,
|
|
value: inp.name,
|
|
'data-meta-input': inp.name,
|
|
});
|
|
if (checkedInputs.has(inp.name)) cb.checked = true;
|
|
const label = el('label', { for: id, title: inp.name });
|
|
label.append(cb);
|
|
if (depth > 0) label.append(el('span', { class: 'meta-input-twig' }, '└ '));
|
|
label.append(
|
|
el('span', { class: 'meta-input-name' }, leaf), ' ',
|
|
el('code', { class: 'meta-input-rev' }, inp.rev.slice(0, 12)), ' ',
|
|
el('span', { class: 'meta-input-ts' }, fmtAgo(inp.last_modified)),
|
|
);
|
|
if (inp.url) {
|
|
label.append(' ', el('span', { class: 'meta-input-url', title: inp.url },
|
|
'· ' + truncate(inp.url, 48)));
|
|
}
|
|
li.append(label);
|
|
ul.append(li);
|
|
}
|
|
f.append(ul);
|
|
const hidden = el('input', { type: 'hidden', name: 'inputs', value: '' });
|
|
f.append(hidden);
|
|
const btn = el('button', {
|
|
type: 'submit',
|
|
class: 'btn btn-meta-update',
|
|
disabled: '',
|
|
}, metaUpdateRunning ? '⏳ UPD4T1NG…' : '◆ UPD4TE & R3BU1LD');
|
|
f.append(btn);
|
|
function refreshDisabled() {
|
|
const any = f.querySelectorAll('input[data-meta-input]:checked').length > 0;
|
|
if (any && !metaUpdateRunning) btn.removeAttribute('disabled');
|
|
else btn.setAttribute('disabled', '');
|
|
}
|
|
f.addEventListener('change', refreshDisabled);
|
|
function setAllChecked(val) {
|
|
for (const b of f.querySelectorAll('input[data-meta-input]')) b.checked = val;
|
|
refreshDisabled();
|
|
}
|
|
selAll.addEventListener('click', () => setAllChecked(true));
|
|
selNone.addEventListener('click', () => setAllChecked(false));
|
|
f.addEventListener('submit', () => {
|
|
const selected = Array.from(f.querySelectorAll('input[data-meta-input]:checked'))
|
|
.map((b) => b.dataset.metaInput);
|
|
hidden.value = selected.join(',');
|
|
});
|
|
root.append(f);
|
|
}
|
|
|
|
// ─── rebuild queue ────────────────────────────────────────────────────────────
|
|
// R3BU1LD QU3U3 is `JobqGraph` (Preact, rendered via plain `render(h(...))`
|
|
// — no JSX pragma needed for either call, no mount wrapper: `render` is
|
|
// already the re-render/diff entry point, per mara on review) directly —
|
|
// no hand-rolled tree/roll-up rendering here anymore. The component owns
|
|
// fetching GET /api/jobq/graph and its own refetch (bump `jobqGraphToken`
|
|
// and render again); this page just reads its `onUpdate` callback 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`
|
|
// prop turns on the component's own per-node cancel button, which calls
|
|
// `onCancel(id)` rather than posting anything — the endpoint
|
|
// (`/api/rebuild-queue/{id}/cancel`) is this page's domain concept, not
|
|
// the generic component's.
|
|
// Split from `renderRebuildQueue` below: `replaceChildren()` only
|
|
// belongs on the *first* render, to clear the static "loading…"
|
|
// placeholder `#rebuild-queue-section` starts with in `builds.html` —
|
|
// Preact doesn't know that placeholder is there, so a later render
|
|
// call must NOT repeat `replaceChildren()` (it would wipe Preact's own
|
|
// tracked children out from under its diffing rather than let it
|
|
// update them minimally).
|
|
function mountRebuildQueue() {
|
|
const root = $('rebuild-queue-section');
|
|
if (!root) return;
|
|
root.replaceChildren();
|
|
renderRebuildQueue();
|
|
}
|
|
function renderRebuildQueue() {
|
|
const root = $('rebuild-queue-section');
|
|
if (!root) return;
|
|
render(h(JobqGraph, {
|
|
endpoint: '/api/jobq/graph',
|
|
cancellable: true,
|
|
refreshToken: jobqGraphToken,
|
|
onUpdate: (nodes) => {
|
|
jobqNodes = nodes || [];
|
|
renderRebuildLiveLog();
|
|
updateRebuildCount();
|
|
},
|
|
onCancel: async (id) => {
|
|
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 bumps jobqGraphToken and re-renders on that tick.
|
|
} catch (err) {
|
|
console.error('cancel failed', err);
|
|
}
|
|
},
|
|
}), root);
|
|
}
|
|
|
|
// ─── running-rebuild live log ─────────────────────────────────────────────────
|
|
// One persistent live-log panel for the first currently-building node.
|
|
// Keyed to that node's id and kept in its own container (#rebuild-live-log)
|
|
// so the queue's row re-render never tears down an open poll.
|
|
//
|
|
// Build logs are fetched by polling GET /api/build-log/<node_id> (returns
|
|
// {stdout, stderr}) rather than SSE — a running node's log re-fetches on the
|
|
// rebuild_queue_changed tick; a terminal node's log is static (one last fetch
|
|
// on transition, then done).
|
|
let liveLogId = null; // current node id being shown
|
|
let liveLogDone = false; // true once the node left 'Running'
|
|
let liveLogCollapsed = false;
|
|
let liveLogPollTimer = null;
|
|
|
|
function clearLiveLogPoll() {
|
|
if (liveLogPollTimer) { clearInterval(liveLogPollTimer); liveLogPollTimer = null; }
|
|
}
|
|
|
|
// First running node with a log, in wire order (root-then-subtree per
|
|
// root, roots in enqueue order — see hive-jobq-wire's wire_snapshot doc).
|
|
// Gate on build_log_id so lock/noop/store-only nodes don't open a blank
|
|
// panel.
|
|
function findLiveBuild() {
|
|
return jobqNodes.find((n) => n.state === 'Running' && n.payload.data && n.payload.data.build_log_id != null)
|
|
|| null;
|
|
}
|
|
|
|
async function fetchAndRenderLiveLog(nodeId, pre) {
|
|
try {
|
|
const r = await fetch('/api/build-log/' + nodeId);
|
|
if (!r.ok) return;
|
|
const data = await r.json();
|
|
const text = [data.stdout, data.stderr ? '--- stderr ---\n' + data.stderr : ''].filter(Boolean).join('\n');
|
|
if (pre.textContent !== text) {
|
|
const atBottom = pre.scrollHeight - pre.scrollTop - pre.clientHeight < 40;
|
|
pre.textContent = text;
|
|
if (atBottom) pre.scrollTop = pre.scrollHeight;
|
|
}
|
|
} catch { /* network blip — ignore, next poll will retry */ }
|
|
}
|
|
|
|
function renderRebuildLiveLog() {
|
|
const root = $('rebuild-live-log');
|
|
if (!root) return;
|
|
const liveNode = findLiveBuild();
|
|
|
|
if (!liveNode) {
|
|
clearLiveLogPoll();
|
|
liveLogId = null;
|
|
liveLogDone = false;
|
|
if (!root.hidden) { root.hidden = true; root.replaceChildren(); }
|
|
return;
|
|
}
|
|
|
|
// Same node, already polling — just let the timer tick (or do a final
|
|
// fetch if the node just went non-running and we haven't marked done yet).
|
|
if (liveNode.id === liveLogId) {
|
|
if (!liveLogDone && liveNode.state !== 'Running') {
|
|
clearLiveLogPoll();
|
|
liveLogDone = true;
|
|
const pre = root.querySelector('.rebuild-live-log-output');
|
|
const badge = root.querySelector('.rebuild-live-log-badge');
|
|
if (pre) fetchAndRenderLiveLog(liveNode.id, pre);
|
|
if (badge) {
|
|
const ok = liveNode.state !== 'Failed';
|
|
badge.className = 'rebuild-live-log-badge ' + (ok ? 'rll-ok' : 'rll-fail');
|
|
badge.textContent = liveNode.state;
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
// New node — tear down old poll, rebuild the panel.
|
|
clearLiveLogPoll();
|
|
liveLogId = liveNode.id;
|
|
liveLogDone = false;
|
|
root.hidden = false;
|
|
root.replaceChildren();
|
|
|
|
const pre = el('pre', { class: 'rebuild-live-log-output' }, '');
|
|
pre.hidden = liveLogCollapsed;
|
|
const badge = el('span', { class: 'rebuild-live-log-badge rll-running' }, 'live');
|
|
const toggle = el('button', {
|
|
type: 'button',
|
|
class: 'rebuild-live-log-toggle',
|
|
'aria-expanded': String(!liveLogCollapsed),
|
|
title: liveLogCollapsed ? 'expand live log' : 'collapse live log',
|
|
}, liveLogCollapsed ? '▸' : '▾');
|
|
toggle.addEventListener('click', () => {
|
|
liveLogCollapsed = !liveLogCollapsed;
|
|
pre.hidden = liveLogCollapsed;
|
|
toggle.textContent = liveLogCollapsed ? '▸' : '▾';
|
|
toggle.setAttribute('aria-expanded', String(!liveLogCollapsed));
|
|
toggle.title = liveLogCollapsed ? 'expand live log' : 'collapse live log';
|
|
});
|
|
const liveAgent = liveNode.payload.data && liveNode.payload.data.agent;
|
|
const header = el('div', { class: 'rebuild-live-log-header' },
|
|
toggle, ' ',
|
|
el('span', { class: 'rebuild-live-log-title' }, 'live build log — '),
|
|
// Label the specific node's agent, not the whole group's agent set.
|
|
el('code', { class: 'rqe-agent' }, liveAgent || ''),
|
|
' ', el('span', { class: 'rqe-kind' }, liveNode.payload.label),
|
|
' ', badge, ' ',
|
|
el('a', {
|
|
class: 'rebuild-live-log-raw',
|
|
href: '/api/build-log/' + liveNode.id + '/raw',
|
|
download: 'build-log-' + liveNode.id + '.txt',
|
|
}, '↓ raw'),
|
|
);
|
|
root.append(header, pre);
|
|
|
|
// Start polling.
|
|
fetchAndRenderLiveLog(liveNode.id, pre);
|
|
liveLogPollTimer = setInterval(() => fetchAndRenderLiveLog(liveNode.id, pre), 2000);
|
|
}
|
|
|
|
// ─── rebuild-queue count pill ─────────────────────────────────────────────────
|
|
function updateRebuildCount() {
|
|
const pill = $('builds-tab-count-rebuild');
|
|
if (!pill) return;
|
|
// Pending/Running/Finishing = in flight (Finishing = own work done, a
|
|
// sub-node still running — still counts). Root nodes only: each is one
|
|
// queue entry.
|
|
const n = jobqNodes.filter((n) => n.parent == null
|
|
&& (n.state === 'Pending' || n.state === 'Running' || n.state === 'Finishing')).length;
|
|
if (n > 0) { pill.textContent = String(n); pill.hidden = false; }
|
|
else { pill.hidden = true; }
|
|
}
|
|
|
|
// ─── render-all (cold load + any full re-render) ──────────────────────────────
|
|
function renderAll() {
|
|
renderMetaInputs({ meta_inputs: metaInputsState });
|
|
// Rebuild-queue rendering + the count-pill/live-log it drives all happen
|
|
// off JobqGraph's own onUpdate callback (see mountRebuildQueue) —
|
|
// nothing to render here directly.
|
|
}
|
|
|
|
// ─── BUILD L0GS tab ───────────────────────────────────────────────────────────
|
|
// All-agents build log history with expand-to-detail. Live builds stream in
|
|
// real time. Lazy-loaded on first tab activation; auto-refreshes (debounced
|
|
// 2s) when rebuild_queue_changed fires while the BUILD L0GS tab is active.
|
|
// Deep-link: ?id=N#buildlogs auto-expands the target row.
|
|
|
|
const buildList = $('build-list');
|
|
const buildRefresh = $('build-refresh');
|
|
let buildLogsLoaded = false;
|
|
let buildTabs; // set in init
|
|
|
|
function fmtTs(unixSecs) {
|
|
if (!unixSecs) return '';
|
|
const age = Math.floor(Date.now() / 1000) - unixSecs;
|
|
return fmtAgeSecs(Math.max(0, age)) + ' ago';
|
|
}
|
|
|
|
async function fetchBuild() {
|
|
if (!buildList) return;
|
|
buildList.replaceChildren();
|
|
buildList.append(el('p', { class: 'meta' }, 'loading…'));
|
|
try {
|
|
const resp = await fetch('/api/build-logs?limit=30');
|
|
if (!resp.ok) throw new Error('http ' + resp.status);
|
|
const rows = await resp.json();
|
|
buildList.replaceChildren();
|
|
if (!rows || rows.length === 0) {
|
|
buildList.append(el('p', { class: 'meta' }, '(no build logs yet)'));
|
|
return;
|
|
}
|
|
const ul = el('ul', { class: 'build-logs-list' });
|
|
for (const h of rows) {
|
|
const li = el('li', { class: 'build-logs-item', 'data-log-id': String(h.id) });
|
|
const live = !h.status;
|
|
const ok = h.status === 'ok';
|
|
const statusClass = live ? 'hive-pill-sm badge-running' : ok ? 'hive-pill-sm badge-ok' : 'hive-pill-sm badge-fail';
|
|
const statusLabel = live ? 'live' : ok ? 'ok' : 'fail';
|
|
const age = h.finished_at ? fmtTs(h.finished_at) : (live ? '' : fmtTs(h.started_at));
|
|
const runtime = h.runtime_secs != null
|
|
? el('span', { class: 'build-logs-runtime meta' }, fmtDuration(Math.max(0, h.runtime_secs)))
|
|
: live
|
|
? el('span', { class: 'build-logs-runtime meta build-logs-live-dur' }, '…')
|
|
: el('span', { class: 'build-logs-runtime meta' }, '');
|
|
|
|
let durTimer = null;
|
|
if (live && h.started_at) {
|
|
const updateDur = () => {
|
|
const elapsed = Math.floor(Date.now() / 1000) - h.started_at;
|
|
runtime.textContent = fmtDuration(Math.max(0, elapsed));
|
|
};
|
|
updateDur();
|
|
durTimer = setInterval(updateDur, 1000);
|
|
}
|
|
|
|
const rowBtn = el('button', {
|
|
type: 'button',
|
|
class: 'build-logs-row-btn',
|
|
'aria-expanded': 'false',
|
|
},
|
|
el('span', { class: statusClass }, statusLabel),
|
|
el('span', { class: 'build-logs-agent' }, h.agent),
|
|
runtime,
|
|
el('span', { class: 'build-logs-kind' }, h.kind),
|
|
el('span', { class: 'build-logs-age meta' }, age),
|
|
el('span', { class: 'build-logs-cmdline meta' }, h.cmdline),
|
|
);
|
|
const detail = el('div', { class: 'build-logs-detail' });
|
|
detail.hidden = true;
|
|
|
|
let streamEs = null;
|
|
rowBtn.addEventListener('click', async () => {
|
|
const expanded = rowBtn.getAttribute('aria-expanded') === 'true';
|
|
rowBtn.setAttribute('aria-expanded', String(!expanded));
|
|
detail.hidden = expanded;
|
|
if (expanded) {
|
|
if (streamEs) { streamEs.close(); streamEs = null; }
|
|
return;
|
|
}
|
|
if (detail.dataset.loaded) return;
|
|
detail.replaceChildren();
|
|
detail.append(
|
|
el('a', {
|
|
href: '/api/build-logs/id/' + h.id + '/raw',
|
|
download: 'build-log-' + h.id + '.txt',
|
|
class: 'build-logs-dl',
|
|
}, '↓ download raw'),
|
|
);
|
|
if (live) {
|
|
const pre = el('pre', { class: 'build-logs-output build-logs-live' }, '');
|
|
const badge = el('span', { class: 'build-logs-live-badge hive-pill-sm badge-running' }, 'live');
|
|
detail.append(badge, pre);
|
|
|
|
streamEs = openBuildLogStream(h.id, pre, {
|
|
onDone: (status) => {
|
|
if (durTimer) { clearInterval(durTimer); durTimer = null; }
|
|
if (h.started_at) {
|
|
const elapsed = Math.floor(Date.now() / 1000) - h.started_at;
|
|
runtime.textContent = fmtDuration(Math.max(0, elapsed));
|
|
}
|
|
badge.className = status === 'ok' ? 'hive-pill-sm badge-ok' : 'hive-pill-sm badge-fail';
|
|
badge.textContent = status;
|
|
streamEs = null;
|
|
detail.dataset.loaded = '1';
|
|
},
|
|
onError: () => {
|
|
if (durTimer) { clearInterval(durTimer); durTimer = null; }
|
|
badge.textContent = 'stream error';
|
|
badge.className = 'hive-pill-sm badge-fail';
|
|
streamEs = null;
|
|
},
|
|
});
|
|
} else {
|
|
const pre = el('pre', { class: 'build-logs-output' }, 'fetching…');
|
|
detail.append(pre);
|
|
try {
|
|
const r2 = await fetch('/api/build-logs/id/' + h.id);
|
|
if (!r2.ok) {
|
|
pre.textContent = 'error ' + r2.status;
|
|
} else {
|
|
const full = await r2.json();
|
|
const out = [full.stdout, full.stderr].filter(Boolean).join('\n--- stderr ---\n');
|
|
pre.textContent = out || '(empty)';
|
|
}
|
|
detail.dataset.loaded = '1';
|
|
} catch (err) {
|
|
pre.textContent = 'fetch failed: ' + err;
|
|
}
|
|
}
|
|
});
|
|
li.append(rowBtn, detail);
|
|
ul.append(li);
|
|
}
|
|
buildList.append(ul);
|
|
// Deep-link: ?id=N auto-expands the target row.
|
|
const deepId = new URLSearchParams(location.search).get('id');
|
|
if (deepId) {
|
|
const target = ul.querySelector('[data-log-id="' + deepId + '"]');
|
|
if (target) {
|
|
const btn = target.querySelector('.build-logs-row-btn');
|
|
if (btn) {
|
|
btn.click();
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
buildList.replaceChildren();
|
|
buildList.append(el('p', { class: 'meta' }, 'fetch failed: ' + err));
|
|
}
|
|
}
|
|
|
|
if (buildRefresh) buildRefresh.addEventListener('click', fetchBuild);
|
|
|
|
// ─── SSE handlers ─────────────────────────────────────────────────────────────
|
|
let buildRefreshTimer = null;
|
|
const SSE_HANDLERS = {
|
|
rebuild_queue_changed() {
|
|
// No `ev.queue` payload read anymore — this event still carries its own
|
|
// queue snapshot on the wire (tabs.js/SW4RM still consumes it for the
|
|
// swarm badges, untouched by this), this page just treats it as a
|
|
// refetch trigger. `JobqGraph` owns the actual fetch.
|
|
jobqGraphToken += 1;
|
|
renderRebuildQueue();
|
|
// Auto-refresh build log list when the queue changes and BUILD L0GS is active.
|
|
if (buildTabs && buildTabs.active() === 'buildlogs') {
|
|
if (buildRefreshTimer) clearTimeout(buildRefreshTimer);
|
|
buildRefreshTimer = setTimeout(fetchBuild, 2000);
|
|
}
|
|
},
|
|
meta_inputs_changed(ev) {
|
|
metaInputsState = (ev.inputs || []).slice();
|
|
renderMetaInputs({ meta_inputs: metaInputsState });
|
|
},
|
|
meta_update_running(ev) {
|
|
metaUpdateRunning = !!ev.running;
|
|
renderMetaInputs({ meta_inputs: metaInputsState });
|
|
},
|
|
};
|
|
|
|
// ─── boot ─────────────────────────────────────────────────────────────────────
|
|
async function refreshState() {
|
|
try {
|
|
const resp = await fetch('/api/state');
|
|
if (resp.ok) syncFromSnapshot(await resp.json());
|
|
} catch {
|
|
// best-effort
|
|
}
|
|
renderAll();
|
|
}
|
|
|
|
async function init() {
|
|
initServerWarnings();
|
|
bindAsyncForms(() => refreshState());
|
|
// Self-fetches on mount (JobqGraph's own effect) — no explicit initial
|
|
// fetch needed here, unlike meta inputs below.
|
|
mountRebuildQueue();
|
|
|
|
buildTabs = document.getElementById('builds-tabbar').configure({
|
|
tabs: [
|
|
{ id: 'rebuild', label: 'R3BU1LD QU3U3', badgeId: 'builds-tab-count-rebuild' },
|
|
{ id: 'meta', label: 'M3T4 1NPUTS' },
|
|
{ id: 'buildlogs', label: 'BUILD L0GS' },
|
|
],
|
|
defaultId: 'rebuild',
|
|
onShow: (id) => {
|
|
if (id === 'buildlogs' && !buildLogsLoaded) {
|
|
buildLogsLoaded = true;
|
|
fetchBuild();
|
|
}
|
|
},
|
|
});
|
|
|
|
await refreshState();
|
|
|
|
// kinds= matches SSE_HANDLERS below verbatim — narrows this from all
|
|
// 17 wire kinds down to the 3 this page acts on. This page was one
|
|
// of 4 unfiltered `/api/dashboard/stream` subscribers before this
|
|
// (subscription discipline, part 1 of the dashboard-event-stream-
|
|
// split issue).
|
|
const es = openStream(
|
|
'/api/dashboard/stream?kinds=rebuild_queue_changed,meta_inputs_changed,meta_update_running',
|
|
);
|
|
if (es) {
|
|
es.onmessage = (e) => {
|
|
let ev;
|
|
try { ev = JSON.parse(e.data); } catch { return; }
|
|
const h = SSE_HANDLERS[ev.kind];
|
|
if (h) h(ev);
|
|
};
|
|
}
|
|
}
|
|
|
|
init();
|