WorkloadCard

WorkloadCard is a compact resource card for a workload: a Kubernetes resource (kind) or anything else (a free-form type, icon and metadata). It shows identity, status, subtitle metadata, and CPU/memory/disk utilization backed by the existing time-series primitives: CPU and memory as core-style bars (memory at one bar per GiB) and disk as a linear progress bar. Callers own the metric series (URL ids or load functions); the card only composes them. Like the timeseries widgets it renders, it needs a react-query QueryClientProvider above it.

Source

Import

import { WorkloadCard } from "@flanksource/clicky-ui/data";

Demos

Deployment · Open in Storybook

Stateful Set · Open in Storybook

Pod · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
baseUrl	string	—	—
children	ReactNode	—	Caller-owned metric body, e.g. statistical snapshots instead of time series.
className	string	—	—
expandable	boolean	true	—
fetcher	(…) => Promise<TimeseriesResponse>	—	—
headerActions	ReactNode	—	Controls rendered beside status and history, owned by the host domain.
metrics*	WorkloadCardMetrics	—	CPU/memory/disk series. Each is requested as `baseUrl + id` via `fetcher`, or loaded by its own `load` function (then `id` is the cache key and must be unique per data source).
range	string	1h	—
refreshMs	number	5000	—
size	enum	md	—
variant	enum	default	—
workload*	WorkloadCardWorkload	—	—