feat: integrate components from external services

ci: apply automated fixes

Author: finxol

apps/web/src/app/(landing)/status/[id]/page.tsx

@@ -82,6 +82,10 @@ export default async function Page(args: { params: Promise<RouteParams> }) {
       days: HISTORY_DAYS,
     }),
     api.externalService.incidents.prefetch({ slug: service.slug }),
+    api.externalService.components.prefetch({
+      slug: service.slug,
+      days: HISTORY_DAYS,
+    }),
   ]);
 
   return (

apps/web/src/app/(landing)/status/[id]/service-components.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ExternalServiceComponents } from "@openstatus/ui/components/blocks/external-service-components";
+
+import { api } from "@/trpc/rq-client";
+
+export function ServiceComponents({
+  slug,
+  serviceName,
+  days,
+}: {
+  slug: string;
+  serviceName: string;
+  days: number;
+}) {
+  const [data] = api.externalService.components.useSuspenseQuery({
+    slug,
+    days,
+  });
+
+  if (!data.supported || data.components.length === 0) return null;
+
+  return (
+    <>
+      <h2>{serviceName} components</h2>
+      <div className="not-prose">
+        <ExternalServiceComponents components={data.components} days={days} />
+      </div>
+    </>
+  );
+}

apps/web/src/app/(landing)/status/[id]/service-detail.tsx

@@ -1,14 +1,15 @@
 "use client";
 
+import { ExternalServicePill } from "@openstatus/ui/components/blocks/external-service-pill";
 import { Suspense } from "react";
 
 import { BASE_URL } from "@/lib/metadata/shared-metadata";
 import { api } from "@/trpc/rq-client";
 
-import { ExternalServicePill } from "../external-service-pill";
 import { formatRelative, getStatusAnswer, isStale } from "../utils";
 import { HistoryBars } from "./history-bars";
 import { Incidents } from "./incidents";
