w6w docs

Server resources

Four sizes of the same readout: how busy the server running W6W is. Each one shows the latest sample, and all but the badge draw a sparkline from the whole history. They’re props-only: you fetch or stream the samples and pass them in.

ComponentShowsProps
ServerResourcesCardCPU, memory and process memory, each with a sparkline, plus the load averagessamples, title (default "Server resources"), intervalMs (adds a “Sampled every Ns” line)
ServerResourcesCardSmallCPU with a sparkline, and memorysamples, title (default "Server")
ServerResourcesRailCPU and memory stacked, each with a sparkline, sized for a narrow side columnsamples, onExpand (adds a button to open a larger view)
ServerResourcesBadgeOne line: CPU <pct> · MEM <pct>samples

Samples

samples is an array of ServerResourceSample, oldest first. The last one is the current reading. Every field except ts is a number or null:

FieldWhat it is
tsISO-8601 time of the sample.
cpus, cpuLimitHost CPU count, and the container’s CPU limit when one is set.
load1, load5, load15Load averages. CPU % is load1 divided by cpuLimit (or cpus).
memoryTotal, memoryAvailable, memoryLimitBytes. Memory % is used over total.
processRss, processHeapUsed, processHeapTotalThe server process’s own memory, in bytes.

An unknown value renders as —, never as 0, and an empty array still renders, all dashes. You can mount a component before the first sample arrives.

Feed it from your server

The W6W server keeps a rolling window of samples:

  • GET /server/resources returns { intervalMs, retentionMs, samples }.
  • GET /server/resources/stream is a server-sent event stream: one snapshot event, then a sample event per new reading.

By default only operators can read them.

import { ServerResourcesCard, type ServerResourceSample } from "@w6w/ui";

type Snapshot = { intervalMs: number; retentionMs: number; samples: ServerResourceSample[] };

const [snap, setSnap] = useState<Snapshot | null>(null);

useEffect(() => {
  // client: your @w6w/sdk client, signed in as an operator
  client.request<Snapshot>({ method: "GET", path: "/server/resources" }).then((res) => setSnap(res.body));
}, []);

<ServerResourcesCard samples={snap?.samples ?? []} intervalMs={snap?.intervalMs} />

To update live, read the stream instead and append each sample event to the array.

Where to next