From 771d41fa2f3aa4292fe3e7431747d2d5cf140e31 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Thu, 1 Jun 2023 08:53:51 -0400 Subject: [PATCH 1/6] Allow refetching of proxy latencies --- site/src/contexts/ProxyContext.tsx | 2 +- site/src/contexts/useProxyLatency.ts | 28 ++++++++++++++++++++-------- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx index 42de93234d9f7..603621363ee2a 100644 --- a/site/src/contexts/ProxyContext.tsx +++ b/site/src/contexts/ProxyContext.tsx @@ -101,7 +101,7 @@ export const ProxyProvider: FC = ({ children }) => { // Every time we get a new proxiesResponse, update the latency check // to each workspace proxy. - const proxyLatencies = useProxyLatency(proxiesResp) + const { proxyLatencies } = useProxyLatency(proxiesResp) // updateProxy is a helper function that when called will // update the proxy being used. diff --git a/site/src/contexts/useProxyLatency.ts b/site/src/contexts/useProxyLatency.ts index 7588898883ab8..d432606b45d35 100644 --- a/site/src/contexts/useProxyLatency.ts +++ b/site/src/contexts/useProxyLatency.ts @@ -1,5 +1,5 @@ import { Region, RegionsResponse } from "api/typesGenerated" -import { useEffect, useReducer } from "react" +import { useEffect, useReducer, useState } from "react" import PerformanceObserver from "@fastly/performance-observer-polyfill" import axios from "axios" import { generateRandomString } from "utils/random" @@ -25,20 +25,29 @@ const proxyLatenciesReducer = ( action: ProxyLatencyAction, ): Record => { // Just overwrite any existing latency. - return { - ...state, - [action.proxyID]: action.report, - } + state[action.proxyID] = action.report + return state } export const useProxyLatency = ( proxies?: RegionsResponse, -): Record => { +): { + // Refetch can be called to refetch the proxy latencies. + // Until the new values are loaded, the old values will still be used. + refetch: () => void + proxyLatencies: Record +} => { const [proxyLatencies, dispatchProxyLatencies] = useReducer( proxyLatenciesReducer, {}, ) + // This fetchNumber is used to trigger a refetch of the proxy latencies. + const [fetchNumber, setFetchNumber] = useState(0) + const refetch = (): void => { + setFetchNumber(fetchNumber + 1) + } + // Only run latency updates when the proxies change. useEffect(() => { if (!proxies) { @@ -148,7 +157,10 @@ export const useProxyLatency = ( // via the performance observer. So we can disconnect the observer. observer.disconnect() }) - }, [proxies]) + }, [proxies, fetchNumber]) - return proxyLatencies + return { + proxyLatencies, + refetch, + } } From d52d179898c15b03a7fe346867e87b326fea3137 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Thu, 1 Jun 2023 09:00:12 -0400 Subject: [PATCH 2/6] Pass refetch funtion up the context stack --- site/src/components/AppLink/AppLink.stories.tsx | 3 +++ site/src/components/Navbar/NavbarView.test.tsx | 1 + site/src/components/Resources/AgentRow.stories.tsx | 3 +++ site/src/components/Resources/ResourceCard.stories.tsx | 6 ++++++ site/src/components/Workspace/Workspace.stories.tsx | 3 +++ site/src/contexts/ProxyContext.tsx | 7 ++++++- site/src/pages/TerminalPage/TerminalPage.test.tsx | 1 + 7 files changed, 23 insertions(+), 1 deletion(-) diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx index c478dbf973a77..0df7ac73a7d6b 100644 --- a/site/src/components/AppLink/AppLink.stories.tsx +++ b/site/src/components/AppLink/AppLink.stories.tsx @@ -29,6 +29,9 @@ const Template: Story = (args) => ( clearProxy: () => { return }, + refetchProxyLatencies: () => { + return + }, }} > diff --git a/site/src/components/Navbar/NavbarView.test.tsx b/site/src/components/Navbar/NavbarView.test.tsx index 7c5bf6507fd78..0c26521e36412 100644 --- a/site/src/components/Navbar/NavbarView.test.tsx +++ b/site/src/components/Navbar/NavbarView.test.tsx @@ -19,6 +19,7 @@ const proxyContextValue: ProxyContextValue = { isFetched: true, setProxy: jest.fn(), clearProxy: action("clearProxy"), + refetchProxyLatencies: jest.fn(), proxyLatencies: {}, } diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx index eac06ec1231bf..7ffef16e049d7 100644 --- a/site/src/components/Resources/AgentRow.stories.tsx +++ b/site/src/components/Resources/AgentRow.stories.tsx @@ -68,6 +68,9 @@ const TemplateFC = ( clearProxy: () => { return }, + refetchProxyLatencies: () => { + return + }, }} > diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx index cdc1f028772db..8de2c49b1eece 100644 --- a/site/src/components/Resources/ResourceCard.stories.tsx +++ b/site/src/components/Resources/ResourceCard.stories.tsx @@ -33,6 +33,9 @@ Example.args = { clearProxy: () => { return }, + refetchProxyLatencies: () => { + return + }, }} > { return }, + refetchProxyLatencies: () => { + return + }, }} > = (args) => ( setProxy: () => { return }, + refetchProxyLatencies: () => { + return + }, }} > diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx index 603621363ee2a..7898cfba90cc6 100644 --- a/site/src/contexts/ProxyContext.tsx +++ b/site/src/contexts/ProxyContext.tsx @@ -45,6 +45,9 @@ export interface ProxyContextValue { // then the latency has not been fetched yet. Calculations happen async for each proxy in the list. // Refer to the returned report for a given proxy for more information. proxyLatencies: Record + // refetchProxyLatencies will trigger refreshing of the proxy latencies. By default the latencies + // are loaded once. + refetchProxyLatencies: () => void // setProxy is a function that sets the user's selected proxy. This function should // only be called if the user is manually selecting a proxy. This value is stored in local // storage and will persist across reloads and tabs. @@ -101,7 +104,8 @@ export const ProxyProvider: FC = ({ children }) => { // Every time we get a new proxiesResponse, update the latency check // to each workspace proxy. - const { proxyLatencies } = useProxyLatency(proxiesResp) + const { proxyLatencies, refetch: refetchProxyLatencies } = + useProxyLatency(proxiesResp) // updateProxy is a helper function that when called will // update the proxy being used. @@ -128,6 +132,7 @@ export const ProxyProvider: FC = ({ children }) => { { isLoading: false, setProxy: jest.fn(), clearProxy: jest.fn(), + refetchProxyLatencies: jest.fn(), }} > From 8ea2cb0a8a6807ec9089165417fa73923be4350f Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Thu, 1 Jun 2023 09:05:53 -0400 Subject: [PATCH 3/6] Add to menu bar --- site/src/components/Navbar/NavbarView.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx index 8167590fbac05..2250c0a451b2e 100644 --- a/site/src/components/Navbar/NavbarView.tsx +++ b/site/src/components/Navbar/NavbarView.tsx @@ -189,6 +189,7 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({ const buttonRef = useRef(null) const [isOpen, setIsOpen] = useState(false) const selectedProxy = proxyContextValue.proxy.proxy + const refreshLatencies = proxyContextValue.refetchProxyLatencies const closeMenu = () => setIsOpen(false) const navigate = useNavigate() @@ -293,6 +294,9 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({ > Proxy settings + + Refresh Latencies + ) From ed4aebf6a231f9f4bc8ae7831fdc5b146bddc9d8 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Thu, 1 Jun 2023 09:21:25 -0400 Subject: [PATCH 4/6] Fix mocks --- site/jest.setup.ts | 4 ++-- site/src/contexts/ProxyContext.test.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/jest.setup.ts b/site/jest.setup.ts index 86a6108f9661e..9476d6e0ce7a4 100644 --- a/site/jest.setup.ts +++ b/site/jest.setup.ts @@ -19,7 +19,7 @@ jest.mock("contexts/useProxyLatency", () => ({ useProxyLatency: (proxies?: RegionsResponse) => { // Must use `useMemo` here to avoid infinite loop. // Mocking the hook with a hook. - const latencies = useMemo(() => { + const proxyLatencies = useMemo(() => { if (!proxies) { return {} as Record } @@ -35,7 +35,7 @@ jest.mock("contexts/useProxyLatency", () => ({ }, {} as Record) }, [proxies]) - return latencies + return {proxyLatencies, refetch: jest.fn() } }, })) diff --git a/site/src/contexts/ProxyContext.test.tsx b/site/src/contexts/ProxyContext.test.tsx index f7b513699b3e0..14b8418ca36cf 100644 --- a/site/src/contexts/ProxyContext.test.tsx +++ b/site/src/contexts/ProxyContext.test.tsx @@ -26,7 +26,7 @@ import userEvent from "@testing-library/user-event" // here and not inside a unit test. jest.mock("contexts/useProxyLatency", () => ({ useProxyLatency: () => { - return hardCodedLatencies + return { proxyLatencies: hardCodedLatencies, refetch: jest.fn() } }, })) From d75752912f328cf48693efe62cd6ba068d291311 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Thu, 1 Jun 2023 09:28:54 -0400 Subject: [PATCH 5/6] rename --- site/src/contexts/useProxyLatency.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/site/src/contexts/useProxyLatency.ts b/site/src/contexts/useProxyLatency.ts index d432606b45d35..8d70d245ac880 100644 --- a/site/src/contexts/useProxyLatency.ts +++ b/site/src/contexts/useProxyLatency.ts @@ -42,12 +42,13 @@ export const useProxyLatency = ( {}, ) - // This fetchNumber is used to trigger a refetch of the proxy latencies. - const [fetchNumber, setFetchNumber] = useState(0) - const refetch = (): void => { - setFetchNumber(fetchNumber + 1) + // This latestFetchRequest is used to trigger a refetch of the proxy latencies. + const [latestFetchRequest, setLatestFetchRequest] = useState(new Date().toISOString()) + const refetch = () => { + setLatestFetchRequest(new Date().toISOString()) } + // Only run latency updates when the proxies change. useEffect(() => { if (!proxies) { @@ -157,7 +158,7 @@ export const useProxyLatency = ( // via the performance observer. So we can disconnect the observer. observer.disconnect() }) - }, [proxies, fetchNumber]) + }, [proxies, latestFetchRequest]) return { proxyLatencies, From 5296e1a8d6398c9ea0b7bee6481c80f3712237d9 Mon Sep 17 00:00:00 2001 From: Steven Masley Date: Thu, 1 Jun 2023 09:30:08 -0400 Subject: [PATCH 6/6] fmt --- site/jest.setup.ts | 2 +- site/src/contexts/useProxyLatency.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/site/jest.setup.ts b/site/jest.setup.ts index 9476d6e0ce7a4..1ee61c0a6ee02 100644 --- a/site/jest.setup.ts +++ b/site/jest.setup.ts @@ -35,7 +35,7 @@ jest.mock("contexts/useProxyLatency", () => ({ }, {} as Record) }, [proxies]) - return {proxyLatencies, refetch: jest.fn() } + return { proxyLatencies, refetch: jest.fn() } }, })) diff --git a/site/src/contexts/useProxyLatency.ts b/site/src/contexts/useProxyLatency.ts index 8d70d245ac880..1bbfbf9ec1f37 100644 --- a/site/src/contexts/useProxyLatency.ts +++ b/site/src/contexts/useProxyLatency.ts @@ -43,12 +43,13 @@ export const useProxyLatency = ( ) // This latestFetchRequest is used to trigger a refetch of the proxy latencies. - const [latestFetchRequest, setLatestFetchRequest] = useState(new Date().toISOString()) + const [latestFetchRequest, setLatestFetchRequest] = useState( + new Date().toISOString(), + ) const refetch = () => { setLatestFetchRequest(new Date().toISOString()) } - // Only run latency updates when the proxies change. useEffect(() => { if (!proxies) {