refactor(frontend): add createTabStrip + migrate logs sub-tabs (#1464 step 1)
Adds @hive/shared/tabs.js — createTabStrip(tabbar, {defaultId, onShow}):
a hash-routed tab strip that resolves controls by `[data-tab="<id>"]`
inside the passed container and panels by `[data-tab-pane="<id>"]`,
toggling `.hive-tab--active` + aria-selected + the panel's `hidden`, and
firing onShow(id) for per-tab side-effects. Always hash-routed (deep-
linkable + back/forward), no element-resolver callbacks (convention over
config), per the #1464 design review.
Wires it up: @hive/shared exports `./tabs.js` + `./tabs.css`, and
common.css @imports tabs.css (component structure, not a swap target, so
inlining is fine — unlike theme.css).
Migrates the logs sub-tabs as the first consumer: markup uses
`.hive-tab`/`data-tab`/`data-tab-pane`, logs.css drops the duplicated
base styles (keeps only its `flex:1` layout delta), and logs.js swaps its
activeTab/showTab/hashchange for createTabStrip (onShow lazy-loads the
SYSTEM tab). Behaviour-preserving. aria-selected is now standardised.
This commit is contained in:
iris
parent
55ee52b213
commit
e1c276a06e
7 changed files with 103 additions and 60 deletions
|
|
@ -2,6 +2,7 @@
|
|||
Bundled in front of the page-specific rules via esbuild. */
|
||||
@import "@hive/shared/base.css";
|
||||
@import "@hive/shared/terminal.css";
|
||||
@import "@hive/shared/tabs.css";
|
||||
|
||||
/* ─── global typography ─────────────────────────────────────────────
|
||||
Element-level rules shared across all three pages (index, flow,
|
||||
|
|
|
|||
|
|
@ -7,29 +7,13 @@ body.logs-shell {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
/* Base tab styling now lives in @hive/shared/tabs.css (.hive-tab*). The
|
||||
logs strip only adds a layout delta: fill the header row next to the
|
||||
← home back-link. */
|
||||
.logs-tabbar {
|
||||
display: flex;
|
||||
gap: 0.2em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.logs-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.35em 0.9em;
|
||||
border-radius: 4px;
|
||||
color: var(--subtext0);
|
||||
text-decoration: none;
|
||||
font-size: 0.85em;
|
||||
letter-spacing: 0.05em;
|
||||
transition: background 100ms, color 100ms;
|
||||
}
|
||||
.logs-tab:hover { background: var(--border); color: var(--fg); }
|
||||
.logs-tab.logs-tab-active {
|
||||
background: var(--border);
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.logs-main {
|
||||
padding: 1.2em 1.5em 2em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,17 +17,17 @@
|
|||
points to the H0M3 hub (served at /), not the dashboard. -->
|
||||
<header class="logs-header">
|
||||
<a class="logs-back" href="/">← home</a>
|
||||
<nav class="logs-tabbar" id="logs-tabbar" role="tablist">
|
||||
<a class="logs-tab" id="logs-tab-build" href="#build" role="tab"
|
||||
aria-controls="logs-pane-build" data-logs-tab="build">
|
||||
<nav class="hive-tabbar logs-tabbar" id="logs-tabbar" role="tablist">
|
||||
<a class="hive-tab" id="logs-tab-build" href="#build" role="tab"
|
||||
aria-controls="logs-pane-build" data-tab="build">
|
||||
<span class="logs-tab-label">BUILD</span>
|
||||
</a>
|
||||
<a class="logs-tab" id="logs-tab-agent" href="#agent" role="tab"
|
||||
aria-controls="logs-pane-agent" data-logs-tab="agent">
|
||||
<a class="hive-tab" id="logs-tab-agent" href="#agent" role="tab"
|
||||
aria-controls="logs-pane-agent" data-tab="agent">
|
||||
<span class="logs-tab-label">AGENT</span>
|
||||
</a>
|
||||
<a class="logs-tab" id="logs-tab-system" href="#system" role="tab"
|
||||
aria-controls="logs-pane-system" data-logs-tab="system">
|
||||
<a class="hive-tab" id="logs-tab-system" href="#system" role="tab"
|
||||
aria-controls="logs-pane-system" data-tab="system">
|
||||
<span class="logs-tab-label">SYSTEM</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
nixos-container invocations across all agents, with
|
||||
click-to-expand full stdout+stderr. Backed by
|
||||
GET /api/build-logs?limit=30. -->
|
||||
<section class="logs-pane" id="logs-pane-build"
|
||||
<section class="logs-pane" id="logs-pane-build" data-tab-pane="build"
|
||||
role="tabpanel" aria-labelledby="logs-tab-build">
|
||||
<div class="logs-toolbar">
|
||||
<button type="button" class="btn btn-restart" id="build-refresh">↻ refresh</button>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<!-- AGENT: journald viewer for a specific agent container.
|
||||
Agent selector + unit filter + line count. Backed by
|
||||
GET /api/journal/{agent}?unit=<unit>&lines=N. -->
|
||||
<section class="logs-pane" id="logs-pane-agent"
|
||||
<section class="logs-pane" id="logs-pane-agent" data-tab-pane="agent"
|
||||
role="tabpanel" aria-labelledby="logs-tab-agent">
|
||||
<div class="logs-toolbar">
|
||||
<select id="agent-select" class="journal-unit"></select>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
<!-- SYSTEM: host-side service logs. Shows the hive-c0re daemon
|
||||
journal via GET /api/journal-host?unit=hive-c0re.service. -->
|
||||
<section class="logs-pane" id="logs-pane-system"
|
||||
<section class="logs-pane" id="logs-pane-system" data-tab-pane="system"
|
||||
role="tabpanel" aria-labelledby="logs-tab-system">
|
||||
<div class="logs-toolbar">
|
||||
<select id="system-unit-select" class="journal-unit">
|
||||
|
|
|
|||
|
|
@ -22,37 +22,18 @@
|
|||
import {
|
||||
$, el, fmtAgeSecs, openStream, initServerWarnings,
|
||||
} from './common.js';
|
||||
import { createTabStrip } from '@hive/shared/tabs.js';
|
||||
|
||||
(() => {
|
||||
initServerWarnings();
|
||||
|
||||
// ─── 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();
|
||||
});
|
||||
// The shared hash-routed tab strip (@hive/shared/tabs.js) handles the
|
||||
// active toggle + aria-selected + pane visibility + the SYSTEM lazy
|
||||
// fetch via onShow. Constructed in the init block below (after the
|
||||
// fetch fns + element refs it depends on exist). `logTabs.active()`
|
||||
// replaces the old `activeTab()`.
|
||||
let logTabs;
|
||||
|
||||
// ─── helpers ──────────────────────────────────────────────────────────
|
||||
|
||||
|
|
@ -252,7 +233,7 @@ import {
|
|||
{
|
||||
let buildRefreshTimer = null;
|
||||
const debouncedRefreshBuild = () => {
|
||||
if (activeTab() !== 'build') return;
|
||||
if (logTabs.active() !== 'build') return;
|
||||
if (buildRefreshTimer) clearTimeout(buildRefreshTimer);
|
||||
buildRefreshTimer = setTimeout(fetchBuild, 2000);
|
||||
};
|
||||
|
|
@ -389,11 +370,15 @@ import {
|
|||
|
||||
// ─── init ─────────────────────────────────────────────────────────────
|
||||
|
||||
const tab = activeTab();
|
||||
showTab(tab);
|
||||
// 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.
|
||||
logTabs = createTabStrip(document.getElementById('logs-tabbar'), {
|
||||
defaultId: 'build',
|
||||
onShow: (id) => { if (id === 'system') fetchSystem(); },
|
||||
});
|
||||
loadAgentList();
|
||||
fetchBuild();
|
||||
if (tab === 'system') fetchSystem();
|
||||
|
||||
// Tick the last-fetched timestamps every 30s so "fetched 1m ago" stays
|
||||
// accurate without a manual refresh.
|
||||
|
|
|
|||
Loading…
Reference in a new issue