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

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() }
   },
 }))
 

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<string, ProxyLatencyReport>
+  // 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<PropsWithChildren> = ({ 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<PropsWithChildren> = ({ children }) => {
     <ProxyContext.Provider
       value={{
         proxyLatencies,
+        refetchProxyLatencies,
         userProxy: userSavedProxy,
         proxy: experimentEnabled
           ? proxy

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,31 @@ const proxyLatenciesReducer = (
   action: ProxyLatencyAction,
 ): Record<string, ProxyLatencyReport> => {
   // Just overwrite any existing latency.
-  return {
-    ...state,
-    [action.proxyID]: action.report,
-  }
+  state[action.proxyID] = action.report
+  return state
 }
 
 export const useProxyLatency = (
   proxies?: RegionsResponse,
-): Record<string, ProxyLatencyReport> => {
+): {
+  // 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<string, ProxyLatencyReport>
+} => {
   const [proxyLatencies, dispatchProxyLatencies] = useReducer(
     proxyLatenciesReducer,
     {},
   )
 
+  // 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) {
@@ -148,7 +159,10 @@ export const useProxyLatency = (
         // via the performance observer. So we can disconnect the observer.
         observer.disconnect()
       })
-  }, [proxies])
+  }, [proxies, latestFetchRequest])
 
-  return proxyLatencies
+  return {
+    proxyLatencies,
+    refetch,
+  }
 }