diff --git a/site/src/pages/HealthPage/AccessURLPage.stories.tsx b/site/src/pages/HealthPage/AccessURLPage.stories.tsx index b57f99eeb8..31ed1e32a2 100644 --- a/site/src/pages/HealthPage/AccessURLPage.stories.tsx +++ b/site/src/pages/HealthPage/AccessURLPage.stories.tsx @@ -1,32 +1,13 @@ import { StoryObj, Meta } from "@storybook/react"; import { AccessURLPage } from "./AccessURLPage"; -import { HealthLayout } from "./HealthLayout"; -import { - reactRouterOutlet, - reactRouterParameters, -} from "storybook-addon-react-router-v6"; -import { useQueryClient } from "react-query"; -import { MockHealth } from "testHelpers/entities"; +import { generateMeta } from "./storybook"; const meta: Meta = { title: "pages/Health/AccessURL", - render: HealthLayout, - parameters: { - layout: "fullscreen", - reactRouter: reactRouterParameters({ - routing: reactRouterOutlet( - { path: "/health/access-url" }, - , - ), - }), - }, - decorators: [ - (Story) => { - const queryClient = useQueryClient(); - queryClient.setQueryData(["health"], MockHealth); - return ; - }, - ], + ...generateMeta({ + path: "/health/access-url", + element: , + }), }; export default meta; diff --git a/site/src/pages/HealthPage/DERPPage.stories.tsx b/site/src/pages/HealthPage/DERPPage.stories.tsx index be1ea969c3..8e87d3c03b 100644 --- a/site/src/pages/HealthPage/DERPPage.stories.tsx +++ b/site/src/pages/HealthPage/DERPPage.stories.tsx @@ -1,29 +1,13 @@ import { StoryObj, Meta } from "@storybook/react"; import { DERPPage } from "./DERPPage"; -import { HealthLayout } from "./HealthLayout"; -import { - reactRouterOutlet, - reactRouterParameters, -} from "storybook-addon-react-router-v6"; -import { useQueryClient } from "react-query"; -import { MockHealth } from "testHelpers/entities"; +import { generateMeta } from "./storybook"; const meta: Meta = { title: "pages/Health/DERP", - render: HealthLayout, - parameters: { - layout: "fullscreen", - reactRouter: reactRouterParameters({ - routing: reactRouterOutlet({ path: "/health/derp" }, ), - }), - }, - decorators: [ - (Story) => { - const queryClient = useQueryClient(); - queryClient.setQueryData(["health"], MockHealth); - return ; - }, - ], + ...generateMeta({ + path: "/health/derp", + element: , + }), }; export default meta; diff --git a/site/src/pages/HealthPage/DERPRegionPage.stories.tsx b/site/src/pages/HealthPage/DERPRegionPage.stories.tsx index 89ef3102a7..6305c2eecc 100644 --- a/site/src/pages/HealthPage/DERPRegionPage.stories.tsx +++ b/site/src/pages/HealthPage/DERPRegionPage.stories.tsx @@ -1,36 +1,18 @@ import { StoryObj, Meta } from "@storybook/react"; import { DERPRegionPage } from "./DERPRegionPage"; -import { HealthLayout } from "./HealthLayout"; -import { - reactRouterOutlet, - reactRouterParameters, -} from "storybook-addon-react-router-v6"; -import { useQueryClient } from "react-query"; import { MockHealth } from "testHelpers/entities"; +import { generateMeta } from "./storybook"; const firstRegionId = Object.values(MockHealth.derp.regions)[0].region ?.RegionID; const meta: Meta = { title: "pages/Health/DERPRegion", - render: HealthLayout, - parameters: { - layout: "fullscreen", - reactRouter: reactRouterParameters({ - location: { pathParams: { regionId: firstRegionId } }, - routing: reactRouterOutlet( - { path: `/health/derp/regions/:regionId` }, - , - ), - }), - }, - decorators: [ - (Story) => { - const queryClient = useQueryClient(); - queryClient.setQueryData(["health"], MockHealth); - return ; - }, - ], + ...generateMeta({ + path: "/health/derp/regions/:regionId", + element: , + params: { regionId: firstRegionId }, + }), }; export default meta; diff --git a/site/src/pages/HealthPage/DatabasePage.stories.tsx b/site/src/pages/HealthPage/DatabasePage.stories.tsx index 22cafd7f28..b250dbce68 100644 --- a/site/src/pages/HealthPage/DatabasePage.stories.tsx +++ b/site/src/pages/HealthPage/DatabasePage.stories.tsx @@ -1,32 +1,13 @@ import { StoryObj, Meta } from "@storybook/react"; import { DatabasePage } from "./DatabasePage"; -import { HealthLayout } from "./HealthLayout"; -import { - reactRouterOutlet, - reactRouterParameters, -} from "storybook-addon-react-router-v6"; -import { useQueryClient } from "react-query"; -import { MockHealth } from "testHelpers/entities"; +import { generateMeta } from "./storybook"; const meta: Meta = { title: "pages/Health/Database", - render: HealthLayout, - parameters: { - layout: "fullscreen", - reactRouter: reactRouterParameters({ - routing: reactRouterOutlet( - { path: "/health/database" }, - , - ), - }), - }, - decorators: [ - (Story) => { - const queryClient = useQueryClient(); - queryClient.setQueryData(["health"], MockHealth); - return ; - }, - ], + ...generateMeta({ + path: "/health/database", + element: , + }), }; export default meta; diff --git a/site/src/pages/HealthPage/HealthLayout.tsx b/site/src/pages/HealthPage/HealthLayout.tsx index 7944ac122c..448de1665f 100644 --- a/site/src/pages/HealthPage/HealthLayout.tsx +++ b/site/src/pages/HealthPage/HealthLayout.tsx @@ -12,22 +12,16 @@ import Tooltip from "@mui/material/Tooltip"; import CircularProgress from "@mui/material/CircularProgress"; import { NavLink, Outlet } from "react-router-dom"; import { css } from "@emotion/css"; -import { kebabCase } from "lodash/fp"; +import kebabCase from "lodash/fp/kebabCase"; import { Suspense } from "react"; import { HealthIcon } from "./Content"; import { HealthSeverity } from "api/typesGenerated"; import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined"; - -const sections = { - derp: "DERP", - access_url: "Access URL", - websocket: "Websocket", - database: "Database", - workspace_proxy: "Workspace Proxy", -} as const; +import { useDashboard } from "components/Dashboard/DashboardProvider"; export function HealthLayout() { const theme = useTheme(); + const dashboard = useDashboard(); const queryClient = useQueryClient(); const { data: healthStatus } = useQuery({ ...health(), @@ -36,6 +30,16 @@ export function HealthLayout() { const { mutate: forceRefresh, isLoading: isRefreshing } = useMutation( refreshHealth(queryClient), ); + const sections = { + derp: "DERP", + access_url: "Access URL", + websocket: "Websocket", + database: "Database", + workspace_proxy: dashboard.experiments.includes("moons") + ? "Workspace Proxy" + : undefined, + } as const; + const visibleSections = filterVisibleSections(sections); return ( <> @@ -106,13 +110,13 @@ export function HealthLayout() { }} > {healthStatus.healthy - ? Object.keys(sections).some( - (key) => - healthStatus[key as keyof typeof sections] - .warnings !== null && - healthStatus[key as keyof typeof sections].warnings - .length > 0, - ) + ? Object.keys(visibleSections).some((key) => { + const section = + healthStatus[key as keyof typeof visibleSections]; + return ( + section.warnings && section.warnings.length > 0 + ); + }) ? "All systems operational, but performance might be degraded" : "All systems operational" : "Some issues have been detected"} @@ -145,12 +149,13 @@ export function HealthLayout() {