diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue index d967911693..34414b117e 100644 --- a/packages/editor-ui/src/components/ExecutionsList.vue +++ b/packages/editor-ui/src/components/ExecutionsList.vue @@ -273,7 +273,7 @@ import WorkflowActivator from '@/components/WorkflowActivator.vue'; import Modal from '@/components/Modal.vue'; import { externalHooks } from '@/mixins/externalHooks'; -import { WAIT_TIME_UNLIMITED, EXECUTIONS_MODAL_KEY, VIEWS } from '@/constants'; +import { WAIT_TIME_UNLIMITED, EXECUTIONS_MODAL_KEY, VIEWS, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants'; import { restApi } from '@/mixins/restApi'; import { genericHelpers } from '@/mixins/genericHelpers'; @@ -434,7 +434,13 @@ export default mixins(externalHooks, genericHelpers, restApi, showMessage).exten this.modalBus.$emit('close'); }, convertToDisplayDate, - displayExecution(execution: IExecutionShortResponse, e: PointerEvent) { + displayExecution(execution: IExecutionsSummary, e: PointerEvent) { + if (!this.workflowsStore.workflowId || this.workflowsStore.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID || execution.workflowId !== this.workflowsStore.workflowId) { + const workflowExecutions: IExecutionsSummary[] = this.combinedExecutions.filter(ex => ex.workflowId === execution.workflowId); + this.workflowsStore.currentWorkflowExecutions = workflowExecutions; + this.workflowsStore.activeWorkflowExecution = execution; + } + if (e.metaKey || e.ctrlKey) { const route = this.$router.resolve({ name: VIEWS.EXECUTION_PREVIEW, diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue index 966d67fc91..f78d77ffe0 100644 --- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue +++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue @@ -71,6 +71,7 @@ v-for="execution in executions" :key="execution.id" :execution="execution" + :ref="`execution-${execution.id}`" @refresh="onRefresh" @retryExecution="onRetryExecution" /> @@ -95,6 +96,7 @@ import Vue from 'vue'; import { PropType } from 'vue'; import { mapStores } from 'pinia'; import { useUIStore } from '@/stores/ui'; +import { useWorkflowsStore } from '@/stores/workflows'; export default Vue.extend({ name: 'executions-sidebar', @@ -127,7 +129,7 @@ export default Vue.extend({ }; }, computed: { - ...mapStores(useUIStore), + ...mapStores(useUIStore, useWorkflowsStore), statusFilterApplied(): boolean { return this.filter.status !== ''; }, @@ -153,6 +155,7 @@ export default Vue.extend({ if (this.autoRefresh) { this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4000); } + this.scrollToActiveCard(); }, beforeDestroy() { if (this.autoRefreshInterval) { @@ -206,6 +209,18 @@ export default Vue.extend({ status: this.filter.status, }; }, + scrollToActiveCard(): void { + const executionsList = this.$refs.executionList as HTMLElement; + const currentExecutionCard = this.$refs[`execution-${this.workflowsStore.activeWorkflowExecution?.id}`] as Vue[]; + + if (executionsList && currentExecutionCard && this.workflowsStore.activeWorkflowExecution) { + const cardElement = currentExecutionCard[0].$el as HTMLElement; + const cardRect = cardElement.getBoundingClientRect(); + if (cardRect.top > executionsList.offsetHeight) { + executionsList.scrollTo({ top: cardRect.top }); + } + } + }, }, }); diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue index 7594bc0d68..909e88917c 100644 --- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue +++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue @@ -174,7 +174,13 @@ export default mixins( const shouldUpdate = workflowUpdated && !onNewWorkflow; await this.initView(shouldUpdate); if (!shouldUpdate) { - await this.setExecutions(); + if (this.workflowsStore.currentWorkflowExecutions.length > 0) { + const workflowExecutions = await this.loadExecutions(); + this.workflowsStore.addToCurrentExecutions(workflowExecutions); + this.setActiveExecution(); + } else { + await this.setExecutions(); + } } this.loading = false; }, @@ -186,7 +192,9 @@ export default mixins( } await this.openWorkflow(this.$route.params.name); this.uiStore.nodeViewInitialized = false; - this.setExecutions(); + if(this.workflowsStore.currentWorkflowExecutions.length === 0) { + this.setExecutions(); + } if (this.activeExecution) { this.$router .push({ diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts index 1652bba872..a9cfd91ba7 100644 --- a/packages/editor-ui/src/stores/workflows.ts +++ b/packages/editor-ui/src/stores/workflows.ts @@ -935,7 +935,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, { requestFilter, ); } - // context.commit('setTotalFinishedExecutionsCount', finishedExecutions.count); + this.finishedExecutionsCount = finishedExecutions.count; return [...activeExecutions, ...(finishedExecutions.results || [])]; } catch (error) { throw error; @@ -947,7 +947,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, { addToCurrentExecutions(executions: IExecutionsSummary[]): void { executions.forEach(execution => { const exists = this.currentWorkflowExecutions.find(ex => ex.id === execution.id); - if (!exists) { + if (!exists && execution.workflowId === this.workflowId) { this.currentWorkflowExecutions.push(execution); } }); diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 143d28a002..291f0b5db5 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -884,6 +884,9 @@ export default mixins( }, async openWorkflow(workflowId: string) { this.startLoading(); + + const selectedExecution = this.workflowsStore.activeWorkflowExecution; + this.resetWorkspace(); let data: IWorkflowDb | undefined; try { @@ -939,7 +942,12 @@ export default mixins( } this.canvasStore.zoomToFit(); this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name }); - this.workflowsStore.activeWorkflowExecution = null; + if (selectedExecution?.workflowId !== workflowId) { + this.workflowsStore.activeWorkflowExecution = null; + this.workflowsStore.currentWorkflowExecutions = []; + } else { + this.workflowsStore.activeWorkflowExecution = selectedExecution; + } this.stopLoading(); return data; },