A dark operations wall with live service tiles whose heartbeat strips scroll as new checks arrive, an incident banner with a running timer, a region map with traffic bars, 45-day uptime strips and an event log.
Edge gateway99.99%
Auth99.98%
Public API99.95%
Checkout99.41%
npx shadcn@latest add https://hyperblur.dev/r/dashboard-ops-wall.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dashboard-ops-wall.tsx.
import { DashboardOpsWall } from "@/components/hyperblur/dashboard-ops-wall"
<DashboardOpsWall interval={2000} incident={null} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Watchtower" | Product name in the header. |
| services | OpsService[] | 12 sample services | Services with id, name, region, status (ok, degraded, down), latency in ms, rps and uptime percent. |
| accent | string | "#2f7bff" | Accent for the logo, selected tile and traffic bars. |
| live | boolean | true | Advances the heartbeats, latencies and timers on an interval. |
| interval | number | 1500 | Milliseconds between live ticks. |
| incident | { title: string; detail: string; minutes: number } | null | Checkout degraded | Active incident banner. minutes is how long it has been open. Pass null to hide it. |
| onServiceSelect | (service: OpsService) => void | Called when a service tile is clicked. |