Skip to content

Commit b32ed2d

Browse files
EmyrkEmyrk
authored
chore: add function to refetch latencies to ProxyContext (#7769)
* Allow refetching of proxy latencies * Pass refetch funtion up the context stack * Add to menu bar
1 parent cf8d2bc commit b32ed2d

11 files changed

+52
-12
lines changed

‎site/jest.setup.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ jest.mock("contexts/useProxyLatency", () => ({
1919
useProxyLatency: (proxies?: RegionsResponse) => {
2020
// Must use `useMemo` here to avoid infinite loop.
2121
// Mocking the hook with a hook.
22-
const latencies = useMemo(() => {
22+
const proxyLatencies = useMemo(() => {
2323
if (!proxies) {
2424
return {} as Record<string, ProxyLatencyReport>
2525
}
@@ -35,7 +35,7 @@ jest.mock("contexts/useProxyLatency", () => ({
3535
}, {} as Record<string, ProxyLatencyReport>)
3636
}, [proxies])
3737

38-
return latencies
38+
return { proxyLatencies, refetch: jest.fn() }
3939
},
4040
}))
4141

‎site/src/components/AppLink/AppLink.stories.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ const Template: Story<AppLinkProps> = (args) => (
2929
clearProxy: () => {
3030
return
3131
},
32+
refetchProxyLatencies: () => {
33+
return
34+
},
3235
}}
3336
>
3437
<AppLink {...args} />

‎site/src/components/Navbar/NavbarView.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const proxyContextValue: ProxyContextValue = {
1919
isFetched: true,
2020
setProxy: jest.fn(),
2121
clearProxy: action("clearProxy"),
22+
refetchProxyLatencies: jest.fn(),
2223
proxyLatencies: {},
2324
}
2425

‎site/src/components/Navbar/NavbarView.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,7 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
189189
const buttonRef = useRef<HTMLButtonElement>(null)
190190
const [isOpen, setIsOpen] = useState(false)
191191
const selectedProxy = proxyContextValue.proxy.proxy
192+
const refreshLatencies = proxyContextValue.refetchProxyLatencies
192193
const closeMenu = () => setIsOpen(false)
193194
const navigate = useNavigate()
194195

@@ -293,6 +294,9 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
293294
>
294295
Proxy settings
295296
</MenuItem>
297+
<MenuItem sx={{ fontSize: 14 }} onClick={refreshLatencies}>
298+
Refresh Latencies
299+
</MenuItem>
296300
</Menu>
297301
</>
298302
)

‎site/src/components/Resources/AgentRow.stories.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ const TemplateFC = (
6868
clearProxy: () => {
6969
return
7070
},
71+
refetchProxyLatencies: () => {
72+
return
73+
},
7174
}}
7275
>
7376
<AgentRow {...args} />

‎site/src/components/Resources/ResourceCard.stories.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ Example.args = {
3333
clearProxy: () => {
3434
return
3535
},
36+
refetchProxyLatencies: () => {
37+
return
38+
},
3639
}}
3740
>
3841
<AgentRow
@@ -103,6 +106,9 @@ BunchOfMetadata.args = {
103106
clearProxy: () => {
104107
return
105108
},
109+
refetchProxyLatencies: () => {
110+
return
111+
},
106112
}}
107113
>
108114
<AgentRow

‎site/src/components/Workspace/Workspace.stories.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ const Template: Story<WorkspaceProps> = (args) => (
5353
setProxy: () => {
5454
return
5555
},
56+
refetchProxyLatencies: () => {
57+
return
58+
},
5659
}}
5760
>
5861
<Workspace {...args} />

‎site/src/contexts/ProxyContext.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import userEvent from "@testing-library/user-event"
2626
// here and not inside a unit test.
2727
jest.mock("contexts/useProxyLatency", () => ({
2828
useProxyLatency: () => {
29-
return hardCodedLatencies
29+
return { proxyLatencies: hardCodedLatencies, refetch: jest.fn() }
3030
},
3131
}))
3232

