From b0c48b13652efa1b18281426e6db8acff1e6dfd4 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Wed, 18 Dec 2024 07:40:36 -0600 Subject: [PATCH 01/10] chore: record http protocol for each proxy --- site/src/contexts/useProxyLatency.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/site/src/contexts/useProxyLatency.ts b/site/src/contexts/useProxyLatency.ts index 334638bc9314d..8a44fe44bb2d3 100644 --- a/site/src/contexts/useProxyLatency.ts +++ b/site/src/contexts/useProxyLatency.ts @@ -15,6 +15,8 @@ export interface ProxyLatencyReport { latencyMS: number; // at is when the latency was recorded. at: Date; + // nextHopProtocol can determine if HTTP/2 is being used. + nextHopProtocol?: string; } interface ProxyLatencyAction { @@ -151,6 +153,7 @@ export const useProxyLatency = ( // https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Resource_timing let latencyMS = 0; let accurate = false; + let nextHopProtocol: string | undefined = undefined; if ( "requestStart" in entry && (entry as PerformanceResourceTiming).requestStart !== 0 @@ -159,6 +162,7 @@ export const useProxyLatency = ( const timingEntry = entry as PerformanceResourceTiming; latencyMS = timingEntry.responseStart - timingEntry.requestStart; accurate = true; + nextHopProtocol = timingEntry.nextHopProtocol; } else { // This is the total duration of the request and will be off by a good margin. // This is a fallback if the better timing is not available. @@ -175,7 +179,8 @@ export const useProxyLatency = ( latencyMS, accurate, at: new Date(), - }, + nextHopProtocol: nextHopProtocol, + } as ProxyLatencyReport, }; dispatchProxyLatencies(update); // Also save to local storage to persist the latency across page refreshes. From b20a0a3588dee1aa0c5e72ac2c5590da29545da6 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Wed, 18 Dec 2024 08:31:16 -0600 Subject: [PATCH 02/10] update language --- site/src/contexts/useProxyLatency.ts | 1 + .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 28 +++++++++++++++++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/site/src/contexts/useProxyLatency.ts b/site/src/contexts/useProxyLatency.ts index 8a44fe44bb2d3..3de9d324fbefb 100644 --- a/site/src/contexts/useProxyLatency.ts +++ b/site/src/contexts/useProxyLatency.ts @@ -16,6 +16,7 @@ export interface ProxyLatencyReport { // at is when the latency was recorded. at: Date; // nextHopProtocol can determine if HTTP/2 is being used. + // https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming/nextHopProtocol nextHopProtocol?: string; } diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 0005e1fe28a68..50afe4af171f8 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -26,12 +26,27 @@ export const ProxyRow: FC = ({ proxy, latency }) => { // All users can see healthy/unhealthy, some can see more. let statusBadge = ; let shouldShowMessages = false; + let extraWarnings: string[] = []; + if (latency?.nextHopProtocol) { + switch (latency.nextHopProtocol) { + case "http/0.9": + case "http/1.0": + case "http/1.1": + extraWarnings.push( + `Requests to the proxy are using ${latency.nextHopProtocol}, and the server does not support HTTP/2. ` + + `For usability reasons, HTTP/2 or above is recommended. ` + + `Pages may fail to load if the web browser's concurrent connection limit is reached.`, + ); + } + } + if ("status" in proxy) { const wsproxy = proxy as WorkspaceProxy; statusBadge = ; shouldShowMessages = Boolean( (wsproxy.status?.report?.warnings && wsproxy.status?.report?.warnings.length > 0) || + extraWarnings.length > 0 || (wsproxy.status?.report?.errors && wsproxy.status?.report?.errors.length > 0), ); @@ -84,7 +99,10 @@ export const ProxyRow: FC = ({ proxy, latency }) => { colSpan={4} css={{ padding: "0 !important", borderBottom: 0 }} > - + )} @@ -94,9 +112,13 @@ export const ProxyRow: FC = ({ proxy, latency }) => { interface ProxyMessagesRowProps { proxy: WorkspaceProxy; + extraWarnings: string[]; } -const ProxyMessagesRow: FC = ({ proxy }) => { +const ProxyMessagesRow: FC = ({ + proxy, + extraWarnings, +}) => { const theme = useTheme(); return ( @@ -109,7 +131,7 @@ const ProxyMessagesRow: FC = ({ proxy }) => { title={ Warnings } - messages={proxy.status?.report?.warnings} + messages={proxy.status?.report?.warnings.concat(extraWarnings)} /> ); From 82ff50da59559eda78db4869388df331aa5d6f4a Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Wed, 18 Dec 2024 08:33:26 -0600 Subject: [PATCH 03/10] update story book --- site/src/testHelpers/entities.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts index 3c329cb0dbf9c..e133eeaec30ca 100644 --- a/site/src/testHelpers/entities.ts +++ b/site/src/testHelpers/entities.ts @@ -206,6 +206,7 @@ export const MockProxyLatencies: Record = { 100) % 250, at: new Date(), + nextHopProtocol: proxy.id === "8444931c-0247-4171-842a-569d9f9cbadb" ? "http/1.1" : "h2", }; return acc; }, From 177e0a417e28cdcbe92b25252f478f2b9ffb5d9c Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Wed, 18 Dec 2024 08:50:05 -0600 Subject: [PATCH 04/10] formatting --- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 6 +++--- site/src/testHelpers/entities.ts | 5 ++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 50afe4af171f8..af84821fb5151 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -26,7 +26,7 @@ export const ProxyRow: FC = ({ proxy, latency }) => { // All users can see healthy/unhealthy, some can see more. let statusBadge = ; let shouldShowMessages = false; - let extraWarnings: string[] = []; + const extraWarnings: string[] = []; if (latency?.nextHopProtocol) { switch (latency.nextHopProtocol) { case "http/0.9": @@ -34,8 +34,8 @@ export const ProxyRow: FC = ({ proxy, latency }) => { case "http/1.1": extraWarnings.push( `Requests to the proxy are using ${latency.nextHopProtocol}, and the server does not support HTTP/2. ` + - `For usability reasons, HTTP/2 or above is recommended. ` + - `Pages may fail to load if the web browser's concurrent connection limit is reached.`, + `For usability reasons, HTTP/2 or above is recommended. ` + + `Pages may fail to load if the web browser's concurrent connection limit is reached.`, ); } } diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts index e133eeaec30ca..5686e503eaf60 100644 --- a/site/src/testHelpers/entities.ts +++ b/site/src/testHelpers/entities.ts @@ -206,7 +206,10 @@ export const MockProxyLatencies: Record = { 100) % 250, at: new Date(), - nextHopProtocol: proxy.id === "8444931c-0247-4171-842a-569d9f9cbadb" ? "http/1.1" : "h2", + nextHopProtocol: + proxy.id === "8444931c-0247-4171-842a-569d9f9cbadb" + ? "http/1.1" + : "h2", }; return acc; }, From 060b8c97d1b744237e318e672c8cd58f83143efe Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Wed, 18 Dec 2024 08:52:31 -0600 Subject: [PATCH 05/10] wording --- .../UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index af84821fb5151..7f86a62be0e3a 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -33,7 +33,7 @@ export const ProxyRow: FC = ({ proxy, latency }) => { case "http/1.0": case "http/1.1": extraWarnings.push( - `Requests to the proxy are using ${latency.nextHopProtocol}, and the server does not support HTTP/2. ` + + `Requests to the proxy are using ${latency.nextHopProtocol}, the server might not support HTTP/2. ` + `For usability reasons, HTTP/2 or above is recommended. ` + `Pages may fail to load if the web browser's concurrent connection limit is reached.`, ); From 0988dedc8a9bda101bd92299a778e1d1a27380c6 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Wed, 18 Dec 2024 09:01:20 -0600 Subject: [PATCH 06/10] line length --- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 7f86a62be0e3a..5a3297aac2d67 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -33,9 +33,11 @@ export const ProxyRow: FC = ({ proxy, latency }) => { case "http/1.0": case "http/1.1": extraWarnings.push( - `Requests to the proxy are using ${latency.nextHopProtocol}, the server might not support HTTP/2. ` + + `Requests to the proxy are using ${latency.nextHopProtocol}, ` + + `the server might not support HTTP/2. ` + `For usability reasons, HTTP/2 or above is recommended. ` + - `Pages may fail to load if the web browser's concurrent connection limit is reached.`, + `Pages may fail to load if the web browser's concurrent ` + + `connection limit is reached.`, ); } } From b95e092f48460cfe945068a3ac05aaae29b6cd64 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Wed, 18 Dec 2024 10:25:04 -0600 Subject: [PATCH 07/10] linting --- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 5a3297aac2d67..9329234a4e994 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -34,10 +34,10 @@ export const ProxyRow: FC = ({ proxy, latency }) => { case "http/1.1": extraWarnings.push( `Requests to the proxy are using ${latency.nextHopProtocol}, ` + - `the server might not support HTTP/2. ` + - `For usability reasons, HTTP/2 or above is recommended. ` + - `Pages may fail to load if the web browser's concurrent ` + - `connection limit is reached.`, + "the server might not support HTTP/2. " + + "For usability reasons, HTTP/2 or above is recommended. " + + "Pages may fail to load if the web browser's concurrent " + + "connection limit is reached.", ); } } From 3acd9a9797a30e523b82317fdd8e3784cf01ed9b Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Wed, 18 Dec 2024 10:28:50 -0600 Subject: [PATCH 08/10] linting, how many indents do we need? --- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 9329234a4e994..08331b4940f16 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -34,10 +34,10 @@ export const ProxyRow: FC = ({ proxy, latency }) => { case "http/1.1": extraWarnings.push( `Requests to the proxy are using ${latency.nextHopProtocol}, ` + - "the server might not support HTTP/2. " + - "For usability reasons, HTTP/2 or above is recommended. " + - "Pages may fail to load if the web browser's concurrent " + - "connection limit is reached.", + "the server might not support HTTP/2. " + + "For usability reasons, HTTP/2 or above is recommended. " + + "Pages may fail to load if the web browser's concurrent " + + "connection limit is reached.", ); } } From 3c380c89994f5aee0abdf05a314345d9842b4fcd Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Wed, 18 Dec 2024 10:39:40 -0600 Subject: [PATCH 09/10] linter, just ignoring --- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 08331b4940f16..4e7b36088e71f 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -33,11 +33,12 @@ export const ProxyRow: FC = ({ proxy, latency }) => { case "http/1.0": case "http/1.1": extraWarnings.push( + // biome-ignore lint/style/useTemplate: easier to read short lines `Requests to the proxy are using ${latency.nextHopProtocol}, ` + - "the server might not support HTTP/2. " + - "For usability reasons, HTTP/2 or above is recommended. " + - "Pages may fail to load if the web browser's concurrent " + - "connection limit is reached.", + "the server might not support HTTP/2. " + + "For usability reasons, HTTP/2 or above is recommended. " + + "Pages may fail to load if the web browser's concurrent " + + "connection limit is reached.", ); } } From 62710ae66a6fd9e3b6c404491971c7545423f5a2 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Thu, 19 Dec 2024 09:11:23 -0600 Subject: [PATCH 10/10] pre comments --- site/src/contexts/useProxyLatency.ts | 6 ++++-- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/site/src/contexts/useProxyLatency.ts b/site/src/contexts/useProxyLatency.ts index 3de9d324fbefb..ff8be8cd66135 100644 --- a/site/src/contexts/useProxyLatency.ts +++ b/site/src/contexts/useProxyLatency.ts @@ -15,8 +15,10 @@ export interface ProxyLatencyReport { latencyMS: number; // at is when the latency was recorded. at: Date; - // nextHopProtocol can determine if HTTP/2 is being used. - // https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming/nextHopProtocol + /** + * nextHopProtocol can determine if HTTP/2 is being used. + * https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming/nextHopProtocol + */ nextHopProtocol?: string; } diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 4e7b36088e71f..e0af17f51baa1 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -34,11 +34,11 @@ export const ProxyRow: FC = ({ proxy, latency }) => { case "http/1.1": extraWarnings.push( // biome-ignore lint/style/useTemplate: easier to read short lines - `Requests to the proxy are using ${latency.nextHopProtocol}, ` + - "the server might not support HTTP/2. " + + `Requests to the proxy from current browser are using "${latency.nextHopProtocol}". ` + + "The proxy server might not support HTTP/2. " + "For usability reasons, HTTP/2 or above is recommended. " + "Pages may fail to load if the web browser's concurrent " + - "connection limit is reached.", + "connection limit per host is reached.", ); } } @@ -134,7 +134,7 @@ const ProxyMessagesRow: FC = ({ title={ Warnings } - messages={proxy.status?.report?.warnings.concat(extraWarnings)} + messages={[...(proxy.status?.report?.warnings ?? []), ...extraWarnings]} /> );