Status & maintenancePro

The overall state, an incident with its updates, 90 days of uptime per service you can hover, maintenance counting down, subscribing by email, team chat or webhook, and a maintenance page with a countdown.

When to use

A public status page: the overall state, incidents with updates, 90 days of uptime and maintenance.
SaaS and APIs that tell customers what's working.

When not to use

Your team's own monitoring: a dashboard such as Analytics panels shows more detail.
Products without uptime to report: an empty status page reads as a promise.

Usage

Status & maintenance with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { StatusPage } from "@/components/dashral/blocks/status-page"
2
3<StatusPage
4  brand="Acme"
5  status={monitoring}
6  maintenance={nextWindow}
7  onSubscribe={(email) => api.status.subscribe(email)}
8/>

API reference

StatusPage

A status page and its maintenance page, side by side behind a switch. Status: the overall state, the incident with its updates, components by group with 90 days of uptime — hover a day for what happened — planned maintenance counting down, past incidents, and subscribing by email, team chat or webhook. Maintenance: what's happening, a countdown, the steps, the services on a map waiting for the database, and an email to hear when it's back. Point the data at your monitoring: everything comes from props, onSubscribe and onNotify take the sign-ups, and view picks the page (the switch between them is for showing both; switcher={false} hides it).

Prop	Type	Default
`brand`	`string`	`"Acme"`
`status`	`StatusPageData`	`sample`
`maintenance`	`MaintenancePageData`	`sample`
`view`	`"status" \| "maintenance"` The page shown when there's no switch: your status page, or the maintenance page while you're down.	—
`switcher`	`boolean` The switch between the two pages, for showing both (as the demo does).	`true`
`chatName`	`string` Your team chat's name, on its subscribe option.	`brands.chat`
`onSubscribe`	`(channel: SubscribeChannel, value: string) => Promise<void> \| void` Subscribing to updates: the channel and the address, channel or URL. Throw an Error to show its message.	—
`onNotify`	`(email: string) => Promise<void> \| void` "Notify me" on the maintenance page, with the address. Throw an Error to show its message.	—

type Status

= "up" | "degraded" | "down" | "maintenance"

type StatusComponent

Prop	Type	Default
`name`	`string`	—
`status`	`Status`	—
`uptime`	`string`	—
`bad`	`Record<number, { status: Status; note: string }>` The days that weren't fine, by how many days ago (0 is today): what was wrong and a note.	—

type StatusGroup

Prop	Type	Default
`name`	`string`	—
`components`	`StatusComponent[]`	—

type StatusIncident

Prop	Type	Default
`title`	`string`	—
`state`	`string`	—
`affects`	`string`	—
`updates`	`{ state: string; time: string; text: string }[]`	—

type PastIncident

Prop	Type	Default
`date`	`string`	—
`title`	`string`	—
`duration`	`string`	—
`status`	`Status`	—

type SubscribeChannel

= "email" | "chat" | "webhook"

type StatusPageData

Prop	Type	Default
`overall`	`{ status: Status; title: string; updated?: string }` The banner at the top: the state of everything, in a few words.	—
`incident`	`StatusIncident \| null` The incident going on, newest update first; null when there's none.	—
`groups`	`StatusGroup[]`	—
`today`	`Date` The day the uptime bars end on (each component's `bad` days count back from it).	—
`maintenance`	`{ title: string; body: string; window: string; startsAt?: Date } \| null` The next planned maintenance, counting down to `startsAt`; null when there's none.	—
`past`	`PastIncident[]`	—

type MaintenancePageData

Prop	Type	Default
`title`	`string`	—
`description`	`string`	—
`backAt`	`Date` When it's back, for the countdown (37 minutes from now without it).	—
`steps`	`{ label: string; state: "done" \| "now" \| "next" }[]`	—
`scene`	`boolean` The services on a map, waiting for the database; false hides it.	—