feat(site): display error messages on ws and access url health pages (#12430)

Close https://github.com/coder/coder/issues/12408

site/src/pages/HealthPage/AccessURLPage.stories.tsx

@@ -1,8 +1,11 @@
-import { StoryObj, Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { AccessURLPage } from "./AccessURLPage";
 import { generateMeta } from "./storybook";
+import { HEALTH_QUERY_KEY } from "api/queries/debug";
+import { MockHealth } from "testHelpers/entities";
+import { HealthcheckReport } from "api/typesGenerated";
 
-const meta: Meta = {
+const meta = {
   title: "pages/Health/AccessURL",
   ...generateMeta({
     path: "/health/access-url",
@@ -15,4 +18,27 @@ type Story = StoryObj;
 
 const Example: Story = {};
 
+const settingsWithError: HealthcheckReport = {
+  ...MockHealth,
+  severity: "error",
+  access_url: {
+    ...MockHealth.access_url,
+    severity: "error",
+    error:
+      'EACS03: get healthz endpoint: Get "https://localhost:7080/healthz": http: server gave HTTP response to HTTPS client',
+  },
+};
+
+export const WithError: Story = {
+  parameters: {
+    queries: [
+      ...meta.parameters.queries,
+      {
+        key: HEALTH_QUERY_KEY,
+        data: settingsWithError,
+      },
+    ],
+  },
+};
+
 export { Example as AccessURL };

site/src/pages/HealthPage/AccessURLPage.tsx

@@ -34,6 +34,8 @@ export const AccessURLPage = () => {
       </Header>
 
       <Main>
+        {accessUrl.error && <Alert severity="error">{accessUrl.error}</Alert>}
+
         {accessUrl.warnings.map((warning) => {
           return (
             <Alert

site/src/pages/HealthPage/WebsocketPage.stories.tsx

@@ -1,8 +1,11 @@
-import { StoryObj, Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { WebsocketPage } from "./WebsocketPage";
 import { generateMeta } from "./storybook";
+import { HEALTH_QUERY_KEY } from "api/queries/debug";
+import { HealthcheckReport } from "api/typesGenerated";
+import { MockHealth } from "testHelpers/entities";
 
-const meta: Meta = {
+const meta = {
   title: "pages/Health/Websocket",
   ...generateMeta({
     path: "/health/websocket",
@@ -15,4 +18,27 @@ type Story = StoryObj;
 
 const Example: Story = {};
 
+const settingsWithError: HealthcheckReport = {
+  ...MockHealth,
+  severity: "error",
+  websocket: {
+    ...MockHealth.websocket,
+    severity: "error",
+    error:
+      'EACS03: get healthz endpoint: Get "https://localhost:7080/healthz": http: server gave HTTP response to HTTPS client',
+  },
+};
+
+export const WithError: Story = {
+  parameters: {
+    queries: [
+      ...meta.parameters.queries,
+      {
+        key: HEALTH_QUERY_KEY,
+        data: settingsWithError,
+      },
+    ],
+  },
+};
+
 export { Example as Websocket };

site/src/pages/HealthPage/WebsocketPage.tsx

@@ -37,6 +37,8 @@ export const WebsocketPage = () => {
       </Header>
 
       <Main>
+        {websocket.error && <Alert severity="error">{websocket.error}</Alert>}
+
         {websocket.warnings.map((warning) => {
           return (
             <Alert key={warning} severity="warning">

site/src/pages/HealthPage/WorkspaceProxyPage.stories.tsx

@@ -1,8 +1,11 @@
-import { StoryObj, Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { WorkspaceProxyPage } from "./WorkspaceProxyPage";
 import { generateMeta } from "./storybook";
+import { HealthcheckReport } from "api/typesGenerated";
+import { HEALTH_QUERY_KEY } from "api/queries/debug";
+import { MockHealth } from "testHelpers/entities";
 
-const meta: Meta = {
+const meta = {
   title: "pages/Health/WorkspaceProxy",
   ...generateMeta({
     path: "/health/workspace-proxy",
@@ -15,4 +18,27 @@ type Story = StoryObj;
 
 const Example: Story = {};
 
+const settingsWithError: HealthcheckReport = {
+  ...MockHealth,
+  severity: "error",
+  workspace_proxy: {
+    ...MockHealth.workspace_proxy,
+    severity: "error",
+    error:
+      'EACS03: get healthz endpoint: Get "https://localhost:7080/healthz": http: server gave HTTP response to HTTPS client',
+  },
+};
+
+export const WithError: Story = {
+  parameters: {
+    queries: [
+      ...meta.parameters.queries,
+      {
+        key: HEALTH_QUERY_KEY,
+        data: settingsWithError,
+      },
+    ],
+  },
+};
+
 export { Example as WorkspaceProxy };

site/src/pages/HealthPage/storybook.tsx

@@ -23,7 +23,7 @@ type MetaOptions = {
   params?: Record<string, string>;
 };
 
-export const generateMeta = ({ element, path, params }: MetaOptions): Meta => {
+export const generateMeta = ({ element, path, params }: MetaOptions) => {
   return {
     component: HealthLayout,
     parameters: {
@@ -43,5 +43,5 @@ export const generateMeta = ({ element, path, params }: MetaOptions): Meta => {
       ],
       decorators: [withDashboardProvider],
     },
-  };
+  } satisfies Meta;
 };