fix: Improve executions list polling performance (#6355)

* refactor: move auto-refresh logic to executions list

* fix: improve auto-refresh polling

* fix: update executions list view to use same interval mechanism as executions sidebar

* chore: fix linting issue

* fix: fix executions list test

* fix: fix linting issue
This commit is contained in:
Alex Grozav
2023-06-01 16:59:49 +03:00
committed by GitHub
parent 33e7ff8869
commit b5cabfef54
4 changed files with 93 additions and 69 deletions

View File

@@ -5,11 +5,12 @@
:loading="loading && !executions.length"
:loadingMore="loadingMore"
:temporaryExecution="temporaryExecution"
:auto-refresh="autoRefresh"
@update:autoRefresh="onAutoRefreshToggle"
@reloadExecutions="setExecutions"
@filterUpdated="onFilterUpdated"
@loadMore="onLoadMore"
@retryExecution="onRetryExecution"
@refresh="loadAutoRefresh"
/>
<div :class="$style.content" v-if="!hidePreview">
<router-view
@@ -83,6 +84,8 @@ export default defineComponent({
loadingMore: false,
filter: {} as ExecutionFilterType,
temporaryExecution: null as IExecutionsSummary | null,
autoRefresh: false,
autoRefreshTimeout: undefined as undefined | NodeJS.Timer,
};
},
setup() {
@@ -187,8 +190,17 @@ export default defineComponent({
await this.setExecutions();
}
}
this.autoRefresh = this.uiStore.executionSidebarAutoRefresh === true;
this.startAutoRefreshInterval();
document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);
this.loading = false;
},
beforeDestroy() {
this.stopAutoRefreshInterval();
document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);
},
methods: {
async initView(loadWorkflow: boolean): Promise<void> {
if (loadWorkflow) {
@@ -325,7 +337,7 @@ export default defineComponent({
);
}
},
async onFilterUpdated(filter: ExecutionFilterType): void {
async onFilterUpdated(filter: ExecutionFilterType) {
this.filter = filter;
await this.setExecutions();
},
@@ -333,6 +345,33 @@ export default defineComponent({
this.workflowsStore.currentWorkflowExecutions = await this.loadExecutions();
await this.setActiveExecution();
},
async startAutoRefreshInterval() {
if (this.autoRefresh) {
await this.loadAutoRefresh();
this.autoRefreshTimeout = setTimeout(() => this.startAutoRefreshInterval(), 4000);
}
},
stopAutoRefreshInterval() {
if (this.autoRefreshTimeout) {
clearTimeout(this.autoRefreshTimeout);
this.autoRefreshTimeout = undefined;
}
},
onAutoRefreshToggle(value: boolean): void {
this.autoRefresh = value;
this.uiStore.executionSidebarAutoRefresh = this.autoRefresh;
this.stopAutoRefreshInterval(); // Clear any previously existing intervals (if any - there shouldn't)
this.startAutoRefreshInterval();
},
onDocumentVisibilityChange() {
if (document.visibilityState === 'hidden') {
this.stopAutoRefreshInterval();
} else {
this.startAutoRefreshInterval();
}
},
async loadAutoRefresh(): Promise<void> {
// Most of the auto-refresh logic is taken from the `ExecutionsList` component
const fetchedExecutions: IExecutionsSummary[] = await this.loadExecutions();