{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "service-health-matrix", "title": "Service Health Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/service-health-matrix/ServiceHealthMatrix.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n AlertTriangle,\n Bell,\n Check,\n CheckCircle2,\n Clock,\n Cpu,\n Database,\n Globe,\n RefreshCw,\n Server,\n ShieldCheck,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\n\nexport type RegionStatus = 'operational' | 'degraded' | 'outage' | 'maintenance'\nexport type DayStatus = 'up' | 'degraded' | 'down' | 'maintenance'\nexport type IncidentSeverity = 'minor' | 'major' | 'critical' | 'maintenance'\n\nexport interface RegionHealth {\n id: string\n name: string\n location: string\n code: string\n latency: number\n status: RegionStatus\n uptime: number\n p95Latency?: number\n packetLoss?: number\n latencyHistory?: number[]\n}\n\nexport interface ServiceHealthItem {\n id: string\n name: string\n description?: string\n icon?: 'auth' | 'cdn' | 'database' | 'webhook' | 'ai'\n uptime: number\n status: RegionStatus\n days?: DayStatus[]\n}\n\nexport interface IncidentUpdate {\n time: string\n status: string\n description: string\n}\n\nexport interface IncidentRecord {\n id: string\n title: string\n date: string\n severity: IncidentSeverity\n resolved: boolean\n duration: string\n updates: IncidentUpdate[]\n}\n\nexport interface ServiceHealthMatrixProps {\n systemStatus?: RegionStatus\n systemUptime?: string\n lastUpdated?: string\n regions?: RegionHealth[]\n services?: ServiceHealthItem[]\n incidents?: IncidentRecord[]\n className?: string\n}\n\nfunction generate90Days(blips: Array<{ dayAgo: number; status: DayStatus }> = []): DayStatus[] {\n const days: DayStatus[] = Array.from({ length: 90 }, () => 'up')\n for (const blip of blips) {\n const idx = 89 - blip.dayAgo\n if (idx >= 0 && idx < 90) {\n days[idx] = blip.status\n }\n }\n return days\n}\n\nconst defaultRegions: RegionHealth[] = [\n {\n id: 'us-east',\n name: 'US East',\n location: 'N. Virginia',\n code: 'us-east-1',\n latency: 24,\n status: 'operational',\n uptime: 100,\n p95Latency: 28,\n packetLoss: 0.0,\n latencyHistory: [26, 25, 24, 25, 23, 24, 25, 24, 23, 24, 25, 24],\n },\n {\n id: 'us-west',\n name: 'US West',\n location: 'Oregon',\n code: 'us-west-2',\n latency: 38,\n status: 'operational',\n uptime: 99.98,\n p95Latency: 42,\n packetLoss: 0.0,\n latencyHistory: [40, 39, 38, 37, 38, 39, 38, 38, 37, 38, 39, 38],\n },\n {\n id: 'eu-central',\n name: 'EU Central',\n location: 'Frankfurt',\n code: 'eu-central-1',\n latency: 18,\n status: 'operational',\n uptime: 100,\n p95Latency: 21,\n packetLoss: 0.0,\n latencyHistory: [19, 18, 18, 17, 18, 19, 18, 18, 17, 18, 18, 18],\n },\n {\n id: 'ap-south',\n name: 'AP South',\n location: 'Mumbai',\n code: 'ap-south-1',\n latency: 45,\n status: 'operational',\n uptime: 99.95,\n p95Latency: 52,\n packetLoss: 0.01,\n latencyHistory: [47, 46, 45, 44, 45, 48, 46, 45, 44, 45, 46, 45],\n },\n {\n id: 'ap-east',\n name: 'AP East',\n location: 'Tokyo',\n code: 'ap-northeast-1',\n latency: 32,\n status: 'operational',\n uptime: 99.99,\n p95Latency: 36,\n packetLoss: 0.0,\n latencyHistory: [34, 33, 32, 31, 32, 33, 32, 32, 31, 32, 33, 32],\n },\n {\n id: 'sa-east',\n name: 'SA East',\n location: 'São Paulo',\n code: 'sa-east-1',\n latency: 58,\n status: 'operational',\n uptime: 99.91,\n p95Latency: 65,\n packetLoss: 0.02,\n latencyHistory: [62, 60, 59, 58, 61, 58, 59, 58, 57, 58, 60, 58],\n },\n]\n\nconst defaultServices: ServiceHealthItem[] = [\n {\n id: 'auth-api',\n name: 'Authentication API',\n description: 'OAuth2 / SAML SSO · Session Tokens · JWT Validation',\n icon: 'auth',\n uptime: 99.99,\n status: 'operational',\n days: generate90Days(),\n },\n {\n id: 'edge-cdn',\n name: 'Edge CDN & DNS',\n description: 'Anycast Global Routing · Edge Cache · SSL Termination',\n icon: 'cdn',\n uptime: 100.0,\n status: 'operational',\n days: generate90Days(),\n },\n {\n id: 'postgres-cluster',\n name: 'Postgres Database Cluster',\n description: 'Primary Write Node · Regional Read Replicas · Pooler',\n icon: 'database',\n uptime: 99.97,\n status: 'operational',\n days: generate90Days([{ dayAgo: 42, status: 'degraded' }]),\n },\n {\n id: 'webhook-dispatcher',\n name: 'Webhook Dispatcher',\n description: 'Event Streaming Engine · Exponential Backoff Retries',\n icon: 'webhook',\n uptime: 99.98,\n status: 'operational',\n days: generate90Days([{ dayAgo: 1, status: 'degraded' }]),\n },\n {\n id: 'ai-gateway',\n name: 'AI Inference Gateway',\n description: 'Model Routing · Streaming Token Buffers · Semantic Cache',\n icon: 'ai',\n uptime: 99.95,\n status: 'operational',\n days: generate90Days([{ dayAgo: 18, status: 'degraded' }]),\n },\n]\n\nconst defaultIncidents: IncidentRecord[] = [\n {\n id: 'inc-1',\n title: 'Elevated latency on Webhook Dispatcher',\n date: 'Yesterday · Aug 20, 2026',\n severity: 'minor',\n resolved: true,\n duration: '18 minutes',\n updates: [\n {\n time: '14:40 UTC',\n status: 'Resolved',\n description:\n 'The backlog of outgoing webhook payloads has fully drained. All queued webhook events were delivered with zero packet drop. Worker autoscaling thresholds have been adjusted.',\n },\n {\n time: '14:22 UTC',\n status: 'Investigating',\n description:\n 'We identified a localized queue lock in the dispatch workers following a Redis connection pool saturation. Workers were scaled up and connection pool limits raised.',\n },\n ],\n },\n {\n id: 'inc-2',\n title: 'Scheduled Maintenance: Postgres Cluster Engine Upgrade',\n date: 'Aug 14, 2026',\n severity: 'maintenance',\n resolved: true,\n duration: '12 minutes',\n updates: [\n {\n time: '02:12 UTC',\n status: 'Completed',\n description:\n 'Primary instance switchover completed smoothly. Read replicas synchronized without data lag. All database endpoints are fully operational.',\n },\n {\n time: '02:00 UTC',\n status: 'In Progress',\n description:\n 'Scheduled rolling restart of secondary read replicas initiated while applying minor database engine updates.',\n },\n ],\n },\n]\n\nconst statusBannerConfig: Record<\n RegionStatus,\n {\n title: string\n badge: string\n badgeVariant: 'success' | 'warning' | 'destructive' | 'info'\n containerClass: string\n dotClass: string\n textClass: string\n }\n> = {\n operational: {\n title: 'All Systems Operational',\n badge: '99.99% 90-day uptime',\n badgeVariant: 'success',\n containerClass: 'border-success/30 bg-success/10 text-success',\n dotClass: 'bg-success',\n textClass: 'text-success',\n },\n degraded: {\n title: 'Active Service Degradation',\n badge: 'Elevated Latency Detected',\n badgeVariant: 'warning',\n containerClass: 'border-warning/30 bg-warning/10 text-warning',\n dotClass: 'bg-warning',\n textClass: 'text-warning',\n },\n outage: {\n title: 'Partial System Outage',\n badge: 'Incident Under Investigation',\n badgeVariant: 'destructive',\n containerClass: 'border-destructive/30 bg-destructive/10 text-destructive',\n dotClass: 'bg-destructive',\n textClass: 'text-destructive',\n },\n maintenance: {\n title: 'Scheduled Maintenance in Progress',\n badge: 'Planned Upgrades',\n badgeVariant: 'info',\n containerClass: 'border-info/30 bg-info/10 text-info',\n dotClass: 'bg-info',\n textClass: 'text-info',\n },\n}\n\nconst dayClassMap: Record = {\n up: 'bg-success/80 hover:bg-success bg-success/70 dark:hover:bg-success',\n degraded: 'bg-warning/90 hover:bg-warning',\n down: 'bg-destructive hover:bg-destructive',\n maintenance: 'bg-info hover:bg-info',\n}\n\nconst dayLabelMap: Record = {\n up: 'Operational (100%)',\n degraded: 'Degraded Performance',\n down: 'Major Outage',\n maintenance: 'Scheduled Maintenance',\n}\n\nfunction getSparkline(history: number[] = [24, 24, 24, 24]) {\n const min = Math.min(...history)\n const max = Math.max(...history)\n const range = max - min || 1\n const height = 26\n const padding = 3\n\n const points = history.map((val, idx) => {\n const x = (idx / (history.length - 1)) * 100\n const y = height - ((val - min) / range) * (height - padding * 2) - padding\n return { x, y }\n })\n\n let path = `M ${points[0].x},${points[0].y}`\n for (let i = 1; i < points.length; i++) {\n const prev = points[i - 1]\n const curr = points[i]\n const cx = (prev.x + curr.x) / 2\n path += ` C ${cx},${prev.y} ${cx},${curr.y} ${curr.x},${curr.y}`\n }\n\n const lastPoint = points[points.length - 1]\n const area = `${path} L 100,32 L 0,32 Z`\n\n return { path, area, lastPoint }\n}\n\nconst severityBadgeMap: Record<\n IncidentSeverity,\n { variant: 'info' | 'warning' | 'destructive' | 'secondary'; label: string }\n> = {\n minor: { variant: 'warning', label: 'Minor' },\n major: { variant: 'destructive', label: 'Major' },\n critical: { variant: 'destructive', label: 'Critical' },\n maintenance: { variant: 'secondary', label: 'Maintenance' },\n}\n\nexport function ServiceHealthMatrix({\n systemStatus = 'operational',\n systemUptime = '99.99%',\n lastUpdated = 'Updated 30s ago',\n regions = defaultRegions,\n services = defaultServices,\n incidents = defaultIncidents,\n className,\n}: ServiceHealthMatrixProps) {\n const [isRefreshing, setIsRefreshing] = React.useState(false)\n const [isSubscribed, setIsSubscribed] = React.useState(false)\n const [showSubscribeInput, setShowSubscribeInput] = React.useState(false)\n const [emailInput, setEmailInput] = React.useState('')\n const [currentUpdatedText, setCurrentUpdatedText] = React.useState(lastUpdated)\n\n const handleRefresh = () => {\n setIsRefreshing(true)\n setTimeout(() => {\n setIsRefreshing(false)\n setCurrentUpdatedText('Updated just now')\n }, 400)\n }\n\n const handleSubscribeSubmit = () => {\n if (emailInput.trim().length > 0) {\n setIsSubscribed(true)\n setShowSubscribeInput(false)\n setEmailInput('')\n }\n }\n\n const currentBanner = statusBannerConfig[systemStatus] || statusBannerConfig.operational\n\n return (\n
\n {/* Header Banner */}\n \n
\n \n \n \n \n
\n
\n

\n {currentBanner.title}\n

\n \n {systemUptime} 90-day uptime\n \n
\n

\n Continuous synthetic telemetry and edge probe latency across all global endpoints.\n

\n
\n
\n\n
\n
\n \n {currentUpdatedText}\n \n \n \n
\n\n
\n {!isSubscribed ? (\n setShowSubscribeInput(!showSubscribeInput)}\n >\n \n Subscribe to Updates\n \n ) : (\n \n \n Subscribed\n \n )}\n
\n
\n
\n\n {/* Collapsible Subscribe Input Form */}\n {showSubscribeInput && !isSubscribed && (\n
\n
\n

Get instant outage alerts via Email

\n

\n We will only notify you for major severity incidents and maintenance.\n

\n
\n
\n setEmailInput(e.target.value)}\n placeholder=\"admin@company.com\"\n className=\"border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring h-8 w-full rounded-md border px-2.5 text-xs focus-visible:ring-2 focus-visible:outline-none sm:w-64\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') handleSubscribeSubmit()\n }}\n />\n \n
\n
\n )}\n\n {/* Section 1: Global Region Latency Grid */}\n
\n
\n
\n

