ServiceHealthList

Chart
Per-service status rows: a status dot (down > degraded > operational), the service name, an optional right-aligned detail such as an uptime percentage, and, when the item carries periods, an inline strip of its latest 14 periods beside the detail.
src/charts/service-health-list
View in Charts

Playground

Every control sets a real prop of ServiceHealthListProps. The JSX below updates as you go.
Services
Props
compact
boolean
plain
boolean
title
string
JSX · ServiceHealthListProps
<ServiceHealthList title="Services" />

Variants

3 examples from src/charts/service-health-list/service-health-list.md, each rendered live from its own JSX.
Compact
<ServiceHealthList
compact
items={[
{ label: "API", detail: "99.98%" },
{ label: "Dashboard", detail: "99.92%", degraded: true },
{ label: "Webhooks", detail: "97.10%", down: true }
]}
/>
Drill-in rows
<ServiceHealthList
onPressItem={() => {}}
items={[
{ label: "API", detail: "99.98%" },
{ label: "Search", detail: "99.95%" },
{ label: "Exports", detail: "99.80%", degraded: true }
]}
/>
Plain, inside a card
<Card>
<ServiceHealthList
plain
items={[
{ label: "API", detail: "operational" },
{ label: "Dashboard", detail: "degraded", degraded: true }
]}
/>
</Card>

Anatomy

Services
1
List
2
Status dot
3
Service
4
Uptime
Dimmed parts appear only in some states or variants.

Props

8 props on ServiceHealthListProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
2 props
items *
ServiceHealthItem[]
–
The services to render, in order.
title
string
–
Optional heading shown above the rows.
Density
6 props
compact
boolean
false
detailed
boolean
false
Bordered status panel with full-width history strips and explicit status labels.
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
onPressItem
(index: number) => void
–
Rows become tappable drill-in targets (open the service) when set.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
button
group
image
img
ARIA on web
aria-hidden
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<ServiceHealthList
title="System status"
items={[
{ label: "API", detail: "99.98%", periods: Array.from({ length: 45 }, () => ({})) },
{ label: "Dashboard", detail: "99.92%", periods: Array.from({ length: 45 }, (_, i) => (i === 30 ? { degraded: true } : {})), degraded: true },
{ label: "Webhooks", detail: "97.10%", periods: Array.from({ length: 45 }, (_, i) => (i > 40 ? { down: true } : {})), down: true }
]}
/>
It shares its strip renderer with UptimeBar, so the two never drift. onPressItem turns rows into drill-in buttons; compact tightens the rows; plain strips the card surface for nesting.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bad
--fd
--fm
--ft
--ln
--ok
--sf
--sh-sm
--tx2
--tx3
--warn

Related components