+import { ServiceComponents } from "./service-components";
 
 function jsonLd(args: {
   serviceName: string;
@@ -139,6 +140,14 @@ export function ServiceDetail({ slug, days }: { slug: string; days: number }) {
         <HistoryBars daily={history} days={days} />
       </div>
 
+      <Suspense fallback={null}>
+        <ServiceComponents
+          slug={service.slug}
+          serviceName={service.name}
+          days={days}
+        />
+      </Suspense>
+
       <h2>{service.name} recent incidents</h2>
       <Suspense
         fallback={

apps/web/src/app/(landing)/status/external-status-grid.tsx

@@ -3,11 +3,12 @@
 import { useQueryState } from "nuqs";
 import { useMemo } from "react";
 
+import { ExternalServicePill } from "@openstatus/ui/components/blocks/external-service-pill";
+
 import { Grid } from "@/content/mdx-components/grid";
 import { api } from "@/trpc/rq-client";
 
 import { ContentBoxLink } from "../content-box";
-import { ExternalServicePill } from "./external-service-pill";
 import { filterServices } from "./filter-services";
 import { qParser } from "./search-params";
 

apps/web/src/app/api/og/external-service/route.tsx

@@ -19,8 +19,8 @@ const INDEX_TITLE = "External Status";
 const INDEX_DESCRIPTION =
   "Check if your external providers are working properly";
 
-// Mirrors getPillStyle in (landing)/status/external-service-pill.tsx so the OG
-// label matches the on-page pill.
+// Mirrors getPillStyle in @openstatus/ui external-service-pill so the OG label
+// matches the on-page pill.
 function getStatus(args: { indicator: string; status: string }): {
   label: string;
   bg: string;

apps/workflows/src/cron/external-status.ts

@@ -1,12 +1,17 @@
 import { getLogger } from "@logtape/logtape";
 import { listExternalServices } from "@openstatus/services/external-service";
 import type { ExternalServiceRow } from "@openstatus/services/external-service";
+import {
+  type UpsertExternalComponentInput,
+  upsertExternalComponentsForService,
+} from "@openstatus/services/external-service-component";
 import {
   type UpsertExternalIncidentInput,
   upsertExternalIncidentsForService,
 } from "@openstatus/services/external-service-incident";
 import { FetchError, fetchers } from "@openstatus/status-fetcher";
 import type {
+  NormalizedComponent,
   NormalizedIncident,
   StatusFetcher,
   StatusPageEntry,
@@ -24,7 +29,7 @@ const logger = getLogger(["workflow", "external-status"]);
 
 const tb = new OSTinybird(env().TINY_BIRD_API_KEY);
 
-// 10 per phase × 2 phases = peak 20 concurrent HTTP requests upstream; keeps
+// 10 per phase × 3 phases = peak 30 concurrent HTTP requests upstream; keeps
 // Atlassian/Incident.io CDNs comfortable while still parallelising heavily.
 const PHASE_CONCURRENCY = 10;
 
@@ -84,6 +89,28 @@ function toUpsertInput(
   };
 }
 
+type ComponentSnapshot = {
+  component_id: string;
+  external_service_id: number;
+  indicator: string;
+  status: string;
+  fetched_at: number;
+};
+
+function toComponentUpsertInput(
+  component: NormalizedComponent,
+): UpsertExternalComponentInput {
+  return {
+    upstreamComponentId: component.upstreamComponentId,
+    name: component.name,
+    description: component.description,
+    groupName: component.groupName,
+    position: component.position,
+    indicator: component.severity,
+    status: component.status,
+  };
+}
+
 type PhaseCounts = {
   successCount: number;
   failureCount: number;
@@ -101,6 +128,11 @@ type IncidentPhaseOutcome =
   | { kind: "skip"; slug: string }
   | { kind: "fail"; slug: string; reason: string };
 
+type ComponentPhaseOutcome =
+  | { kind: "ok"; slug: string; snapshots: ComponentSnapshot[] }
+  | { kind: "skip"; slug: string }
+  | { kind: "fail"; slug: string; reason: string };
+
 type Triplet = {
   row: ExternalServiceRow;
   entry: StatusPageEntry;
@@ -193,6 +225,73 @@ function runIncidentPhase(
   );
 }
 
+function runComponentPhase(
+  triplets: Triplet[],
+  tickStartedAt: Date,
+  fetchedAt: number,
+): Effect.Effect<ComponentPhaseOutcome[]> {
+  return Effect.forEach(
+    triplets,
+    ({ row, entry, fetcher }) => {
+      if (!fetcher || !fetcher.fetchComponents) {
+        return Effect.succeed<ComponentPhaseOutcome>({
+          kind: "skip",
+          slug: entry.id,
+        });
+      }
+      return fetcher.fetchComponents(entry).pipe(
+        Effect.flatMap((components) =>
+          Effect.tryPromise({
+            try: () =>
+              upsertExternalComponentsForService({
+                ctx: { db },
+                externalServiceId: row.id,
+                components: components.map(toComponentUpsertInput),
+                now: tickStartedAt,
+              }),
+            catch: (e) =>
+              new FetchError({
+                url: entry.status_page_url,
+                fetcherName: fetcher.name,
+                entryId: entry.id,
+                cause: e instanceof Error ? e : new Error(String(e)),
+              }),
+          }).pipe(
+            Effect.map((result): ComponentPhaseOutcome => {
+              // History rows key on our PK, so the upstream→PK map from the
+              // upsert turns each normalized component into a snapshot.
+              const byUpstream = new Map(
+                components.map((c) => [c.upstreamComponentId, c]),
+              );
+              const snapshots: ComponentSnapshot[] = [];
+              for (const upserted of result.upserted) {
+                const c = byUpstream.get(upserted.upstreamComponentId);
+                if (!c) continue;
+                snapshots.push({
+                  component_id: String(upserted.id),
+                  external_service_id: row.id,
+                  indicator: c.severity,
+                  status: c.status,
+                  fetched_at: fetchedAt,
+                });
+              }
+              return { kind: "ok", slug: entry.id, snapshots };
+            }),
+          ),
+        ),
+        Effect.catchAll((err: FetchError) =>
+          Effect.succeed<ComponentPhaseOutcome>({
+            kind: "fail",
+            slug: entry.id,
+            reason: err.message,
+          }),
+        ),
+      );
+    },
+    { concurrency: PHASE_CONCURRENCY },
+  );
+}
+
 function summarizeStatus(outcomes: StatusPhaseOutcome[]): {
   counts: PhaseCounts;
   snapshots: Snapshot[];
@@ -254,6 +353,39 @@ function summarizeIncidents(outcomes: IncidentPhaseOutcome[]): PhaseCounts {
   };
 }
 
+function summarizeComponents(outcomes: ComponentPhaseOutcome[]): {
+  counts: PhaseCounts;
+  snapshots: ComponentSnapshot[];
+} {
+  const snapshots: ComponentSnapshot[] = [];
+  let successCount = 0;
+  let failureCount = 0;
+  let skippedCount = 0;
+  for (const o of outcomes) {
+    if (o.kind === "ok") {
+      successCount++;
+      snapshots.push(...o.snapshots);
+    } else if (o.kind === "skip") {
+      skippedCount++;
+    } else {
+      failureCount++;
+      logger.warn(
+        "external-status components: failed for slug={slug}: {reason}",
+        { slug: o.slug, reason: o.reason },
+      );
+    }
+  }
+  return {
+    counts: {
+      successCount,
+      failureCount,
+      skippedCount,
+      total: outcomes.length,
+    },
+    snapshots,
+  };
+}
+
 function buildTriplets(services: ExternalServiceRow[]): Triplet[] {
   return services.map((row) => {
     const entry = toStatusPageEntry(row);
@@ -265,30 +397,37 @@ function buildTriplets(services: ExternalServiceRow[]): Triplet[] {
 export async function runExternalStatusTick(): Promise<{
   status: PhaseCounts;
   incidents: PhaseCounts;
+  components: PhaseCounts;
 }> {
   const services = await listExternalServices({ ctx: { db } });
 
   const triplets = buildTriplets(services);
   const tickStartedAt = new Date();
 
-  const [statusOutcomes, incidentOutcomes] = await Effect.runPromise(
-    Effect.all(
-      [
-        runStatusPhase(triplets, tickStartedAt.getTime()),
-        runIncidentPhase(triplets, tickStartedAt),
-      ],
-      { concurrency: "unbounded" },
-    ),
-  );
+  const [statusOutcomes, incidentOutcomes, componentOutcomes] =
+    await Effect.runPromise(
+      Effect.all(
+        [
+          runStatusPhase(triplets, tickStartedAt.getTime()),
+          runIncidentPhase(triplets, tickStartedAt),
+          runComponentPhase(triplets, tickStartedAt, tickStartedAt.getTime()),
+        ],
+        { concurrency: "unbounded" },
+      ),
+    );
 
   const status = summarizeStatus(statusOutcomes);
   const incidents = summarizeIncidents(incidentOutcomes);
+  const components = summarizeComponents(componentOutcomes);
 
   if (status.snapshots.length > 0) {
     await tb.publishExternalStatus(status.snapshots);
   }
+  if (components.snapshots.length > 0) {
+    await tb.publishExternalStatusComponent(components.snapshots);
+  }
 
-  return { status: status.counts, incidents };
+  return { status: status.counts, incidents, components: components.counts };
 }
 
 export async function handleExternalStatusCron(c: Context) {
@@ -309,7 +448,7 @@ export async function handleExternalStatusCron(c: Context) {
       Effect.tap((res) =>
         Effect.sync(() => {
           logger.info(
-            "external-status tick complete: status={statusOk}/{statusTotal} ({statusFail} failures, {statusSkip} skipped), incidents={incOk}/{incTotal} ({incFail} failures, {incSkip} skipped)",
+            "external-status tick complete: status={statusOk}/{statusTotal} ({statusFail} failures, {statusSkip} skipped), incidents={incOk}/{incTotal} ({incFail} failures, {incSkip} skipped), components={compOk}/{compTotal} ({compFail} failures, {compSkip} skipped)",
             {
               statusOk: res.status.successCount,
               statusTotal: res.status.total,
@@ -319,6 +458,10 @@ export async function handleExternalStatusCron(c: Context) {
               incTotal: res.incidents.total,
               incFail: res.incidents.failureCount,
               incSkip: res.incidents.skippedCount,
+              compOk: res.components.successCount,
+              compTotal: res.components.total,
+              compFail: res.components.failureCount,
+              compSkip: res.components.skippedCount,
             },
           );
           void cronCompleted();