Add MB instance health-check banner

Author: sanex3339

src/components/layout/HealthcheckBanner.tsx

@@ -0,0 +1,95 @@
+import { Stack, Text } from "@mantine/core"
+import { useEffect, useRef, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { useLocation } from "wouter"
+import { METABASE_INSTANCE_HEALTHCHECK_INTERVAL_MS } from "../../constants/metabase-instance-healthcheck-interval"
+import { queryMetabaseInstanceStatus } from "../../utils/query-metabase-instance-status"
+import { MetabaseHealthStatus } from "../../types/metabase-health-status"
+
+type BannerInfo = {
+  message: string
+}
+
+export const HealthcheckBanner = () => {
+  const [location, navigate] = useLocation()
+  const [banner, setBanner] = useState<BannerInfo | null>(null)
+
+  const previousStatusRef = useRef<MetabaseHealthStatus | null>(null)
+
+  const shouldPoll = previousStatusRef.current === "maintenance"
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ["health"],
+    queryFn: queryMetabaseInstanceStatus,
+    refetchInterval: shouldPoll
+      ? METABASE_INSTANCE_HEALTHCHECK_INTERVAL_MS
+      : false,
+  })
+
+  useEffect(() => {
+    refetch()
+  }, [location, refetch])
+
+  useEffect(() => {
+    const currentStatus = data?.status
+    const previousStatus = previousStatusRef.current
+
+    if (!currentStatus || isLoading) {
+      return
+    }
+
+    const isRecovered =
+      previousStatus !== null &&
+      previousStatus !== "ok" &&
+      currentStatus === "ok"
+
+    previousStatusRef.current = currentStatus
+
+    if (isRecovered) {
+      setBanner(null)
+      navigate(location, { replace: true })
+
+      return
+    }
+
+    switch (currentStatus) {
+      case "ok":
+        setBanner(null)
+        break
+      case "maintenance":
+        setBanner({
+          message:
+            "The embedding demo is undergoing maintenance. Things may not work as expected for a few minutes.",
+        })
+        break
+      default:
+        setBanner({
+          message:
+            "Sorry, the embedding demo is down right now. We're looking into it.",
+        })
+        break
+    }
+  }, [data, isLoading])
+
+  if (!banner) {
+    return null
+  }
+
+  return (
+    <Stack
+      pos="absolute"
+      top="0"
+      left="0"
+      w="100%"
+      h="100%"
+      bg="#e5e5e5"
+      style={{ zIndex: 10000 }}
+      align="center"
+      justify="center"
+    >
+      <Text c="dark" size="md">
+        {banner.message}
+      </Text>
+    </Stack>
+  )
+}

src/components/layout/Shell.tsx

@@ -25,6 +25,7 @@ import { FullPageLoader } from "../Loader"
 import { SiteFooter } from "../SiteFooter"
 import { ProficiencyGradient } from "../ProficiencyGradient"
 import { ClickActionDemoModal } from "../ClickActionDemoModal"
+import { HealthcheckBanner } from "./HealthcheckBanner"
 
 interface Props {
   children: ReactNode
@@ -59,6 +60,8 @@ export function Shell(props: Props) {
       }}
     >
       <AppShell.Header zIndex={102} bg="#2B2F32" className="border-none">
+        <HealthcheckBanner />
+
         <Flex
           justify="space-between"
           align="center"

src/constants/metabase-instance-healthcheck-interval.ts

@@ -0,0 +1 @@
+export const METABASE_INSTANCE_HEALTHCHECK_INTERVAL_MS = 15000

src/types/metabase-health-status.ts

@@ -0,0 +1 @@
+export type MetabaseHealthStatus = "ok" | "maintenance" | "error" | string

src/utils/query-metabase-instance-status.ts

@@ -0,0 +1,18 @@
+import { METABASE_INSTANCE_URL } from "../constants/env"
+import { MetabaseHealthStatus } from "../types/metabase-health-status"
+
+export async function queryMetabaseInstanceStatus(): Promise<{
+  status: MetabaseHealthStatus
+}> {
+  try {
+    const response = await fetch(`${METABASE_INSTANCE_URL}/api/health`)
+
+    if (!response.ok) {
+      return { status: "error" }
+    }
+
+    return response.json()
+  } catch {
+    return { status: "error" }
+  }
+}