Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(editor): Migrate WorkflowExecutionsListView.vue to composition API (no-changelog) #10198

Merged
merged 7 commits into from
Jul 31, 2024
Merged

refactor(editor): Migrate WorkflowExecutionsListView.vue to composition API (no-changelog) #10198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ee81d71
Migrate WorkflowExecutionsView.vue to composition API
RicardoE105 Jul 26, 2024
e24e637
fix condition in temporaryExecution computed method
RicardoE105 Jul 26, 2024
aaa6d0d
remove cancel and confirm handlers from promptSaveUnsavedWorkflowChanges
RicardoE105 Jul 29, 2024
1500cb1
fix typing issue
RicardoE105 Jul 29, 2024
ffdcac3
minor fi
RicardoE105 Jul 29, 2024
c727bc7
fix type issue
RicardoE105 Jul 29, 2024
fdf09f2
fix typing issue
RicardoE105 Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
253 changes: 87 additions & 166 deletions packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
:loading="loading && !executions.length"
:loading-more="loadingMore"
:temporary-execution="temporaryExecution"
@update:auto-refresh="$emit('update:auto-refresh', $event)"
@reload-executions="$emit('reload')"
@filter-updated="$emit('update:filters', $event)"
@load-more="$emit('load-more')"
@update:auto-refresh="emit('update:auto-refresh', $event)"
@reload-executions="emit('reload')"
@filter-updated="emit('update:filters', $event)"
@load-more="emit('load-more')"
@retry-execution="onRetryExecution"
/>
<div v-if="!hidePreview" :class="$style.content">
Expand All @@ -23,177 +23,98 @@
</div>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useRouter } from 'vue-router';
<script setup lang="ts">
import { computed } from 'vue';
import { onBeforeRouteLeave, useRouter } from 'vue-router';
import WorkflowExecutionsSidebar from '@/components/executions/workflow/WorkflowExecutionsSidebar.vue';
import {
MAIN_HEADER_TABS,
MODAL_CANCEL,
MODAL_CONFIRM,
PLACEHOLDER_EMPTY_WORKFLOW_ID,
VIEWS,
} from '@/constants';
import { MAIN_HEADER_TABS, VIEWS } from '@/constants';
import type { ExecutionFilterType, IWorkflowDb } from '@/Interface';
import type { ExecutionSummary, IDataObject } from 'n8n-workflow';
import { useMessage } from '@/composables/useMessage';
import { useToast } from '@/composables/useToast';
import type { ExecutionSummary } from 'n8n-workflow';
import { getNodeViewTab } from '@/utils/canvasUtils';
import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
import { useUIStore } from '@/stores/ui.store';
import { useSettingsStore } from '@/stores/settings.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useTagsStore } from '@/stores/tags.store';
import { executionFilterToQueryFilter } from '@/utils/executionUtils';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useDebounce } from '@/composables/useDebounce';
import { useNpsSurveyStore } from '@/stores/npsSurvey.store';

