swarm-ui: extract overview into its own page component
Per mara's review on PR#3342 — the hive-status view shouldn't live inline in App.tsx. Moves it to pages/OverviewPage.tsx, mirroring JobsPage's shape: App.tsx stays routing-only, each page owns its own fetch + render.
This commit is contained in:
iris
mara
parent
2460d7fec7
commit
9786a9a519
2 changed files with 86 additions and 80 deletions
|
|
@ -1,87 +1,11 @@
|
||||||
// Root shell component. `/` is the real hive-roster overview page —
|
// Root shell component — routing only. Each route's content is its own
|
||||||
// fetches swarm-controller's `GET /api/hives/status`, the swarm-wide
|
// page component under `./pages/`; this file just maps paths to them.
|
||||||
// status aggregate: one row per roster hive, freshness derived at read
|
|
||||||
// time from the status bucket. Supersedes the earlier `GET /api/hives`
|
|
||||||
// + static "configured" chip placeholder now that the real rollup
|
|
||||||
// exists — same component, richer data, no rebuild, exactly the plan
|
|
||||||
// that placeholder's comment laid out.
|
|
||||||
import { useEffect, useState } from 'preact/hooks';
|
|
||||||
import { Route, Switch } from 'wouter-preact';
|
import { Route, Switch } from 'wouter-preact';
|
||||||
import { Shell } from './shell/Shell.js';
|
import { Shell } from './shell/Shell.js';
|
||||||
import { ComponentsPage } from './pages/ComponentsPage.js';
|
import { ComponentsPage } from './pages/ComponentsPage.js';
|
||||||
import { JobsPage } from './pages/JobsPage.js';
|
import { JobsPage } from './pages/JobsPage.js';
|
||||||
|
import { OverviewPage } from './pages/OverviewPage.js';
|
||||||
import { Panel } from './ui/panel/Panel.js';
|
import { Panel } from './ui/panel/Panel.js';
|
||||||
import { StatusChip, type ChipTone } from './ui/status-chip/StatusChip.js';
|
|
||||||
import { Table, type TableColumn } from './ui/table/Table.js';
|
|
||||||
import { fmtAgo } from './util.js';
|
|
||||||
|
|
||||||
type Freshness = 'fresh' | 'stale' | 'never_reported' | 'unknown';
|
|
||||||
|
|
||||||
interface HiveStatus {
|
|
||||||
name: string;
|
|
||||||
domain: string | null;
|
|
||||||
freshness: Freshness;
|
|
||||||
last_seen_unix: number | null;
|
|
||||||
age_seconds: number | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// One tone + label per freshness value. `unknown` (reporting but absent
|
|
||||||
// from the roster) reads `negative` — it's the one case this endpoint
|
|
||||||
// cannot vouch for at all, per `status.rs`'s doc comment.
|
|
||||||
const FRESHNESS: Record<Freshness, { tone: ChipTone; label: string }> = {
|
|
||||||
fresh: { tone: 'positive', label: 'fresh' },
|
|
||||||
stale: { tone: 'warning', label: 'stale' },
|
|
||||||
never_reported: { tone: 'neutral', label: 'never reported' },
|
|
||||||
unknown: { tone: 'negative', label: 'unknown' },
|
|
||||||
};
|
|
||||||
|
|
||||||
const COLUMNS: TableColumn<HiveStatus>[] = [
|
|
||||||
{ key: 'name', header: 'name', render: (h) => h.name },
|
|
||||||
{
|
|
||||||
key: 'domain',
|
|
||||||
header: 'domain',
|
|
||||||
render: (h) =>
|
|
||||||
h.domain ? (
|
|
||||||
<a href={`https://${h.domain}/`} target="_blank" rel="noreferrer">
|
|
||||||
{h.domain}
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
'—'
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'status',
|
|
||||||
header: 'status',
|
|
||||||
render: (h) => {
|
|
||||||
const { tone, label } = FRESHNESS[h.freshness];
|
|
||||||
const age = h.age_seconds !== null ? ` (${fmtAgo(h.age_seconds)})` : '';
|
|
||||||
return <StatusChip tone={tone} label={label + age} />;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
function Home() {
|
|
||||||
const [hives, setHives] = useState<HiveStatus[] | null>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetch('/api/hives/status')
|
|
||||||
.then((r) => {
|
|
||||||
if (!r.ok) throw new Error(`http ${r.status}`);
|
|
||||||
return r.json() as Promise<HiveStatus[]>;
|
|
||||||
})
|
|
||||||
.then(setHives)
|
|
||||||
.catch((e: unknown) => setError(String(e)));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Panel title="overview">
|
|
||||||
{error ? <p>failed to load the hive roster: {error}</p> : null}
|
|
||||||
{!error && hives === null ? <p>loading…</p> : null}
|
|
||||||
{hives ? <Table columns={COLUMNS} rows={hives} rowKey={(h) => h.name} /> : null}
|
|
||||||
</Panel>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function NotFound() {
|
function NotFound() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -95,7 +19,7 @@ export function App() {
|
||||||
return (
|
return (
|
||||||
<Shell>
|
<Shell>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/" component={Home} />
|
<Route path="/" component={OverviewPage} />
|
||||||
<Route path="/jobs" component={JobsPage} />
|
<Route path="/jobs" component={JobsPage} />
|
||||||
<Route path="/components" component={ComponentsPage} />
|
<Route path="/components" component={ComponentsPage} />
|
||||||
<Route component={NotFound} />
|
<Route component={NotFound} />
|
||||||
|
|
|
||||||
82
frontend/packages/swarm-ui/src/pages/OverviewPage.tsx
Normal file
82
frontend/packages/swarm-ui/src/pages/OverviewPage.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
// <OverviewPage> — the hive-roster overview, `/`'s content. Fetches
|
||||||
|
// swarm-controller's `GET /api/hives/status`, the swarm-wide status
|
||||||
|
// aggregate: one row per roster hive, freshness derived at read time
|
||||||
|
// from the status bucket. Supersedes the earlier `GET /api/hives` +
|
||||||
|
// static "configured" chip placeholder now that the real rollup
|
||||||
|
// exists — same component, richer data, no rebuild, exactly the plan
|
||||||
|
// that placeholder's comment laid out. Its own component/file rather
|
||||||
|
// than living in `App.tsx`, matching `JobsPage`'s shape: `App.tsx` is
|
||||||
|
// routing, a page owns its own fetch + render.
|
||||||
|
import { useEffect, useState } from 'preact/hooks';
|
||||||
|
import { Panel } from '../ui/panel/Panel.js';
|
||||||
|
import { StatusChip, type ChipTone } from '../ui/status-chip/StatusChip.js';
|
||||||
|
import { Table, type TableColumn } from '../ui/table/Table.js';
|
||||||
|
import { fmtAgo } from '../util.js';
|
||||||
|
|
||||||
|
type Freshness = 'fresh' | 'stale' | 'never_reported' | 'unknown';
|
||||||
|
|
||||||
|
interface HiveStatus {
|
||||||
|
name: string;
|
||||||
|
domain: string | null;
|
||||||
|
freshness: Freshness;
|
||||||
|
last_seen_unix: number | null;
|
||||||
|
age_seconds: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// One tone + label per freshness value. `unknown` (reporting but absent
|
||||||
|
// from the roster) reads `negative` — it's the one case this endpoint
|
||||||
|
// cannot vouch for at all, per `status.rs`'s doc comment.
|
||||||
|
const FRESHNESS: Record<Freshness, { tone: ChipTone; label: string }> = {
|
||||||
|
fresh: { tone: 'positive', label: 'fresh' },
|
||||||
|
stale: { tone: 'warning', label: 'stale' },
|
||||||
|
never_reported: { tone: 'neutral', label: 'never reported' },
|
||||||
|
unknown: { tone: 'negative', label: 'unknown' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const COLUMNS: TableColumn<HiveStatus>[] = [
|
||||||
|
{ key: 'name', header: 'name', render: (h) => h.name },
|
||||||
|
{
|
||||||
|
key: 'domain',
|
||||||
|
header: 'domain',
|
||||||
|
render: (h) =>
|
||||||
|
h.domain ? (
|
||||||
|
<a href={`https://${h.domain}/`} target="_blank" rel="noreferrer">
|
||||||
|
{h.domain}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
'—'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'status',
|
||||||
|
header: 'status',
|
||||||
|
render: (h) => {
|
||||||
|
const { tone, label } = FRESHNESS[h.freshness];
|
||||||
|
const age = h.age_seconds !== null ? ` (${fmtAgo(h.age_seconds)})` : '';
|
||||||
|
return <StatusChip tone={tone} label={label + age} />;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function OverviewPage() {
|
||||||
|
const [hives, setHives] = useState<HiveStatus[] | null>(null);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('/api/hives/status')
|
||||||
|
.then((r) => {
|
||||||
|
if (!r.ok) throw new Error(`http ${r.status}`);
|
||||||
|
return r.json() as Promise<HiveStatus[]>;
|
||||||
|
})
|
||||||
|
.then(setHives)
|
||||||
|
.catch((e: unknown) => setError(String(e)));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Panel title="overview">
|
||||||
|
{error ? <p>failed to load the hive roster: {error}</p> : null}
|
||||||
|
{!error && hives === null ? <p>loading…</p> : null}
|
||||||
|
{hives ? <Table columns={COLUMNS} rows={hives} rowKey={(h) => h.name} /> : null}
|
||||||
|
</Panel>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue