From d1fb121a650ebe55d352785c37192e611360ffca Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 27 Feb 2024 13:33:41 +0000 Subject: [PATCH 1/3] feat(site): display client errors in DERP Regio health page --- site/src/pages/HealthPage/Content.tsx | 1 + site/src/pages/HealthPage/DERPRegionPage.tsx | 133 +++++++++++-------- site/src/pages/HealthPage/storybook.tsx | 34 ++--- site/src/testHelpers/entities.ts | 12 +- 4 files changed, 100 insertions(+), 80 deletions(-) diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx index a55a5f6b515ed..ab473f1034890 100644 --- a/site/src/pages/HealthPage/Content.tsx +++ b/site/src/pages/HealthPage/Content.tsx @@ -212,6 +212,7 @@ type LogsProps = { lines: string[] } & HTMLAttributes; export const Logs = (props: LogsProps) => { const theme = useTheme(); const { lines, ...divProps } = props; + console.log("->", lines); return (
{ fontSize: 14, }} > -
+
-

- {node.HostName} -

-
+

{node.HostName}

+
DERP Port: {node.DERPPort ?? "None"} STUN Port: {node.STUNPort ?? "None"}
-
+
-
-
- } + icon={} > {report.round_trip_ping_ms}ms @@ -183,14 +141,13 @@ export const DERPRegionPage: FC = () => {
- + + {report.client_errs.length > 0 && ( + + )} ); })} @@ -199,4 +156,68 @@ export const DERPRegionPage: FC = () => { ); }; +type StatusCircleProps = { color: string }; + +const StatusCircle: FC = ({ color }) => { + return ( +
+
+
+ ); +}; + +const reportStyles = { + header: { + padding: 24, + display: "flex", + justifyContent: "space-between", + alignItems: "center", + }, + title: { + fontWeight: 500, + margin: 0, + lineHeight: "1", + }, + pills: { + display: "flex", + gap: 8, + alignItems: "center", + }, + ports: (theme) => ({ + display: "flex", + alignItems: "center", + gap: 8, + color: theme.palette.text.secondary, + fontSize: 12, + lineHeight: "120%", + marginTop: 8, + }), + divider: (theme) => ({ + height: 1, + backgroundColor: theme.palette.divider, + }), + logs: (theme) => ({ + borderBottomLeftRadius: 8, + borderBottomRightRadius: 8, + borderTop: `1px solid ${theme.palette.divider}`, + }), + clientErrors: (theme) => ({ + background: theme.roles.error.background, + color: theme.roles.error.text, + }), +} satisfies Record>; + export default DERPRegionPage; diff --git a/site/src/pages/HealthPage/storybook.tsx b/site/src/pages/HealthPage/storybook.tsx index 776e5f3e8fb03..741009c84d324 100644 --- a/site/src/pages/HealthPage/storybook.tsx +++ b/site/src/pages/HealthPage/storybook.tsx @@ -1,5 +1,4 @@ import type { Meta } from "@storybook/react"; -import { useQueryClient } from "react-query"; import { reactRouterParameters, reactRouterOutlet, @@ -7,6 +6,7 @@ import { } from "storybook-addon-react-router-v6"; import { chromatic } from "testHelpers/chromatic"; import { + MockAppearanceConfig, MockBuildInfo, MockEntitlements, MockExperiments, @@ -14,8 +14,8 @@ import { MockHealthSettings, } from "testHelpers/entities"; import { HEALTH_QUERY_KEY, HEALTH_QUERY_SETTINGS_KEY } from "api/queries/debug"; -import { DashboardProvider } from "modules/dashboard/DashboardProvider"; import { HealthLayout } from "./HealthLayout"; +import { withDashboardProvider } from "testHelpers/storybook"; type MetaOptions = { element: RouteDefinition; @@ -33,27 +33,15 @@ export const generateMeta = ({ element, path, params }: MetaOptions): Meta => { location: { pathParams: params }, routing: reactRouterOutlet({ path }, element), }), + queries: [ + { key: HEALTH_QUERY_KEY, data: MockHealth }, + { key: HEALTH_QUERY_SETTINGS_KEY, data: MockHealthSettings }, + { key: ["buildInfo"], data: MockBuildInfo }, + { key: ["entitlements"], data: MockEntitlements }, + { key: ["experiments"], data: MockExperiments }, + { key: ["appearance"], data: MockAppearanceConfig }, + ], + decorators: [withDashboardProvider], }, - decorators: [ - (Story) => { - const queryClient = useQueryClient(); - queryClient.setQueryData(HEALTH_QUERY_KEY, MockHealth); - queryClient.setQueryData(HEALTH_QUERY_SETTINGS_KEY, MockHealthSettings); - return ; - }, - (Story) => { - const queryClient = useQueryClient(); - queryClient.setQueryData(["buildInfo"], MockBuildInfo); - queryClient.setQueryData(["entitlements"], MockEntitlements); - queryClient.setQueryData(["experiments"], MockExperiments); - queryClient.setQueryData(["appearance"], MockExperiments); - - return ( - - - - ); - }, - ], }; }; diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts index 6da8770580c49..18beaf4677cfd 100644 --- a/site/src/testHelpers/entities.ts +++ b/site/src/testHelpers/entities.ts @@ -2591,7 +2591,17 @@ export const MockHealth: TypesGen.HealthcheckReport = { "derphttp.Client.Connect: connecting to https://dev.coder.com/derp", ], ], - client_errs: [[], []], + client_errs: [ + ["recv derp message: derphttp.Client closed"], + [ + "connect to derp: derphttp.Client.Connect connect to : context deadline exceeded: read tcp 10.44.1.150:59546->149.248.214.149:443: use of closed network connection", + "connect to derp: derphttp.Client closed", + "connect to derp: derphttp.Client closed", + "connect to derp: derphttp.Client closed", + "connect to derp: derphttp.Client closed", + "couldn't connect after 5 tries, last error: couldn't connect after 5 tries, last error: derphttp.Client closed", + ], + ], stun: { Enabled: false, CanSTUN: false, From c93e47bf6843f70abc67747badba0acf18877dbd Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 27 Feb 2024 13:35:13 +0000 Subject: [PATCH 2/3] Remove console.log --- site/src/pages/HealthPage/Content.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx index ab473f1034890..a55a5f6b515ed 100644 --- a/site/src/pages/HealthPage/Content.tsx +++ b/site/src/pages/HealthPage/Content.tsx @@ -212,7 +212,6 @@ type LogsProps = { lines: string[] } & HTMLAttributes; export const Logs = (props: LogsProps) => { const theme = useTheme(); const { lines, ...divProps } = props; - console.log("->", lines); return (
Date: Wed, 28 Feb 2024 13:23:20 +0000 Subject: [PATCH 3/3] Update line height --- site/src/pages/HealthPage/DERPRegionPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx index 8bb01eff25dc6..211d8a8f30724 100644 --- a/site/src/pages/HealthPage/DERPRegionPage.tsx +++ b/site/src/pages/HealthPage/DERPRegionPage.tsx @@ -57,7 +57,7 @@ export const DERPRegionPage: FC = () => { color: theme.palette.text.primary, }, marginBottom: 8, - lineHeight: "120%", + lineHeight: "1.2", }} to="/health/derp" > @@ -202,7 +202,7 @@ const reportStyles = { gap: 8, color: theme.palette.text.secondary, fontSize: 12, - lineHeight: "120%", + lineHeight: "1.2", marginTop: 8, }), divider: (theme) => ({