API reference#

Exports of @sigx/actors-dashboard v0.9.2.

One entry. DashboardState, httpSource and the MonitorSource type are re-exported from @sigx/actors-monitor as a convenience; the data layer stays that package's.

ActorsDashboard#

The whole dashboard — tab strip, status line, and a DashboardState it owns for its lifetime and stops on unmount.

interface ActorsDashboardProps {
    source: MonitorSource;        // almost always httpSource({ url: location.origin, base: '/admin/ops' })
    intervalMs?: number;          // 1000
    history?: number;             // sparkline samples, 60
    tab?: TabId;                  // 'overview' | 'hosts' | 'actors' | 'cluster' | 'health'
    styles?: boolean;             // inject the stylesheet; default true
    theme?: 'light' | 'dark';     // force a palette instead of prefers-color-scheme
}

Do not pass an ops secret from browser code. source should point at a same-origin route of your own app that attaches the bearer server-side — see the ops endpoint.

The status line always shows the age of the last successful poll, and turns warn once it exceeds three intervals: stale data that still looks live is the failure a browser tab left open overnight would otherwise introduce.

mountActorsDashboard(element, options)#

function mountActorsDashboard(element: Element, options: ActorsDashboardProps): Promise<() => void>;

Renders the dashboard into a page that is not a sigx app, importing @sigx/runtime-dom/platform dynamically. Resolves to the unmount function — call it when the page tears the dashboard down, or it keeps polling for the life of the tab.

Panels#

interface PanelProps { state: DashboardState }

OverviewPanel, HostsPanel, HostPanel, ActorsPanel, ClusterPanel, HealthPanel

Each is a component() taking { state }, so a portal can embed one table instead of the shell. HostPanel renders the drill-down for state.view.focus; HostsPanel renders the list and opens one on pick.

panelState(props): DashboardState#

The DashboardState behind a panel's props, unwrapped with toRaw. Every shipped panel starts with it, and a panel you write must too: props arrive through a reactive proxy, and DashboardState, Series and RateTracker hold #private fields, so a method call on the proxied state throws. Unwrapping costs no reactivity — panels track state.view, which is a signal in its own right.

Styles#

const actorsDashboardCss: string;
function injectStyles(doc?: Document): void;   // idempotent; no-op without a document

Every colour and metric is a --sigx-actors-* custom property:

Override them on any ancestor. A dark palette applies under prefers-color-scheme: dark and under theme="dark".

Parts#

For a portal drawing a panel of its own against the same vocabulary:

type Tone = 'ok' | 'warn' | 'danger' | 'dim';

Alerts({ alerts: readonly Alert[] })
Section({ title, lines: readonly string[], tone? })
DetailList({ rows: readonly DetailRow[] })          // { label, value, tone? }
DataTable<T>({ columns: readonly Column<T>[], rows, tone?, onPick?, pickLabel?, emptyText, caption? })
Sparkline({ values: readonly Rate[], tone? })       // a null draws a BREAK, not a zero
Series({ label, values: readonly Rate[], value: string, tone? })
Bars({ points: readonly PercentilePoint[], ceiling, format, tone?, emptyText })
ShardGrid({ shards: readonly ShardStatus[], emptyText })

Column<T> is { key, header, value: (row) => string, numeric? }. Sparkline is the one most worth reusing: it breaks on a gap, which is the rule a hand-rolled one gets wrong first.

Next steps#

• Overview — the drop-in, the proxy, theming.
• Installation — mounting and writing a panel.
• @sigx/actors-monitor — the types these render.