Service Monitoring

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/dashboard/dashboard12.tsx instead.

Usage

The file also exports dashboard12Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Dashboard12, dashboard12Demo } from "@/components/blocks/dashboard/dashboard12";

export default function Page() {
  return <Dashboard12 {...dashboard12Demo} />;
}

Props

Types

type ServiceStatus = "operational" | "degraded" | "outage";

type ServiceHealth = { name: string; status: ServiceStatus; latency: string; uptime: string };

type RangeData = { latency: number[]; requestVolume: number[] };

type Severity = "info" | "warning" | "critical";

type EventItem = { description: string; service: string; timestamp: string; severity: Severity };

Behavior notes

• The 1h/24h/7d control is real client state: it swaps `ranges["1h"]`/`ranges["24h"]`/`ranges["7d"]` wholesale, so both the latency line chart and the request-volume area chart redraw from a different fixed array together. The chart card headings also relabel to show the active range.
• The status ribbon and the health-grid dots both read the same `services` array and the same operational/degraded/outage color mapping, so they never disagree with each other.
• The 30-day uptime strip is plain colored `<span>` ticks sized by flex-1, not a chart library; it has no hover tooltip per tick.
• Latency shows as "—" in the demo data for a service in outage, since there's nothing meaningful to measure; that's a data convention this block honors literally rather than deriving.
• The icon rail buttons and the range tabs are the only interactive elements; the service-health cards and the events feed are read-only, there is no drill-down or per-event acknowledgement action.