-
-
{{ $locale.baseText('ndv.output') }}
-
-
- {{ $locale.baseText('runData.startTime') + ':' }} {{runMetadata.startTime}}
- {{ $locale.baseText('runData.executionTime') + ':' }} {{runMetadata.executionTime}} {{ $locale.baseText('runData.ms') }}
-
-
-
-
-
-
-
-
-
+
-
+
{{ $locale.baseText('ndv.output.run') }}
+
+
+
+
+
+
+
+
-
+
- {{ dataCount }} {{ $locale.baseText(dataCount === 1 ? 'ndv.output.item' : 'ndv.output.items') }}
+ {{ dataCount }} {{ $locale.baseText('ndv.output.items', {adjustToNumber: dataCount}) }}
@@ -65,46 +59,49 @@
-
-
-
-
{{ $locale.baseText('ndv.output.executing') }}
-
-
{{ $locale.baseText('ndv.output.pollEventNodeHint') }}
-
{{ $locale.baseText('ndv.output.triggerEventNodeHint') }}
-
{{ $locale.baseText('ndv.output.runNodeHint') }}
+
+
+
{{ executingMessage }}
+
+
+
+
-
+
- {{ $locale.baseText('ndv.output.noOutputDataInBranch') }}
+ {{ noDataInBranchMessage }}
- {{ $locale.baseText('ndv.output.tooMuchData.title') }}
+ {{ tooMuchDataTitle }}
+
+
@@ -112,7 +109,7 @@
|
- {{ $locale.baseText('ndv.output.emptyOutput') }}
+ {{ $locale.baseText('runData.emptyItemHint') }}
|
@@ -198,6 +195,7 @@
:pager-count="5"
:page-size="pageSize"
layout="prev, pager, next"
+ @current-change="onCurrentPageChange"
:total="dataCount">
@@ -241,6 +239,7 @@ import {
IBinaryDisplayData,
IExecutionResponse,
INodeUi,
+ IRunDataDisplayMode,
ITab,
ITableData,
} from '@/Interface';
@@ -260,7 +259,6 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
import mixins from 'vue-typed-mixins';
-import Vue from 'vue/types/umd';
import { saveAs } from 'file-saver';
@@ -281,17 +279,49 @@ export default mixins(
VueJsonPretty,
WarningTooltip,
},
+ props: {
+ nodeUi: {
+ }, // INodeUi | null
+ runIndex: {
+ type: Number,
+ },
+ linkedRuns: {
+ type: Boolean,
+ },
+ canLinkRuns: {
+ type: Boolean,
+ },
+ tooMuchDataTitle: {
+ type: String,
+ },
+ noDataInBranchMessage: {
+ type: String,
+ },
+ isExecuting: {
+ type: Boolean,
+ },
+ executingMessage: {
+ type: String,
+ },
+ sessionId: {
+ type: String,
+ },
+ paneType: {
+ type: String,
+ },
+ overrideOutputs: {
+ type: Array,
+ },
+ },
data () {
return {
binaryDataPreviewActive: false,
dataSize: 0,
deselectedPlaceholder,
- displayMode: 'table',
state: {
value: '' as object | number | string,
path: deselectedPlaceholder,
},
- runIndex: 0,
showData: false,
outputIndex: 0,
binaryDataDisplayVisible: false,
@@ -308,21 +338,21 @@ export default mixins(
this.init();
},
computed: {
+ activeNode(): INodeUi {
+ return this.$store.getters.activeNode;
+ },
+ displayMode(): IRunDataDisplayMode {
+ return this.$store.getters['ui/getPanelDisplayMode'](this.paneType);
+ },
+ node(): INodeUi | null {
+ return (this.nodeUi as INodeUi | null) || null;
+ },
nodeType (): INodeTypeDescription | null {
if (this.node) {
return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
}
return null;
},
- isTriggerNode (): boolean {
- return !!(this.nodeType && this.nodeType.group.includes('trigger'));
- },
- isPollingTypeNode (): boolean {
- return !!(this.nodeType && this.nodeType.polling);
- },
- isScheduleTrigger (): boolean {
- return !!(this.nodeType && this.nodeType.group.includes('schedule'));
- },
buttons(): Array<{label: string, value: string}> {
const defaults = [
{ label: this.$locale.baseText('runData.table'), value: 'table'},
@@ -337,14 +367,11 @@ export default mixins(
return defaults;
},
hasNodeRun(): boolean {
- return Boolean(this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name));
+ return Boolean(!this.isExecuting && this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name));
},
hasRunError(): boolean {
return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);
},
- workflowRunning (): boolean {
- return this.$store.getters.isActionActive('workflowRunning');
- },
workflowExecution (): IExecutionResponse | null {
return this.$store.getters.getWorkflowExecution;
},
@@ -358,48 +385,8 @@ export default mixins(
}
return null;
},
- node (): INodeUi | null {
- return this.$store.getters.activeNode;
- },
- runTaskData (): ITaskData | null {
- if (!this.node || this.workflowExecution === null) {
- return null;
- }
-
- const runData = this.workflowRunData;
-
- if (runData === null || !runData.hasOwnProperty(this.node.name)) {
- return null;
- }
-
- if (runData[this.node.name].length <= this.runIndex) {
- return null;
- }
-
- return runData[this.node.name][this.runIndex];
- },
- runMetadata (): {executionTime: number, startTime: string} | null {
- if (!this.runTaskData) {
- return null;
- }
- return {
- executionTime: this.runTaskData.executionTime,
- startTime: new Date(this.runTaskData.startTime).toLocaleString(),
- };
- },
- staleData(): boolean {
- if (!this.node) {
- return false;
- }
- const updatedAt = this.$store.getters.getParametersLastUpdated(this.node.name);
- if (!updatedAt || !this.runTaskData) {
- return false;
- }
- const runAt = this.runTaskData.startTime;
- return updatedAt > runAt;
- },
dataCount (): number {
- return this.getDataCount(this.runIndex, this.outputIndex);
+ return this.getDataCount(this.runIndex, this.currentOutputIndex);
},
dataSizeInMB(): string {
return (this.dataSize / 1024 / 1000).toLocaleString();
@@ -419,13 +406,14 @@ export default mixins(
return 0;
}
- if (runData[this.node.name][this.runIndex].data === undefined ||
- runData[this.node.name][this.runIndex].data!.main === undefined
- ) {
- return 0;
+ if (runData[this.node.name][this.runIndex]) {
+ const taskData = runData[this.node.name][this.runIndex].data;
+ if (taskData && taskData.main) {
+ return taskData.main.length - 1;
+ }
}
- return runData[this.node.name][this.runIndex].data!.main.length - 1;
+ return 0;
},
maxRunIndex (): number {
if (this.node === null) {
@@ -445,7 +433,7 @@ export default mixins(
return 0;
},
inputData (): INodeExecutionData[] {
- let inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
+ let inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
if (inputData.length === 0 || !Array.isArray(inputData)) {
return [];
}
@@ -462,11 +450,18 @@ export default mixins(
return this.convertToTable(this.inputData);
},
binaryData (): IBinaryKeyData[] {
- if (this.node === null) {
+ if (!this.node) {
return [];
}
- return this.getBinaryData(this.workflowRunData, this.node.name, this.runIndex, this.outputIndex);
+ return this.getBinaryData(this.workflowRunData, this.node.name, this.runIndex, this.currentOutputIndex);
+ },
+ currentOutputIndex(): number {
+ if (this.overrideOutputs && this.overrideOutputs.length && !this.overrideOutputs.includes(this.outputIndex)) {
+ return this.overrideOutputs[0] as number;
+ }
+
+ return this.outputIndex;
},
branches (): ITab[] {
function capitalize(name: string) {
@@ -474,8 +469,11 @@ export default mixins(
}
const branches: ITab[] = [];
for (let i = 0; i <= this.maxOutputIndex; i++) {
+ if (this.overrideOutputs && !this.overrideOutputs.includes(i)) {
+ continue;
+ }
const itemsCount = this.getDataCount(this.runIndex, i);
- const items = this.$locale.baseText(itemsCount === 1 ? 'ndv.output.item': 'ndv.output.items');
+ const items = this.$locale.baseText('ndv.output.items', {adjustToNumber: itemsCount});
let outputName = this.getOutputName(i);
if (`${outputName}` === `${i}`) {
outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
@@ -492,16 +490,67 @@ export default mixins(
},
},
methods: {
+ switchToBinary() {
+ this.onDisplayModeChange('binary');
+ },
+ onBranchChange(value: number) {
+ this.outputIndex = value;
+
+ this.$telemetry.track('User changed ndv branch', {
+ session_id: this.sessionId,
+ branch_index: value,
+ node_type: this.activeNode.type,
+ node_type_input_selection: this.nodeType? this.nodeType.name: '',
+ pane: this.paneType,
+ });
+ },
+ showTooMuchData() {
+ this.showData = true;
+ this.$telemetry.track('User clicked ndv button', {
+ node_type: this.activeNode.type,
+ workflow_id: this.$store.getters.workflowId,
+ session_id: this.sessionId,
+ pane: this.paneType,
+ type: 'showTooMuchData',
+ });
+ },
+ linkRun() {
+ this.$emit('linkRun');
+ },
+ unlinkRun() {
+ this.$emit('unlinkRun');
+ },
+ onCurrentPageChange() {
+ this.$telemetry.track('User changed ndv page', {
+ node_type: this.activeNode.type,
+ workflow_id: this.$store.getters.workflowId,
+ session_id: this.sessionId,
+ pane: this.paneType,
+ page_selected: this.currentPage,
+ page_size: this.pageSize,
+ items_total: this.dataCount,
+ });
+ },
onPageSizeChange(pageSize: number) {
this.pageSize = pageSize;
const maxPage = Math.ceil(this.dataCount / this.pageSize);
if (maxPage < this.currentPage) {
this.currentPage = maxPage;
}
+
+ this.$telemetry.track('User changed ndv page size', {
+ node_type: this.activeNode.type,
+ workflow_id: this.$store.getters.workflowId,
+ session_id: this.sessionId,
+ pane: this.paneType,
+ page_selected: this.currentPage,
+ page_size: this.pageSize,
+ items_total: this.dataCount,
+ });
},
- onDisplayModeChange(displayMode: string) {
+ onDisplayModeChange(displayMode: IRunDataDisplayMode) {
const previous = this.displayMode;
- this.displayMode = displayMode;
+ this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: displayMode});
const dataContainer = this.$refs.dataContainer;
if (dataContainer) {
@@ -514,9 +563,15 @@ export default mixins(
this.closeBinaryDataDisplay();
this.$externalHooks().run('runData.displayModeChanged', { newValue: displayMode, oldValue: previous });
- if(this.node) {
- const nodeType = this.node ? this.node.type : '';
- this.$telemetry.track('User changed node output view mode', { old_mode: previous, new_mode: displayMode, node_type: nodeType, workflow_id: this.$store.getters.workflowId });
+ if(this.activeNode) {
+ this.$telemetry.track('User changed ndv item view', {
+ previous_view: previous,
+ new_view: displayMode,
+ node_type: this.activeNode.type,
+ workflow_id: this.$store.getters.workflowId,
+ session_id: this.sessionId,
+ pane: this.paneType,
+ });
}
},
getRunLabel(option: number) {
@@ -524,7 +579,7 @@ export default mixins(
for (let i = 0; i <= this.maxOutputIndex; i++) {
itemsCount += this.getDataCount(option - 1, i);
}
- const items = this.$locale.baseText(itemsCount === 1 ? 'ndv.output.item': 'ndv.output.items');
+ const items = this.$locale.baseText('ndv.output.items', {adjustToNumber: itemsCount});
const itemsLabel = itemsCount > 0 ? ` (${itemsCount} ${items})` : '';
return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex+1) + itemsLabel;
},
@@ -557,18 +612,16 @@ export default mixins(
return inputData.length;
},
- openSettings() {
- this.$emit('openSettings');
- },
init() {
// Reset the selected output index every time another node gets selected
this.outputIndex = 0;
this.refreshDataSize();
- if (this.displayMode === 'binary') {
- this.closeBinaryDataDisplay();
- if (this.binaryData.length === 0) {
- this.displayMode = 'table';
- }
+ this.closeBinaryDataDisplay();
+ if (this.binaryData.length > 0) {
+ this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: 'binary'});
+ }
+ else if (this.displayMode === 'binary') {
+ this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: 'table'});
}
},
closeBinaryDataDisplay () {
@@ -671,7 +724,7 @@ export default mixins(
this.binaryDataDisplayData = {
node: this.node!.name,
runIndex: this.runIndex,
- outputIndex: this.outputIndex,
+ outputIndex: this.currentOutputIndex,
index,
key,
};
@@ -760,7 +813,7 @@ export default mixins(
this.showData = false;
// Check how much data there is to display
- const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
+ const inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
const offset = this.pageSize * (this.currentPage - 1);
const jsonItems = inputData.slice(offset, offset + this.pageSize).map(item => item.json);
@@ -772,6 +825,9 @@ export default mixins(
this.showData = true;
}
},
+ onRunIndexChange(run: number) {
+ this.$emit('runChange', run);
+ },
},
watch: {
node() {
@@ -780,8 +836,13 @@ export default mixins(
jsonData () {
this.refreshDataSize();
},
- maxRunIndex () {
- this.runIndex = Math.min(this.runIndex, this.maxRunIndex);
+ binaryData (newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
+ if (newData.length && !prevData.length && this.displayMode !== 'binary') {
+ this.switchToBinary();
+ }
+ else if (!newData.length && this.displayMode === 'binary') {
+ this.onDisplayModeChange('table');
+ }
},
},
});
@@ -798,7 +859,7 @@ export default mixins(
flex-direction: column;
align-items: center;
justify-content: center;
- padding: var(--spacing-s);
+ padding: var(--spacing-s) var(--spacing-s) var(--spacing-xl) var(--spacing-s);
text-align: center;
> * {
@@ -807,39 +868,11 @@ export default mixins(
}
}
-.spinner {
- * {
- color: var(--color-primary);
- min-height: 40px;
- min-width: 40px;
- }
-
- display: flex;
- justify-content: center;
- margin-bottom: var(--spacing-s);
-}
-
-.title {
- text-transform: uppercase;
- color: var(--color-text-light);
- letter-spacing: 3px;
- font-weight: var(--font-weight-bold);
- font-size: var(--font-size-s);
-}
-
-.titleSection {
- display: flex;
-
- > * {
- margin-right: var(--spacing-2xs);
- }
-}
-
.container {
position: relative;
width: 100%;
height: 100%;
- background-color: var(--color-background-light);
+ background-color: var(--color-background-base);
display: flex;
flex-direction: column;
}
@@ -874,6 +907,11 @@ export default mixins(
padding-bottom: var(--spacing-3xl);
}
+.errorDisplay {
+ composes: dataDisplay;
+ padding-right: var(--spacing-s);
+}
+
.jsonDisplay {
composes: dataDisplay;
background-color: var(--color-background-base);
@@ -928,6 +966,11 @@ export default mixins(
max-width: 200px;
margin-left: var(--spacing-s);
margin-bottom: var(--spacing-s);
+ display: flex;
+
+ > * {
+ margin-right: var(--spacing-4xs);
+ }
}
.copyButton {
@@ -1015,8 +1058,21 @@ export default mixins(
}
.displayModes {
- position: absolute;
- right: var(--spacing-s);
+ display: flex;
+ justify-content: flex-end;
+ flex-grow: 1;
+}
+
+.spinner {
+ * {
+ color: var(--color-primary);
+ min-height: 40px;
+ min-width: 40px;
+ }
+
+ display: flex;
+ justify-content: center;
+ margin-bottom: var(--spacing-s);
}
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
new file mode 100644
index 0000000000000..b6e779773d666
--- /dev/null
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -0,0 +1,40 @@
+
+
+
+ {{
+ $locale.baseText('runData.startTime') + ':'
+ }}
+ {{ runMetadata.startTime }}
+ {{
+ $locale.baseText('runData.executionTime') + ':'
+ }}
+ {{ runMetadata.executionTime }} {{ $locale.baseText('runData.ms') }}
+
+
+
+
+
diff --git a/packages/editor-ui/src/components/WireMeUp.vue b/packages/editor-ui/src/components/WireMeUp.vue
new file mode 100644
index 0000000000000..a4c8820e68f68
--- /dev/null
+++ b/packages/editor-ui/src/components/WireMeUp.vue
@@ -0,0 +1,47 @@
+
+
+
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 00379a2aa825d..ca45aa649625e 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -356,6 +356,10 @@ export const nodeHelpers = mixins(
},
// @ts-ignore
getNodeSubtitle (data, nodeType, workflow): string | undefined {
+ if (!data) {
+ return undefined;
+ }
+
if (data.notesInFlow) {
return data.notes;
}
diff --git a/packages/editor-ui/src/components/mixins/pushConnection.ts b/packages/editor-ui/src/components/mixins/pushConnection.ts
index 728f763fe89b3..f70cad2f5c21b 100644
--- a/packages/editor-ui/src/components/mixins/pushConnection.ts
+++ b/packages/editor-ui/src/components/mixins/pushConnection.ts
@@ -263,10 +263,20 @@ export const pushConnection = mixins(
} else {
// Workflow did execute without a problem
this.$titleSet(workflow.name as string, 'IDLE');
- this.$showMessage({
- title: this.$locale.baseText('pushConnection.showMessage.title'),
- type: 'success',
- });
+
+ const execution = this.$store.getters.getWorkflowExecution;
+ if (execution && execution.executedNode) {
+ this.$showMessage({
+ title: this.$locale.baseText('pushConnection.nodeExecutedSuccessfully'),
+ type: 'success',
+ });
+ }
+ else {
+ this.$showMessage({
+ title: this.$locale.baseText('pushConnection.workflowExecutedSuccessfully'),
+ type: 'success',
+ });
+ }
}
// It does not push the runData as it got already pushed with each
diff --git a/packages/editor-ui/src/components/mixins/workflowRun.ts b/packages/editor-ui/src/components/mixins/workflowRun.ts
index 34f03e02fbb08..c05c0449e4d7f 100644
--- a/packages/editor-ui/src/components/mixins/workflowRun.ts
+++ b/packages/editor-ui/src/components/mixins/workflowRun.ts
@@ -176,6 +176,7 @@ export const workflowRun = mixins(
startedAt: new Date(),
stoppedAt: undefined,
workflowId: workflow.id,
+ executedNode: nodeName,
data: {
resultData: {
runData: newRunData || {},
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 78621fadbb95e..1cf00d23549c7 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -190,6 +190,7 @@ export const MODAL_CONFIRMED = 'confirmed';
export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';
+export const BASE_NODE_SURVEY_URL = 'https://n8n-community.typeform.com/to/BvmzxqYv#nodename=';
export const HIRING_BANNER = `
//////
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index 6342553d6f05e..60a0891c0a4c5 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -22,6 +22,7 @@ import Vue from 'vue';
import { ActionContext, Module } from 'vuex';
import {
IRootState,
+ IRunDataDisplayMode,
IUiState,
} from '../Interface';
@@ -88,6 +89,16 @@ const module: Module
= {
sidebarMenuCollapsed: true,
isPageLoading: true,
currentView: '',
+ ndv: {
+ sessionId: '',
+ input: {
+ displayMode: 'table',
+ },
+ output: {
+ displayMode: 'table',
+ },
+ },
+ mainPanelPosition: 0.5,
},
getters: {
areExpressionsDisabled(state: IUiState) {
@@ -109,6 +120,13 @@ const module: Module = {
return (name: string) => state.modals[name].mode;
},
sidebarMenuCollapsed: (state: IUiState): boolean => state.sidebarMenuCollapsed,
+ ndvSessionId: (state: IUiState): string => state.ndv.sessionId,
+ getPanelDisplayMode: (state: IUiState) => {
+ return (panel: 'input' | 'output') => state.ndv[panel].displayMode;
+ },
+ inputPanelDispalyMode: (state: IUiState) => state.ndv.input.displayMode,
+ outputPanelDispalyMode: (state: IUiState) => state.ndv.output.displayMode,
+ mainPanelPosition: (state: IUiState) => state.mainPanelPosition,
},
mutations: {
setMode: (state: IUiState, params: {name: string, mode: string}) => {
@@ -143,6 +161,19 @@ const module: Module = {
setCurrentView: (state: IUiState, currentView: string) => {
state.currentView = currentView;
},
+ setNDVSessionId: (state: IUiState) => {
+ Vue.set(state.ndv, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
+ },
+ resetNDVSessionId: (state: IUiState) => {
+ Vue.set(state.ndv, 'sessionId', '');
+ },
+ setPanelDisplayMode: (state: IUiState, params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}) => {
+ Vue.set(state.ndv[params.pane], 'displayMode', params.mode);
+ },
+ setMainPanelRelativePosition(state: IUiState, relativePosition: number) {
+ state.mainPanelPosition = relativePosition;
+ },
+
},
actions: {
openModal: async (context: ActionContext, modalKey: string) => {
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 120c2cb8a8128..0defb3085c9c0 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -189,22 +189,21 @@
}
i.el-select__caret {
- color: var(--color-foreground-xlight);
+ color: var(--color-text-dark);
}
.el-input .el-input__inner {
&,
&:hover,
&:focus {
border-radius: 20px;
- color: var(--color-foreground-xlight);
- font-weight: 600;
- background-color: var(--color-primary);
- border-color: var(--color-primary);
+ color: var(--color-text-dark);
+ background-color: var(--color-background-base);
+ border-color: var(--color-foreground-base);
text-align: center;
}
&::placeholder {
- color: var(--color-foreground-xlight);
+ color: var(--color-text-dark);
opacity: 1; /** Firefox */
}
}
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index df6f259a28b90..ec0cd4d771a99 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -298,14 +298,27 @@
"ndv.execute.executing": "Executing",
"ndv.execute.fetchEvent": "Fetch Event",
"ndv.execute.listenForEvent": "Listen For Event",
+ "ndv.featureRequest": "I wish this node would...",
+ "ndv.input": "Input",
+ "ndv.input.nodeDistance": "({count} node back) | ({count} nodes back)",
+ "ndv.input.noNodesFound": "No nodes found",
+ "ndv.input.parentNodes": "Parent nodes",
+ "ndv.input.tooMuchData.title": "Input data is huge",
+ "ndv.input.noOutputDataInBranch": "No input data in this branch",
+ "ndv.input.noOutputDataInNode": "Node did not output any data. n8n stops executing the workflow when a node has no output data.",
+ "ndv.input.noOutputData": "No data",
+ "ndv.input.noOutputData.executePrevious": "Execute previous nodes",
+ "ndv.input.noOutputData.title": "No input data yet",
+ "ndv.input.noOutputData.hint": "(From the earliest node that has no output data yet)",
+ "ndv.input.executingPrevious": "Executing previous nodes...",
+ "ndv.input.notConnected.title": "Wire me up",
+ "ndv.input.notConnected.message": "This node can only receive input data if you connect it to another node.",
+ "ndv.input.notConnected.learnMore": "Learn more",
"ndv.output": "Output",
"ndv.output.all": "all",
"ndv.output.branch": "Branch",
- "ndv.output.emptyInput": "This input item is empty. {name} will still execute when it recieves an empty item.",
- "ndv.output.emptyOutput": "This output item is empty.",
"ndv.output.executing": "Executing node...",
- "ndv.output.item": "item",
- "ndv.output.items": "items",
+ "ndv.output.items": "item | items",
"ndv.output.noOutputData.message": "n8n stops executing the workflow when a node has no output data. You can change this default behaviour via",
"ndv.output.noOutputData.message.settings": "Settings",
"ndv.output.noOutputData.message.settingsOption": "> “Always Output Data”.",
@@ -321,6 +334,7 @@
"ndv.output.tooMuchData.showDataAnyway": "Show data anyway",
"ndv.output.tooMuchData.title": "Output data is huge!",
"ndv.output.triggerEventNodeHint": "Listen for an event to output data",
+ "ndv.output.waitingToRun": "Waiting to execute...",
"ndv.title.cancel": "Cancel",
"ndv.title.rename": "Rename",
"ndv.title.renameNode": "Rename node",
@@ -576,9 +590,15 @@
"personalizationModal.whatDoesYourCompanyFocusOn": "Which services does your company focus on?",
"personalizationModal.whatKindOfCustomersDoYouServe": "What kind of customers do you serve?",
"personalizationModal.whichIndustriesIsYourCompanyIn": "Which industries is your company in?",
- "pushConnection.showMessage.title": "Workflow executed successfully",
+ "pushConnection.nodeExecutedSuccessfully": "Node executed successfully",
+ "pushConnection.workflowExecutedSuccessfully": "Workflow executed successfully",
"pushConnectionTracker.cannotConnectToServer": "You have a connection issue or the server is down.
n8n should reconnect automatically once the issue is resolved.",
"pushConnectionTracker.connectionLost": "Connection lost",
+ "runData.emptyItemHint": "This is an item, but it's empty.",
+ "runData.switchToBinary.info": "This item only has",
+ "runData.switchToBinary.binary": "binary data",
+ "runData.linking.hint": "Link displayed input and output runs",
+ "runData.unlinking.hint": "Unlink displayed input and output runs",
"runData.binary": "Binary",
"runData.copyItemPath": "Copy Item Path",
"runData.copyParameterPath": "Copy Parameter Path",
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index 467dce95b215a..58537e1e828a4 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -56,6 +56,8 @@ import {
faInfo,
faInfoCircle,
faKey,
+ faLink,
+ faLightbulb,
faMapSigns,
faNetworkWired,
faPause,
@@ -90,6 +92,7 @@ import {
faTimes,
faTrash,
faUndo,
+ faUnlink,
faUserCircle,
faUserFriends,
faUsers,
@@ -159,6 +162,8 @@ addIcon(faInbox);
addIcon(faInfo);
addIcon(faInfoCircle);
addIcon(faKey);
+addIcon(faLink);
+addIcon(faLightbulb);
addIcon(faMapSigns);
addIcon(faNetworkWired);
addIcon(faPause);
@@ -195,6 +200,7 @@ addIcon(faThLarge);
addIcon(faTimes);
addIcon(faTrash);
addIcon(faUndo);
+addIcon(faUnlink);
addIcon(faUserCircle);
addIcon(faUserFriends);
addIcon(faUsers);
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index f818ba114bffd..9d84df8429fad 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -437,6 +437,7 @@ export const store = new Vuex.Store({
state.stateIsDirty = true;
}
state.workflow.nodes.splice(0, state.workflow.nodes.length);
+ state.nodeMetadata = {};
},
updateNodeProperties (state, updateInformation: INodeUpdatePropertiesInformation) {
// Find the node that should be updated
@@ -657,6 +658,9 @@ export const store = new Vuex.Store({
},
},
getters: {
+ executedNode: (state): string | undefined => {
+ return state.workflowExecutionData? state.workflowExecutionData.executedNode: undefined;
+ },
activeCredentialType: (state): string | null => {
return state.activeCredentialType;
},
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 6e9a7b35443bc..9b1820dd848d7 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -58,7 +58,7 @@
-
+
{
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index a7ad929026bc0..9b7b20068ec01 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -1457,3 +1457,9 @@ export interface ITelemetrySettings {
enabled: boolean;
config?: ITelemetryClientConfig;
}
+
+export interface IConnectedNode {
+ name: string;
+ indicies: number[];
+ depth: number;
+}
diff --git a/packages/workflow/src/Workflow.ts b/packages/workflow/src/Workflow.ts
index 6f6b747e47124..b772c20c6d42b 100644
--- a/packages/workflow/src/Workflow.ts
+++ b/packages/workflow/src/Workflow.ts
@@ -46,7 +46,11 @@ import {
WorkflowExecuteMode,
} from '.';
-import { IConnection, IDataObject, IObservableObject } from './Interfaces';
+import { IConnection, IDataObject, IConnectedNode, IObservableObject } from './Interfaces';
+
+function dedupe(arr: T[]): T[] {
+ return [...new Set(arr)];
+}
export class Workflow {
id: string | undefined;
@@ -713,6 +717,86 @@ export class Workflow {
return returnNodes;
}
+ /**
+ * Returns all the nodes before the given one
+ *
+ * @param {string} nodeName
+ * @param {*} [maxDepth=-1]
+ * @returns {string[]}
+ * @memberof Workflow
+ */
+ getParentNodesByDepth(nodeName: string, maxDepth = -1): IConnectedNode[] {
+ return this.searchNodesBFS(this.connectionsByDestinationNode, nodeName, maxDepth);
+ }
+
+ /**
+ * Gets all the nodes which are connected nodes starting from
+ * the given one
+ * Uses BFS traversal
+ *
+ * @param {IConnections} connections
+ * @param {string} sourceNode
+ * @param {*} [maxDepth=-1]
+ * @returns {IConnectedNode[]}
+ * @memberof Workflow
+ */
+ searchNodesBFS(connections: IConnections, sourceNode: string, maxDepth = -1): IConnectedNode[] {
+ const returnConns: IConnectedNode[] = [];
+
+ const type = 'main';
+ let queue: IConnectedNode[] = [];
+ queue.push({
+ name: sourceNode,
+ depth: 0,
+ indicies: [],
+ });
+
+ const visited: { [key: string]: IConnectedNode } = {};
+
+ let depth = 0;
+ while (queue.length > 0) {
+ if (maxDepth !== -1 && depth > maxDepth) {
+ break;
+ }
+ depth++;
+
+ const toAdd = [...queue];
+ queue = [];
+
+ // eslint-disable-next-line @typescript-eslint/no-loop-func
+ toAdd.forEach((curr) => {
+ if (visited[curr.name]) {
+ visited[curr.name].indicies = dedupe(visited[curr.name].indicies.concat(curr.indicies));
+ return;
+ }
+
+ visited[curr.name] = curr;
+ if (curr.name !== sourceNode) {
+ returnConns.push(curr);
+ }
+
+ if (
+ !connections.hasOwnProperty(curr.name) ||
+ !connections[curr.name].hasOwnProperty(type)
+ ) {
+ return;
+ }
+
+ connections[curr.name][type].forEach((connectionsByIndex) => {
+ connectionsByIndex.forEach((connection) => {
+ queue.push({
+ name: connection.node,
+ indicies: [connection.index],
+ depth,
+ });
+ });
+ });
+ });
+ }
+
+ return returnConns;
+ }
+
/**
* Returns via which output of the parent-node the node
* is connected to.
diff --git a/packages/workflow/test/Helpers.ts b/packages/workflow/test/Helpers.ts
index a94be10c989b3..c3d0f91cd3f38 100644
--- a/packages/workflow/test/Helpers.ts
+++ b/packages/workflow/test/Helpers.ts
@@ -613,6 +613,39 @@ class NodeTypesClass implements INodeTypes {
},
},
},
+ 'test.switch': {
+ sourcePath: '',
+ type: {
+ description: {
+ displayName: 'Set',
+ name: 'set',
+ group: ['input'],
+ version: 1,
+ description: 'Switches',
+ defaults: {
+ name: 'Switch',
+ color: '#0000FF',
+ },
+ inputs: ['main'],
+ outputs: ['main', 'main', 'main', 'main'],
+ outputNames: ['0', '1', '2', '3'],
+ properties: [
+ {
+ displayName: 'Value1',
+ name: 'value1',
+ type: 'string',
+ default: 'default-value1',
+ },
+ {
+ displayName: 'Value2',
+ name: 'value2',
+ type: 'string',
+ default: 'default-value2',
+ },
+ ],
+ },
+ },
+ },
};
async init(nodeTypes: INodeTypeData): Promise {}
diff --git a/packages/workflow/test/Workflow.test.ts b/packages/workflow/test/Workflow.test.ts
index 453bdcc2d8e10..bdc28d610a0f8 100644
--- a/packages/workflow/test/Workflow.test.ts
+++ b/packages/workflow/test/Workflow.test.ts
@@ -1284,4 +1284,398 @@ describe('Workflow', () => {
});
});
});
+
+ describe('getParentNodesByDepth', () => {
+ const nodeTypes = Helpers.NodeTypes();
+ const SIMPLE_WORKFLOW = new Workflow({
+ nodeTypes,
+ nodes: [
+ {
+ parameters: {},
+ name: 'Start',
+ type: 'test.set',
+ typeVersion: 1,
+ position: [240, 300],
+ },
+ {
+ parameters: {
+ options: {},
+ },
+ name: 'Set',
+ type: 'test.set',
+ typeVersion: 1,
+ position: [460, 300],
+ },
+ {
+ parameters: {
+ options: {},
+ },
+ name: 'Set1',
+ type: 'test.set',
+ typeVersion: 1,
+ position: [680, 300],
+ },
+ ],
+ connections: {
+ Start: {
+ main: [
+ [
+ {
+ node: 'Set',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ ],
+ },
+ Set: {
+ main: [
+ [
+ {
+ node: 'Set1',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ ],
+ },
+ },
+ active: false,
+ });
+
+ const WORKFLOW_WITH_SWITCH = new Workflow({
+ active: false,
+ nodeTypes,
+ nodes: [
+ {
+ parameters: {},
+ name: 'Switch',
+ type: 'test.switch',
+ typeVersion: 1,
+ position: [460, 300],
+ },
+ {
+ parameters: {
+ options: {},
+ },
+ name: 'Set',
+ type: 'test.set',
+ typeVersion: 1,
+ position: [740, 300],
+ },
+ {
+ parameters: {
+ options: {},
+ },
+ name: 'Set1',
+ type: 'test.set',
+ typeVersion: 1,
+ position: [780, 100],
+ },
+ {
+ parameters: {
+ options: {},
+ },
+ name: 'Set2',
+ type: 'test.set',
+ typeVersion: 1,
+ position: [1040, 260],
+ },
+ ],
+ connections: {
+ Switch: {
+ main: [
+ [
+ {
+ node: 'Set1',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ [
+ {
+ node: 'Set',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ [
+ {
+ node: 'Set',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ ],
+ },
+ Set: {
+ main: [
+ [
+ {
+ node: 'Set2',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ ],
+ },
+ Set1: {
+ main: [
+ [
+ {
+ node: 'Set2',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ ],
+ },
+ },
+ });
+
+ const WORKFLOW_WITH_LOOPS = new Workflow({
+ nodeTypes,
+ active: false,
+ nodes: [
+ {
+ parameters: {},
+ name: 'Switch',
+ type: 'test.switch',
+ typeVersion: 1,
+ position: [920, 340],
+ },
+ {
+ parameters: {},
+ name: 'Start',
+ type: 'test.set',
+ typeVersion: 1,
+ position: [240, 300],
+ },
+ {
+ parameters: {
+ options: {},
+ },
+ name: 'Set1',
+ type: 'test.set',
+ typeVersion: 1,
+ position: [700, 340],
+ },
+ {
+ parameters: {
+ options: {},
+ },
+ name: 'Set',
+ type: 'test.set',
+ typeVersion: 1,
+ position: [1220, 300],
+ },
+ {
+ parameters: {},
+ name: 'Switch',
+ type: 'test.switch',
+ typeVersion: 1,
+ position: [920, 340],
+ },
+ ],
+ connections: {
+ Switch: {
+ main: [
+ [
+ {
+ node: 'Set',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ [], // todo why is null not accepted
+ [
+ {
+ node: 'Switch',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ ],
+ },
+ Start: {
+ main: [
+ [
+ {
+ node: 'Set1',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ ],
+ },
+ Set1: {
+ main: [
+ [
+ {
+ node: 'Set1',
+ type: 'main',
+ index: 0,
+ },
+ {
+ node: 'Switch',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ ],
+ },
+ Set: {
+ main: [
+ [
+ {
+ node: 'Set1',
+ type: 'main',
+ index: 0,
+ },
+ ],
+ ],
+ },
+ },
+ });
+
+ test('Should return parent nodes of nodes', () => {
+ expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Start')).toEqual([]);
+ expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set')).toEqual([
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Start',
+ },
+ ]);
+ expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set1')).toEqual([
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Set',
+ },
+ {
+ depth: 2,
+ indicies: [0],
+ name: 'Start',
+ },
+ ]);
+ });
+
+ test('Should return parent up to depth', () => {
+ expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set1', 0)).toEqual([]);
+ expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set1', 1)).toEqual([
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Set',
+ },
+ ]);
+ });
+
+ test('Should return all parents with depth of -1', () => {
+ expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set1', -1)).toEqual([
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Set',
+ },
+ {
+ depth: 2,
+ indicies: [0],
+ name: 'Start',
+ },
+ ]);
+ });
+
+ test('Should return parents of nodes with all connected output indicies', () => {
+ expect(WORKFLOW_WITH_SWITCH.getParentNodesByDepth('Switch')).toEqual([]);
+ expect(WORKFLOW_WITH_SWITCH.getParentNodesByDepth('Set1')).toEqual([
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Switch',
+ },
+ ]);
+ expect(WORKFLOW_WITH_SWITCH.getParentNodesByDepth('Set')).toEqual([
+ {
+ depth: 1,
+ indicies: [1, 2],
+ name: 'Switch',
+ },
+ ]);
+
+ expect(WORKFLOW_WITH_SWITCH.getParentNodesByDepth('Set2')).toEqual([
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Set',
+ },
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Set1',
+ },
+ {
+ depth: 2,
+ indicies: [1, 2, 0],
+ name: 'Switch',
+ },
+ ]);
+ });
+
+ test('Should handle loops within workflows', () => {
+ expect(WORKFLOW_WITH_LOOPS.getParentNodesByDepth('Start')).toEqual([]);
+ expect(WORKFLOW_WITH_LOOPS.getParentNodesByDepth('Set')).toEqual([
+ {
+ depth: 1,
+ indicies: [0, 2],
+ name: 'Switch',
+ },
+ {
+ depth: 2,
+ indicies: [0],
+ name: 'Set1',
+ },
+ {
+ depth: 3,
+ indicies: [0],
+ name: 'Start',
+ },
+ ]);
+ expect(WORKFLOW_WITH_LOOPS.getParentNodesByDepth('Switch')).toEqual([
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Set1',
+ },
+ {
+ depth: 2,
+ indicies: [0],
+ name: 'Start',
+ },
+ {
+ depth: 2,
+ indicies: [0],
+ name: 'Set',
+ },
+ ]);
+ expect(WORKFLOW_WITH_LOOPS.getParentNodesByDepth('Set1')).toEqual([
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Start',
+ },
+ {
+ depth: 1,
+ indicies: [0],
+ name: 'Set',
+ },
+ {
+ depth: 2,
+ indicies: [0, 2],
+ name: 'Switch',
+ },
+ ]);
+ });
+ });
});