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() {