Service Monitoring

Dashboard12: Service Monitoring

A service monitoring dashboard for observability and uptime status: an icon rail, a live status ribbon, a service-health grid with status dots and per-service latency/uptime, a latency line chart, a request-volume area chart, a 30-day uptime bar strip, and a recent-events feed. A 1h/24h/7d range switch built on shadcn/ui Tabs live-swaps the chart data. It is a full-height, drop-in Next.js / React monitoring dashboard template built with shadcn/ui and Recharts.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/dashboard12?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/dashboard12?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/dashboard12.tsx, the Beste chart and menu components it composes (area-chart, line-chart, user-menu), and the shadcn/ui dependencies they need, including tabs.

Quick start

The installed file exports dashboard12Demo alongside the block: the exact props behind the preview above. Spread it to get the full dashboard in one line. The block fills its container height (h-screen), so render it in a full-height layout.

import { Dashboard12, dashboard12Demo } from "@/components/beste/block/dashboard12";

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

Props

Every prop is optional. Omit any and the block falls back to its built-in demo data, so <Dashboard12 /> renders a complete, populated monitoring dashboard out of the box. Pass just the props you want to override.

The block-local data types:

type Range = "1h" | "24h" | "7d";

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

type Service = {
  name: string;
  status: ServiceStatus; // drives the status dot via statusMeta
  latency: string;       // pre-formatted, e.g. "42 ms"
  uptime: string;        // pre-formatted, e.g. "99.98%"
  icon: LucideIcon;
};

type LatencyPoint = { t: string; p95: number; p50: number };
type ThroughputPoint = { t: string; rps: number };

type UptimeState = "up" | "degraded" | "down"; // one bar per entry, colored by uptimeTone

type Incident = {
  title: string;
  service: string;
  time: string;
  level: "resolved" | "warning" | "critical"; // maps to icon/color via incidentTone
};

type DashboardUser = {
  name: string;
  email: string;
  avatar: string; // image URL, rendered with a plain <img>
};

The remaining prop reuses the interface exported by the composed Beste component:

// from user-menu
type UserMenuItem = {
  id: string;
  label: string;
  icon?: LucideIcon;
  destructive?: boolean; // red row with a separator above it
};

Still internal

A few structural and cosmetic bits stay as constants in the installed file — edit them in place:

• railItems — the left icon-rail buttons, including the optional badge count.
• latencyConfig / throughputConfig — series labels and colors for each chart (colors reference the --chart-1…--chart-5 theme tokens).
• statusMeta — the per-status dot color, label, and badge classes for each ServiceStatus.
• uptimeTone — maps each UptimeState to its bar color (up = emerald, degraded = amber, down = red).
• incidentTone — maps each incident level to its icon and color (resolved = check, warning/critical = triangle).
• The ranges (1h/24h/7d) list is set inline.

Components

This block composes several Beste UI components, each installable on its own:

• area-chart — the request-volume chart in the lower panel. /components/area-chart
• line-chart — the p95/p50 latency chart in the upper panel. /components/line-chart
• user-menu — the account dropdown in the status ribbon, rendered in compact mode. /components/user-menu

It also uses the shadcn/ui tabs primitive for the range switch. /components/tabs

Behavior notes

• The 1h/24h/7d control is a shadcn Tabs group. Selecting a range updates local state and live-swaps both charts, reading latencyData[range] and throughputData[range]; the "Last " caption over each chart updates to match. The default range is 24h.
• The status ribbon computes allOperational from services: when every service is "operational" the dot is emerald and it reads "All systems operational"; otherwise it turns amber and reads "Partial degradation".
• The 30-day uptime strip renders one flex bar per entry in uptimeDays, colored by state through uptimeTone (emerald / amber / red).
• Each service card shows a status dot colored from statusMeta[status], plus its latency and uptime in tabular figures.
• Recent-events rows pick an icon and color from incidentTone[level] (resolved = check, warning/critical = triangle).
• The left icon rail is hidden below the sm breakpoint; the alerts item carries a numeric badge.

Requirements

• Next.js App Router. Rendered as a client component ("use client") because of the Tabs range state, so it composes into any App Router page.
• Full-height layout: the root is h-screen with an internal scroll area, so give it a full-height container.
• Avatar and any images render with a plain <img>, so no next.config images.remotePatterns setup is needed for remote hosts.