export default defineComponent({
name: 'WorkflowExecutionsList',
components: {
WorkflowExecutionsSidebar,
import { watch } from 'vue';

const props = withDefaults(
defineProps<{
loading: boolean;
workflow: IWorkflowDb;
executions: ExecutionSummary[];
execution?: ExecutionSummary;
RicardoE105 marked this conversation as resolved.
Show resolved Hide resolved
loadingMore: boolean;
}>(),
{
loading: false,
executions: () => [] as ExecutionSummary[],
loadingMore: false,
},
async beforeRouteLeave(to, _, next) {
if (getNodeViewTab(to) === MAIN_HEADER_TABS.WORKFLOW) {
next();
);

const emit = defineEmits<{
'execution:delete': [value: string];
'execution:stop': [value: string];
'execution:retry': [value: { id: string; loadWorkflow: boolean }];
'update:auto-refresh': [value: boolean];
'update:filters': [value: ExecutionFilterType];
'load-more': [];
reload: [];
}>();

const workflowHelpers = useWorkflowHelpers({ router: useRouter() });
const router = useRouter();

const temporaryExecution = computed(() => {
const isTemporary = !props.executions.find((execution) => execution.id === props.execution?.id);
return isTemporary ? props.execution : undefined;
});

const hidePreview = computed(() => {
return props.loading || (!props.execution && props.executions.length);
});

const onDeleteCurrentExecution = () => {
if (!props.execution?.id) return;

emit('execution:delete', props.execution.id);
};

const onStopExecution = () => {
if (!props.execution?.id) return;

emit('execution:stop', props.execution.id);
};

const onRetryExecution = (payload: { execution: ExecutionSummary; command: string }) => {
const loadWorkflow = payload.command === 'current-workflow';

emit('execution:retry', {
id: payload.execution.id,
loadWorkflow,
});
};

watch(
() => props.execution,
(value: ExecutionSummary | undefined) => {
if (!value) {
return;
}

if (this.uiStore.stateIsDirty) {
const confirmModal = await this.confirm(
this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
{
title: this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
type: 'warning',
confirmButtonText: this.$locale.baseText(
'generic.unsavedWork.confirmMessage.confirmButtonText',
),
cancelButtonText: this.$locale.baseText(
'generic.unsavedWork.confirmMessage.cancelButtonText',
),
showClose: true,
},
);

if (confirmModal === MODAL_CONFIRM) {
const saved = await this.workflowHelpers.saveCurrentWorkflow({}, false);
if (saved) {
await this.npsSurveyStore.fetchPromptsData();
}
this.uiStore.stateIsDirty = false;
next();
} else if (confirmModal === MODAL_CANCEL) {
this.uiStore.stateIsDirty = false;
next();
}
} else {
next();
}
},
props: {
loading: {
type: Boolean,
default: false,
},
workflow: {
type: Object as PropType<IWorkflowDb>,
required: true,
},
executions: {
type: Array as PropType<ExecutionSummary[]>,
default: () => [],
},
filters: {
type: Object as PropType<ExecutionFilterType>,
default: () => ({}),
},
execution: {
type: Object as PropType<ExecutionSummary> | null,
default: null,
},
loadingMore: {
type: Boolean,
default: false,
},
},
emits: [
'execution:delete',
'execution:stop',
'execution:retry',
'update:auto-refresh',
'update:filters',
'load-more',
'reload',
],
setup() {
const externalHooks = useExternalHooks();
const router = useRouter();
const workflowHelpers = useWorkflowHelpers({ router });
const { callDebounced } = useDebounce();

return {
externalHooks,
workflowHelpers,
callDebounced,
...useToast(),
...useMessage(),
};
},
computed: {
...mapStores(useTagsStore, useNodeTypesStore, useSettingsStore, useUIStore, useNpsSurveyStore),
temporaryExecution(): ExecutionSummary | undefined {
const isTemporary = !this.executions.find((execution) => execution.id === this.execution?.id);
return isTemporary ? this.execution : undefined;
},
hidePreview(): boolean {
return this.loading || (!this.execution && this.executions.length);
},
filterApplied(): boolean {
return this.filters.status !== 'all';
},
workflowDataNotLoaded(): boolean {
return this.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID && this.workflow.name === '';
},
requestFilter(): IDataObject {
return executionFilterToQueryFilter({
...this.filters,
workflowId: this.workflow.id,
});
},
},
watch: {
execution(value: ExecutionSummary) {
if (!value) {
return;
}

this.$router
.push({
name: VIEWS.EXECUTION_PREVIEW,
params: { name: this.workflow.id, executionId: value.id },
})
.catch(() => {});
},
},
methods: {
async onDeleteCurrentExecution(): Promise<void> {
this.$emit('execution:delete', this.execution?.id);
},
async onStopExecution(): Promise<void> {
this.$emit('execution:stop', this.execution?.id);
},
async onRetryExecution(payload: { execution: ExecutionSummary; command: string }) {
const loadWorkflow = payload.command === 'current-workflow';

this.$emit('execution:retry', {
id: payload.execution.id,
loadWorkflow,
});
},
router
.push({
name: VIEWS.EXECUTION_PREVIEW,
params: { name: props.workflow.id, executionId: value.id },
})
.catch(() => {});
},
);

onBeforeRouteLeave(async (to, _, next) => {
if (getNodeViewTab(to) === MAIN_HEADER_TABS.WORKFLOW) {
next();
return;
}

await workflowHelpers.promptSaveUnsavedWorkflowChanges(next);
});
</script>

Expand Down
4 changes: 0 additions & 4 deletions packages/editor-ui/src/views/WorkflowExecutionsView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { PLACEHOLDER_EMPTY_WORKFLOW_ID, VIEWS } from '@/constants';
import { useRoute, useRouter } from 'vue-router';
import type { ExecutionSummary } from 'n8n-workflow';
import { useDebounce } from '@/composables/useDebounce';
import { storeToRefs } from 'pinia';
import { useTelemetry } from '@/composables/useTelemetry';
import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
Expand All @@ -29,8 +28,6 @@ const { callDebounced } = useDebounce();
const workflowHelpers = useWorkflowHelpers({ router });
const nodeHelpers = useNodeHelpers();

const { filters } = storeToRefs(executionsStore);

const loading = ref(false);
const loadingMore = ref(false);

Expand Down Expand Up @@ -311,7 +308,6 @@ async function loadMore(): Promise<void> {
v-if="workflow"
:executions="executions"
:execution="execution"
:filters="filters"
:workflow="workflow"
:loading="loading"
:loading-more="loadingMore"
Expand Down
Loading