coder · aslilac · Oct 13, 2023 · Oct 10, 2023 · Oct 11, 2023 · Oct 12, 2023
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1516,14 +1516,17 @@ export const getInsightsTemplate = async (
   return response.data;
 };
 
-export const getHealth = () => {
-  return axios.get<{
-    healthy: boolean;
-    time: string;
-    coder_version: string;
-    derp: { healthy: boolean };
-    access_url: { healthy: boolean };
-    websocket: { healthy: boolean };
-    database: { healthy: boolean };
-  }>("/api/v2/debug/health");
+export interface Health {
+  healthy: boolean;
+  time: string;
+  coder_version: string;
+  access_url: { healthy: boolean };
+  database: { healthy: boolean };
+  derp: { healthy: boolean };
+  websocket: { healthy: boolean };
+}
+
+export const getHealth = async () => {
+  const response = await axios.get<Health>("/api/v2/debug/health");
+  return response.data;
 };
diff --git a/site/src/api/queries/deployment.ts b/site/src/api/queries/deployment.ts
@@ -17,6 +17,13 @@ export const deploymentDAUs = () => {
 export const deploymentStats = () => {
   return {
     queryKey: ["deployment", "stats"],
-    queryFn: () => API.getDeploymentStats(),
+    queryFn: API.getDeploymentStats,
+  };
+};
+
+export const health = () => {
+  return {
+    queryKey: ["deployment", "health"],
+    queryFn: API.getHealth,
   };
 };
diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
@@ -15,7 +15,6 @@ import Box, { BoxProps } from "@mui/material/Box";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import Button from "@mui/material/Button";
 import { docs } from "utils/docs";
-import { HealthBanner } from "./HealthBanner";
 
 export const DashboardLayout: FC = () => {
   const permissions = usePermissions();
@@ -29,7 +28,6 @@ export const DashboardLayout: FC = () => {
 
   return (
     <>
-      <HealthBanner />
       <ServiceBanner />
       {canViewDeployment && <LicenseBanner />}
 

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
@@ -1,18 +1,26 @@
+import { type FC } from "react";
+import { useQuery } from "react-query";
+import { deploymentStats, health } from "api/queries/deployment";
 import { usePermissions } from "hooks/usePermissions";
 import { DeploymentBannerView } from "./DeploymentBannerView";
-import { useQuery } from "react-query";
-import { deploymentStats } from "api/queries/deployment";
+import { useDashboard } from "../DashboardProvider";
 
-export const DeploymentBanner: React.FC = () => {
+export const DeploymentBanner: FC = () => {
+  const dashboard = useDashboard();
   const permissions = usePermissions();
   const deploymentStatsQuery = useQuery(deploymentStats());
+  const healthQuery = useQuery({
+    ...health(),
+    enabled: dashboard.experiments.includes("deployment_health_page"),
+  });
 
   if (!permissions.viewDeploymentValues || !deploymentStatsQuery.data) {
     return null;
   }
 
   return (
     <DeploymentBannerView
+      health={healthQuery.data}
       stats={deploymentStatsQuery.data}
       fetchStats={() => deploymentStatsQuery.refetch()}
     />

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { MockDeploymentStats } from "testHelpers/entities";
+import {
+  DeploymentHealthUnhealthy,
+  MockDeploymentStats,
+} from "testHelpers/entities";
 import { DeploymentBannerView } from "./DeploymentBannerView";
 
 const meta: Meta<typeof DeploymentBannerView> = {
@@ -13,4 +16,10 @@ const meta: Meta<typeof DeploymentBannerView> = {
 export default meta;
 type Story = StoryObj<typeof DeploymentBannerView>;
 
-export const Preview: Story = {};
+export const Example: Story = {};
+
+export const WithHealthIssues: Story = {
+  args: {
+    health: DeploymentHealthUnhealthy,
+  },
+};
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -1,9 +1,14 @@
-import { DeploymentStats, WorkspaceStatus } from "api/typesGenerated";
-import { FC, useMemo, useEffect, useState } from "react";
+import type { Health } from "api/api";
+import type { DeploymentStats, WorkspaceStatus } from "api/typesGenerated";
+import {
+  type FC,
+  useMemo,
+  useEffect,
+  useState,
+  PropsWithChildren,
+} from "react";
 import prettyBytes from "pretty-bytes";
 import BuildingIcon from "@mui/icons-material/Build";
-import { RocketIcon } from "components/Icons/RocketIcon";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import Tooltip from "@mui/material/Tooltip";
 import { Link as RouterLink } from "react-router-dom";
 import Link from "@mui/material/Link";
@@ -12,13 +17,26 @@ import DownloadIcon from "@mui/icons-material/CloudDownload";
 import UploadIcon from "@mui/icons-material/CloudUpload";
 import LatencyIcon from "@mui/icons-material/SettingsEthernet";
 import WebTerminalIcon from "@mui/icons-material/WebAsset";
-import { TerminalIcon } from "components/Icons/TerminalIcon";
-import dayjs from "dayjs";
 import CollectedIcon from "@mui/icons-material/Compare";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import Button from "@mui/material/Button";
+import { css as className } from "@emotion/css";
+import {
+  css,
+  type CSSObject,
+  type Theme,
+  type Interpolation,
+  useTheme,
+} from "@emotion/react";
+import dayjs from "dayjs";
+import { TerminalIcon } from "components/Icons/TerminalIcon";
+import { RocketIcon } from "components/Icons/RocketIcon";
+import ErrorIcon from "@mui/icons-material/ErrorOutline";
+import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
-import { css, type Theme, type Interpolation, useTheme } from "@emotion/react";
+import { colors } from "theme/colors";
+import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
+import { Stack } from "components/Stack/Stack";
 
 export const bannerHeight = 36;
 
@@ -49,14 +67,13 @@ const styles = {
 } satisfies Record<string, Interpolation<Theme>>;
 
 export interface DeploymentBannerViewProps {
-  fetchStats?: () => void;
+  health?: Health;
   stats?: DeploymentStats;
+  fetchStats?: () => void;
 }
 
-export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
-  stats,
-  fetchStats,
-}) => {
+export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
+  const { health, stats, fetchStats } = props;
   const theme = useTheme();
   const aggregatedMinutes = useMemo(() => {
     if (!stats) {
@@ -105,14 +122,43 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- We want this to periodically update!
   }, [timeUntilRefresh, stats]);
 
+  const unhealthy = health && !health.healthy;
+
+  const statusBadgeStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${unhealthy ? colors.red[10] : undefined};
+    padding: ${theme.spacing(0, 1.5)};
+    height: ${bannerHeight}px;
+    color: #fff;
+
+    & svg {
+      width: 16px;
+      height: 16px;
+    }
+  `;
+
+  const statusSummaryStyle = className`
+    ${theme.typography.body2 as CSSObject}
+
+    margin: ${theme.spacing(0, 0, 0.5, 1.5)};
+    width: ${theme.spacing(50)};
+    padding: ${theme.spacing(2)};
+    color: ${theme.palette.text.primary};
+    background-color: ${theme.palette.background.paper};
+    border: 1px solid ${theme.palette.divider};
+    pointer-events: none;
+  `;
+
   return (
     <div
       css={{
         position: "sticky",
         height: bannerHeight,
         bottom: 0,
         zIndex: 1,
-        padding: theme.spacing(0, 2),
+        paddingRight: theme.spacing(2),
         backgroundColor: theme.palette.background.paper,
         display: "flex",
         alignItems: "center",
@@ -124,24 +170,51 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
         whiteSpace: "nowrap",
       }}
     >
-      <Tooltip title="Status of your Coder deployment. Only visible for admins!">
-        <div
-          css={css`
-            display: flex;
-            align-items: center;
-
-            & svg {
-              width: 16px;
-              height: 16px;
-            }
-
-            ${theme.breakpoints.down("lg")} {
-              display: none;
-            }
-          `}
-        >
-          <RocketIcon />
-        </div>
+      <Tooltip
+        classes={{ tooltip: statusSummaryStyle }}
+        title={
+          unhealthy ? (
+            <>
+              <HelpTooltipTitle>
+                We have detected problems with your Coder deployment.
+              </HelpTooltipTitle>
+              <Stack spacing={1}>
+                {health.access_url && (
+                  <HealthIssue>
+                    Your access URL may be configured incorrectly.
+                  </HealthIssue>
+                )}
+                {health.database && (
+                  <HealthIssue>Your database is unhealthy.</HealthIssue>
+                )}
+                {health.derp && (
+                  <HealthIssue>
+                    We&apos;re noticing DERP proxy issues.
+                  </HealthIssue>
+                )}
+                {health.websocket && (
+                  <HealthIssue>
+                    We&apos;re noticing websocket issues.
+                  </HealthIssue>
+                )}
+              </Stack>
+            </>
+          ) : (
+            <>Status of your Coder deployment. Only visible for admins!</>
+          )
+        }
+        open={process.env.STORYBOOK === "true" ? true : undefined}
+        css={{ marginRight: theme.spacing(-2) }}
+      >
+        {unhealthy ? (
+          <Link component={RouterLink} to="/health" css={statusBadgeStyle}>
+            <ErrorIcon />
+          </Link>
+        ) : (
+          <div css={statusBadgeStyle}>
+            <RocketIcon />
+          </div>
+        )}
       </Tooltip>
       <div css={styles.group}>
         <div css={styles.category}>Workspaces</div>
@@ -330,3 +403,12 @@ const WorkspaceBuildValue: FC<{
     </Tooltip>
   );
 };
+
+const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <Stack direction="row" spacing={1}>
+      <ErrorIcon fontSize="small" htmlColor={colors.red[10]} />
+      {children}
+    </Stack>
+  );
+};
diff --git a/site/src/components/Dashboard/HealthBanner.tsx b/site/src/components/Dashboard/HealthBanner.tsx
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -159,9 +159,7 @@ export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
   );
 };
 
-export const HelpTooltipTitle: FC<PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const HelpTooltipTitle: FC<PropsWithChildren> = ({ children }) => {
   return <h4 css={styles.title}>{children}</h4>;
 };
 
@@ -242,7 +240,7 @@ const styles = {
     marginBottom: theme.spacing(1),
     color: theme.palette.text.primary,
     fontSize: 14,
-    lineHeight: "120%",
+    lineHeight: "150%",
     fontWeight: 600,
   }),
 

diff --git a/site/src/components/PopoverContainer/PopoverContainer.stories.tsx b/site/src/components/PopoverContainer/PopoverContainer.stories.tsx
@@ -2,11 +2,6 @@ import { Meta, StoryObj } from "@storybook/react";
 import { PopoverContainer } from "./PopoverContainer";
 import Button from "@mui/material/Button";
 
-const numbers: number[] = [];
-for (let i = 0; i < 20; i++) {
-  numbers.push(i + 1);
-}
-
 const meta: Meta<typeof PopoverContainer> = {
   title: "components/PopoverContainer",
   component: PopoverContainer,