From d5d9f58f1777040c63a2a0aa3c0d7bf632dc7b26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Fri, 31 Mar 2023 18:48:30 +0200 Subject: [PATCH] fix(editor): Fix loading executions in long execution list (#5843) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(editor): Fix loading executions in long execution list * ⚡ Added max number of attempts before displaying temporary execution card * ⚡ Simplifying temp execution preview logic, handling current execution delete, updating style * 💄 Renaming `executionWIthGap` -> `temporaryExecution` --- .../ExecutionsView/ExecutionCard.vue | 12 ++++++ .../ExecutionsView/ExecutionsList.vue | 43 ++++++++++++++----- .../ExecutionsView/ExecutionsSidebar.vue | 14 +++++- 3 files changed, 58 insertions(+), 11 deletions(-) diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue index 8885b44490..54b550d563 100644 --- a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue +++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue @@ -6,6 +6,7 @@ [$style.active]: isActive, [$style[executionUIDetails.name]]: true, [$style.highlight]: highlight, + [$style.showGap]: showGap, }" > .executionCard { display: flex; + flex-direction: column; padding-right: var(--spacing-m); &.active { @@ -252,4 +258,10 @@ export default mixins(executionHelpers, showMessage, restApi).extend({ margin-left: var(--spacing-2xs); } } +.showGap { + margin-bottom: var(--spacing-2xs); + .executionLink { + border-bottom: 1px solid var(--color-foreground-dark); + } +} diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue index a64b056ead..08babeb3ec 100644 --- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue +++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue @@ -4,9 +4,10 @@ :executions="executions" :loading="loading" :loadingMore="loadingMore" + :temporaryExecution="temporaryExecution" @reloadExecutions="setExecutions" @filterUpdated="onFilterUpdated" - @loadMore="loadMore" + @loadMore="onLoadMore" @retryExecution="onRetryExecution" @refresh="loadAutoRefresh" /> @@ -55,7 +56,7 @@ import { Route } from 'vue-router'; import { executionHelpers } from '@/mixins/executionsHelpers'; import { range as _range } from 'lodash-es'; import { debounceHelper } from '@/mixins/debounce'; -import { getNodeViewTab, isEmpty, NO_NETWORK_ERROR_CODE } from '@/utils'; +import { getNodeViewTab, NO_NETWORK_ERROR_CODE } from '@/utils'; import { workflowHelpers } from '@/mixins/workflowHelpers'; import { mapStores } from 'pinia'; import { useWorkflowsStore } from '@/stores/workflows'; @@ -65,6 +66,11 @@ import { useNodeTypesStore } from '@/stores/nodeTypes'; import { useTagsStore } from '@/stores/tags'; import { executionFilterToQueryFilter } from '@/utils/executionUtils'; +// Number of execution pages that are fetched before temporary execution card is shown +const MAX_LOADING_ATTEMPTS = 1; +// Number of executions fetched on each page +const LOAD_MORE_PAGE_SIZE = 10; + export default mixins( restApi, showMessage, @@ -81,6 +87,7 @@ export default mixins( loading: false, loadingMore: false, filter: {} as ExecutionFilterType, + temporaryExecution: null as IExecutionsSummary | null, }; }, computed: { @@ -234,6 +241,10 @@ export default mixins( if (currentExecutions.find((ex) => ex.id === newExecution.id) === undefined) { currentExecutions.push(newExecution); } + // If we loaded temp execution, put it into it's place and remove from top of the list + if (newExecution.id === this.temporaryExecution?.id) { + this.temporaryExecution = null; + } } this.workflowsStore.currentWorkflowExecutions = currentExecutions; this.loadingMore = false; @@ -250,6 +261,9 @@ export default mixins( this.executions[0]; await this.restApi().deleteExecutions({ ids: [this.$route.params.executionId] }); + if (this.temporaryExecution?.id === this.$route.params.executionId) { + this.temporaryExecution = null; + } if (this.executions.length > 0) { await this.$router .push({ @@ -371,7 +385,7 @@ export default mixins( this.workflowsStore.activeWorkflowExecution = updatedActiveExecution; } else { const activeInList = existingExecutions.some((ex) => ex.id === this.activeExecution?.id); - if (!activeInList && this.executions.length > 0) { + if (!activeInList && this.executions.length > 0 && !this.temporaryExecution) { this.$router .push({ name: VIEWS.EXECUTION_PREVIEW, @@ -422,7 +436,11 @@ export default mixins( } // If there is no execution in the route, select the first one - if (this.workflowsStore.activeWorkflowExecution === null && this.executions.length > 0) { + if ( + this.workflowsStore.activeWorkflowExecution === null && + this.executions.length > 0 && + !this.temporaryExecution + ) { this.workflowsStore.activeWorkflowExecution = this.executions[0]; this.$router .push({ @@ -435,8 +453,8 @@ export default mixins( async tryToFindExecution(executionId: string, attemptCount = 0): Promise { // First check if executions exists in the DB at all if (attemptCount === 0) { - const executionExists = await this.workflowsStore.fetchExecutionDataById(executionId); - if (!executionExists) { + const existingExecution = await this.workflowsStore.fetchExecutionDataById(executionId); + if (!existingExecution) { this.workflowsStore.activeWorkflowExecution = null; this.$showError( new Error( @@ -447,17 +465,21 @@ export default mixins( this.$locale.baseText('nodeView.showError.openExecution.title'), ); return; + } else { + this.temporaryExecution = existingExecution as IExecutionsSummary; } } - // stop if the execution wasn't found in the first 1000 lookups - if (attemptCount >= 10) { + if (attemptCount >= MAX_LOADING_ATTEMPTS) { + if (this.temporaryExecution) { + this.workflowsStore.activeWorkflowExecution = this.temporaryExecution; + return; + } this.workflowsStore.activeWorkflowExecution = null; return; } - // Fetch next batch of executions - await this.loadMore(100); + await this.loadMore(LOAD_MORE_PAGE_SIZE); const execution = this.workflowsStore.getExecutionDataById(executionId); if (!execution) { // If it's not there load next until found @@ -467,6 +489,7 @@ export default mixins( } else { // When found set execution as active this.workflowsStore.activeWorkflowExecution = execution; + this.temporaryExecution = null; return; } }, diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue index a186db53c7..4a126a33d3 100644 --- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue +++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue @@ -36,7 +36,15 @@ + , + default: null, + }, }, data() { return {