Service Status

The rows of a status page. The headline banner is derived from the services — a status page whose headline can disagree with its own rows is worse than none.

src/components/ui/service-status.tsx

About

From the component's own source, where it was written.

The rows of a status page: one service, its current state, its history.

The overall banner is derived from the services rather than passed in. A status page whose headline can disagree with its own rows is worse than no status page — that is precisely the failure people remember.

Install

npx astralyx-ui add service-status

Usage

import { ServiceStatus } from '@/components/ui/service-status'

<ServiceStatus services={services} />

Composer

Change the props and the source below follows.

Degraded — 2 of 4 services affected

  • APIOperational
    99.98%
  • DashboardDegraded

    Elevated latency in eu-west-1

    99.71%
  • Build runnersOperational
    99.95%
  • Package registryMaintenance

    Scheduled maintenance until 10:00 UTC

    99.99%
Props
tsx
<ServiceStatus services={services} showBanner={true} />

Examples

Status page

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

ServiceStatus

The rows of a status page: one service, its current state, its history.

Extends ComponentProps<'div'>.

PropTypeDefaultDescription
servicesService[]required{ id, name, state, description?, history?, uptime? }.
showBannerbooleantrue—

Functions

FunctionSignatureDescription
overallState(services: Service[]) => ServiceStateExported. Worst state wins, so one outage cannot be reported as all-operational.

Types

Service

FieldTypeDescription
idstring—
namestring—
stateServiceStateEach row carries a dot and a labelled badge, never colour alone.
description?ReactNode—
history?UptimeBucket[]Rendered with UptimeStrip inside each row.
uptime?string—
TypeDefinitionDescription
ServiceState
'operational' | 'degraded' | 'outage' | 'maintenance'
—