Extract auto refresh from stores #2658
Conversation
src/Frontend/src/App.vue
Outdated
| onMounted(async () => { | ||
| await useServiceControl(); | ||
| useServiceControlAutoRefresh(); |
There was a problem hiding this comment.
Made this initialisation of background refresh tasks explicit so that they get cleaned up as part of unmount.
| ); | ||
| onUnmounted(() => { | ||
| dataRetriever.updateTimeout(null); |
There was a problem hiding this comment.
This was just to stop the autorefresh; it is no longer needed. We do this differently now.
| onUnhandledRequest: (request, { error }) => { | ||
| console.log("Unhandled %s %s", request.method, request.url); | ||
| error(); | ||
| onUnhandledRequest: (request) => { |
There was a problem hiding this comment.
Decided to reduce this to just a warning, given that we don't really need to blow up.
|
|
||
| return ( | ||
| "default-src 'none';" + | ||
| "default-src 'self';" + |
There was a problem hiding this comment.
This is to enable the Vue Devtools to render correctly.
This CSP is only for dev.
| globals: true, | ||
| clearMocks: true, | ||
| css: true, | ||
| testTimeout: 10000, |
There was a problem hiding this comment.
Decided to slightly increase the timeout after reviewing the times on the CI.
They seem to take longer randomly.
This file is auto generated by msw
| immediate?: boolean; | ||
| } | ||
|
|
||
| export default function createAutoRefresh(fetch: () => Promise<void>, { intervalMs, immediate = true }: AutoRefreshOptions) { |
There was a problem hiding this comment.
why 'create' rather than 'use'? This appears to be a composable (it uses refs and other composables) so should be use
| const guid = id.toLocaleLowerCase().startsWith(prefix) ? id.substring(prefix.length) : id; | ||
| await useDeleteFromServiceControl(`${prefix}${guid}`); | ||
| }); | ||
| pauseRefresh = true; |
There was a problem hiding this comment.
i think this needs to be a proper lock, or counter, otherwise a second (and subsequent) custom check could be dismissed while the first is being dismissed, the first one will set pauseRefresh to false while the second is still dismissing
| // HINT: This is required to handle the difference between ServiceControl 4 and 5 | ||
| const guid = id.toLocaleLowerCase().startsWith(prefix) ? id.substring(prefix.length) : id; | ||
| await useDeleteFromServiceControl(`${prefix}${guid}`); | ||
| pauseRefresh = false; |
There was a problem hiding this comment.
if any refreshes would have happened, should a refresh now happen immediately rather than waiting for the next interval to expire?
| const historyPeriodStore = useMonitoringHistoryPeriodStore(); | ||
|
|
||
| const getMemoisedEndpointDetails = memoiseOne(MonitoringEndpoints.useGetEndpointDetails); | ||
| const getMemoisedEndpointDetails = useMemoize(MonitoringEndpoints.useGetEndpointDetails); |
There was a problem hiding this comment.
i read https://vueuse.org/core/useMemoize/ to see if it's different to memoiseOne, since memoiseOne is specifically designed to only ever keep one invocation cached, and it looks like it's the same? A bit unclear... but shouldn't really matter either way
| "default-src 'self';" + | ||
| `connect-src ws://localhost:${hostPort} https://platformupdate.particular.net ${destinations} 'self';` + | ||
| "font-src 'self' data:;" + | ||
| "font-src 'self' https://fonts.gstatic.com/ data:;" + |
There was a problem hiding this comment.
we shouldn't be using google fonts from gstatic. Does this affect what's served? IIRC EU data privacy doesn't allow for use of US hosted auto-load things, of which google fonts was a test case
This PR re-enabled the latest Windows CI runner.
In this PR, we remove the auto-refresh from the stores and instead create a composable that uses
onmountandunmountedto start and stop the auto-refresh, which is then bound to a component.We also standardised on
vueuselib for things like throttling and debouncing, ... This library is more in line with Vue development practices instead of lodash and other libs.I also took this opportunity to add Vue DevTools, which helps with debugging Vue apps in the browser. This can be seen as an extension of the browser's developer tools. This is only available when running in Vite locally.