Global Region Latency Grid

\n

\n Real-time edge response round-trip time and packet loss metrics.\n

\n
\n
\n \n All 6 Edge Zones Live\n
\n
\n\n
\n {regions.map((region) => {\n const spark = getSparkline(region.latencyHistory)\n return (\n \n \n
\n
\n
\n \n
\n
\n {region.name}\n \n {region.location} · {region.code}\n \n
\n
\n\n \n \n {region.status}\n \n
\n \n\n \n {/* Latency big metric & status */}\n
\n
\n \n {region.latency}ms\n \n ping\n
\n \n \n {region.latency < 30 ? 'Optimal' : region.latency < 50 ? 'Normal' : 'Elevated'}\n
\n
\n\n {/* SVG Sparkline */}\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n\n {/* Footer Stats */}\n
\n
\n \n {region.uptime}% uptime\n
\n
\n P95: {region.p95Latency ?? 28}ms\n ·\n {region.packetLoss ?? 0}% loss\n
\n
\n \n \n )\n })}\n
\n \n\n {/* Section 2: Core Services Component Health List */}\n
\n
\n
\n

Core Services Component Health

\n

\n 90-day daily uptime history and service availability breakdown.\n

\n
\n\n {/* Legend */}\n
\n
\n \n Operational\n
\n
\n \n Degraded\n
\n
\n \n Outage\n
\n
\n \n Maintenance\n
\n
\n
\n\n \n
\n {services.map((service) => {\n const days = service.days || generate90Days()\n return (\n
\n {/* Service Header Row */}\n
\n
\n
\n {service.icon === 'auth' && }\n {service.icon === 'cdn' && }\n {service.icon === 'database' && }\n {service.icon === 'webhook' && }\n {service.icon === 'ai' && }\n {!service.icon && }\n
\n
\n

{service.name}

\n {service.description && (\n

{service.description}

\n )}\n
\n
\n\n
\n \n {service.uptime}% uptime\n \n \n \n {service.status}\n \n
\n
\n\n {/* 90-day pill bar track */}\n
\n \n {days.map((day, dayIdx) => (\n \n ))}\n
\n\n {/* Time axis labels */}\n
\n 90 days ago\n 100% daily health check baseline\n Today\n
\n
\n
\n )\n })}\n
\n \n \n\n {/* Section 3: Past Incidents Timeline */}\n
\n
\n