‎site/src/contexts/ProxyContext.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ export interface ProxyContextValue {
4545
// then the latency has not been fetched yet. Calculations happen async for each proxy in the list.
4646
// Refer to the returned report for a given proxy for more information.
4747
proxyLatencies: Record<string, ProxyLatencyReport>
48+
// refetchProxyLatencies will trigger refreshing of the proxy latencies. By default the latencies
49+
// are loaded once.
50+
refetchProxyLatencies: () => void
4851
// setProxy is a function that sets the user's selected proxy. This function should
4952
// only be called if the user is manually selecting a proxy. This value is stored in local
5053
// storage and will persist across reloads and tabs.
@@ -101,7 +104,8 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
101104

102105
// Every time we get a new proxiesResponse, update the latency check
103106
// to each workspace proxy.
104-
const proxyLatencies = useProxyLatency(proxiesResp)
107+
const { proxyLatencies, refetch: refetchProxyLatencies } =
108+
useProxyLatency(proxiesResp)
105109

106110
// updateProxy is a helper function that when called will
107111
// update the proxy being used.
@@ -128,6 +132,7 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
128132
<ProxyContext.Provider
129133
value={{
130134
proxyLatencies,
135+
refetchProxyLatencies,
131136
userProxy: userSavedProxy,
132137
proxy: experimentEnabled
133138
? proxy

‎site/src/contexts/useProxyLatency.ts

+22-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Region, RegionsResponse } from "api/typesGenerated"
2-
import { useEffect, useReducer } from "react"
2+
import { useEffect, useReducer, useState } from "react"
33
import PerformanceObserver from "@fastly/performance-observer-polyfill"
44
import axios from "axios"
55
import { generateRandomString } from "utils/random"
@@ -25,20 +25,31 @@ const proxyLatenciesReducer = (
2525
action: ProxyLatencyAction,
2626
): Record<string, ProxyLatencyReport> => {
2727
// Just overwrite any existing latency.
28-
return {
29-
...state,
30-
[action.proxyID]: action.report,
31-
}
28+
state[action.proxyID] = action.report
29+
return state
3230
}
3331

3432
export const useProxyLatency = (
3533
proxies?: RegionsResponse,
36-
): Record<string, ProxyLatencyReport> => {
34+
): {
35+
// Refetch can be called to refetch the proxy latencies.
36+
// Until the new values are loaded, the old values will still be used.
37+
refetch: () => void
38+
proxyLatencies: Record<string, ProxyLatencyReport>
39+
} => {
3740
const [proxyLatencies, dispatchProxyLatencies] = useReducer(
3841
proxyLatenciesReducer,
3942
{},
4043
)
4144

45+
// This latestFetchRequest is used to trigger a refetch of the proxy latencies.
46+
const [latestFetchRequest, setLatestFetchRequest] = useState(
47+
new Date().toISOString(),
48+
)
49+
const refetch = () => {
50+
setLatestFetchRequest(new Date().toISOString())
51+
}
52+
4253
// Only run latency updates when the proxies change.
4354
useEffect(() => {
4455
if (!proxies) {
@@ -148,7 +159,10 @@ export const useProxyLatency = (
148159
// via the performance observer. So we can disconnect the observer.
149160
observer.disconnect()
150161
})
151-
}, [proxies])
162+
}, [proxies, latestFetchRequest])
152163

153-
return proxyLatencies
164+
return {
165+
proxyLatencies,
166+
refetch,
167+
}
154168
}

‎site/src/pages/TerminalPage/TerminalPage.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const renderTerminal = () => {
5555
isLoading: false,
5656
setProxy: jest.fn(),
5757
clearProxy: jest.fn(),
58+
refetchProxyLatencies: jest.fn(),
5859
}}
5960
>
6061
<TerminalPage renderer="dom" />

0 commit comments

Comments
 (0)