perf: cancel dashboard page requests #19029
Conversation
|
🔥 |
|
|
||
| while (cached.length) { | ||
| curr = cached.pop() | ||
| curr.resolve.apply(curr, args) // eslint-disable-line prefer-spread |
There was a problem hiding this comment.
curious about the apply here rather than just calling curr.resolve(...args) since it's using curr for context
| @@ -363,6 +370,10 @@ export const getDashboard = (dashboardID: string) => async ( | |||
| dispatch(creators.setDashboard(dashboardID, RemoteDataState.Done, normDash)) | |||
| dispatch(updateTimeRangeFromQueryParams(dashboardID)) | |||
| } catch (error) { | |||
| if (error.name === 'AbortError') { | |||
There was a problem hiding this comment.
we allso check for 'CancellationError' in some handlers. not sure if we need that here, but wanted to bring it up
There was a problem hiding this comment.
Great work. I am curious why we didn’t go down the route of triggering a lifecycle event on the TimeSeries.tsx component since we’d have direct access to the pendingResults and can simply cancel the cell queries from there? Unless that’s what’s currently happening and the event isn’t being handled correctly?
More specifically to the point. The TimeSeries cell has a reference to the runQuery result that’s generated (which in and of itself generates an abortController). We can call cancel using the pending results on the unmount:
and you'll see how it's being used here:
influxdb/ui/src/shared/components/TimeSeries.tsx
Lines 201 to 202 in a57fdc1
| for runQuery. this will allow only one query to be run at a time, and | ||
| pass its results to any calls made to it while waiting for the api. | ||
| usage: | ||
| const mutex = RunQueryPromiseMutex() |
There was a problem hiding this comment.
Where have I seen this before?
Closes #18640
The Problem
A bunch of slow and unresolved requests to
/querywould continue to fetch despite the user navigating away from the page. Thus making the rest of their experience slow and 💩The Solution
When the the Dashboard Page un-mounts cancel any requests to
/querythat are in flight.