admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): Migrate OutputPanel.vue to composition API (no-changelog) (#9958)

Browse Source
This commit is contained in:
Ricardo Espinoza
2024-07-08 11:19:27 -04:00
committed by GitHub
parent f40f9b0287
commit 501bcd80ff
1 changed files with 235 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

354
packages/editor-ui/src/components/OutputPanel.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<RunData <RunData
ref="runData" ref="runDataRef"
:node="node" :node="node"
:workflow="workflow" :workflow="workflow"
:run-index="runIndex" :run-index="runIndex"
@@ -20,9 +20,9 @@
@run-change="onRunIndexChange" @run-change="onRunIndexChange"
@link-run="onLinkRun" @link-run="onLinkRun"
@unlink-run="onUnlinkRun" @unlink-run="onUnlinkRun"
@table-mounted="$emit('tableMounted', $event)" @table-mounted="emit('tableMounted', $event)"
@item-hover="$emit('itemHover', $event)" @item-hover="emit('itemHover', $event)"
@search="$emit('search', $event)" @search="emit('search', $event)"
> >
<template #header> <template #header>
<div :class="$style.titleSection"> <div :class="$style.titleSection">
@@ -100,19 +100,12 @@
</RunData> </RunData>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { type PropType, defineComponent } from 'vue'; import { ref, computed } from 'vue';
import type { IExecutionResponse, INodeUi } from '@/Interface'; import type { IRunData, IRunExecutionData, Workflow } from 'n8n-workflow';
import type {
INodeTypeDescription,
IRunData,
IRunExecutionData,
ITaskData,
Workflow,
} from 'n8n-workflow';
import RunData from './RunData.vue'; import RunData from './RunData.vue';
import RunInfo from './RunInfo.vue'; import RunInfo from './RunInfo.vue';
import { mapStores, storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useUIStore } from '@/stores/ui.store'; import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store'; import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNDVStore } from '@/stores/ndv.store'; import { useNDVStore } from '@/stores/ndv.store';
@@ -121,8 +114,12 @@ import RunDataAi from './RunDataAi/RunDataAi.vue';
import { ndvEventBus } from '@/event-bus'; import { ndvEventBus } from '@/event-bus';
import { useNodeType } from '@/composables/useNodeType'; import { useNodeType } from '@/composables/useNodeType';
import { usePinnedData } from '@/composables/usePinnedData'; import { usePinnedData } from '@/composables/usePinnedData';
import { useTelemetry } from '@/composables/useTelemetry';
import { useI18n } from '@/composables/useI18n';
type RunDataRef = InstanceType<typeof RunData>; // Types
type RunDataRef = InstanceType<typeof RunData> | null;
const OUTPUT_TYPE = { const OUTPUT_TYPE = {
REGULAR: 'regular', REGULAR: 'regular',
@@ -130,87 +127,82 @@ const OUTPUT_TYPE = {
} as const; } as const;
type OutputTypeKey = keyof typeof OUTPUT_TYPE; type OutputTypeKey = keyof typeof OUTPUT_TYPE;
type OutputType = (typeof OUTPUT_TYPE)[OutputTypeKey]; type OutputType = (typeof OUTPUT_TYPE)[OutputTypeKey];
export default defineComponent({ type Props = {
name: 'OutputPanel', workflow: Workflow;
components: { RunData, RunInfo, RunDataAi }, runIndex: number;
props: { isReadOnly?: boolean;
workflow: { linkedRuns?: boolean;
type: Object as PropType<Workflow>, canLinkRuns?: boolean;
required: true, pushRef?: string;
}, blockUI?: boolean;
runIndex: { isProductionExecutionPreview?: boolean;
type: Number, isPaneActive?: boolean;
required: true, };
},
isReadOnly: { // Props and emits
type: Boolean,
}, const props = withDefaults(defineProps<Props>(), {
linkedRuns: { blockUI: false,
type: Boolean, isProductionExecutionPreview: false,
}, isPaneActive: false,
canLinkRuns: { });
type: Boolean,
}, const emit = defineEmits<{
pushRef: { linkRun: [];
type: String, unlinkRun: [];
}, runChange: [number];
blockUI: { activatePane: [];
type: Boolean, tableMounted: [{ avgRowHeight: number }];
default: false, itemHover: [{ itemIndex: number; outputIndex: number }];
}, search: [string];
isProductionExecutionPreview: { openSettings: [];
type: Boolean, }>();
default: false,
}, // Stores
isPaneActive: {
type: Boolean, const ndvStore = useNDVStore();
default: false, const nodeTypesStore = useNodeTypesStore();
}, const workflowsStore = useWorkflowsStore();
}, const uiStore = useUIStore();
setup(props) { const telemetry = useTelemetry();
const ndvStore = useNDVStore(); const i18n = useI18n();
const { activeNode } = storeToRefs(ndvStore); const { activeNode } = storeToRefs(ndvStore);
const { isSubNodeType } = useNodeType({
// Composables
const { isSubNodeType } = useNodeType({
node: activeNode, node: activeNode,
}); });
const pinnedData = usePinnedData(activeNode, { const pinnedData = usePinnedData(activeNode, {
runIndex: props.runIndex, runIndex: props.runIndex,
displayMode: ndvStore.getPanelDisplayMode('output'), displayMode: ndvStore.getPanelDisplayMode('output'),
}); });
return { // Data
pinnedData,
isSubNodeType, const outputMode = ref<OutputType>('regular');
}; const outputTypes = ref([
}, { label: i18n.baseText('ndv.output.outType.regular'), value: OUTPUT_TYPE.REGULAR },
data() { { label: i18n.baseText('ndv.output.outType.logs'), value: OUTPUT_TYPE.LOGS },
return { ]);
outputMode: 'regular', const runDataRef = ref<RunDataRef>(null);
outputTypes: [
{ label: this.$locale.baseText('ndv.output.outType.regular'), value: OUTPUT_TYPE.REGULAR }, // Computed
{ label: this.$locale.baseText('ndv.output.outType.logs'), value: OUTPUT_TYPE.LOGS },
], const node = computed(() => {
}; return ndvStore.activeNode ?? undefined;
}, });
computed: {
...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore), const isTriggerNode = computed(() => {
node(): INodeUi | undefined { return !!node.value && nodeTypesStore.isTriggerNode(node.value.type);
return this.ndvStore.activeNode ?? undefined; });
},
nodeType(): INodeTypeDescription | null { const hasAiMetadata = computed(() => {
if (this.node) { if (node.value) {
return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion); const resultData = workflowsStore.getWorkflowResultDataByNodeName(node.value.name);
}
return null;
},
isTriggerNode(): boolean {
return !!this.node && this.nodeTypesStore.isTriggerNode(this.node.type);
},
hasAiMetadata(): boolean {
if (this.node) {
const resultData = this.workflowsStore.getWorkflowResultDataByNodeName(this.node.name);
if (!resultData || !Array.isArray(resultData) || resultData.length === 0) { if (!resultData || !Array.isArray(resultData) || resultData.length === 0) {
return false; return false;
@@ -219,139 +211,149 @@ export default defineComponent({
return !!resultData[resultData.length - 1].metadata; return !!resultData[resultData.length - 1].metadata;
} }
return false; return false;
}, });
isPollingTypeNode(): boolean {
return !!this.nodeType?.polling; const isNodeRunning = computed(() => {
}, return !!node.value && workflowsStore.isNodeExecuting(node.value.name);
isScheduleTrigger(): boolean { });
return !!(this.nodeType && this.nodeType.group.includes('schedule'));
}, const workflowRunning = computed(() => {
isNodeRunning(): boolean { return uiStore.isActionActive['workflowRunning'];
return !!this.node && this.workflowsStore.isNodeExecuting(this.node.name); });
},
workflowRunning(): boolean { const workflowExecution = computed(() => {
return this.uiStore.isActionActive['workflowRunning']; return workflowsStore.getWorkflowExecution;
}, });
workflowExecution(): IExecutionResponse | null {
return this.workflowsStore.getWorkflowExecution; const workflowRunData = computed(() => {
}, if (workflowExecution.value === null) {
workflowRunData(): IRunData | null {
if (this.workflowExecution === null) {
return null; return null;
} }
const executionData: IRunExecutionData | undefined = this.workflowExecution.data; const executionData: IRunExecutionData | undefined = workflowExecution.value.data;
if (!executionData?.resultData?.runData) { if (!executionData?.resultData?.runData) {
return null; return null;
} }
return executionData.resultData.runData; return executionData.resultData.runData;
}, });
hasNodeRun(): boolean {
if (this.workflowsStore.subWorkflowExecutionError) return true; const hasNodeRun = computed(() => {
if (workflowsStore.subWorkflowExecutionError) return true;
return Boolean( return Boolean(
this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name), node.value && workflowRunData.value && workflowRunData.value.hasOwnProperty(node.value.name),
); );
}, });
runTaskData(): ITaskData | null {
if (!this.node || this.workflowExecution === null) { const runTaskData = computed(() => {
if (!node.value || workflowExecution.value === null) {
return null; return null;
} }
const runData = this.workflowRunData; const runData = workflowRunData.value;
if (runData === null || !runData.hasOwnProperty(this.node.name)) { if (runData === null || !runData.hasOwnProperty(node.value.name)) {
return null; return null;
} }
if (runData[this.node.name].length <= this.runIndex) { if (runData[node.value.name].length <= props.runIndex) {
return null; return null;
} }
return runData[this.node.name][this.runIndex]; return runData[node.value.name][props.runIndex];
}, });
runsCount(): number {
if (this.node === null) { const runsCount = computed(() => {
if (node.value === null) {
return 0; return 0;
} }
const runData: IRunData | null = this.workflowRunData; const runData: IRunData | null = workflowRunData.value;
if (runData === null || (this.node && !runData.hasOwnProperty(this.node.name))) { if (runData === null || (node.value && !runData.hasOwnProperty(node.value.name))) {
return 0; return 0;
} }
if (this.node && runData[this.node.name].length) { if (node.value && runData[node.value.name].length) {
return runData[this.node.name].length; return runData[node.value.name].length;
} }
return 0; return 0;
}, });
staleData(): boolean {
if (!this.node) { const staleData = computed(() => {
if (!node.value) {
return false; return false;
} }
const updatedAt = this.workflowsStore.getParametersLastUpdate(this.node.name); const updatedAt = workflowsStore.getParametersLastUpdate(node.value.name);
if (!updatedAt || !this.runTaskData) { if (!updatedAt || !runTaskData.value) {
return false; return false;
} }
const runAt = this.runTaskData.startTime; const runAt = runTaskData.value.startTime;
return updatedAt > runAt; return updatedAt > runAt;
}, });
outputPanelEditMode(): { enabled: boolean; value: string } {
return this.ndvStore.outputPanelEditMode; const outputPanelEditMode = computed(() => {
}, return ndvStore.outputPanelEditMode;
canPinData(): boolean { });
return this.pinnedData.isValidNodeType.value && !this.isReadOnly;
}, const canPinData = computed(() => {
}, return pinnedData.isValidNodeType.value && !props.isReadOnly;
methods: { });
insertTestData() {
const runDataRef = this.$refs.runData as RunDataRef | undefined; // Methods
if (runDataRef) {
runDataRef.enterEditMode({ const insertTestData = () => {
if (!runDataRef.value) return;
// We should be able to fix this when we migrate RunData.vue to composition API
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
runDataRef.value.enterEditMode({
origin: 'insertTestDataLink', origin: 'insertTestDataLink',
}); });
this.$telemetry.track('User clicked ndv link', { telemetry.track('User clicked ndv link', {
workflow_id: this.workflowsStore.workflowId, workflow_id: workflowsStore.workflowId,
push_ref: this.pushRef, push_ref: props.pushRef,
node_type: this.node?.type, node_type: node.value?.type,
pane: 'output', pane: 'output',
type: 'insert-test-data', type: 'insert-test-data',
}); });
} };
},
onLinkRun() { const onLinkRun = () => {
this.$emit('linkRun'); emit('linkRun');
}, };
onUnlinkRun() {
this.$emit('unlinkRun'); const onUnlinkRun = () => {
}, emit('unlinkRun');
openSettings() { };
this.$emit('openSettings');
this.$telemetry.track('User clicked ndv link', { const openSettings = () => {
node_type: this.node?.type, emit('openSettings');
workflow_id: this.workflowsStore.workflowId, telemetry.track('User clicked ndv link', {
push_ref: this.pushRef, node_type: node.value?.type,
workflow_id: workflowsStore.workflowId,
push_ref: props.pushRef,
pane: 'output', pane: 'output',
type: 'settings', type: 'settings',
}); });
}, };
onRunIndexChange(run: number) {
this.$emit('runChange', run); const onRunIndexChange = (run: number) => {
}, emit('runChange', run);
onUpdateOutputMode(outputMode: OutputType) { };
const onUpdateOutputMode = (outputMode: OutputType) => {
if (outputMode === OUTPUT_TYPE.LOGS) { if (outputMode === OUTPUT_TYPE.LOGS) {
ndvEventBus.emit('setPositionByName', 'minLeft'); ndvEventBus.emit('setPositionByName', 'minLeft');
} else { } else {
ndvEventBus.emit('setPositionByName', 'initial'); ndvEventBus.emit('setPositionByName', 'initial');
} }
}, };
activatePane() {
this.$emit('activatePane'); const activatePane = () => {
}, emit('activatePane');
}, };
});
</script> </script>
<style lang="scss" module> <style lang="scss" module>