61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T234f,'use client' import * as React from 'react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { SectionCard } from '@/components/ui/section-card' export type DayStatus = 'up' | 'degraded' | 'down' | 'maintenance' | 'none' export type IncidentSeverity = 'minor' | 'major' | 'critical' export interface ServiceStatus { name: string /** One entry per day, oldest first. Expected length: 90. */ days: DayStatus[] } export interface MonitoringIncident { id: string date: Date title: string description: string duration: string severity: IncidentSeverity resolved?: boolean } export interface StatusMonitoringProps { services?: ServiceStatus[] incidents?: MonitoringIncident[] className?: string } const DAY_COUNT = 90 // Deterministic stubs (no Math.random) so SSR and client markup match exactly. function buildDays(blips: Array<{ ago: number; length: number; status: DayStatus }> = []): DayStatus[] { const days: DayStatus[] = Array.from({ length: DAY_COUNT }, () => 'up') for (const blip of blips) { for (let k = 0; k < blip.length; k++) { const idx = DAY_COUNT - 1 - blip.ago - k if (idx >= 0 && idx < DAY_COUNT) days[idx] = blip.status } } return days } const now = new Date() const daysAgoDate = (d: number) => new Date(now.getTime() - d * 86_400_000) const stubServices: ServiceStatus[] = [ { name: 'API Gateway', days: buildDays([ { ago: 34, length: 1, status: 'down' }, { ago: 33, length: 1, status: 'degraded' }, ]), }, { name: 'Web application', days: buildDays() }, { name: 'Webhooks', days: buildDays([{ ago: 61, length: 1, status: 'degraded' }]) }, ] const stubIncidents: MonitoringIncident[] = [ { id: 'i1', date: daysAgoDate(33), title: 'Elevated error rates on API Gateway', description: 'A bad deploy caused intermittent 502s for roughly forty minutes. Rolled back; error rates recovered.', duration: 'Lasted 42 minutes', severity: 'major', resolved: true, }, { id: 'i2', date: daysAgoDate(34), title: 'API Gateway unavailable', description: 'Provider network maintenance dropped traffic between 02:14 and 02:51 UTC.', duration: 'Lasted 37 minutes', severity: 'critical', resolved: true, }, { id: 'i3', date: daysAgoDate(61), title: 'Delayed webhook deliveries', description: 'A queue backlog delayed deliveries by up to six minutes. The backlog drained on its own.', duration: 'Lasted 1 hour, 12 minutes', severity: 'minor', resolved: true, }, ] type OverallState = 'operational' | 'degraded' | 'outage' const bannerMeta: Record = { operational: { label: 'All systems operational', box: 'border-success/25 bg-success/10', text: 'text-success', dot: 'bg-success', }, degraded: { label: 'Degraded performance', box: 'border-warning/25 bg-warning/10', text: 'text-warning', dot: 'bg-warning', }, outage: { label: 'Partial outage', box: 'border-destructive/25 bg-destructive/10', text: 'text-destructive', dot: 'bg-destructive', }, } const dayClass: Record = { up: 'bg-success', degraded: 'bg-warning', down: 'bg-destructive', maintenance: 'bg-info', none: 'bg-muted', } const dayLabel: Record = { up: 'Operational', degraded: 'Degraded', down: 'Outage', maintenance: 'Maintenance', none: 'No data', } // Built once per module load so 90 segments × N services never rebuild Date objects during render. const dayStamps = Array.from({ length: DAY_COUNT }, (_, i) => daysAgoDate(DAY_COUNT - 1 - i).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }), ) const updatedStamp = now.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) function tooltipFor(days: DayStatus[], i: number): string { return `${dayStamps[i]} · ${dayLabel[days[i]]}` } function uptimePct(days: DayStatus[]): string { const counted = days.filter((d) => d !== 'none') if (counted.length === 0) return '—' const up = counted.filter((d) => d === 'up').length return `${((up / counted.length) * 100).toFixed(2)}%` } function formatDay(d: Date): string { return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) } const severityVariant: Record = { minor: 'info', major: 'warning', critical: 'destructive', } export function StatusMonitoring({ services, incidents, className }: StatusMonitoringProps) { const list = services ?? stubServices const incidentList = [...(incidents ?? stubIncidents)].sort((a, b) => b.date.getTime() - a.date.getTime()) const latest = list.map((s) => [...s.days].reverse().find((d) => d !== 'none')) const overall: OverallState = latest.includes('down') ? 'outage' : latest.includes('degraded') ? 'degraded' : 'operational' const banner = bannerMeta[overall] return (

{banner.label}

Updated {updatedStamp}

{(Object.keys(dayLabel) as DayStatus[]).map((status) => (

{dayLabel[status]}

))} } >

{s.name}

{uptimePct(s.days)}

{s.days.map((d, di) => ( ))}

90 days ago Today

{incidentList.length > 0 ? (

{formatDay(inc.date)}

{inc.resolved ? 'Resolved' : inc.severity}
{inc.title}
{inc.duration}

{inc.description}

) : (

No incidents reported

Every day in this window has been quiet.

)}

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/section-card.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/status-monitoring/StatusMonitoring.tsx","content":"$63","type":"registry:block","target":"~/components/blocks/status-monitoring/StatusMonitoring.tsx"}],"className":"h-[70svh] min-h-80"}]]}]