Live Operations Dashboard

1"use client";
2 
3import * as React from "react";
4import { motion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import { useReducedMotion, statusVars, type StatusTone } from "@/lib/motiq";
8 
9import { KpiNumberMorph } from "@/components/motiq/kpi-number-morph";
10import {
11  DataRefreshState,
12  type RefreshState,
13} from "@/components/motiq/data-refresh-state";
14import {
15  FilterResultTransition,
16  type ActiveFilter,
17  type FilterResultState,
18} from "@/components/motiq/filter-result-transition";
19import {
20  StreamingDataRows,
21  type Column,
22  type StreamingTableState,
23} from "@/components/motiq/streaming-data-rows";
24 
25/**
26 * LiveOperationsDashboard — a composed, app-controlled operations dashboard that
27 * wires four presentation-only data-motion components together behind a single
28 * small demo state machine: a row of KpiNumberMorph stats with a DataRefreshState
29 * control in the header, a FilterResultTransition service grid, and a
30 * StreamingDataRows table as the main live feed.
31 *
32 * IMPORTANT — DEMO ONLY. Nothing here talks to a real monitoring backend. Every
33 * service, region, metric, and timestamp is fictional and provider-neutral. The
34 * block only feeds the components a scripted set of dataset snapshots in response
35 * to its own controls — it is a copy-paste starting point you rewire to your real
36 * telemetry.
37 *
38 * Determinism: no `Date.now()` / `Math.random()` / `new Date()` runs during
39 * render, initializers, or module scope. Every snapshot is derived from a fixed
40 * baseline with a pure wobble function; timestamps derive from a fixed baseline;
41 * the demo only advances inside handlers/timers. Clean-room original.
42 */
43 
44/* -------------------------------------------------------------------------- */
45/* Types                                                                       */
46/* -------------------------------------------------------------------------- */
47 
48export type ServiceCategory = "api" | "web" | "worker" | "data";
49export type ServiceStatus = "operational" | "degraded" | "down";
50 
51export interface OpsService {
52  /** Stable identity — the key to smooth insert / update / resort. */
53  id: string;
54  name: string;
55  region: string;
56  category: ServiceCategory;
57  status: ServiceStatus;
58  /** Requests per minute. */
59  rpm: number;
60  /** p95 latency in milliseconds. */
61  p95: number;
62  /** Error rate as a percentage (e.g. 0.42 = 0.42%). */
63  errorRate: number;
64  /** Active sessions on this service. */
65  sessions: number;
66}
67 
68// … truncated