Status page / 14 primitives + composition

Status page + observability primitives

Visual primitives for the Mufflermen public status page and the internal observability surfaces behind it. Real workshop signals — Quote engine, Parts catalogue, Workshop scheduler, Customer SMS, Payment gateway across AU-East-1 (Sydney) and AU-West-1 (Perth). Visual reference only — no real backend wired.

Production answer

Status page + observability primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Status page + observability primitives states
Generative search brief

Status page + observability primitives: Visual primitives for the Mufflermen public status page and the internal observability surfaces behind it. Real workshop signals — Quote engine, Parts catalogue, Workshop scheduler, Customer SMS, Payment gateway across AU-East-1 (Sydney) and AU-West-1 (Perth). Visual reference only — no real backend wired.

Visual reference only — no real backend wired
Primitive 01

Service status row

Service name, status chip (Operational / Degraded / Outage / Maintenance) plus the canonical 90-day uptime square grid with percentage.

StatelessOpen
Primitive 02

Region status grid

AU-East, AU-West, US-East, US-West, EU-Central, APAC cells with status dot, latency chip and region label.

StatelessOpen
Primitive 03

Incident card

Title, severity chip, four-stage timeline (Investigating → Identified → Monitoring → Resolved), scope chips and subscribe CTA.

StatelessOpen
Primitive 04

Maintenance window banner

Top banner — scheduled / in-progress / completed maintenance with start, end, impact summary and affected services.

StatelessOpen
Primitive 05

Uptime sparkline row

Compact row — service name plus 24h sparkline plus p99 latency plus current error rate.

StatelessOpen
Primitive 06

Service map graph

SVG dependency graph — nodes plus tone-coded edges with arrowheads and zoom in/out/reset controls.

Stateful · zoomOpen
Primitive 07

Subscribe updates

Inline subscribe form — email / SMS channel toggle, endpoint input, frequency picker and privacy note.

Stateful · formOpen
Primitive 08

Status history table

Historical incident table built on DataTable — date, service, title, severity chip, duration and stage.

StatelessOpen
Primitive 09

Postmortem card

Title, date, author, 5-Whys, action items with owners and a lessons-learned panel.

StatelessOpen
Primitive 10

SLO dashboard tile

Objective, actual, status chip and remaining error-budget meter scoped to a 30-day or 90-day window.

StatelessOpen
Primitive 11

Error budget gauge

Half-arc gauge showing % consumed / remaining with tone shifting (green / amber / red), burn rate chip and trend sparkline.

StatelessOpen
Primitive 12

Synthetic check timeline

Per-region synthetic check — pass / fail / timeout dots laid out on a 24h axis with a small legend.

StatelessOpen
Primitive 13

Latency percentile strip

Side-by-side bars for p50 / p75 / p90 / p95 / p99 / p99.9 with current ms values and a p95 budget chip.

StatelessOpen
Primitive 14

Active alerts inbox

Inbox of firing alerts — title, service, severity, age, assignee avatar and an ack / resolve cycle button.

Stateful · ackOpen
Composition

Full status page

Public-facing composition — maintenance banner, service rows, region grid, active incident, uptime list, subscribe footer, history table.

CompositionOpen