{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "service-health-matrix", "title": "Service Health Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/service-health-matrix/service-health-matrix.component.ts", "content": "// Statuspage / BetterStack style global region latency & infrastructure health matrix:\n// overall operational status banner, 6-region latency grid with SVG sparklines, 90-day\n// core service uptime bars, and an incident history timeline. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Activity,\n AlertTriangle,\n Bell,\n Check,\n CheckCircle2,\n Clock,\n Cpu,\n Database,\n Globe,\n LucideAngularModule,\n RefreshCw,\n Server,\n ShieldCheck,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent, type BadgeVariant } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\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\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\ninterface BannerConfig {\n title: string\n badge: string\n badgeVariant: 'success' | 'warning' | 'destructive' | 'info'\n containerClass: string\n dotClass: string\n textClass: string\n}\n\nconst statusBannerConfig: Record = {\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\nconst severityBadgeMap: Record = {\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\ninterface Sparkline {\n path: string\n area: string\n lastPoint: { x: number; y: number }\n}\n\nfunction buildSparkline(history: number[] = [24, 24, 24, 24]): Sparkline {\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 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 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 const lastPoint = points[points.length - 1]\n const area = `${path} L 100,32 L 0,32 Z`\n return { path, area, lastPoint }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-service-health-matrix, [ui-service-health-matrix]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n ],\n template: `\n
\n \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 @if (!isSubscribed()) {\n \n \n Subscribe to Updates\n \n } @else {\n \n \n Subscribed\n \n }\n
\n
\n
\n\n \n @if (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 \n \n
\n
\n }\n\n \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 @for (region of regions(); track region.id) {\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
\n
\n {{ region.latency }}ms\n ping\n
\n
\n \n {{ latencyLabel(region.latency) }}\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n\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
\n
\n
\n

Core Services Component Health

\n

90-day daily uptime history and service availability breakdown.

\n
\n\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 @for (service of services(); track service.id) {\n
\n
\n
\n \n @switch (service.icon) {\n @case ('auth') {\n \n }\n @case ('cdn') {\n \n }\n @case ('database') {\n \n }\n @case ('webhook') {\n \n }\n @case ('ai') {\n \n }\n @default {\n \n }\n }\n
\n
\n

{{ service.name }}

\n @if (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
\n \n @for (day of daysFor(service); track $index) {\n \n }\n
\n\n
\n 90 days ago\n 100% daily health check baseline\n Today\n
\n
\n
\n }\n
\n \n \n\n \n
\n
\n

Past Incidents & Maintenance

\n

Detailed post-mortems and scheduled infrastructure updates.

\n
\n\n
\n @if (incidents().length > 0) {\n
\n @for (incident of incidents(); track incident.id) {\n
\n \n @if (incident.resolved) {\n \n } @else {\n \n }\n
\n\n
\n
\n
\n

{{ incident.title }}

\n \n {{ incident.resolved ? 'Resolved' : 'Ongoing' }}\n \n \n {{ severityBadge(incident.severity).label }}\n \n
\n

{{ incident.date }}

\n
\n\n \n Duration: {{ incident.duration }}\n \n
\n\n
\n @for (update of incident.updates; track $index) {\n
\n
\n {{ update.time }}\n ·\n \n {{ update.status }}\n \n
\n

\n {{ update.description }}\n

\n
\n }\n
\n
\n }\n
\n } @else {\n
\n \n

No incidents reported

\n

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

\n
\n }\n
\n \n \n `,\n})\nexport class UiServiceHealthMatrixComponent {\n protected readonly cn = cn\n protected readonly Activity = Activity\n protected readonly AlertTriangle = AlertTriangle\n protected readonly Bell = Bell\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Cpu = Cpu\n protected readonly Database = Database\n protected readonly Globe = Globe\n protected readonly RefreshCw = RefreshCw\n protected readonly Server = Server\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Zap = Zap\n\n @Input('systemStatus') set systemStatusInput(v: RegionStatus | undefined) {\n if (v) this.systemStatus.set(v)\n }\n @Input('systemUptime') set systemUptimeInput(v: string | undefined) {\n if (v !== undefined) this.systemUptime.set(v)\n }\n @Input('lastUpdated') set lastUpdatedInput(v: string | undefined) {\n if (v !== undefined) {\n this.lastUpdated.set(v)\n this.currentUpdatedText.set(v)\n }\n }\n @Input('regions') set regionsInput(v: RegionHealth[] | undefined) {\n if (v)\n this.regions.set(v.map((r) => ({ ...r, latencyHistory: r.latencyHistory ? [...r.latencyHistory] : undefined })))\n }\n @Input('services') set servicesInput(v: ServiceHealthItem[] | undefined) {\n if (v) this.services.set(v.map((s) => ({ ...s, days: s.days ? [...s.days] : undefined })))\n }\n @Input('incidents') set incidentsInput(v: IncidentRecord[] | undefined) {\n if (v) this.incidents.set(v.map((i) => ({ ...i, updates: i.updates.map((u) => ({ ...u })) })))\n }\n @Input('class') className?: string\n\n readonly systemStatus = signal('operational')\n readonly systemUptime = signal('99.99%')\n readonly lastUpdated = signal('Updated 30s ago')\n readonly regions = signal(\n defaultRegions.map((r) => ({ ...r, latencyHistory: [...(r.latencyHistory ?? [])] })),\n )\n readonly services = signal(defaultServices.map((s) => ({ ...s, days: [...(s.days ?? [])] })))\n readonly incidents = signal(\n defaultIncidents.map((i) => ({ ...i, updates: i.updates.map((u) => ({ ...u })) })),\n )\n\n readonly isRefreshing = signal(false)\n readonly isSubscribed = signal(false)\n readonly showSubscribeInput = signal(false)\n readonly emailInput = signal('')\n readonly currentUpdatedText = signal('Updated 30s ago')\n\n private refreshTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.refreshTimer))\n }\n\n readonly currentBanner = computed(\n () => statusBannerConfig[this.systemStatus()] ?? statusBannerConfig.operational,\n )\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n handleRefresh(): void {\n this.isRefreshing.set(true)\n clearTimeout(this.refreshTimer)\n this.refreshTimer = setTimeout(() => {\n this.isRefreshing.set(false)\n this.currentUpdatedText.set('Updated just now')\n }, 400)\n }\n\n handleSubscribeSubmit(): void {\n if (this.emailInput().trim().length > 0) {\n this.isSubscribed.set(true)\n this.showSubscribeInput.set(false)\n this.emailInput.set('')\n }\n }\n\n daysFor(service: ServiceHealthItem): DayStatus[] {\n return service.days ?? generate90Days()\n }\n\n dayClass(day: DayStatus): string {\n return dayClassMap[day]\n }\n\n dayLabel(day: DayStatus): string {\n return dayLabelMap[day]\n }\n\n severityBadge(severity: IncidentSeverity): { variant: BadgeVariant; label: string } {\n return severityBadgeMap[severity]\n }\n\n spark(region: RegionHealth): Sparkline {\n return buildSparkline(region.latencyHistory)\n }\n\n sparkColor(status: RegionStatus): string {\n return status === 'operational' ? 'var(--color-emerald-500, #10b981)' : 'var(--color-amber-500, #f59e0b)'\n }\n\n regionBadgeVariant(status: RegionStatus): BadgeVariant {\n return status === 'operational' ? 'success' : status === 'degraded' ? 'warning' : 'destructive'\n }\n\n serviceBadgeVariant(status: RegionStatus): BadgeVariant {\n return status === 'operational' ? 'success' : status === 'degraded' ? 'warning' : 'destructive'\n }\n\n regionDotClass(status: RegionStatus): string {\n return status === 'operational' ? 'bg-success' : status === 'degraded' ? 'bg-warning' : 'bg-destructive'\n }\n\n latencyToneClass(latency: number): string {\n return latency < 30 ? 'text-success' : latency < 50 ? 'text-info' : 'text-warning'\n }\n\n latencyLabel(latency: number): string {\n return latency < 30 ? 'Optimal' : latency < 50 ? 'Normal' : 'Elevated'\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/service-health-matrix/service-health-matrix.component.ts" }, { "path": "packages/registry-angular/blocks/service-health-matrix/index.ts", "content": "export {\n UiServiceHealthMatrixComponent,\n type RegionStatus,\n type DayStatus,\n type IncidentSeverity,\n type RegionHealth,\n type ServiceHealthItem,\n type IncidentUpdate,\n type IncidentRecord,\n} from './service-health-matrix.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/service-health-matrix/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/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" ] }