Past Incidents & Maintenance

\n

Detailed post-mortems and scheduled infrastructure updates.

\n
\n\n \n {incidents && incidents.length > 0 ? (\n
\n {incidents.map((incident) => (\n \n {/* Timeline Node Dot */}\n \n {incident.resolved ? : }\n
\n\n {/* Incident Header */}\n
\n
\n
\n

{incident.title}

\n \n {incident.resolved ? 'Resolved' : 'Ongoing'}\n \n \n {severityBadgeMap[incident.severity].label}\n \n
\n

{incident.date}

\n
\n\n \n Duration: {incident.duration}\n \n
\n\n {/* Incident Updates Log */}\n
\n {incident.updates.map((update, uIdx) => (\n
\n
\n {update.time}\n ·\n \n {update.status}\n \n
\n

{update.description}

\n
\n ))}\n
\n
\n ))}\n \n ) : (\n
\n \n

No incidents reported

\n

\n All services have maintained 100% operational integrity.\n

\n
\n )}\n \n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/ServiceHealthMatrix.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json" ], "description": "Statuspage and BetterStack style global region latency & infrastructure health matrix with overall operational status banner, 6-region latency grid with sparklines, 90-day core service uptime bars, and incident history timeline.", "categories": [ "devops", "dashboard" ] }