Status dashboard

A React block (a whole screen) in Beamline's Blocks category.

An operations view of service health: the overall state in one line, every service with its status, uptime, latency now and 90 days of history, latency percentiles against the SLO, the live incident with its updates and a composer to post the next one, and past incidents. Declare incident when all is well, Post update when something is not.

Use it for

An on-call or operations team's internal status page: which services are healthy, how fast they answer, what is broken now and what was said about it.

Not for

One uptime strip on a broader dashboard (tracker).
A product's revenue overview (analytics-dashboard).

Anatomy

app shell (your navigation, workspace mark)
state line: the overall status as a glyph and words, which services are affected, when it was last checked; the primary action at its end (Declare incident when all is well, Post update when an incident is open)
services: one row each with status glyph and word, name, 90-day uptime, p95 now and 90 days of daily history; choosing a row scopes the latency chart to it
latency: p50, p95 and p99 over the window against the SLO line; 24 hours or 7 days
open incident: severity, title, affected services, its updates newest first, and the composer (next status and message)
past incidents: resolved ones with their duration

States

loading (every panel holds its shape)
failed to load (the error with Try again)
all operational (no open incident; Declare incident is the primary action)
incident open (Post update is the primary action)
update posting (it shows at once, marked posting), posted, refused (it leaves the timeline, the message stays in the composer, the reason beside Post with Try again)
a pending resolution keeps the incident composer until confirmed; refusal preserves its message and Retry
a service whose latency or uptime was not measured (hatched)
a service chosen (the chart is its own)

Keyboard

Tab reaches the window switch, every service row, the composer and its actions
Enter or Space on a service row scopes the latency chart; again returns to all services
⌘Enter in the update message posts it
the declare dialog traps focus and returns it to Declare incident

Motion

The state line's glyph and words change in place as the overall state changes; a posted update grows into the top of the timeline and a refused one fades from it; the chart eases to the chosen service's lines. Reduced motion: changes are immediate.

Props

Prop	Type	Default	Description
`useData` (required)	`(query: StatusQuery) => { data: StatusData \| null; error?: Error \| null; retry?: () => void }`	—
`onPostUpdate`	`(incidentId: string, update: { status: IncidentStatus; message: string }) => Promise<void> \| void`	—	Shows the composer; a rejected promise takes the update back and shows why.
`onDeclareIncident`	`(draft: IncidentDraft) => Promise<void> \| void`	—	Shows Declare incident when nothing is open.
`me`	`string`	—	Who posts updates.
`workspace`	`string`	`"Northline"`
`nav`	`AppShellNavGroup[]`	—
`actions`	`ReactNode`	—
`className / style / ref`	`string / CSSProperties / Ref<HTMLDivElement>`	—

Built from

app-shell
segmented-control
badge
tracker
line-chart
timeline
select
textarea
button
alert
dialog
input
multi-select
item
empty-state
skeleton

Dependencies

lucide-react

Import

import { StatusDashboard } from "@/blocks/status-dashboard/status-dashboard";

Get it

Status dashboard is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent