dashboard: add system status notifications to Header (#44269)

Adds a status widget that displays any ongoing incidents in the dashboard header. For the Header, it will only render if there's an incident, but the underlying component supports rendering green statuses for other uses cases (like in the upcoming "Deployment disconnected" overlay

GitOrigin-RevId: 53b8c0aac46afd33d85690d33b4b183229293e02

Author: atrakh

npm-packages/dashboard-common/src/features/health/components/ChartForFunctionRate.tsx

@@ -20,6 +20,7 @@ import { DeploymentTimes } from "@common/features/health/components/DeploymentTi
 import { Button } from "@ui/Button";
 import { FunctionNameOption } from "@common/elements/FunctionNameOption";
 import { LoadingTransition } from "@ui/Loading";
+import { Spinner } from "@ui/Spinner";
 
 export function ChartForFunctionRate({
   chartData,
@@ -49,8 +50,14 @@ export function ChartForFunctionRate({
       <LoadingTransition
         loadingProps={{
           fullHeight: false,
-          className: "h-[9rem] w-full",
+          className: "h-full w-full",
+          shimmer: false,
         }}
+        loadingState={
+          <div className="flex h-full w-full items-center justify-center">
+            <Spinner className="size-12" />
+          </div>
+        }
       >
         {chartData === null ? (
           <div className="flex h-[11.25rem] w-full items-center justify-center px-12 text-center text-sm text-content-secondary">

npm-packages/dashboard/src/api/offlineNotification.tsx

@@ -30,7 +30,7 @@ export const createOfflineToastContent = () => (
  * @param error Optional error to capture in Sentry
  */
 export const showOfflineToast = (error?: Error) => {
-  toast("error", createOfflineToastContent(), OFFLINE_TOAST_ID);
+  toast("error", createOfflineToastContent(), OFFLINE_TOAST_ID, false);
 
   // Log the error to Sentry if provided
   if (error) {

npm-packages/dashboard/src/components/header/Header/Header.tsx

@@ -9,6 +9,8 @@ import { AskAI } from "elements/AskAI";
 import { DeploymentDisplay } from "elements/DeploymentDisplay";
 import { useCurrentProject } from "api/projects";
 import { User } from "@workos-inc/node";
+import { ConvexStatusWidget } from "lib/ConvexStatusWidget";
+import { useConvexStatus } from "hooks/useConvexStatus";
 import { UserMenu } from "../UserMenu/UserMenu";
 
 type HeaderProps = {
@@ -17,6 +19,21 @@ type HeaderProps = {
   user: User | null;
 };
 
+function ConvexStatus() {
+  const { status } = useConvexStatus();
+
+  // Only show if there are issues (not operational) or still loading
+  if (status && status.indicator === "none") {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center px-2.5">
+      <ConvexStatusWidget status={status} />
+    </div>
+  );
+}
+
 function Support() {
   const [openState, setOpenState] = useSupportFormOpen();
   return (
@@ -67,7 +84,8 @@ export function Header({ children, logoLink = "/", user }: HeaderProps) {
       </div>
       {project && <DeploymentDisplay project={project} />}
       <div className="flex items-center bg-background-secondary px-2">
-        <div className="flex">
+        <div className="flex items-center">
+          <ConvexStatus />
           <AskAI />
           <Support />
         </div>

npm-packages/dashboard/src/hooks/useConvexStatus.tsx

@@ -0,0 +1,43 @@
+import useSWR from "swr";
+import type {
+  ConvexStatus,
+  ConvexStatusIndicator,
+} from "lib/ConvexStatusWidget";
+
+export type { ConvexStatus, ConvexStatusIndicator };
+
+interface ConvexStatusResponse {
+  status: {
+    indicator: ConvexStatusIndicator;
+    description: string;
+  };
+}
+
+/**
+ * Hook to poll the Convex status page API and get current status information.
+ * Polls every 30 seconds and on window focus (throttled to 30 seconds).
+ */
+export function useConvexStatus(): {
+  status: ConvexStatus | undefined;
+} {
+  const { data } = useSWR<ConvexStatusResponse>("/api/status", {
+    refreshInterval: 1000 * 30,
+    focusThrottleInterval: 1000 * 30,
+    shouldRetryOnError: false,
+    fetcher: convexStatusFetcher,
+  });
+
+  return {
+    status: data?.status,
+  };
+}
+
+const convexStatusFetcher = async (
+  url: string,
+): Promise<ConvexStatusResponse> => {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error("Failed to fetch Convex status information.");
+  }
+  return res.json();
+};

npm-packages/dashboard/src/lib/ConvexStatusWidget.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { ConvexStatusWidget } from "./ConvexStatusWidget";
+
+const meta: Meta<typeof ConvexStatusWidget> = {
+  component: ConvexStatusWidget,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllOperational: Story = {
+  args: {
+    status: {
+      indicator: "none",
+      description: "All Systems Operational",
+    },
+  },
+};
+
+export const MinorIssues: Story = {
+  args: {
+    status: {
+      indicator: "minor",
+      description: "Minor Service Disruption",
+    },
+  },
+};
+
+export const MajorOutage: Story = {
+  args: {
+    status: {
+      indicator: "major",
+      description: "Major Service Outage",
+    },
+  },
+};
+
+export const CriticalOutage: Story = {
+  args: {
+    status: {
+      indicator: "critical",
+      description: "Critical System Failure",
+    },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    status: undefined,
+  },
+};

npm-packages/dashboard/src/lib/ConvexStatusWidget.tsx

@@ -0,0 +1,62 @@
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import { cn } from "@ui/cn";
+import { Spinner } from "@ui/Spinner";
+
+export type ConvexStatusIndicator = "none" | "minor" | "major" | "critical";
+
+export interface ConvexStatus {
+  indicator: ConvexStatusIndicator;
+  description: string;
+}
+
+const STATUS_PAGE_URL = "https://status.convex.dev";
+
+export function ConvexStatusWidget({ status }: { status?: ConvexStatus }) {
+  return (
+    <a
+      href={STATUS_PAGE_URL}
+      target="_blank"
+      rel="noreferrer"
+      className={cn(
+        "flex items-center gap-2 text-sm hover:underline",
+        !status && "animate-fadeInFromLoading",
+      )}
+    >
+      {!status ? (
+        <>
+          <div>
+            <Spinner className="animate-fadeInFromLoading" />
+          </div>
+          <span className="animate-fadeInFromLoading text-content-secondary">
+            Loading system status...
+          </span>
+          <ExternalLinkIcon className="animate-fadeInFromLoading" />
+        </>
+      ) : (
+        <>
+          <span className="relative flex size-3 shrink-0">
+            {status.indicator === "none" && (
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-content-success opacity-75" />
+            )}
+            <span
+              className={cn(
+                "relative inline-flex size-3 rounded-full",
+                // eslint-disable-next-line no-restricted-syntax
+                status.indicator === "none" && "bg-content-success",
+                status.indicator === "minor" && "bg-yellow-500",
+                // eslint-disable-next-line no-restricted-syntax
+                status.indicator === "major" && "bg-content-errorSecondary",
+                // eslint-disable-next-line no-restricted-syntax
+                status.indicator === "critical" && "bg-content-errorSecondary",
+              )}
+            />
+          </span>
+          <span className="flex items-center gap-1">
+            {status.description}
+            <ExternalLinkIcon />
+          </span>
+        </>
+      )}
+    </a>
+  );
+}

npm-packages/dashboard/src/pages/api/status.ts

@@ -0,0 +1,36 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type ConvexStatusIndicator = "none" | "minor" | "major" | "critical";
+
+interface ConvexStatusResponse {
+  status: {
+    indicator: ConvexStatusIndicator;
+    description: string;
+  };
+}
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse<ConvexStatusResponse | { error: string }>,
+) {
+  try {
+    const statusResponse = await fetch(
+      "https://status.convex.dev/api/v2/status.json",
+      {
+        method: "GET",
+      },
+    );
+
+    if (!statusResponse.ok) {
+      response.status(500).json({ error: "Failed to fetch Convex status" });
+      return;
+    }
+
+    const statusData: ConvexStatusResponse = await statusResponse.json();
+
+    response.status(200).json(statusData);
+  } catch (error) {
+    console.error("Error fetching Convex status:", error);
+    response.status(500).json({ error: "Failed to fetch Convex status" });
+  }
+}