feat(#986): dedicated logs page with build/agent/system sub-tabs
Add /logs.html as a standalone page (same back-link pattern as flow.html): - BUILD tab: all-agents build log history via new GET /api/build-logs endpoint - AGENT tab: per-container journald viewer with agent selector + unit filter - SYSTEM tab: host-side hive-c0re.service logs via new GET /api/journal-host endpoint Remove inline log drill-ins from SW4RM container rows (buildJournalTrigger and buildBuildLogsTrigger) — log viewing now lives on the dedicated page. flow.html: strip the full dashboard tabbar, replace with a simple back link matching the new logs page chrome. index.html: add L0GS tab link to /logs.html in the tab strip. Backend additions: - build_logs::list_recent_all — cross-agent query (newest first, cap 100) - GET /api/build-logs — all-agents variant backed by list_recent_all - GET /api/journal-host — host journald (no -M container flag), restricted to allow-listed units (hive-c0re.service)
This commit is contained in:
iris
parent
fd87cf9924
commit
0b15cad93f
9 changed files with 534 additions and 299 deletions
259
frontend/packages/dashboard/src/logs.js
Normal file
259
frontend/packages/dashboard/src/logs.js
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
// /logs.html entry point: log viewer with three sub-tabs (BUILD, AGENT, SYSTEM).
|
||||
// BUILD — all-agents build log history, backed by GET /api/build-logs
|
||||
// AGENT — per-container journald viewer, backed by GET /api/journal/{name}
|
||||
// SYSTEM — host service logs, backed by GET /api/journal-host
|
||||
//
|
||||
// Tab routing via URL hash (#build, #agent, #system). Default: #build.
|
||||
|
||||
import {
|
||||
$, el, fmtAgeSecs,
|
||||
} from './common.js';
|
||||
|
||||
(() => {
|
||||
// ─── tab routing ──────────────────────────────────────────────────────
|
||||
|
||||
const TABS = ['build', 'agent', 'system'];
|
||||
|
||||
function activeTab() {
|
||||
const hash = location.hash.replace('#', '');
|
||||
return TABS.includes(hash) ? hash : 'build';
|
||||
}
|
||||
|
||||
function showTab(name) {
|
||||
for (const t of TABS) {
|
||||
const pane = document.getElementById('logs-pane-' + t);
|
||||
const tab = document.getElementById('logs-tab-' + t);
|
||||
const active = t === name;
|
||||
if (pane) pane.hidden = !active;
|
||||
if (tab) {
|
||||
tab.classList.toggle('logs-tab-active', active);
|
||||
tab.setAttribute('aria-selected', String(active));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
const tab = activeTab();
|
||||
showTab(tab);
|
||||
if (tab === 'system') fetchSystem();
|
||||
});
|
||||
|
||||
// ─── helpers ──────────────────────────────────────────────────────────
|
||||
|
||||
function fmtTs(isoStr) {
|
||||
if (!isoStr) return '';
|
||||
try {
|
||||
const d = new Date(isoStr);
|
||||
const age = Math.floor((Date.now() - d.getTime()) / 1000);
|
||||
return fmtAgeSecs(age) + ' ago';
|
||||
} catch { return isoStr; }
|
||||
}
|
||||
|
||||
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.innerHTML = '';
|
||||
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.innerHTML = '';
|
||||
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' });
|
||||
const ok = h.status === 'ok';
|
||||
const live = h.status === 'running';
|
||||
const statusClass = ok ? 'build-logs-ok' : live ? 'build-logs-live-badge badge badge-running' : 'build-logs-fail';
|
||||
const statusLabel = ok ? '✓' : live ? 'live' : '✗';
|
||||
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' }, '');
|
||||
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.innerHTML = '';
|
||||
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);
|
||||
streamEs = new EventSource('/api/build-logs/id/' + h.id + '/stream');
|
||||
streamEs.addEventListener('chunk', (e) => {
|
||||
try { pre.textContent += JSON.parse(e.data).text; } catch { /**/ }
|
||||
});
|
||||
streamEs.addEventListener('done', () => {
|
||||
badge.textContent = 'done';
|
||||
badge.className = 'build-logs-live-badge badge';
|
||||
streamEs.close(); streamEs = null;
|
||||
detail.dataset.loaded = '1';
|
||||
});
|
||||
streamEs.addEventListener('error', () => {
|
||||
badge.textContent = 'stream error';
|
||||
badge.className = 'build-logs-live-badge badge';
|
||||
streamEs.close(); 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);
|
||||
} catch (err) {
|
||||
buildList.innerHTML = '';
|
||||
buildList.append(el('p', { class: 'meta' }, 'fetch failed: ' + err));
|
||||
}
|
||||
}
|
||||
|
||||
if (buildRefresh) buildRefresh.addEventListener('click', fetchBuild);
|
||||
|
||||
// ─── AGENT tab ────────────────────────────────────────────────────────
|
||||
|
||||
const agentSelect = $('agent-select');
|
||||
const agentUnitSelect = $('agent-unit-select');
|
||||
const agentRefresh = $('agent-refresh');
|
||||
const agentOutput = $('agent-output');
|
||||
|
||||
// Populate agent selector from /api/state
|
||||
async function loadAgentList() {
|
||||
try {
|
||||
const resp = await fetch('/api/state');
|
||||
if (!resp.ok) return;
|
||||
const state = await resp.json();
|
||||
if (!agentSelect) return;
|
||||
agentSelect.innerHTML = '';
|
||||
agentSelect.append(el('option', { value: '' }, '— select agent —'));
|
||||
for (const c of (state.containers || [])) {
|
||||
agentSelect.append(el('option', { value: c.name }, c.name));
|
||||
}
|
||||
} catch { /**/ }
|
||||
}
|
||||
|
||||
let agentFetching = false;
|
||||
async function fetchAgent() {
|
||||
if (!agentSelect || !agentOutput) return;
|
||||
const name = agentSelect.value;
|
||||
if (!name) { agentOutput.textContent = 'select an agent above'; return; }
|
||||
if (agentFetching) return;
|
||||
agentFetching = true;
|
||||
agentOutput.textContent = 'fetching…';
|
||||
const unit = agentUnitSelect ? agentUnitSelect.value : '';
|
||||
const params = new URLSearchParams({ lines: '500' });
|
||||
if (unit) params.set('unit', unit);
|
||||
try {
|
||||
const resp = await fetch('/api/journal/' + encodeURIComponent(name) + '?' + params);
|
||||
const text = await resp.text();
|
||||
agentOutput.textContent = resp.ok ? (text || '(empty)') : 'error ' + resp.status + '\n' + text;
|
||||
agentOutput.scrollTop = agentOutput.scrollHeight;
|
||||
} catch (err) {
|
||||
agentOutput.textContent = 'fetch failed: ' + err;
|
||||
} finally {
|
||||
agentFetching = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (agentSelect) agentSelect.addEventListener('change', fetchAgent);
|
||||
if (agentUnitSelect) agentUnitSelect.addEventListener('change', fetchAgent);
|
||||
if (agentRefresh) agentRefresh.addEventListener('click', fetchAgent);
|
||||
|
||||
// ─── SYSTEM tab ───────────────────────────────────────────────────────
|
||||
|
||||
const systemUnitSelect = $('system-unit-select');
|
||||
const systemRefresh = $('system-refresh');
|
||||
const systemOutput = $('system-output');
|
||||
|
||||
let systemFetching = false;
|
||||
async function fetchSystem() {
|
||||
if (!systemOutput) return;
|
||||
if (systemFetching) return;
|
||||
systemFetching = true;
|
||||
systemOutput.textContent = 'fetching…';
|
||||
const unit = systemUnitSelect ? systemUnitSelect.value : 'hive-c0re.service';
|
||||
const params = new URLSearchParams({ lines: '500' });
|
||||
if (unit) params.set('unit', unit);
|
||||
try {
|
||||
const resp = await fetch('/api/journal-host?' + params);
|
||||
const text = await resp.text();
|
||||
systemOutput.textContent = resp.ok ? (text || '(empty)') : 'error ' + resp.status + '\n' + text;
|
||||
systemOutput.scrollTop = systemOutput.scrollHeight;
|
||||
} catch (err) {
|
||||
systemOutput.textContent = 'fetch failed: ' + err;
|
||||
} finally {
|
||||
systemFetching = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (systemUnitSelect) systemUnitSelect.addEventListener('change', fetchSystem);
|
||||
if (systemRefresh) systemRefresh.addEventListener('click', fetchSystem);
|
||||
|
||||
// ─── init ─────────────────────────────────────────────────────────────
|
||||
|
||||
const tab = activeTab();
|
||||
showTab(tab);
|
||||
loadAgentList();
|
||||
fetchBuild();
|
||||
if (tab === 'system') fetchSystem();
|
||||
|
||||
})();
|
||||
Loading…
Reference in a new issue