Oct 13, 2023 · Oct 10, 2023 · Oct 11, 2023 · Oct 12, 2023 · Oct 12, 2023 · Oct 12, 2023
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
  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
 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
 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();

  return (
    <>
      <HealthBanner />
      <ServiceBanner />
      {canViewDeployment && <LicenseBanner />}

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
 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
 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> = {
 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
 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";
 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;

 } 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) {
    // 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",
        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>
    </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
  );
 };

 export const HelpTooltipTitle: FC<PropsWithChildren<unknown>> = ({
  children,
 }) => {
 export const HelpTooltipTitle: FC<PropsWithChildren> = ({ children }) => {
  return <h4 css={styles.title}>{children}</h4>;
 };

    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
 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,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 {
Parkreiner marked this conversation as resolved. Show resolvedHide resolved
		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;
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"],
Parkreiner marked this conversation as resolved. Show resolvedHide resolved
		queryFn: API.getHealth,
		};
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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();
Expand All		@@ -29,7 +28,6 @@ export const DashboardLayout: FC = () => {

		return (
		<>
		<HealthBanner />
		<ServiceBanner />
		{canViewDeployment && <LicenseBanner />}

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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()}
		/>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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> = {
Expand All		@@ -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,
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -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";
Expand All		@@ -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;

Expand DownExpand Up		@@ -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) {
Expand DownExpand Up		@@ -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;
aslilac marked this conversation as resolved. Show resolvedHide resolved

		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`
aslilac marked this conversation as resolved. Show resolvedHide resolved
		${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",
Expand All		@@ -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're noticing DERP proxy issues.
		</HealthIssue>
		)}
		{health.websocket && (
		<HealthIssue>
		We'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>
Expand DownExpand Up		@@ -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>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>;
		};

Expand DownExpand Up		@@ -242,7 +240,7 @@ const styles = {
		marginBottom: theme.spacing(1),
		color: theme.palette.text.primary,
		fontSize: 14,
		lineHeight: "120%",
		lineHeight: "150%",
Copy link Member ParkreinerOct 13, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I'm wondering if this could be changed to just`1.5`, to work better with CSS inheritance Copy link MemberAuthor aslilacOct 13, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Not sure what you mean by "work better with CSS inheritance".`150%` and`1.5` mean the same thing in CSS. 😅 and I prefer percent, because the unit makes it clearer what is happening imo. Copy link Member ParkreinerOct 13, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I wish they were the same, butthey aren't Copy link MemberAuthor aslilacOct 13, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. why is CSS like this 😭
		fontWeight: 600,
		}),

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,11 +2,6 @@ import { Meta, StoryObj } from "@storybook/react";
		import { PopoverContainer } from "./PopoverContainer";
		import Button from "@mui/material/Button";

		const numbers: number[] = [];
aslilac marked this conversation as resolved. Show resolvedHide resolved
		for (let i = 0; i < 20; i++) {
		numbers.push(i + 1);
		}

		const meta: Meta<typeof PopoverContainer> = {
		title: "components/PopoverContainer",
		component: PopoverContainer,
Expand Down