Status & health
Is everything all right: status over 90 days, queues, tile boards and a score with what is open.
Installation & usage
npx @youj/cli add app-statusAlso installs alert, async-button, badge, button, card, counter, dropdown-menu, empty, history-strip, icon-more-horizontal, segmented-meter, skeleton, typography, use-controllable-state, youj-core, youj-presets, youj-ui-core.
The CLI copies the block to blocks/app/status.tsx with every component it uses, so it’s yours to edit.
Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:
'use client'
import { StatusCard, type StatusCardProps } from '@/blocks/app/status'
export function StatusCardView({ services, statuses }: Pick<StatusCardProps, 'services' | 'statuses'>) {
return (
<StatusCard
services={services}
statuses={statuses}
copy={{ title: 'Status' }}
onValueChange={(id) => {
// your code
}}
onRetry={() => {
// your code
}}
onSubscribe={async () => {
// await your API here; the block shows progress until it settles
}}
/>
)
}Description
A platform's services over 90 days inside your app: the SLA as a large figure and a strip with a cell per day colored by uptime. Press a service to put its history on the strip.
A queue as an instrument: pick a queue, read its throughput and waits, and see backlog and busy workers as lanes of cells. Background jobs, kitchen stations and printers fit. Retry a failed item on its own, pause the queue or add a worker.
A grid of things as tiles, each in one of your statuses, with the one status the board handles marked alert. Select a tile and the panel shows what is being done: for an alert tile a timer, the reason as one choice, who is on the way and in how many minutes, and a ring counting down to the escalation, with Escalate now and Resolve below. Shown with a plant's assembly line; stories also use checkout lanes and hospital beds.
Where anything audited stands, in one card; the default is a company's security posture, and a food safety inspection or an accessibility audit reads the same way. A ring of ticks lit up to the score with its letter grade, the score out of 100 with how it moved and a sparkline of the month, then open findings (and how many are of the worst severity), resolved, assets watched and the median time to fix. Tabs show the open findings by severity over 30 days as a stacked chart, the findings worst first, and the assets they sit on, all in one height. Your own severities set the levels, their words and colors. Scan now sweeps the ring and counts the assets in the foot; Export report sits beside it. It has loading and error states that keep its size.
Code
Status, the Status story: the files youj add writes.
blocks/app
Reference
Props23 props, 2 types
Props
| Prop | Type | |
|---|---|---|
theme | ThemeInputWraps the card in this theme. Default: the theme around it. | – |
embedded | booleanInside another app: a default true | true |
fill | booleanTake the whole width it's given instead of stopping at its natural width (640px at 100% scale). default false | false |
copy | Partial<StatusCopy>Any of the card's strings, to rewrite or translate. | – |
headingLevel | 1 | 2 | 3The title's heading level. Default 1, or 2 when | – |
locale | stringFormats percentages and "days ago". Default: | – |
services | StatusService[]Each service with a day per entry, oldest first, the last today. Default: six demo services. | – |
today | Date | stringThe day the services' last entry is, as a Date or "YYYY-MM-DD"; "days ago" counts from it, and the demo fleet ends on it. Default: the last day in | – |
statuses | StatusLevel[]The statuses a service can be in, best first: a day at or above the target is the first, one above the critical line the second, anything below the last. A service's own default operational, degraded, outage | operational, degraded, outage |
critical | numberThe uptime below which a day is an outage, 0–1, always under default 0.99 | 0.99 |
format | { uptime?: (share: number) => string }Formats the uptime shares (0–1) in the figure, the target, the legend and the rows. Default: percentages in the locale. | – |
target | numberThe SLA a day must meet, 0–1. default 0.999 | 0.999 |
value | string | nullThe id of the service on the day strip, or null for all of them; pair with | – |
defaultValue | string | nullThe service on the day strip at first. default null | null |
onValueChange | (id: string | null) => voidCalled with the service id pressed, or null when it's pressed again. | – |
loading | booleanShows skeletons in place of the figures, strip and services. default false | false |
error | ReactNode | ErrorShown in place of the figures when loading failed; an Error shows its message. | – |
onRetry | () => voidOffers a retry beside | – |
empty | ReactNodeReplaces the empty state shown when there are no services. default `copy.empty` | `copy.empty` |
onSubscribe | () => Promise<unknown> | unknownSubscribes to updates; resolve when done, reject with an Error to show its message. Default: a short demo wait that warns once in development. | – |
onCopyLink | () => voidThe menu's Copy status link. Default: nothing. | – |
onExport | () => voidThe menu's Export CSV. Default: nothing. | – |
onHistory | () => voidThe Incident history button. Default: nothing. | – |
StatusLevel
| Prop | Type | |
|---|---|---|
idRequired | string | – |
labelRequired | string | – |
toneRequired | 'accent' | 'info' | 'success' | 'warning' | 'danger' | – |
StatusService
| Prop | Type | |
|---|---|---|
idRequired | string | – |
nameRequired | stringSet in mono. | – |
daysRequired | UptimeDay[]One entry per day, oldest first; the last is today. | – |
status | stringA | – |
Strings28 keys for copy
Strings
copy takes any of these keys; the rest keep their defaults. A key whose text holds a value (a count, a name) takes a function.
titlesubtitlemorecopyLinkexportCsvuptimetargetoperationalpartialbudgetdailyallServicesstripLabelshowAllnoDataservicesservicesSummarylastIncidentongoinghistorysubscribesubscribingsubscribedfailedemptyemptyDescriptionretrylocaleBuilt from11 components
Built from
Accessibilitystatus, buttons, labels, motion
Accessibility
Status gives each service button a spoken label of its name, state and uptime, with aria-pressed for the one you picked and a labelled remove control on the filter badge. Errors use role="alert".
The queue picker in Queue monitor is a labelled segmented control. The status line does not announce each tick.
Tile board makes every tile a button (aria-pressed) whose name includes its status in words; the colored bar only echoes it. The alert timer is a role="timer" that is not announced every second, the reason is one named choice, and Escalate now and Resolve announce their result in a polite live region. Timers stop in a hidden tab.
Score overview puts the score on a meter named Security score whose value text is the score and its grade ("77 of 100, grade B"), and each figure is a group named by its label. The tabs are a named tab list; the chart is a named figure with a summary of how the open findings moved, its plot one tab stop whose arrow keys walk the days and open the tooltip. Every finding is a button named with its severity, title, asset and how long it has been open, and every asset says its counts by severity in words. A scan is announced when it finishes, and the foot's progress is a polite live region. The stories show other worlds, with their own names and words.
Under reduced motion figures, bars, rings and rows are drawn in place instead of animating, and nothing loops.