feat(builds): add /builds.html — build lifecycle hub (closes #1999)
New standalone page /builds.html consolidating rebuild queue, meta
inputs, and build log history into one place, with a new 'Builds' home
tile linking to it. Addresses mara's request: new sub-page with a new
home tile, all three items moved there.
Changes:
- builds.html: new page with three sub-tabs: R3BU1LD QU3U3, M3T4 1NPUTS,
BUILD L0GS. Same minimal-chrome header + createTabStrip pattern as core
and logs pages.
- builds.js: new bundle combining rebuild queue renderer (from core.js),
meta inputs renderer (from core.js), rebuild-live-log renderer (from
core.js), and build log history renderer (from logs.js). Deep-links to
/builds.html?id=N#buildlogs. Count pill id: builds-tab-count-rebuild.
BUILD L0GS tab lazy-loads on first activation.
- builds.css: @imports system-sections.css (rebuild queue + meta inputs +
live-log styles) and logs.css (build-logs-* component styles).
- build.mjs: register builds.js, builds.css, builds.html.
- core.html: remove R3BU1LD QU3U3 + M3T4 1NPUTS tabs (now on builds.html).
Default tab changes to K3PT ST4T3.
- core.js: remove renderMetaInputs, renderRebuildQueue + helpers,
renderRebuildLiveLog + live-log state, elapsed-time tickers,
updateRebuildCount, and the rebuild_queue/meta_inputs SSE handlers.
Remove openBuildLogStream + util imports no longer needed.
- core.css: remove .rebuild-live-log-* rules (moved to system-sections.css
so builds.css can share them via @import).
- system-sections.css: add .rebuild-live-log-* styles (moved from core.css);
update comment to mention builds.html.
- logs.html: remove BUILD tab + pane (moved to builds.html).
- logs.js: remove fetchBuild(), fmtTs, fmtDuration, openBuildLogStream
import, and rebuild_queue_changed SSE debounce. Default tab: 'agent'.
SSE stream retained for audit_entry_added live-appends.
- index.html: add Builds tile (🔨, rebuild queue · meta inputs · build
logs); update Core tile desc to 'kept state · container load'; update
Logs tile desc to remove 'build'.
This commit is contained in:
iris
parent
75e49f7752
commit
beb28d5c37
11 changed files with 896 additions and 790 deletions
|
|
@ -1,21 +1,11 @@
|
|||
// /logs.html entry point: log viewer with four sub-tabs (BUILD, AGENT,
|
||||
// SYSTEM, AUDIT).
|
||||
// BUILD — all-agents build log history, backed by GET /api/build-logs
|
||||
// /logs.html entry point: log viewer with three sub-tabs (AGENT, SYSTEM,
|
||||
// AUDIT). Build log history has moved to /builds.html.
|
||||
// AGENT — per-container journald viewer, backed by GET /api/journal/{name}
|
||||
// SYSTEM — host service logs, backed by GET /api/journal-host
|
||||
// AUDIT — agent-initiated privileged-action trail, GET /api/audit-log;
|
||||
// live-appends via the `audit_entry_added` /dashboard/stream event
|
||||
//
|
||||
// Tab routing via URL hash (#build, #agent, #system, #audit). Default: #build.
|
||||
//
|
||||
// Live improvements:
|
||||
// - Live build output auto-scrolls to the bottom (sticky-bottom) unless
|
||||
// the operator has manually scrolled up.
|
||||
// - Running builds show an elapsed-time counter in the row header that
|
||||
// ticks every second.
|
||||
// - The build list auto-refreshes (debounced 2s) when rebuild_queue_changed
|
||||
// fires from the dashboard SSE stream, so new log entries appear without
|
||||
// a manual page refresh.
|
||||
// Tab routing via URL hash (#agent, #system, #audit). Default: #agent.
|
||||
//
|
||||
// URL params `?agent=name` and `?unit=svc` pre-select the agent + unit on
|
||||
// the AGENT tab (deep-link from other pages, e.g. the per-agent ⋮ menu).
|
||||
|
|
@ -23,7 +13,7 @@
|
|||
// SYSTEM tabs so the operator knows how stale the output is.
|
||||
|
||||
import {
|
||||
$, el, fmtAgeSecs, openStream, openBuildLogStream, initServerWarnings,
|
||||
$, el, fmtAgeSecs, openStream, initServerWarnings,
|
||||
} from './common.js';
|
||||
import { createTabStrip } from '@hive/shared/tabs.js';
|
||||
|
||||
|
|
@ -40,193 +30,6 @@ import { createTabStrip } from '@hive/shared/tabs.js';
|
|||
|
||||
// ─── helpers ──────────────────────────────────────────────────────────
|
||||
|
||||
// started_at / finished_at are unix seconds (i64), not milliseconds.
|
||||
function fmtTs(unixSecs) {
|
||||
if (!unixSecs) return '';
|
||||
const age = Math.floor(Date.now() / 1000) - unixSecs;
|
||||
return fmtAgeSecs(Math.max(0, age)) + ' ago';
|
||||
}
|
||||
|
||||
function fmtDuration(secs) {
|
||||
if (secs < 60) return secs + 's';
|
||||
const m = Math.floor(secs / 60), s = secs % 60;
|
||||
return m + 'm ' + s + 's';
|
||||
}
|
||||
|
||||
// ─── BUILD tab ────────────────────────────────────────────────────────
|
||||
|
||||
const buildList = $('build-list');
|
||||
const buildRefresh = $('build-refresh');
|
||||
|
||||
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) });
|
||||
// status is null while running, 'ok'/'fail' when finished.
|
||||
const live = !h.status;
|
||||
const ok = h.status === 'ok';
|
||||
const statusClass = live ? 'badge badge-running' : ok ? 'badge badge-ok' : 'badge 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' }, '');
|
||||
|
||||
// For live builds, start an elapsed-time ticker immediately in the
|
||||
// row header so the operator can see how long the build has been
|
||||
// running without opening the log detail.
|
||||
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(); // show initial value right away
|
||||
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;
|
||||
}
|
||||
// already loaded?
|
||||
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 badge badge-running' }, 'live');
|
||||
detail.append(badge, pre);
|
||||
|
||||
// Stream via the shared helper (also used by the C0R3 rebuild-queue
|
||||
// live-log panel); it owns the append / sticky-scroll /
|
||||
// stderr-separator / reconnect-replay logic. We wire the badge +
|
||||
// the row's elapsed-time ticker here.
|
||||
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' ? 'badge badge-ok' : 'badge badge-fail';
|
||||
badge.textContent = status;
|
||||
streamEs = null;
|
||||
detail.dataset.loaded = '1';
|
||||
},
|
||||
onError: () => {
|
||||
if (durTimer) { clearInterval(durTimer); durTimer = null; }
|
||||
badge.textContent = 'stream error';
|
||||
badge.className = 'badge 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: if the URL contains ?id=N, auto-expand that log entry
|
||||
// so a `logs →` link from the rebuild-queue panel drops the operator
|
||||
// straight into the live output without extra clicks.
|
||||
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);
|
||||
|
||||
// Auto-refresh the build list when the dashboard SSE stream signals that
|
||||
// the rebuild queue changed — this surfaces new log entries and status
|
||||
// changes without needing a manual page refresh. Debounce 2s so a burst
|
||||
// of rapid queue mutations only triggers one fetch.
|
||||
{
|
||||
let buildRefreshTimer = null;
|
||||
const debouncedRefreshBuild = () => {
|
||||
if (logTabs.active() !== 'build') return;
|
||||
if (buildRefreshTimer) clearTimeout(buildRefreshTimer);
|
||||
buildRefreshTimer = setTimeout(fetchBuild, 2000);
|
||||
};
|
||||
const es = openStream('/api/dashboard/stream');
|
||||
if (es) {
|
||||
es.onmessage = (e) => {
|
||||
let ev;
|
||||
try { ev = JSON.parse(e.data); } catch { return; }
|
||||
if (ev.kind === 'rebuild_queue_changed') debouncedRefreshBuild();
|
||||
else if (ev.kind === 'audit_entry_added') onAuditEntryAdded(ev);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// ─── AGENT tab ────────────────────────────────────────────────────────
|
||||
|
||||
const agentSelect = $('agent-select');
|
||||
|
|
@ -488,16 +291,28 @@ import { createTabStrip } from '@hive/shared/tabs.js';
|
|||
|
||||
// Wire the shared tab strip now that fetchSystem + the element refs it
|
||||
// needs are defined. Its initial show() paints the active pane and, if
|
||||
// the deep-linked tab is SYSTEM, kicks off the lazy fetch via onShow.
|
||||
// the deep-linked tab is SYSTEM/AUDIT, kicks off the lazy fetch via onShow.
|
||||
// Default: AGENT (build logs moved to /builds.html).
|
||||
logTabs = createTabStrip(document.getElementById('logs-tabbar'), {
|
||||
defaultId: 'build',
|
||||
defaultId: 'agent',
|
||||
onShow: (id) => {
|
||||
if (id === 'system') fetchSystem();
|
||||
else if (id === 'audit') fetchAudit();
|
||||
},
|
||||
});
|
||||
loadAgentList();
|
||||
fetchBuild();
|
||||
|
||||
// Subscribe to the dashboard SSE stream for audit live-appends.
|
||||
{
|
||||
const es = openStream('/api/dashboard/stream');
|
||||
if (es) {
|
||||
es.onmessage = (e) => {
|
||||
let ev;
|
||||
try { ev = JSON.parse(e.data); } catch { return; }
|
||||
if (ev.kind === 'audit_entry_added') onAuditEntryAdded(ev);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Tick the last-fetched timestamps every 30s so "fetched 1m ago" stays
|
||||
// accurate without a manual refresh.
|
||||
|
|
|
|||
Loading…
Reference in a new issue