diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx index 2afecffd53..00f2db5e2b 100644 --- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx +++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx @@ -23,3 +23,15 @@ export const WithHealthIssues: Story = { health: DeploymentHealthUnhealthy, }, }; + +export const WithDismissedHealthIssues: Story = { + args: { + health: { + ...DeploymentHealthUnhealthy, + workspace_proxy: { + ...DeploymentHealthUnhealthy.workspace_proxy, + dismissed: true, + }, + }, + }, +}; diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx index 16a01a15c3..a302780468 100644 --- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx +++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx @@ -105,7 +105,7 @@ export const DeploymentBannerView: FC = ({ // eslint-disable-next-line react-hooks/exhaustive-deps -- We want this to periodically update! }, [timeUntilRefresh, stats]); - const unhealthy = health && !health.healthy; + const healthErrors = health ? getHealthErrors(health) : []; const displayLatency = stats?.workspaces.connection_latency_ms.P50 || -1; return ( @@ -131,30 +131,15 @@ export const DeploymentBannerView: FC = ({ 0 ? ( <> We have detected problems with your Coder deployment. - {!health.access_url.healthy && ( - - Your access URL may be configured incorrectly. - - )} - {!health.database.healthy && ( - Your database is unhealthy. - )} - {!health.derp.healthy && ( - - We're noticing DERP proxy issues. - - )} - {!health.websocket.healthy && ( - - We're noticing websocket issues. - - )} + {healthErrors.map((error) => ( + {error} + ))} ) : ( @@ -164,7 +149,7 @@ export const DeploymentBannerView: FC = ({ open={process.env.STORYBOOK === "true" ? true : undefined} css={{ marginRight: -16 }} > - {unhealthy ? ( + {healthErrors.length > 0 ? ( = ({ children }) => { ); }; +const getHealthErrors = (health: HealthcheckReport) => { + const warnings: string[] = []; + const sections = [ + "access_url", + "database", + "derp", + "websocket", + "workspace_proxy", + ] as const; + const messages: Record<(typeof sections)[number], string> = { + access_url: "Your access URL may be configured incorrectly.", + database: "Your database is unhealthy.", + derp: "We're noticing DERP proxy issues.", + websocket: "We're noticing websocket issues.", + workspace_proxy: "We're noticing workspace proxy issues.", + } as const; + + sections.forEach((section) => { + if (health[section].severity === "error" && !health[section].dismissed) { + warnings.push(messages[section]); + } + }); + + return warnings; +}; + const classNames = { summaryTooltip: (css, theme) => css` ${theme.typography.body2 as CSSObject}