Skip to content

chore: add function to refetch latencies to ProxyContext #7769

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 1, 2023
Merged

chore: add function to refetch latencies to ProxyContext #7769

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
771d41f
Allow refetching of proxy latencies
Emyrk Jun 1, 2023
d52d179
Pass refetch funtion up the context stack
Emyrk Jun 1, 2023
8ea2cb0
Add to menu bar
Emyrk Jun 1, 2023
ed4aebf
Fix mocks
Emyrk Jun 1, 2023
d757529
rename
Emyrk Jun 1, 2023
5296e1a
fmt
Emyrk Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions site/src/components/AppLink/AppLink.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ const Template: Story<AppLinkProps> = (args) => (
clearProxy: () => {
return
},
refetchProxyLatencies: () => {
return
},
}}
>
<AppLink {...args} />
Expand Down
1 change: 1 addition & 0 deletions site/src/components/Navbar/NavbarView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const proxyContextValue: ProxyContextValue = {
isFetched: true,
setProxy: jest.fn(),
clearProxy: action("clearProxy"),
refetchProxyLatencies: jest.fn(),
proxyLatencies: {},
}

Expand Down
4 changes: 4 additions & 0 deletions site/src/components/Navbar/NavbarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
const buttonRef = useRef<HTMLButtonElement>(null)
const [isOpen, setIsOpen] = useState(false)
const selectedProxy = proxyContextValue.proxy.proxy
const refreshLatencies = proxyContextValue.refetchProxyLatencies
const closeMenu = () => setIsOpen(false)
const navigate = useNavigate()

Expand Down Expand Up @@ -293,6 +294,9 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
>
Proxy settings
</MenuItem>
<MenuItem sx={{ fontSize: 14 }} onClick={refreshLatencies}>
Refresh Latencies
</MenuItem>
</Menu>
</>
)
Expand Down
3 changes: 3 additions & 0 deletions site/src/components/Resources/AgentRow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@ const TemplateFC = (
clearProxy: () => {
return
},
refetchProxyLatencies: () => {
return
},
}}
>
<AgentRow {...args} />
Expand Down
6 changes: 6 additions & 0 deletions site/src/components/Resources/ResourceCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ Example.args = {
clearProxy: () => {
return
},
refetchProxyLatencies: () => {
return
},
}}
>
<AgentRow
Expand Down Expand Up @@ -103,6 +106,9 @@ BunchOfMetadata.args = {
clearProxy: () => {
return
},
refetchProxyLatencies: () => {
return
},
}}
>
<AgentRow
Expand Down
3 changes: 3 additions & 0 deletions site/src/components/Workspace/Workspace.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ const Template: Story<WorkspaceProps> = (args) => (
setProxy: () => {
return
},
refetchProxyLatencies: () => {
return
},
}}
>
<Workspace {...args} />
Expand Down
7 changes: 6 additions & 1 deletion site/src/contexts/ProxyContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand All @@ -128,6 +132,7 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
<ProxyContext.Provider
value={{
proxyLatencies,
refetchProxyLatencies,
userProxy: userSavedProxy,
proxy: experimentEnabled
? proxy
Expand Down
28 changes: 20 additions & 8 deletions site/src/contexts/useProxyLatency.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -25,20 +25,29 @@ 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 fetchNumber is used to trigger a refetch of the proxy latencies.
const [fetchNumber, setFetchNumber] = useState(0)
const refetch = (): void => {
setFetchNumber(fetchNumber + 1)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this name is ok, but I would do something like this:

const [latestFetchRequest, setLatestFetchRequest] = useState(new Date().toISOString())

const refetch = () => {
  setLatestFetchRequest(new Date().toISOString())
}

I think this is a bit better because we can display the latest time the latency was checked if we want to and the naming is easier to reason about but it is up to you.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Each latency report has the date it was checked. I was thinking about adding an integer counter so the FE can tell if the latency provided is the latest one requested. But I figured if we want to add UI flair, we can implement it then.

I will update the name, and make it a date, but won't do anything with the date for now.

}

// Only run latency updates when the proxies change.
useEffect(() => {
if (!proxies) {
Expand Down Expand Up @@ -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,
}
}
1 change: 1 addition & 0 deletions site/src/pages/TerminalPage/TerminalPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const renderTerminal = () => {
isLoading: false,
setProxy: jest.fn(),
clearProxy: jest.fn(),
refetchProxyLatencies: jest.fn(),
}}
>
<TerminalPage renderer="dom" />
Expand Down