swarm-ui: the jobs and builds cards are folded by default
Both cards on the jobs tab start shut and read nothing until opened; a link with ?run= opens the builds card. The fold-and-build-on-first-open part of the hives card is now one LazyDisclosure, which the hives card uses too. Docs follow.
This commit is contained in:
parent
a2f000bab4
commit
8f5b3a2fa8
2 changed files with 96 additions and 36 deletions
|
|
@ -16,7 +16,7 @@
|
|||
import { useState } from "preact/hooks";
|
||||
import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
|
||||
import { Badge, type BadgeTone } from "@hive/shared/badge.js";
|
||||
import { Disclosure } from "../../ui/disclosure/Disclosure.js";
|
||||
import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
|
||||
import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
|
||||
import {
|
||||
RefreshIntervalPicker,
|
||||
|
|
@ -25,7 +25,6 @@ import {
|
|||
import { fetchJson, usePolled } from "../../ui/polled/usePolled.js";
|
||||
import { Table, type TableColumn } from "../../ui/table/Table.js";
|
||||
import { domainCell } from "../hive-domain.js";
|
||||
import { builtAfterToggle } from "./lazy-open.js";
|
||||
|
||||
type Freshness = "fresh" | "stale" | "never_reported" | "unknown";
|
||||
|
||||
|
|
@ -151,20 +150,13 @@ function HiveRoster() {
|
|||
}
|
||||
|
||||
export function HivesCard() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [built, setBuilt] = useState(false);
|
||||
return (
|
||||
<Disclosure
|
||||
<LazyDisclosure
|
||||
title="hives"
|
||||
icon="🐝"
|
||||
hint="the swarm's hives and when each last reported"
|
||||
open={open}
|
||||
onToggle={(next) => {
|
||||
setOpen(next);
|
||||
setBuilt((was) => builtAfterToggle(was, next));
|
||||
}}
|
||||
>
|
||||
{built ? <HiveRoster /> : null}
|
||||
</Disclosure>
|
||||
<HiveRoster />
|
||||
</LazyDisclosure>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
// A folded card builds its body on the first open and keeps it after, so a
|
||||
// card nobody opens never fetches, and closing it does not drop what it read.
|
||||
export function builtAfterToggle(built: boolean, open: boolean): boolean {
|
||||
return built || open;
|
||||
}
|
||||
Loading…
Reference in a new issue