WIP adding a side menu panel to display incident statuses

Author: samejr

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -17,7 +17,7 @@ import {
   ServerStackIcon,
   Squares2X2Icon,
 } from "@heroicons/react/20/solid";
-import { useLocation, useNavigation } from "@remix-run/react";
+import { useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
 import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
@@ -31,6 +31,7 @@ import { type MatchedProject } from "~/hooks/useProject";
 import { type User } from "~/models/user.server";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { type FeedbackType } from "~/routes/resources.feedback";
+import { IncidentStatusPanel } from "~/routes/resources.incidents";
 import { cn } from "~/utils/cn";
 import {
   accountPath,
@@ -279,16 +280,19 @@ export function SideMenu({
           </SideMenuSection>
         </div>
       </div>
-      <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
-        <div className="flex w-full items-center justify-between">
-          <HelpAndAI />
+      <div>
+        <IncidentStatusPanel />
+        <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
+          <div className="flex w-full items-center justify-between">
+            <HelpAndAI />
+          </div>
+          {isFreeUser && (
+            <FreePlanUsage
+              to={v3BillingPath(organization)}
+              percentage={currentPlan.v3Usage.usagePercentage}
+            />
+          )}
         </div>
-        {isFreeUser && (
-          <FreePlanUsage
-            to={v3BillingPath(organization)}
-            percentage={currentPlan.v3Usage.usagePercentage}
-          />
-        )}
       </div>
     </div>
   );

apps/webapp/app/env.server.ts

@@ -1,7 +1,7 @@
-import { SecretStoreOptionsSchema } from "./services/secrets/secretStoreOptionsSchema.server";
 import { z } from "zod";
-import { isValidRegex } from "./utils/regex";
+import { SecretStoreOptionsSchema } from "./services/secrets/secretStoreOptionsSchema.server";
 import { isValidDatabaseUrl } from "./utils/db";
+import { isValidRegex } from "./utils/regex";
 
 const EnvironmentSchema = z.object({
   NODE_ENV: z.union([z.literal("development"), z.literal("production"), z.literal("test")]),
@@ -721,6 +721,10 @@ const EnvironmentSchema = z.object({
 
   // kapa.ai
   KAPA_AI_WEBSITE_ID: z.string().optional(),
+
+  // BetterStack
+  BETTERSTACK_API_KEY: z.string().optional(),
+  BETTERSTACK_STATUS_PAGE_ID: z.string().optional(),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/routes/resources.incidents.tsx

@@ -0,0 +1,75 @@
+import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
+import { json } from "@remix-run/node";
+import { useFetcher } from "@remix-run/react";
+import { useCallback, useEffect } from "react";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { useFeatures } from "~/hooks/useFeatures";
+import { BetterStackClient } from "~/services/betterstack/betterstack.server";
+
+export async function loader() {
+  const client = new BetterStackClient();
+  const result = await client.getIncidents();
+
+  if (!result.success) {
+    return json({ operational: true });
+  }
+
+  return json({
+    operational: result.data.data.attributes.aggregate_state === "operational",
+  });
+}
+
+export function IncidentStatusPanel() {
+  const { isManagedCloud } = useFeatures();
+  if (!isManagedCloud) {
+    return null;
+  }
+
+  const fetcher = useFetcher<typeof loader>();
+
+  const fetchIncidents = useCallback(() => {
+    if (fetcher.state === "idle") {
+      fetcher.load("/resources/incidents");
+    }
+  }, [fetcher]);
+
+  useEffect(() => {
+    fetchIncidents();
+
+    const interval = setInterval(fetchIncidents, 60 * 1000); // 1 minute
+
+    return () => clearInterval(interval);
+  }, [fetchIncidents]);
+
+  const operational = fetcher.data?.operational ?? true;
+
+  return (
+    <>
+      {!operational && (
+        <div className="p-1">
+          <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
+            <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
+              <ExclamationTriangleIcon className="size-4" />
+              <Paragraph variant="small/bright" className="text-warning">
+                Active Incident
+              </Paragraph>
+            </div>
+            <Paragraph variant="extra-small/bright" className="line-clamp-3 text-warning/80">
+              We're currently experiencing service disruptions. Our team is actively working on
+              resolving the issue. Check our status page for real-time updates.
+            </Paragraph>
+            <LinkButton
+              variant="secondary/small"
+              to="https://status.trigger.dev"
+              target="_blank"
+              fullWidth
+            >
+              View Status Page
+            </LinkButton>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

apps/webapp/app/services/betterstack/betterstack.server.ts

@@ -0,0 +1,54 @@
+import { wrapZodFetch } from "@trigger.dev/core/v3/zodfetch";
+import { z } from "zod";
+import { env } from "~/env.server";
+
+const IncidentSchema = z.object({
+  data: z.object({
+    id: z.string(),
+    type: z.string(),
+    attributes: z.object({
+      aggregate_state: z.string(),
+    }),
+  }),
+});
+
+export type Incident = z.infer<typeof IncidentSchema>;
+
+export class BetterStackClient {
+  private readonly baseUrl = "https://uptime.betterstack.com/api/v2";
+
+  async getIncidents() {
+    const apiKey = env.BETTERSTACK_API_KEY;
+    if (!apiKey) {
+      return { success: false as const, error: "BETTERSTACK_API_KEY is not set" };
+    }
+
+    const statusPageId = env.BETTERSTACK_STATUS_PAGE_ID;
+    if (!statusPageId) {
+      return { success: false as const, error: "BETTERSTACK_STATUS_PAGE_ID is not set" };
+    }
+
+    try {
+      return await wrapZodFetch(
+        IncidentSchema,
+        `${this.baseUrl}/status-pages/${statusPageId}`,
+        {
+          headers: {
+            Authorization: `Bearer ${apiKey}`,
+            "Content-Type": "application/json",
+          },
+        },
+        {
+          retry: {
+            maxAttempts: 3,
+            minTimeoutInMs: 1000,
+            maxTimeoutInMs: 5000,
+          },
+        }
+      );
+    } catch (error) {
+      console.error("Failed to fetch incidents from BetterStack:", error);
+      return { success: false as const, error };
+    }
+  }
+}