mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Improve executions list polling performance (#6355)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
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();

45
packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
View File

@@ -11,8 +11,8 @@
</div>
<div :class="$style.controls">
<el-checkbox
v-model="autoRefresh"
@change="onAutoRefreshToggle"
:value="autoRefresh"
@input="$emit('update:autoRefresh', $event)"
data-test-id="auto-refresh-checkbox"
>
{{ $locale.baseText('executionsList.autoRefresh') }}
@@ -39,7 +39,6 @@
:ref="`execution-${temporaryExecution.id}`"
:data-test-id="`execution-details-${temporaryExecution.id}`"
:showGap="true"
@refresh="onRefresh"
@retryExecution="onRetryExecution"
/>
<execution-card
@@ -48,7 +47,6 @@
:execution="execution"
:ref="`execution-${execution.id}`"
:data-test-id="`execution-details-${execution.id}`"
@refresh="onRefresh"
@retryExecution="onRetryExecution"
/>
<div v-if="loadingMore" class="mr-m">
@@ -85,6 +83,10 @@ export default defineComponent({
ExecutionFilter,
},
props: {
autoRefresh: {
type: Boolean,
default: false,
},
executions: {
type: Array as PropType<IExecutionsSummary[]>,
required: true,
@@ -106,8 +108,6 @@ export default defineComponent({
return {
VIEWS,
filter: {} as ExecutionFilterType,
autoRefresh: false,
autoRefreshInterval: undefined as undefined | NodeJS.Timer,
};
},
computed: {
@@ -126,39 +126,12 @@ export default defineComponent({
},
},
mounted() {
this.autoRefresh = this.uiStore.executionSidebarAutoRefresh === true;
this.startAutoRefreshInterval();
// On larger screens, we need to load more then first page of executions
// for the scroll bar to appear and infinite scrolling is enabled
this.checkListSize();
this.scrollToActiveCard();
document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);
},
beforeDestroy() {
this.stopAutoRefreshInterval();
document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);
},
methods: {
startAutoRefreshInterval() {
if (this.autoRefresh) {
this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4000);
}
},
stopAutoRefreshInterval() {
if (this.autoRefreshInterval) {
clearInterval(this.autoRefreshInterval);
this.autoRefreshInterval = undefined;
}
},
onDocumentVisibilityChange() {
if (document.visibilityState === 'hidden') {
this.stopAutoRefreshInterval();
} else {
this.startAutoRefreshInterval();
}
},
loadMore(limit = 20): void {
if (!this.loading) {
const executionsListRef = this.$refs.executionList as HTMLElement | undefined;
@@ -184,12 +157,6 @@ export default defineComponent({
reloadExecutions(): void {
this.$emit('reloadExecutions');
},
onAutoRefreshToggle(): void {
this.uiStore.executionSidebarAutoRefresh = this.autoRefresh;
this.stopAutoRefreshInterval(); // Clear any previously existing intervals (if any - there shouldn't)
this.startAutoRefreshInterval();
},
checkListSize(): void {
const sidebarContainerRef = this.$refs.container as HTMLElement | undefined;
const currentExecutionCardRefs = this.$refs[