1import { type InferResponseType, parseResponse } from "hono/client";
2import ArrowDown from "lucide-solid/icons/arrow-down";
3import ArrowUp from "lucide-solid/icons/arrow-up";
4import BatteryWarning from "lucide-solid/icons/battery-warning";
5import HardDrive from "lucide-solid/icons/hard-drive";
6import Power from "lucide-solid/icons/power";
7import Rocket from "lucide-solid/icons/rocket";
8import ShieldCheck from "lucide-solid/icons/shield-check";
9import Trash from "lucide-solid/icons/trash";
10import Undo2 from "lucide-solid/icons/undo-2";
11import { createMemo, createResource, createRoot, createSignal, For, type JSX, onCleanup, Show } from "solid-js";
12import { type Health, type HostInfo, type Live, type Me, type Series, type ServiceSummary, trouble } from "../types/model.ts";
13import { api, queries, reason } from "../api.ts";
14import { Ago } from "../components/Ago.tsx";
15import { AppIcon } from "../components/AppIcon.tsx";
16import { Donut } from "../components/Donut.tsx";
17import { lastGood, Loaded } from "../components/Loaded.tsx";
18import { Meter } from "../components/Meter.tsx";
19import { OpenApp } from "../components/OpenApp.tsx";
20import { RangePicker } from "../components/Metric.tsx";
21import { Status, StatusLabel } from "../components/Status.tsx";
22import { type Reading, Strip } from "../components/Strip.tsx";
23import { TabBar } from "../components/TabBar.tsx";
24import { toast } from "../components/Toast.tsx";
25import { ago, bytes, celsius, cores, duration, percent, plural, rate, watts } from "../format.ts";
26import { stream } from "../live.ts";
27import snowflake from "../snowflake.svg";
28import { confirmDestroyStage, followRun, type StageInfo } from "./Deploys.tsx";
29import "./Overview.css";
30
31/** How busy the machine is and what needs a look, polled for the overview and the sidebar's badge. */
32export const status = createRoot(() => {
33 const [data, { refetch }] = createResource(() => parseResponse(api.status.$get()));
34 setInterval(refetch, 30_000);
35 return { latest: lastGood(data), refetch };
36});
37
38/** Opens an app; its tagline is the tooltip, for people who don't know the app by name. */
39function AppCard(props: {
40 app: Pick<ServiceSummary, "id" | "name" | "icon" | "tagline" | "url">;
41 /** Null while it's unknown. */
42 health: Health | null;
43 children?: JSX.Element;
44}) {
45 return (
46 <a class="app" classList={{
47 out: props.health !== null && props.health !== "healthy" && props.health !== "degraded",
48 down: props.health === "down",
49 degraded: props.health === "degraded",
50 }}
51 href={props.app.url ?? undefined} target="_blank" rel="noreferrer" data-tip={props.app.tagline ?? undefined}>
52 <AppIcon id={props.app.id} name={props.app.name} icon={props.app.icon} />
53 <span class="name">{props.app.name}</span>
54 {props.children}
55 </a>
56 );
57}
58
59/** Snow gets her own line, except while previewing the dashboard as someone else. */
60function Greeting(props: { me: Me }) {
61 return (
62 <h1 class="greeting">
63 {props.me.name === "snow" && !props.me.viewing
64 ? "hi snow. keep it up."
65 : `hi ${props.me.name}… welcome to my cozy little snow globe…`}
66 </h1>
67 );
68}
69
70function Issues(props: { admin: boolean }) {
71 return (
72 <Show when={status.latest()?.issues?.length}>
73 <ul class="changes issues" aria-label="Needs a look">
74 <For each={status.latest()!.issues!}>
75 {(issue) => (
76 <li class="warn">
77 <Status health={issue.health} />
78 <span class="what"><Show when={props.admin} fallback={issue.service.name}>
79 <a href={`/services/${issue.service.id}`}>{issue.service.name}</a>
80 </Show> {issue.health} <span class="muted">{issue.failing}</span></span>
81 </li>
82 )}
83 </For>
84 </ul>
85 </Show>
86 );
87}
88
89/** The front door for everyone without machine metrics: their apps, a word when one is out, and how busy it all is. */
90function Home(props: { me: Me }) {
91 const [apps, { refetch }] = queries.launcher.use();
92 const timer = setInterval(refetch, 30_000);
93 onCleanup(() => clearInterval(timer));
94 return (
95 <div class="page home">
96 <img class="globe" src={snowflake} alt="" />
97 <Greeting me={props.me} />
98 <Show when={status.latest()}>
99 {(now) => (
100 <p class="load" tabIndex={0} data-tip={`${percent(now().load)} load over 5 min`}>
101 <Meter value={now().load} max={100} />
102 the snow globe is {now().load < 25 ? "quiet" : now().load < 60 ? "busy" : "very busy"}
103 </p>
104 )}
105 </Show>
106 <Loaded data={apps} what="your apps" retry={refetch} skeleton={
107 <div class="apps">
108 <For each={Array(4)}>
109 {() => <div class="app"><span class="skeleton icon" /><span class="skeleton" style={{ width: "72px" }} /></div>}
110 </For>
111 </div>
112 }>
113 {(list) => (
114 <Show when={list().length} fallback={
115 <div class="empty"><p>No apps shared with you yet.</p><p>They show up here once Clover gives you access.</p></div>
116 }>
117 <nav class="apps" aria-label="Your apps">
118 <For each={list()}>
119 {(app) => (
120 <AppCard app={app} health={app.health}>
121 <Show when={app.health !== "healthy" && app.health}>
122 {(health) => <StatusLabel health={health() === "stopped" ? "down" : trouble(health()) ? health() : "restarting"} />}
123 </Show>
124 </AppCard>
125 )}
126 </For>
127 </nav>
128 </Show>
129 )}
130 </Loaded>
131 <Issues admin={false} />
132 </div>
133 );
134}
135
136type Storage = InferResponseType<typeof api.storage.$get, 200>;
137
138const latestOf = (series: Series | undefined) => series?.v.findLast((v) => v != null) ?? undefined;
139
140/** The machine at a glance, for admins and the metrics group: apps, what changed, storage, and the machine's charts. */
141function Dashboard(props: { me: Me }) {
142 const admin = props.me.sections.includes("admin");
143 stream.start();
144 const [launcher, { refetch: refetchLauncher }] = queries.launcher.use();
145 const [host, { refetch: refetchHost }] = queries.host.use();
146 const [storage, { refetch: refetchStorage }] = queries.storage.use();
147 const [services, { refetch: refetchServices }] = queries.services.use();
148 const [deploys, { refetch: refetchDeploys }] = queries.deploys.use(() => (admin ? undefined : false));
149 const timer = setInterval(() => [refetchLauncher, refetchHost, refetchStorage, refetchServices, refetchDeploys]
150 .forEach((refetch) => refetch()), 60_000);
151 onCleanup(() => clearInterval(timer));
152 const info = lastGood(host);
153 const pool = lastGood(storage);
154 const apps = lastGood(launcher);
155 const history = lastGood(deploys);
156 const stages = () => (history()?.stages ?? []).filter((stage) =>
157 !stage.ready || (stage.health !== "down" && stage.health !== "stopped"));
158 const known = lastGood(services);
159 const names = () => Object.fromEntries((known() ?? []).map((service) => [service.id, service.name]));
160 const name = (id: string) => names()[id] ?? id;
161 const health = (service: { id: string; health: Health | null }) =>
162 stream.latest()?.services[service.id]?.health ?? service.health;
163 const metrics = () => apps()?.find((app) => app.id === "victoria");
164
165 const [menuId, setMenuId] = createSignal<string>();
166 const selectedStage = () => history()?.stages.find((stage) => stage.id === menuId());
167 const [destroying, setDestroying] = createSignal<string>();
168 let stageMenu!: HTMLDivElement;
169 let stageAnchor: HTMLAnchorElement;
170 let destroyRun: EventSource | undefined;
171 onCleanup(() => destroyRun?.close());
172 const showStageMenu = (stage: StageInfo, event: (MouseEvent | KeyboardEvent) & { currentTarget: HTMLAnchorElement }) => {
173 event.preventDefault();
174 stageAnchor = event.currentTarget;
175 stageAnchor.focus();
176 setMenuId(stage.id);
177 stageMenu.showPopover();
178 const rect = stageAnchor.getBoundingClientRect();
179 const x = event instanceof MouseEvent ? event.clientX : rect.left;
180 const y = event instanceof MouseEvent ? event.clientY : rect.bottom;
181 stageMenu.style.left = `${Math.max(8, Math.min(x, innerWidth - stageMenu.offsetWidth - 8))}px`;
182 stageMenu.style.top = `${Math.max(8, Math.min(y, innerHeight - stageMenu.offsetHeight - 8))}px`;
183 stageMenu.querySelector("button")?.focus();
184 };
185 const destroyStage = (stage: StageInfo) => {
186 stageMenu.hidePopover();
187 confirmDestroyStage(stage, (run) => {
188 setDestroying(stage.id);
189 destroyRun = followRun(run.id, {
190 exit: async (code) => {
191 setDestroying();
192 await refetchDeploys();
193 if (code !== 0) toast("Couldn't destroy the preview. Open its output, then retry.", {
194 label: "output", run: async () => location.assign(`/deploys/${stage.id}/output`),
195 });
196 },
197 lost: () => {
198 setDestroying();
199 toast("Lost destroy progress. Open its output to check the result.", {
200 label: "output", run: async () => location.assign(`/deploys/${stage.id}/output`),
201 });
202 },
203 });
204 refetchDeploys();
205 }, stageAnchor);
206 };
207
208 const [range, setRange] = createSignal(3600);
209 const [splitCpu, setSplitCpu] = createSignal(false);
210 const [splitMemory, setSplitMemory] = createSignal(false);
211 const groupBy = (value: () => boolean, set: (value: boolean) => void) => (
212 <TabBar label="Group by">
213 <button aria-pressed={!value()} onClick={() => set(false)}>total</button>
214 <button aria-pressed={value()} onClick={() => set(true)}>by service</button>
215 </TabBar>
216 );
217 const live = (read: (tick: Live, host: HostInfo) => Reading) => () => {
218 const tick = stream.latest();
219 const host = info();
220 return tick && host ? { ...read(tick, host), stale: !stream.live() } : undefined;
221 };
222
223 type Change = { t: number; icon: typeof Rocket; what: JSX.Element; detail?: JSX.Element; warn?: boolean };
224 const changes = createMemo(() => {
225 const list: Change[] = [];
226 const host = info();
227 for (const outage of host?.outages ?? []) {
228 list.push({
229 t: outage.start, icon: BatteryWarning, what: "on battery", warn: outage.end === null,
230 detail: outage.end === null ? "now" : `for ${duration(outage.end - outage.start)}`,
231 });
232 }
233 for (const entry of history()?.history ?? []) {
234 const rollback = entry.source === "rollback";
235 if (!rollback && entry.changed?.length === 0) continue;
236 list.push({
237 t: entry.time, icon: rollback ? Undo2 : Rocket,
238 what: <a href="/deploys" data-tip={`release ${entry.release.slice(0, 8)}`}>{rollback ? "rolled back" : "updated"}</a>,
239 detail: (
240 <For each={entry.changed ?? []}>
241 {(id, i) => <>{i() ? ", " : ""}<a href={`/services/${id}`}>{name(id)}</a></>}
242 </For>
243 ),
244 });
245 }
246 const recent = list.filter((change) => !host || change.t > host.bootedAt).sort((a, b) => b.t - a.t).slice(0, 7);
247 // Everything older than the boot is history; the boot itself always closes the list.
248 return host
249 ? [...recent, { t: host.bootedAt, icon: Power, what: "booted", detail: `up ${duration(Date.now() / 1000 - host.bootedAt)}` }]
250 : recent;
251 });
252
253 return (
254 <div class="page overview">
255 <div class="page-head"><Greeting me={props.me} /></div>
256
257 <Show when={stages().length}>
258 <section class="staging" aria-label="Staging instances">
259 <div class="staging-heading"><h2>staging</h2><span>{plural(stages().length, "preview")}</span></div>
260 <div class="staging-list">
261 <For each={stages().map((stage) => stage.id)}>
262 {(id) => <Show when={stages().find((stage) => stage.id === id)}>{(stage) => (
263 <a href={`/deploys/${id}`} aria-haspopup="menu" aria-controls="stage-menu"
264 aria-busy={destroying() === id}
265 onContextMenu={(event) => showStageMenu(stage(), event)}
266 onKeyDown={(event) => {
267 if (event.key === "ContextMenu" || (event.key === "F10" && event.shiftKey)) showStageMenu(stage(), event);
268 }}>
269 <Show when={destroying() === id} fallback={
270 <Show when={stage().health} fallback={<span class="muted">unknown</span>}>
271 {(health) => <Status health={health()} />}
272 </Show>
273 }><Status health="deploying" label="destroying" /></Show>
274 <span>{name(stage().service)}</span>
275 <span class="mono muted">{id.slice(stage().service.length + "-preview-".length)}</span>
276 </a>
277 )}</Show>}
278 </For>
279 </div>
280 </section>
281 </Show>
282
283 <div ref={stageMenu} id="stage-menu" popover="auto" class="stage-menu" role="menu"
284 aria-label="Preview actions" onToggle={(event) => event.newState === "closed" && setMenuId()}
285 onKeyDown={(event) => {
286 if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) event.preventDefault();
287 }}>
288 <Show when={selectedStage()}>
289 {(stage) => <button role="menuitem" disabled={!!destroying() || history()?.run?.code === null}
290 onClick={() => destroyStage(stage())}><Trash size={14} aria-hidden="true" />destroy</button>}
291 </Show>
292 </div>
293
294 <div class="glance">
295 <Loaded data={launcher} what="apps" retry={refetchLauncher} skeleton={
296 <div class="apps"><For each={Array(10)}>{() => <span class="skeleton" />}</For></div>
297 }>
298 {(list) => (
299 <Show when={list().length} fallback={<p class="muted">No apps shared with you yet.</p>}>
300 <nav class="apps" aria-label="Apps">
301 <For each={list()}>
302 {(app) => (
303 <AppCard app={app} health={health(app)}>
304 <Show when={health(app) !== "healthy" && health(app)}>{(now) => <Status health={now()} />}</Show>
305 </AppCard>
306 )}
307 </For>
308 </nav>
309 </Show>
310 )}
311 </Loaded>
312 <section aria-label="Recent changes">
313 <Issues admin={admin} />
314 <Loaded data={host} what="recent changes" retry={refetchHost} skeleton={
315 <ul class="changes"><For each={Array(5)}>{() => <li><span class="skeleton" style={{ width: "60%" }} /></li>}</For></ul>
316 }>
317 {() => (
318 <ul class="changes">
319 <For each={changes()}>
320 {(change) => (
321 <li classList={{ warn: change.warn }}>
322 <change.icon size={14} aria-hidden="true" />
323 <span class="what">{change.what} <span class="muted">{change.detail}</span></span>
324 <Ago t={change.t} />
325 </li>
326 )}
327 </For>
328 </ul>
329 )}
330 </Loaded>
331 </section>
332 </div>
333
334 <div class="section-head"><h2><a href={admin ? "/storage" : undefined}>storage</a></h2></div>
335 <Loaded data={storage} what="the pool" retry={refetchStorage} skeleton={
336 <div class="glance"><div class="skeleton" style={{ height: "140px" }} /><div class="skeleton" style={{ height: "64px" }} /></div>
337 }>
338 {(data) => <Pool data={data()} disks={admin ? "/storage?tab=disks" : undefined} />}
339 </Loaded>
340
341 <div class="section-head">
342 <h2>machine</h2>
343 <Show when={metrics()}>{(app) => <OpenApp app={app()} href={`${app().urls.metrics}/vmui/`} />}</Show>
344 <RangePicker value={range()} onChange={setRange} />
345 </div>
346 <div class="strips">
347 <Strip title="cpu" metric={splitCpu() ? "service.cpu" : "host.cpu"} range={range()} split={splitCpu()} names={names()}
348 stacked={splitCpu()} scale={splitCpu() ? 100 / (info()?.cores ?? 1) : undefined} format={percent} max={100} height={104}
349 tabs={groupBy(splitCpu, setSplitCpu)}
350 now={live((tick, host) => {
351 const [top] = Object.entries(tick.services).flatMap(([id, { cpu }]) => (cpu === null ? [] : [[id, cpu] as const]))
352 .sort((a, b) => b[1] - a[1]);
353 return {
354 value: percent(tick.host.cpu),
355 tip: `${cores((tick.host.cpu / 100) * host.cores)} / ${host.cores} cores`
356 + (top ? ` · top: ${name(top[0])} ${cores(top[1])}` : ""),
357 };
358 })} />
359 <Strip title="memory" metric={splitMemory() ? "service.memory" : "host.memory"} range={range()} split={splitMemory()}
360 names={names()} format={bytes} stacked max={splitMemory() ? undefined : info()?.memory} height={112}
361 tabs={groupBy(splitMemory, setSplitMemory)}
362 now={live((tick, host) => ({
363 value: bytes(tick.host.memory),
364 tip: `${bytes(tick.host.memory)} / ${bytes(host.memory)} (${percent((tick.host.memory / host.memory) * 100)})`
365 + (tick.host.arc === null ? "" : ` · ${bytes(tick.host.arc)} ZFS cache`),
366 }))} />
367 <Strip title="gpu" metric="host.gpu" range={range()} format={percent} max={100} height={80}
368 now={(series) => {
369 const value = latestOf(series[0]);
370 return value === undefined ? undefined : { value: percent(value) };
371 }} />
372 <Strip title="power" metric="host.power" range={range()} format={watts} height={80}
373 now={live(({ ups }, host) => {
374 if (!ups) return { value: "–", tip: "No UPS is connected to this host yet." };
375 if (ups.status === "battery") {
376 return {
377 value: <StatusLabel health="degraded">on battery, {duration(ups.runtime)} left</StatusLabel>,
378 tip: `${watts(ups.load)} · ${percent(ups.charge)} charged`,
379 };
380 }
381 const outage = host.outages?.at(-1);
382 return {
383 value: watts(ups.load),
384 tip: [
385 `${duration(ups.runtime)} on battery`,
386 ups.charge < 100 && `${percent(ups.charge)} charged`,
387 outage && `last outage ${ago(outage.start)}, ${duration((outage.end ?? Date.now() / 1000) - outage.start)}`,
388 ].filter(Boolean).join(" · "),
389 };
390 })} />
391 <Strip title="temperature" metric="host.temperature" range={range()} format={celsius} zero={false} height={120}
392 now={live((tick) => {
393 const hottest = pool()?.pool.vdevs.flatMap((vdev) => vdev.disks).flatMap((disk) => disk.smart ?? [])
394 .sort((a, b) => b.temperature - a.temperature)[0];
395 return {
396 value: tick.host.temperature === null ? "–" : celsius(tick.host.temperature),
397 tip: `${tick.host.temperature === null ? "no cpu sensor read yet" : "cpu"}`
398 + `${hottest ? ` · hottest drive ${celsius(hottest.temperature)}, ${hottest.model}` : ""}`,
399 };
400 })} />
401 <Strip title="network" metric="host.network" range={range()} format={rate} height={104 + 24} last
402 now={(series) => {
403 const [down, up] = series.map(latestOf);
404 return down === undefined || up === undefined ? undefined : {
405 value: (
406 <><ArrowDown size={14} aria-label="download" />{rate(down)}<ArrowUp size={14} aria-label="upload" />{rate(up)}</>
407 ),
408 };
409 }} />
410 </div>
411 </div>
412 );
413}
414
415/** How full the pool is, which disks need a look and why, and the latest scrub; `disks` links to the disk list. */
416function Pool(props: { data: Storage; disks?: string }) {
417 const space = () => props.data.space;
418 const used = () => space().live + space().held;
419 const disks = () => props.data.pool.vdevs.flatMap((vdev) => vdev.disks);
420 const ailing = () => disks().filter((disk) => disk.issue);
421 const scan = () => props.data.pool.scan;
422 return (
423 <div class="glance pool">
424 <Donut format={bytes} center={percent((used() / (used() + space().free)) * 100)} caption="full" slices={[
425 { label: "used", value: space().live, color: "var(--series-1)" },
426 { label: "snapshots", value: space().held, color: "var(--series-2)" },
427 { label: "free", value: space().free, color: "var(--other)" },
428 ]} />
429 <ul class="changes">
430 <Show when={ailing().length} fallback={
431 <li>
432 <HardDrive size={14} aria-hidden="true" />
433 <a class="what" href={props.disks}><StatusLabel health="healthy">all {disks().length} disks healthy</StatusLabel></a>
434 </li>
435 }>
436 <For each={ailing()}>
437 {(disk) => (
438 <li class="warn">
439 <HardDrive size={14} aria-hidden="true" />
440 <span class="what">
441 <a href={props.disks}
442 data-tip={disk.smart ? `${disk.smart.model}, ${celsius(disk.smart.temperature)}` : undefined}>
443 {disk.smart?.serial ?? disk.name}
444 </a> <span class="muted">{disk.issue}</span>
445 </span>
446 </li>
447 )}
448 </For>
449 </Show>
450 <Show when={scan()} fallback={
451 <li><ShieldCheck size={14} aria-hidden="true" /><span class="what muted">never scrubbed</span></li>
452 }>
453 {(scan) => (
454 <Show when={scan().state === "scanning"} fallback={
455 <li classList={{ warn: scan().errors > 0 }}>
456 <ShieldCheck size={14} aria-hidden="true" />
457 <span class="what"
458 data-tip={scan().end ? `${bytes(scan().examined)} checked in ${duration(scan().end! - scan().start)}` : undefined}>
459 {scan().kind === "scrub" ? "scrub" : "resilver"} {scan().state}{" "}
460 <span class="muted">
461 {scan().errors ? plural(scan().errors, "unrepaired error")
462 : scan().repaired ? `repaired ${bytes(scan().repaired)}` : scan().state === "finished" ? "no errors" : ""}
463 </span>
464 </span>
465 <Ago t={scan().end ?? scan().start} />
466 </li>
467 }>
468 {(() => {
469 const elapsed = () => Date.now() / 1000 - scan().start;
470 const left = () => ((scan().total - scan().examined) / scan().examined) * elapsed();
471 return (
472 <li>
473 <ShieldCheck size={14} aria-hidden="true" />
474 <span class="what scanning"
475 data-tip={`${bytes(scan().examined)} / ${bytes(scan().total)}, started ${ago(scan().start)}`}>
476 {scan().kind === "scrub" ? "scrubbing" : "resilvering"}
477 <Meter value={scan().examined} max={scan().total} />
478 {percent((scan().examined / scan().total) * 100)}
479 </span>
480 <span class="muted">{duration(left())} left</span>
481 </li>
482 );
483 })()}
484 </Show>
485 )}
486 </Show>
487 </ul>
488 </div>
489 );
490}
491
492export function Overview(props: { me: Me }) {
493 return (
494 <Show when={props.me.sections.includes("metrics")} fallback={<Home me={props.me} />}>
495 <Dashboard me={props.me} />
496 </Show>
497 );
498}