Infra: operator-console redesign (per the Infrastructure design package)
Refactor the Infrastructure tier into the dark operator console from the design package, wired to the real fleet backend (no new plumbing): - InfraNav: page-scoped left nav grouped RUN HERE FIRST (Local & Tailscale, with online count + sub-items) / NEXT (Cloud providers, SOON) + coral "Connect a host" button; coral spine on the active view. - FleetConsole: center reads top-to-bottom — kicker → "Your fleet" → 5 stat tiles (HOSTS/ONLINE/MEMORY/STORAGE/CONTAINERS) → Tailscale device card → LOCAL HOSTS host cards + add-host dashed tile. Cloud view = how-it-works + SOON. - Host cards (design system): status dot (blink when online) + hostname, IP/version line, CPU/RAM meter bars (cyan→amber→coral by load), disk/load/ctrs mini-row, and a footer that's a copyable `ssh <node>` target (online) OR a "waiting for daemon" spinner (pairing) — PLUS a Terminal button that opens the in-app shell. - FleetPill (top bar, N/M hosts online) + FleetStatusBar (ambient: daemon · tailnet · WSS · sandbox). Per the chosen reconciliation: kept the cloud-apps computer pull-out as the right column, the connect-host wizard as a modal, and the in-app terminal. Dashboard infra branch rewired (InfraNav + FleetConsole + status bar; dropped the old InfraStage/InfraConsole split). cm-blink/spin/cm-fade keyframes already existed. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
8e71c8403b
commit
b840de7c3b
@@ -239,7 +239,7 @@ function tsOnline(lastSeen: string | null): boolean {
|
||||
}
|
||||
|
||||
/** Connect a workspace's Tailscale (BYO) and show its tailnet device metrics. */
|
||||
function TailscaleSection() {
|
||||
export function TailscaleSection() {
|
||||
const { data: status, refresh } = useFetchJson<{ connected: boolean; tailnet: string | null }>("/api/fleet/tailscale");
|
||||
const { data: dev } = useFetchJson<{ connected: boolean; devices: TsDevice[]; error?: string }>(status?.connected ? "/api/fleet/tailscale/devices" : null);
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
|
||||
Reference in New Issue
Block a user