hive ui: remove the BUILD L0GS tab and the live build-log panel
A build's output and history are the swarm's builds Grafana board now, from the lines hive-c0re logs. Removes the tab and its pane, the live log under the rebuild queue, their styles, the log stream helper and the duration formatter only they used, and the docs; also the tab-counts sentence 5925 missed.
This commit is contained in:
iris
parent
d53cfc50bf
commit
deeb5ecd86
7 changed files with 29 additions and 741 deletions
|
|
@ -1,24 +1,18 @@
|
|||
// The build lifecycle tabs of the dashboard — rebuild queue, live build
|
||||
// log, and build log history. Not an entry point: tabs.js
|
||||
// imports it, owns the tab strip and the dashboard event stream, and calls
|
||||
// the exports below. Two tabs, the panes' ids matching the tab ids:
|
||||
// - rebuild (R3BU1LD QU3U3): pending + running rebuilds + live build log
|
||||
// - buildlogs (BUILD L0GS): all-agents build log history, lazy-loaded
|
||||
// the first time the tab is shown
|
||||
// The rebuild queue tab of the dashboard (R3BU1LD QU3U3): pending and running
|
||||
// rebuilds as a `JobqGraph`. Not an entry point: tabs.js imports it, owns the
|
||||
// tab strip and the dashboard event stream, and calls the exports below. The
|
||||
// builds' output and history are not here: they are the `builds` Grafana board,
|
||||
// from the lines hive-c0re logs for each build.
|
||||
|
||||
import { $, fmtAgeSecs, openBuildLogStream } from "./common.js";
|
||||
import { el } from "@hive/shared/dom.js";
|
||||
import { $ } from "./common.js";
|
||||
import { themedConfirm } from "@hive/shared/modal.js";
|
||||
import { h, render } from "preact";
|
||||
import { fmtDuration } from "./util.js";
|
||||
import { JobqGraph } from "@hive/shared/jobq-graph.js";
|
||||
|
||||
// ─── derived state ───────────────────────────────────────────────────────────
|
||||
|
||||
// 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.
|
||||
// Kept in sync from JobqGraph's `onUpdate` callback (see renderRebuildQueue
|
||||
// below) — the component owns fetching GET /api/jobq/graph and renders the tree
|
||||
// itself; this flat array is only for `onCancel`, which names the node it
|
||||
// cancels in its confirm.
|
||||
let jobqNodes = [];
|
||||
let jobqGraphToken = 0;
|
||||
|
||||
|
|
@ -29,8 +23,7 @@ let jobqGraphToken = 0;
|
|||
// 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.
|
||||
// `jobqNodes` (the flat array) in sync for `onCancel` 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
|
||||
|
|
@ -60,7 +53,6 @@ function renderRebuildQueue() {
|
|||
refreshToken: jobqGraphToken,
|
||||
onUpdate: (nodes) => {
|
||||
jobqNodes = nodes || [];
|
||||
renderRebuildLiveLog();
|
||||
},
|
||||
onCancel: async (id) => {
|
||||
const node = jobqNodes.find((n) => n.id === id);
|
||||
|
|
@ -90,391 +82,19 @@ function renderRebuildQueue() {
|
|||
);
|
||||
}
|
||||
|
||||
// ─── 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,
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 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.
|
||||
|
||||
let buildLogsLoaded = false;
|
||||
|
||||
function fmtTs(unixSecs) {
|
||||
if (!unixSecs) return "";
|
||||
const age = Math.floor(Date.now() / 1000) - unixSecs;
|
||||
return fmtAgeSecs(Math.max(0, age)) + " ago";
|
||||
}
|
||||
|
||||
async function fetchBuild() {
|
||||
const buildList = $("build-list");
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
// ─── entry points for tabs.js ─────────────────────────────────────────────────
|
||||
// Everything below is called by tabs.js, which owns the tab strip, the
|
||||
// `/api/state` snapshot and the dashboard event stream.
|
||||
|
||||
/** Mount the rebuild queue and wire the build-log refresh button. Called
|
||||
* once, after the tab strip exists. The queue self-fetches on mount
|
||||
* (JobqGraph's own effect). */
|
||||
/** Mount the rebuild queue. Called once, after the tab strip exists. The queue
|
||||
* self-fetches on mount (JobqGraph's own effect). */
|
||||
export function initBuilds() {
|
||||
const refresh = $("build-refresh");
|
||||
if (refresh) refresh.addEventListener("click", fetchBuild);
|
||||
mountRebuildQueue();
|
||||
}
|
||||
|
||||
/** A tab was shown: BUILD L0GS loads its list the first time. */
|
||||
export function onBuildsTabShown(tab) {
|
||||
if (tab === "buildlogs" && !buildLogsLoaded) {
|
||||
buildLogsLoaded = true;
|
||||
fetchBuild();
|
||||
}
|
||||
}
|
||||
|
||||
let buildRefreshTimer = null;
|
||||
|
||||
/** `rebuild_queue_changed`: a payload-less refetch trigger — `JobqGraph`
|
||||
* owns the actual fetch. */
|
||||
export function onRebuildQueueChanged() {
|
||||
jobqGraphToken += 1;
|
||||
renderRebuildQueue();
|
||||
// Auto-refresh the build log list while BUILD L0GS is the active tab.
|
||||
if (document.body.dataset.activeTab === "buildlogs") {
|
||||
if (buildRefreshTimer) clearTimeout(buildRefreshTimer);
|
||||
buildRefreshTimer = setTimeout(fetchBuild, 2000);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const form = (
|
|||
// `asyncBtn` live in `@hive/shared/forms.js`, not here — both the
|
||||
// dashboard and the per-agent UI import them directly from there.
|
||||
|
||||
// `truncate`, `fmtAgo`, `fmtElapsed`, `fmtDuration` + the `paintAtomic`
|
||||
// `truncate`, `fmtAgo`, `fmtElapsed` + the `paintAtomic`
|
||||
// render helper live in the dashboard-internal `./util.js`, not here —
|
||||
// their phrasing ("X running", "X ago") is dashboard-specific, so they
|
||||
// stay out of the cross-page `common.js` but are shared across the
|
||||
|
|
@ -287,58 +287,6 @@ export function openStream(url) {
|
|||
return target;
|
||||
}
|
||||
|
||||
// Stream a build log into a <pre>, returning the EventSource. Used by the
|
||||
// BUILD L0GS tab. Appends `stdout_append` then
|
||||
// `stderr_append` (one `--- stderr ---` separator) frames from
|
||||
// `GET /api/build-logs/id/{id}/stream`; auto-scrolls to the bottom unless the operator scrolled up; on the terminal `done` frame
|
||||
// closes the stream and calls `onDone(status)`; on a non-transient error
|
||||
// closes and calls `onError()`. The backend replays accumulated output on each
|
||||
// (re)connect, so a CONNECTING reconnect resets the <pre> to avoid doubling.
|
||||
export function openBuildLogStream(id, pre, { onDone, onError } = {}) {
|
||||
let atBottom = true;
|
||||
pre.addEventListener("scroll", () => {
|
||||
atBottom = pre.scrollHeight - pre.scrollTop - pre.clientHeight < 40;
|
||||
});
|
||||
let stderrSeen = false;
|
||||
const es = new EventSource("/api/build-logs/id/" + id + "/stream");
|
||||
es.onmessage = (e) => {
|
||||
let frame;
|
||||
try {
|
||||
frame = JSON.parse(e.data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (frame.stdout_append) {
|
||||
pre.textContent += frame.stdout_append;
|
||||
if (atBottom) pre.scrollTop = pre.scrollHeight;
|
||||
}
|
||||
if (frame.stderr_append) {
|
||||
if (!stderrSeen) {
|
||||
pre.textContent += "\n--- stderr ---\n";
|
||||
stderrSeen = true;
|
||||
}
|
||||
pre.textContent += frame.stderr_append;
|
||||
if (atBottom) pre.scrollTop = pre.scrollHeight;
|
||||
}
|
||||
if (frame.done) {
|
||||
es.close();
|
||||
if (onDone) onDone(frame.status || "done");
|
||||
}
|
||||
};
|
||||
es.onerror = () => {
|
||||
// CONNECTING = the browser is auto-reconnecting; the stream replays from
|
||||
// the start, so clear the <pre> to avoid duplicated output and wait.
|
||||
if (es.readyState === EventSource.CONNECTING) {
|
||||
pre.textContent = "";
|
||||
stderrSeen = false;
|
||||
return;
|
||||
}
|
||||
es.close();
|
||||
if (onError) onError();
|
||||
};
|
||||
return es;
|
||||
}
|
||||
|
||||
// ─── sticky top region ───────────────────────────────────────────────
|
||||
// One sticky container wrapping the page's chrome (tab bar / page
|
||||
// header), built once by wrapping the existing chrome element. A page
|
||||
|
|
|
|||
|
|
@ -604,120 +604,3 @@ body.dashboard-shell.has-selection {
|
|||
/* ST4TS moved to its own page (`/stats.html`): the
|
||||
window selector / summary chips / bars live in stats.css, and the
|
||||
shared `.hive-stats-table` moved to common.css. */
|
||||
|
||||
/* ─── build tabs (builds.js) ────────────────────────────────────────
|
||||
R3BU1LD QU3U3 is styled by system-sections.css and
|
||||
jobq-graph.css; the BUILD L0GS list rules are below. */
|
||||
|
||||
.logs-toolbar {
|
||||
display: flex;
|
||||
gap: 0.6em;
|
||||
align-items: center;
|
||||
margin-bottom: 0.9em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ─── build-log list ──────────────────────────────────────────────
|
||||
Scrollable list of log header rows; clicking a row expands full
|
||||
stdout+stderr inline. */
|
||||
.build-logs-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.build-logs-item {
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0.15em 0;
|
||||
}
|
||||
.build-logs-row-btn {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4em;
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
font-size: 0.85em;
|
||||
text-align: left;
|
||||
padding: 0.25em 0.4em;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.build-logs-row-btn:hover {
|
||||
background: var(--bg-elev);
|
||||
}
|
||||
.build-logs-kind {
|
||||
font-weight: 600;
|
||||
}
|
||||
.build-logs-age {
|
||||
font-size: 0.88em;
|
||||
}
|
||||
.build-logs-cmdline {
|
||||
color: var(--muted);
|
||||
font-size: 0.82em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 40em;
|
||||
}
|
||||
.build-logs-detail {
|
||||
padding: 0 0.4em 0.4em;
|
||||
}
|
||||
.build-logs-output {
|
||||
margin: 0.3em 0 0;
|
||||
padding: 0.4em 0.6em;
|
||||
background: var(--crust);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--purple-dim);
|
||||
font-size: 0.82em;
|
||||
line-height: 1.4;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
overflow-x: auto;
|
||||
max-height: 30em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.build-logs-dl {
|
||||
color: var(--muted);
|
||||
font-size: 0.8em;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--purple-dim);
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 2px;
|
||||
margin-top: 0.3em;
|
||||
display: none;
|
||||
}
|
||||
.build-logs-dl:not([hidden]) {
|
||||
display: inline-block;
|
||||
}
|
||||
.build-logs-dl:hover {
|
||||
color: var(--fg);
|
||||
border-color: var(--purple-dim);
|
||||
}
|
||||
|
||||
.build-logs-live-badge {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
@keyframes live-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
.build-logs-live-badge.badge-running {
|
||||
animation: live-pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.build-logs-runtime {
|
||||
font-size: 0.85em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,16 +42,6 @@
|
|||
<span class="tab-label">◆ R3BU1LD QU3U3 ◆</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="tab"
|
||||
id="tab-buildlogs"
|
||||
href="#buildlogs"
|
||||
role="tab"
|
||||
aria-controls="tab-pane-buildlogs"
|
||||
data-tab="buildlogs"
|
||||
>
|
||||
<span class="tab-label">◆ BUILD L0GS ◆</span>
|
||||
</a>
|
||||
<a
|
||||
class="tab"
|
||||
id="tab-kept"
|
||||
|
|
@ -137,35 +127,6 @@
|
|||
<div id="rebuild-queue-section">
|
||||
<p class="meta">loading…</p>
|
||||
</div>
|
||||
<!-- Live build log of the currently-running rebuild (one runs at a
|
||||
time). Managed by renderRebuildLiveLog in builds.js, separate from
|
||||
rebuild-queue-section so the queue's row re-render never disturbs
|
||||
the open poll. -->
|
||||
<div id="rebuild-live-log" class="rebuild-live-log" hidden></div>
|
||||
</section>
|
||||
|
||||
<!-- BUILD L0GS: all-agents build log history. Click a row to expand
|
||||
stdout + stderr. Live builds stream in real time. Lazy-loaded the
|
||||
first time the tab is shown; auto-refreshes when
|
||||
rebuild_queue_changed fires. Deep-link: ?id=N#buildlogs. -->
|
||||
<section
|
||||
class="tab-pane"
|
||||
id="tab-pane-buildlogs"
|
||||
data-tab-pane="buildlogs"
|
||||
hidden
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-buildlogs"
|
||||
>
|
||||
<p class="meta">
|
||||
all-agents build log history. click a row to expand stdout + stderr.
|
||||
live builds stream in real time.
|
||||
</p>
|
||||
<div class="logs-toolbar">
|
||||
<button type="button" class="btn btn-restart" id="build-refresh">
|
||||
↻ refresh
|
||||
</button>
|
||||
</div>
|
||||
<div id="build-list"><p class="meta">loading…</p></div>
|
||||
</section>
|
||||
|
||||
<!-- K3PT ST4T3: kept state from agents whose container is absent,
|
||||
|
|
|
|||
|
|
@ -27,80 +27,6 @@
|
|||
color: var(--amber);
|
||||
font-weight: bold;
|
||||
}
|
||||
/* ─── 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 the
|
||||
dashboard's R3BU1LD QU3U3 tab. */
|
||||
.rebuild-live-log {
|
||||
margin-top: 0.8em;
|
||||
border: 1px solid var(--purple-dim);
|
||||
border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--crust) 70%, transparent);
|
||||
}
|
||||
.rebuild-live-log-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4em;
|
||||
padding: 0.4em 0.6em;
|
||||
font-size: 0.85em;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.rebuild-live-log-toggle {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
.rebuild-live-log-toggle:hover {
|
||||
color: var(--fg);
|
||||
}
|
||||
.rebuild-live-log-title {
|
||||
color: var(--muted);
|
||||
}
|
||||
.rebuild-live-log-raw {
|
||||
margin-left: auto;
|
||||
color: var(--purple);
|
||||
text-decoration: none;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.rebuild-live-log-raw:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.rebuild-live-log-badge {
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
padding: 0.05em 0.5em;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.rebuild-live-log-badge.rll-running {
|
||||
color: var(--amber);
|
||||
background: color-mix(in srgb, var(--amber) 18%, transparent);
|
||||
}
|
||||
.rebuild-live-log-badge.rll-ok {
|
||||
color: var(--green);
|
||||
background: color-mix(in srgb, var(--green) 18%, transparent);
|
||||
}
|
||||
.rebuild-live-log-badge.rll-fail {
|
||||
color: var(--red);
|
||||
background: color-mix(in srgb, var(--red) 18%, transparent);
|
||||
}
|
||||
.rebuild-live-log-output {
|
||||
margin: 0;
|
||||
padding: 0.5em 0.7em;
|
||||
max-height: 22em;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-family:
|
||||
"JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.4;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* Remove the now-dead `.rqe-step` rule (the `step` sub-step label was
|
||||
retired from the wire in `feat(job_queue): retire the now-off-wire step
|
||||
|
|
|
|||
|
|
@ -24,11 +24,7 @@ import {
|
|||
renderContainers,
|
||||
renderSelectionBar,
|
||||
} from "./agents.js";
|
||||
import {
|
||||
initBuilds,
|
||||
onBuildsTabShown,
|
||||
onRebuildQueueChanged,
|
||||
} from "./builds.js";
|
||||
import { initBuilds, onRebuildQueueChanged } from "./builds.js";
|
||||
import {
|
||||
applyTombstonesChanged,
|
||||
renderKept,
|
||||
|
|
@ -260,7 +256,7 @@ import { renderUserMenu } from "./user-menu.js";
|
|||
})();
|
||||
|
||||
// ─── tab routing ───────────────────────────────────────────────────────
|
||||
// Hash-based: `#agents` / `#rebuild` / `#buildlogs` / `#kept`
|
||||
// Hash-based: `#agents` / `#rebuild` / `#kept`
|
||||
// activate the matching pane on the dashboard. Empty
|
||||
// hash defaults to 4G3NTS. ST4TS is NOT a tab — it is a separate page
|
||||
// (`/stats.html`) reached from the pages menu (links-menu.js). Tab routing
|
||||
|
|
@ -276,7 +272,6 @@ import { renderUserMenu } from "./user-menu.js";
|
|||
// visibility (bar only belongs on 4G3NTS where agent cards live).
|
||||
document.body.dataset.activeTab = target;
|
||||
renderSelectionBar(Array.from(containersState.values()));
|
||||
onBuildsTabShown(target);
|
||||
}
|
||||
|
||||
// Wire the shared tab strip now that activateTab + the lazy-load fns it
|
||||
|
|
|
|||
|
|
@ -54,16 +54,3 @@ export function fmtElapsed(secs) {
|
|||
"m running"
|
||||
);
|
||||
}
|
||||
|
||||
// Compact duration label, two units deep ("1h 5m", "2d 3h").
|
||||
export function fmtDuration(secs) {
|
||||
if (secs < 60) return secs + "s";
|
||||
if (secs < 3600) return Math.floor(secs / 60) + "m " + (secs % 60) + "s";
|
||||
if (secs < 86400)
|
||||
return (
|
||||
Math.floor(secs / 3600) + "h " + Math.floor((secs % 3600) / 60) + "m"
|
||||
);
|
||||
return (
|
||||
Math.floor(secs / 86400) + "d " + Math.floor((secs % 86400) / 3600) + "h"
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue