use incident io status page

Co-authored-by: Jakub Dobry <dobrac@users.noreply.github.com>

Author: cursoragent

.env.example

@@ -68,8 +68,10 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
 # NEXT_PUBLIC_INCLUDE_REPORT_ISSUE=0
 
 ### Enable dashboard status indicator feature: set to 1 to enable
-### When enabled, the E2B status is read from https://status.e2b.dev
+### When enabled, the E2B status is read from the incident.io widget API
 # NEXT_PUBLIC_INCLUDE_STATUS_INDICATOR=0
+# NEXT_PUBLIC_STATUS_PAGE_URL=https://status.e2b.dev
+# NEXT_PUBLIC_STATUS_PAGE_WIDGET_URL=https://status.e2b.dev/api/widget
 
 ### Set to 1 to use mock data
 # NEXT_PUBLIC_MOCK_DATA=0

src/features/dashboard/layouts/status-indicator.server.tsx

@@ -4,41 +4,25 @@ import { cacheLife } from 'next/cache'
 import Link from 'next/link'
 import { l } from '@/core/shared/clients/logger/logger'
 import { LiveDot } from '@/ui/live'
+import {
+  type AggregateState,
+  getStatusPageStateFromWidget,
+  getStatusPageUrl,
+  getStatusPageWidgetUrl,
+  type IncidentIOWidgetResponse,
+} from './status-indicator'
 
-const STATUS_PAGE_URL = 'https://status.e2b.dev'
-const STATUS_PAGE_INDEX_URL = `${STATUS_PAGE_URL}/index.json`
+export const STATUS_PAGE_URL = getStatusPageUrl()
+const STATUS_PAGE_WIDGET_URL = getStatusPageWidgetUrl(STATUS_PAGE_URL)
 const STATUS_PAGE_FETCH_TIMEOUT_MS = 5_000
 const STATUS_PAGE_CACHE_SECONDS = 300
 
-type AggregateState =
-  | 'operational'
-  | 'degraded'
-  | 'downtime'
-  | 'maintenance'
-  | 'unknown'
-
-interface StatusPageIndexResponse {
-  data?: {
-    attributes?: {
-      aggregate_state?: string
-    }
-  }
-}
-
 interface StatusUI {
   label: string
   dotCircleClassName: string
   dotClassName: string
 }
 
-function toAggregateState(value: string | undefined): AggregateState {
-  if (value === 'operational') return 'operational'
-  if (value === 'degraded') return 'degraded'
-  if (value === 'downtime') return 'downtime'
-  if (value === 'maintenance') return 'maintenance'
-  return 'unknown'
-}
-
 function getStatusUI(state: AggregateState): StatusUI {
   switch (state) {
     case 'operational':
@@ -83,7 +67,7 @@ async function getStatusPageState(): Promise<AggregateState> {
   })
 
   try {
-    const response = await fetch(STATUS_PAGE_INDEX_URL, {
+    const response = await fetch(STATUS_PAGE_WIDGET_URL, {
       cache: 'force-cache',
       next: { revalidate: STATUS_PAGE_CACHE_SECONDS },
       signal: AbortSignal.timeout(STATUS_PAGE_FETCH_TIMEOUT_MS),
@@ -101,8 +85,8 @@ async function getStatusPageState(): Promise<AggregateState> {
       return 'unknown'
     }
 
-    const data = (await response.json()) as StatusPageIndexResponse
-    return toAggregateState(data.data?.attributes?.aggregate_state)
+    const data = (await response.json()) as IncidentIOWidgetResponse
+    return getStatusPageStateFromWidget(data)
   } catch {
     return 'unknown'
   }

src/features/dashboard/layouts/status-indicator.ts

@@ -0,0 +1,66 @@
+export type AggregateState =
+  | 'operational'
+  | 'degraded'
+  | 'downtime'
+  | 'maintenance'
+  | 'unknown'
+
+export interface IncidentIOWidgetEvent {
+  affected_components?: Array<{
+    status?: string
+  }>
+}
+
+export interface IncidentIOWidgetResponse {
+  ongoing_incidents?: IncidentIOWidgetEvent[]
+  in_progress_maintenances?: IncidentIOWidgetEvent[]
+  scheduled_maintenances?: IncidentIOWidgetEvent[]
+}
+
+export function getStatusPageUrl() {
+  return (process.env.NEXT_PUBLIC_STATUS_PAGE_URL ?? 'https://status.e2b.dev')
+    .trim()
+    .replace(/\/+$/, '')
+}
+
+export function getStatusPageWidgetUrl(statusPageUrl: string) {
+  const configuredWidgetUrl =
+    process.env.NEXT_PUBLIC_STATUS_PAGE_WIDGET_URL?.trim()
+
+  if (configuredWidgetUrl) return configuredWidgetUrl
+
+  return `${statusPageUrl}/api/widget`
+}
+
+function hasEvents(events: IncidentIOWidgetEvent[] | undefined) {
+  return Array.isArray(events) && events.length > 0
+}
+
+function getWorstComponentState(
+  events: IncidentIOWidgetEvent[] | undefined
+): AggregateState | undefined {
+  const componentStatuses =
+    events?.flatMap(
+      (event) =>
+        event.affected_components?.map((component) => component.status) ?? []
+    ) ?? []
+
+  if (componentStatuses.includes('full_outage')) return 'downtime'
+  if (componentStatuses.includes('partial_outage')) return 'degraded'
+  if (componentStatuses.includes('degraded_performance')) return 'degraded'
+  if (componentStatuses.includes('under_maintenance')) return 'maintenance'
+
+  return undefined
+}
+
+export function getStatusPageStateFromWidget(
+  data: IncidentIOWidgetResponse
+): AggregateState {
+  if (hasEvents(data.ongoing_incidents)) {
+    return getWorstComponentState(data.ongoing_incidents) ?? 'degraded'
+  }
+
+  if (hasEvents(data.in_progress_maintenances)) return 'maintenance'
+
+  return 'operational'
+}

src/lib/env.ts

@@ -55,6 +55,8 @@ export const clientSchema = z.object({
   NEXT_PUBLIC_INCLUDE_ARGUS: z.string().optional(),
   NEXT_PUBLIC_INCLUDE_REPORT_ISSUE: z.string().optional(),
   NEXT_PUBLIC_INCLUDE_STATUS_INDICATOR: z.string().optional(),
+  NEXT_PUBLIC_STATUS_PAGE_URL: z.url().optional(),
+  NEXT_PUBLIC_STATUS_PAGE_WIDGET_URL: z.url().optional(),
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().optional(),
   NEXT_PUBLIC_SCAN: z.string().optional(),
   NEXT_PUBLIC_MOCK_DATA: z.string().optional(),

tests/unit/status-indicator.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import { getStatusPageStateFromWidget } from '@/features/dashboard/layouts/status-indicator'
+
+describe('status-indicator', () => {
+  it('should report operational when widget has no active events', () => {
+    expect(
+      getStatusPageStateFromWidget({
+        ongoing_incidents: [],
+        in_progress_maintenances: [],
+        scheduled_maintenances: [
+          {
+            affected_components: [{ status: 'under_maintenance' }],
+          },
+        ],
+      })
+    ).toBe('operational')
+  })
+
+  it('should report maintenance for in-progress maintenances', () => {
+    expect(
+      getStatusPageStateFromWidget({
+        ongoing_incidents: [],
+        in_progress_maintenances: [{}],
+      })
+    ).toBe('maintenance')
+  })
+
+  it('should report downtime for full outage incidents', () => {
+    expect(
+      getStatusPageStateFromWidget({
+        ongoing_incidents: [
+          {
+            affected_components: [
+              { status: 'degraded_performance' },
+              { status: 'full_outage' },
+            ],
+          },
+        ],
+      })
+    ).toBe('downtime')
+  })
+
+  it('should report degraded for partial outage incidents', () => {
+    expect(
+      getStatusPageStateFromWidget({
+        ongoing_incidents: [
+          {
+            affected_components: [{ status: 'partial_outage' }],
+          },
+        ],
+      })
+    ).toBe('degraded')
+  })
+
+  it('should report degraded when incident has no component status', () => {
+    expect(
+      getStatusPageStateFromWidget({
+        ongoing_incidents: [{}],
+      })
+    ).toBe('degraded')
+  })
+})