Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 1f7c63c

Browse files
BrunoQuaresmaBrunoQuaresma
authoredDec 8, 2023
fix(site): hide ws proxy on menu when disabled (#11101)
1 parent 9d8578e commit 1f7c63c

8 files changed

+100
-163
lines changed
 

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

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,13 @@
11
import { StoryObj, Meta } from "@storybook/react";
22
import { AccessURLPage } from "./AccessURLPage";
3-
import { HealthLayout } from "./HealthLayout";
4-
import {
5-
reactRouterOutlet,
6-
reactRouterParameters,
7-
} from "storybook-addon-react-router-v6";
8-
import { useQueryClient } from "react-query";
9-
import { MockHealth } from "testHelpers/entities";
3+
import { generateMeta } from "./storybook";
104

115
const meta: Meta = {
126
title: "pages/Health/AccessURL",
13-
render: HealthLayout,
14-
parameters: {
15-
layout: "fullscreen",
16-
reactRouter: reactRouterParameters({
17-
routing: reactRouterOutlet(
18-
{ path: "/health/access-url" },
19-
<AccessURLPage />,
20-
),
21-
}),
22-
},
23-
decorators: [
24-
(Story) => {
25-
const queryClient = useQueryClient();
26-
queryClient.setQueryData(["health"], MockHealth);
27-
return <Story />;
28-
},
29-
],
7+
...generateMeta({
8+
path: "/health/access-url",
9+
element: <AccessURLPage />,
10+
}),
3011
};
3112

3213
export default meta;

‎site/src/pages/HealthPage/DERPPage.stories.tsx

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,13 @@
11
import { StoryObj, Meta } from "@storybook/react";
22
import { DERPPage } from "./DERPPage";
3-
import { HealthLayout } from "./HealthLayout";
4-
import {
5-
reactRouterOutlet,
6-
reactRouterParameters,
7-
} from "storybook-addon-react-router-v6";
8-
import { useQueryClient } from "react-query";
9-
import { MockHealth } from "testHelpers/entities";
3+
import { generateMeta } from "./storybook";
104

115
const meta: Meta = {
126
title: "pages/Health/DERP",
13-
render: HealthLayout,
14-
parameters: {
15-
layout: "fullscreen",
16-
reactRouter: reactRouterParameters({
17-
routing: reactRouterOutlet({ path: "/health/derp" }, <DERPPage />),
18-
}),
19-
},
20-
decorators: [
21-
(Story) => {
22-
const queryClient = useQueryClient();
23-
queryClient.setQueryData(["health"], MockHealth);
24-
return <Story />;
25-
},
26-
],
7+
...generateMeta({
8+
path: "/health/derp",
9+
element: <DERPPage />,
10+
}),
2711
};
2812

2913
export default meta;

‎site/src/pages/HealthPage/DERPRegionPage.stories.tsx

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,18 @@
11
import { StoryObj, Meta } from "@storybook/react";
22
import { DERPRegionPage } from "./DERPRegionPage";
3-
import { HealthLayout } from "./HealthLayout";
4-
import {
5-
reactRouterOutlet,
6-
reactRouterParameters,
7-
} from "storybook-addon-react-router-v6";
8-
import { useQueryClient } from "react-query";
93
import { MockHealth } from "testHelpers/entities";
4+
import { generateMeta } from "./storybook";
105

116
const firstRegionId = Object.values(MockHealth.derp.regions)[0].region
127
?.RegionID;
138

149
const meta: Meta = {
1510
title: "pages/Health/DERPRegion",
16-
render: HealthLayout,
17-
parameters: {
18-
layout: "fullscreen",
19-
reactRouter: reactRouterParameters({
20-
location: { pathParams: { regionId: firstRegionId } },
21-
routing: reactRouterOutlet(
22-
{ path: `/health/derp/regions/:regionId` },
23-
<DERPRegionPage />,
24-
),
25-
}),
26-
},
27-
decorators: [
28-
(Story) => {
29-
const queryClient = useQueryClient();
30-
queryClient.setQueryData(["health"], MockHealth);
31-
return <Story />;
32-
},
33-
],
11+
...generateMeta({
12+
path: "/health/derp/regions/:regionId",
13+
element: <DERPRegionPage />,
14+
params: { regionId: firstRegionId },
15+
}),
3416
};
3517

3618
export default meta;

‎site/src/pages/HealthPage/DatabasePage.stories.tsx

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,13 @@
11
import { StoryObj, Meta } from "@storybook/react";
22
import { DatabasePage } from "./DatabasePage";
3-
import { HealthLayout } from "./HealthLayout";
4-
import {
5-
reactRouterOutlet,
6-
reactRouterParameters,
7-
} from "storybook-addon-react-router-v6";
8-
import { useQueryClient } from "react-query";
9-
import { MockHealth } from "testHelpers/entities";
3+
import { generateMeta } from "./storybook";
104

115
const meta: Meta = {
126
title: "pages/Health/Database",
13-
render: HealthLayout,
14-
parameters: {
15-
layout: "fullscreen",
16-
reactRouter: reactRouterParameters({
17-
routing: reactRouterOutlet(
18-
{ path: "/health/database" },
19-
<DatabasePage />,
20-
),
21-
}),
22-
},
23-
decorators: [
24-
(Story) => {
25-
const queryClient = useQueryClient();
26-
queryClient.setQueryData(["health"], MockHealth);
27-
return <Story />;
28-
},
29-
],
7+
...generateMeta({
8+
path: "/health/database",
9+
element: <DatabasePage />,
10+
}),
3011
};
3112

3213
export default meta;

‎site/src/pages/HealthPage/HealthLayout.tsx

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,16 @@ import Tooltip from "@mui/material/Tooltip";
1212
import CircularProgress from "@mui/material/CircularProgress";
1313
import { NavLink, Outlet } from "react-router-dom";
1414
import { css } from "@emotion/css";
15-
import { kebabCase } from "lodash/fp";
15+
import kebabCase from "lodash/fp/kebabCase";
1616
import { Suspense } from "react";
1717
import { HealthIcon } from "./Content";
1818
import { HealthSeverity } from "api/typesGenerated";
1919
import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
20-
21-
const sections = {
22-
derp: "DERP",
23-
access_url: "Access URL",
24-
websocket: "Websocket",
25-
database: "Database",
26-
workspace_proxy: "Workspace Proxy",
27-
} as const;
20+
import { useDashboard } from "components/Dashboard/DashboardProvider";
2821

2922
export function HealthLayout() {
3023
const theme = useTheme();
24+
const dashboard = useDashboard();
3125
const queryClient = useQueryClient();
3226
const { data: healthStatus } = useQuery({
3327
...health(),
@@ -36,6 +30,16 @@ export function HealthLayout() {
3630
const { mutate: forceRefresh, isLoading: isRefreshing } = useMutation(
3731
refreshHealth(queryClient),
3832
);
33+
const sections = {
34+
derp: "DERP",
35+
access_url: "Access URL",
36+
websocket: "Websocket",
37+
database: "Database",
38+
workspace_proxy: dashboard.experiments.includes("moons")
39+
? "Workspace Proxy"
40+
: undefined,
41+
} as const;
42+
const visibleSections = filterVisibleSections(sections);
3943

4044
return (
4145
<>
@@ -106,13 +110,13 @@ export function HealthLayout() {
106110
}}
107111
>
108112
{healthStatus.healthy
109-
? Object.keys(sections).some(
110-
(key) =>
111-
healthStatus[key as keyof typeof sections]
112-
.warnings !== null &&
113-
healthStatus[key as keyof typeof sections].warnings
114-
.length > 0,
115-
)
113+
? Object.keys(visibleSections).some((key) => {
114+
const section =
115+
healthStatus[key as keyof typeof visibleSections];
116+
return (
117+
section.warnings && section.warnings.length > 0
118+
);
119+
})
116120
? "All systems operational, but performance might be degraded"
117121
: "All systems operational"
118122
: "Some issues have been detected"}
@@ -145,12 +149,13 @@ export function HealthLayout() {
145149
</div>
146150

147151
<nav css={{ display: "flex", flexDirection: "column", gap: 1 }}>
148-
{Object.keys(sections)
152+
{Object.keys(visibleSections)
149153
.sort()
150154
.map((key) => {
151-
const label = sections[key as keyof typeof sections];
155+
const label =
156+
visibleSections[key as keyof typeof visibleSections];
152157
const healthSection =
153-
healthStatus[key as keyof typeof sections];
158+
healthStatus[key as keyof typeof visibleSections];
154159

155160
return (
156161
<NavLink
@@ -218,3 +223,21 @@ export function HealthLayout() {
218223
</>
219224
);
220225
}
226+
227+
const filterVisibleSections = <T extends object>(sections: T) => {
228+
return Object.keys(sections).reduce(
229+
(visible, sectionName) => {
230+
const sectionValue = sections[sectionName as keyof typeof sections];
231+
232+
if (!sectionValue) {
233+
return visible;
234+
}
235+
236+
return {
237+
...visible,
238+
[sectionName]: sectionValue,
239+
};
240+
},
241+
{} as Partial<typeof sections>,
242+
);
243+
};

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

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,13 @@
11
import { StoryObj, Meta } from "@storybook/react";
22
import { WebsocketPage } from "./WebsocketPage";
3-
import { HealthLayout } from "./HealthLayout";
4-
import {
5-
reactRouterOutlet,
6-
reactRouterParameters,
7-
} from "storybook-addon-react-router-v6";
8-
import { useQueryClient } from "react-query";
9-
import { MockHealth } from "testHelpers/entities";
3+
import { generateMeta } from "./storybook";
104

115
const meta: Meta = {
126
title: "pages/Health/Websocket",
13-
render: HealthLayout,
14-
parameters: {
15-
layout: "fullscreen",
16-
reactRouter: reactRouterParameters({
17-
routing: reactRouterOutlet(
18-
{ path: "/health/derp/websocket" },
19-
<WebsocketPage />,
20-
),
21-
}),
22-
},
23-
decorators: [
24-
(Story) => {
25-
const queryClient = useQueryClient();
26-
queryClient.setQueryData(["health"], MockHealth);
27-
return <Story />;
28-
},
29-
],
7+
...generateMeta({
8+
path: "/health/websocket",
9+
element: <WebsocketPage />,
10+
}),
3011
};
3112

3213
export default meta;

‎site/src/pages/HealthPage/WebsocketProxyPage.stories.tsx

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,13 @@
11
import { StoryObj, Meta } from "@storybook/react";
22
import { WorkspaceProxyPage } from "./WorkspaceProxyPage";
3-
import { HealthLayout } from "./HealthLayout";
4-
import {
5-
reactRouterOutlet,
6-
reactRouterParameters,
7-
} from "storybook-addon-react-router-v6";
8-
import { useQueryClient } from "react-query";
9-
import { MockHealth } from "testHelpers/entities";
3+
import { generateMeta } from "./storybook";
104

115
const meta: Meta = {
126
title: "pages/Health/WorkspaceProxy",
13-
render: HealthLayout,
14-
parameters: {
15-
layout: "fullscreen",
16-
reactRouter: reactRouterParameters({
17-
routing: reactRouterOutlet(
18-
{ path: "/health/workspace-proxy" },
19-
<WorkspaceProxyPage />,
20-
),
21-
}),
22-
},
23-
decorators: [
24-
(Story) => {
25-
const queryClient = useQueryClient();
26-
queryClient.setQueryData(["health"], MockHealth);
27-
return <Story />;
28-
},
29-
],
7+
...generateMeta({
8+
path: "/health/workspace-proxy",
9+
element: <WorkspaceProxyPage />,
10+
}),
3011
};
3112

3213
export default meta;

‎site/src/pages/HealthPage/storybook.tsx

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,32 @@ import {
44
reactRouterOutlet,
55
RouteDefinition,
66
} from "storybook-addon-react-router-v6";
7-
import { MockHealth, MockHealthSettings } from "testHelpers/entities";
7+
import {
8+
MockBuildInfo,
9+
MockEntitlements,
10+
MockExperiments,
11+
MockHealth,
12+
MockHealthSettings,
13+
} from "testHelpers/entities";
814
import { Meta } from "@storybook/react";
915
import { HEALTH_QUERY_KEY, HEALTH_QUERY_SETTINGS_KEY } from "api/queries/debug";
16+
import { DashboardProvider } from "components/Dashboard/DashboardProvider";
17+
import { HealthLayout } from "./HealthLayout";
1018

1119
type MetaOptions = {
1220
element: RouteDefinition;
1321
path: string;
22+
params?: Record<string, string>;
1423
};
1524

16-
export const generateMeta = ({ element, path }: MetaOptions): Meta => {
25+
export const generateMeta = ({ element, path, params }: MetaOptions): Meta => {
1726
return {
27+
render: HealthLayout,
1828
parameters: {
1929
layout: "fullscreen",
2030
reactRouter: reactRouterParameters({
21-
routing: reactRouterOutlet({ path: `/health/${path}` }, element),
31+
location: { pathParams: params },
32+
routing: reactRouterOutlet({ path }, element),
2233
}),
2334
},
2435
decorators: [
@@ -28,6 +39,19 @@ export const generateMeta = ({ element, path }: MetaOptions): Meta => {
2839
queryClient.setQueryData(HEALTH_QUERY_SETTINGS_KEY, MockHealthSettings);
2940
return <Story />;
3041
},
42+
(Story) => {
43+
const queryClient = useQueryClient();
44+
queryClient.setQueryData(["buildInfo"], MockBuildInfo);
45+
queryClient.setQueryData(["entitlements"], MockEntitlements);
46+
queryClient.setQueryData(["experiments"], MockExperiments);
47+
queryClient.setQueryData(["appearance"], MockExperiments);
48+
49+
return (
50+
<DashboardProvider>
51+
<Story />
52+
</DashboardProvider>
53+
);
54+
},
3155
],
3256
};
3357
};

0 commit comments

Comments
 (0)
Failed to load comments.