feat(editor): Add input panel to NDV (#3204)

* refactor tabs out

* refactor execute button

* refactor header

* add more views

* fix error view

* fix workflow rename bug

* rename component

* fix small screen bug

* move items, fix positions

* add hover state

* show selector on empty state

* add empty run state

* fix binary view

* 1 item

* add vjs styles

* show empty row for every item

* refactor tabs

* add branch names

* fix spacing

* fix up spacing

* add run selector

* fix positioning

* clean up

* increase width of selector

* fix up spacing

* fix copy button

* fix branch naming; type issues

* fix docs in custom nodes

* add type

* hide items when run selector is shown

* increase selector size

* add select prepend

* clean up a bit

* Add pagination

* add stale icon

* enable stale data in execution run

* Revert "enable stale data in execution run"

8edb68dbff

* move metadata to its own state

* fix smaller size

* add scroll buttons

* update tabs on resize

* update stale data on rename

* remove metadata on delete

* hide x

* change title colors

* binary data classes

* remove duplicate css

* add colors

* delete unused keys

* use event bus

* refactor header out

* support different nodes

* update selector

* add immediate input

* add branch overrides

* split output input run index

* clean up unnessary data

* add missing keys

* update key names

* remove unnessary css/js

* fix outputs panel

* set max width on input selector

* fix selector to show parent nodes

* fix bug when switching between nodes

* add linking and refactor

* add linking

* fix minor issues

* hide linking when cannot link

* fix type

* fix error state

* clean up import

* fix linking edge cases

* hide input panel for triggers

* disable for start node

* format file

* refactor output panel

* add empty input hint

* update too much data view

* update slot, message under branch

* no input data view

* add node not run/no output data views

* add tooltip support on execute prev

* fix spacing in view

* address output views

* fix run node hint view

* fix spinner

* center button

* update message to use node name

* update title of no output data message

* implement loading states

* fix sizes

* fix sizes

* update spinner

* add wire me up image

* update link

* update panels design

* fix unclickable area bug

* revert change

* fix clickable bg

* fix up positioning

* ensure bg is clickable

* fix up borders

* fix height

* move border to wrapper

* set box shadow

* set box shadow

* add drag button

* add dragging for main panel

* set max width of panels

* set min width in js

* keep showing drag while dragging

* fix dragging leaving modal

* update trigger position of main panel

* move main panel position into store

* clear metadata after changing workflow

* center grid correctly

* add drag arrows

* add dragging hover

* fix cursor behavior

* update no output state

* show last run on open

* always set to latest run

* fix padding

* add I wish this node would

* clean up unsued data

* inject run info into run

* refactor out drag button

* fix dragging issue

* fix arrow bug

* increase width of panel

* change run logic

* set label font sizes

* update radiobutton pos

* address header issues

* fix prev spacing bug

* fix input order

* set package lock

* add close modal event

* complete close modal event

* add input change event

* add dragging event

* add event on view change

* add page size event

* rename event

* add event on page change

* add link click event

* add linking event

* rename var

* add run change event

* add button events

* add branch event

* add structure for open event

* add input type

* set session id

* set sessionid/source for expression events

* add params to expression events

* make display modes global

* add display mode to tracking

* add more event tracking

* add has_mapping param

* make main panel position global

* dedupe list

* fix cursor while dragging

* address feedback

* reduce bottom scrim

* remove empty option hint

* add hint tooltip

* add tritary button

* update param names

* update parameter buttons

* center empty states

* move feature request message

* increase max width for inputs selector

* fix error dispaly padding

* remove immediate

* refactor search logic to return object

* fix console errors

* fix console errors

* add node distance

* refactor how input nodes listed

* remove console log

* set package lock

* refactor recursive logic

* handle overrides

* handle default case without inputs

* fix bug width link

* fix tabs arrow bug

* handle binary data case

* update node execution

* fix merge logic

* remove console log

* delete func

* update package lock

* add hover area

* switch first input node

* keep recursive order

* make breadth first traversal

* fix overflow bug, add pluralization

* update docs url

* update drop shadow

* set background color for button

* update input

* fix truncation

* update index of input dropdown

* fix binary background

* update telemetry

* fix binary data switching

* check all parent connections for executed node

* check current state for executing node

* fix executing states

* update loading states

* use pluralization for items

* rename modal

* update pluralization

* update package lock

* update empty messagE

* format file

* refactor out dragging logic

* refactor out dragging

* add back panel position

* add telemetry params

* add survey url as const

* remove extra space, add dot

* rename tabs, update telemetery, fix telemetry bug

* update execute prev button

* rename workflow func

* rename workflow func

* delete unnessary component

* fix build issue

* add tests for workflow search

* format + add tests

* remove todo comment

* update iconnection type to match workflows

* Revert "update iconnection type to match workflows"

3772487d98

* update func comment

* fix formatting issues

* add tertiary story

* add spinner story

* remove todo comment

* remove eslint check

* update empty messagE
This commit is contained in:
Mutasem Aldmour 2022-05-23 17:56:15 +02:00 committed by GitHub
parent 061e36e8ab
commit 3af0abd9e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 45678 additions and 108007 deletions

91040
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -13,7 +13,7 @@ export default {
},
type: {
control: 'select',
options: ['primary', 'outline', 'light', 'text'],
options: ['primary', 'outline', 'light', 'text', 'tertiary'],
},
size: {
control: {
@ -96,6 +96,12 @@ Outline.args = {
label: 'Button',
};
export const Tertiary = ManyTemplate.bind({});
Tertiary.args = {
type: 'tertiary',
label: 'Button',
};
export const Light = ManyTemplate.bind({});
Light.args = {
type: 'light',

View file

@ -47,7 +47,7 @@ export default {
type: String,
default: 'primary',
validator: (value: string): boolean =>
['primary', 'outline', 'light', 'text'].includes(value),
['primary', 'outline', 'light', 'text', 'tertiary'].includes(value),
},
theme: {
type: String,
@ -107,8 +107,8 @@ export default {
};
},
getClass(props: { type: string; theme?: string, transparentBackground: boolean }, $style: any): string {
const theme = props.type === 'text'
? 'text'
const theme = props.type === 'text' || props.type === 'tertiary'
? props.type
: `${props.type}-${props.theme || 'primary'}`;
if (props.transparentBackground) {
@ -293,6 +293,20 @@ $color-danger-shade: lightness(
--button-active-border-color: transparent;
}
.tertiary {
composes: button;
font-weight: var(--font-weight-regular) !important;
--button-color: var(--color-text-dark);
--button-border-color: var(--color-foreground-base);
--button-background-color: var(--color-background-base);
--button-active-background-color: var(--color-primary-tint-2);
--button-active-color: var(--color-primary);
--button-active-border-color: var(--color-primary);
--button-disabled-border-color: var(--color-foreground-xdark);
}
.transparent {
--button-background-color: transparent;
--button-active-background-color: transparent;

View file

@ -65,7 +65,7 @@ export default {
.tooltip {
composes: base;
display: inline-block;
display: inline-flex;
}
.info-light {

View file

@ -47,7 +47,7 @@ export default {
.button {
border-radius: 0;
padding: 0 var(--spacing-s);
padding: 0 var(--spacing-xs);
display: flex;
align-items: center;
height: 26px;

View file

@ -82,6 +82,9 @@ export default {
limitPopperWidth: {
type: Boolean,
},
noDataText: {
type: String,
},
},
methods: {
getSize(size: string): string | undefined {

View file

@ -10,6 +10,12 @@ export default {
options: ['small', 'medium', 'large'],
},
},
type: {
control: {
type: 'select',
options: ['dots', 'ring'],
},
},
},
};

View file

@ -1,10 +1,14 @@
<template functional>
<span>
<div v-if="props.type === 'ring'" class="lds-ring"><div></div><div></div><div></div><div></div></div>
<component
v-else
:is="$options.components.N8nIcon"
icon="spinner"
:size="props.size"
spin
/>
</span>
</template>
<script lang="ts">
@ -22,6 +26,51 @@ export default {
return ['small', 'medium', 'large'].includes(value);
},
},
type: {
type: String,
validator: function (value: string): boolean {
return ['dots', 'ring'].includes(value);
},
default: 'dots',
},
},
};
</script>
<style lang="scss">
.lds-ring {
display: inline-block;
position: relative;
width: 48px;
height: 48px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 48px;
height: 48px;
border: 4px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--color-primary) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

View file

@ -13,7 +13,7 @@
target="_blank"
:href="option.href"
:class="[$style.link, $style.tab]"
@click="handleTabClick"
@click="() => handleTabClick(option.value)"
>
<div>
{{ option.label }}
@ -168,7 +168,7 @@ export default Vue.extend({
.button {
position: absolute;
background-color: var(--color-background-light);
background-color: var(--color-background-base);
z-index: 1;
height: 24px;
width: 10px;

View file

@ -691,7 +691,7 @@ $button-disabled-background-color: var(
var(--color-foreground-base)
);
/// color||Color|0
$button-disabled-border-color: var(--border-color-base);
$button-disabled-border-color: var(--button-disabled-border-color, var(--border-color-base));
/// color||Color|0
$button-primary-border-color: var(--color-primary);

View file

@ -340,6 +340,7 @@ export interface IExecutionResponse extends IExecutionBase {
id: string;
data: IRunExecutionData;
workflowData: IWorkflowDb;
executedNode?: string;
}
export interface IExecutionShortResponse {
@ -840,6 +841,8 @@ export interface IModalState {
activeId?: string | null;
}
export type IRunDataDisplayMode = 'table' | 'json' | 'binary';
export interface IUiState {
sidebarMenuCollapsed: boolean;
modalStack: string[];
@ -848,6 +851,16 @@ export interface IUiState {
};
isPageLoading: boolean;
currentView: string;
ndv: {
sessionId: string;
input: {
displayMode: IRunDataDisplayMode;
};
output: {
displayMode: IRunDataDisplayMode;
};
};
mainPanelPosition: number;
}
export type ILogLevel = 'info' | 'debug' | 'warn' | 'error' | 'verbose';

View file

@ -101,7 +101,7 @@ export default mixins(
z-index: 10;
width: 100%;
height: calc(100% - 50px);
background-color: #f9f9f9;
background-color: var(--color-background-base);
overflow: hidden;
text-align: center;

View file

@ -10,6 +10,7 @@
<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
<n8n-button
v-if="parameter.options.length === 1"
type="tertiary"
fullWidth
@click="optionSelected(parameter.options[0].name)"
:label="getPlaceholderText"

View file

@ -7,6 +7,7 @@
:value="credentialData[parameter.name]"
:documentationUrl="documentationUrl"
:showValidationWarnings="showValidationWarnings"
eventSource="credentials"
@change="valueChanged"
/>
</form>

View file

@ -1,184 +0,0 @@
<template>
<el-dialog
:visible="(!!node || renaming) && !isActiveStickyNode"
:before-close="close"
:show-close="false"
custom-class="data-display-wrapper"
width="85%"
append-to-body
>
<n8n-tooltip placement="bottom-start" :value="showTriggerWaitingWarning" :disabled="!showTriggerWaitingWarning" :manual="true">
<div slot="content" :class="$style.triggerWarning">{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}</div>
<div :class="$style.backToCanvas" @click="close">
<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
<n8n-text color="text-xlight" size="medium" :bold="true">{{ $locale.baseText('ndv.backToCanvas') }}</n8n-text>
</div>
</n8n-tooltip>
<div class="data-display" v-if="node" >
<NodeSettings :eventBus="settingsEventBus" @valueChanged="valueChanged" @execute="onNodeExecute" />
<RunData @openSettings="openSettings" />
</div>
</el-dialog>
</template>
<script lang="ts">
import {
INodeTypeDescription,
} from 'n8n-workflow';
import {
INodeUi,
IUpdateInformation,
} from '../Interface';
import { externalHooks } from '@/components/mixins/externalHooks';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import NodeSettings from '@/components/NodeSettings.vue';
import RunData from '@/components/RunData.vue';
import mixins from 'vue-typed-mixins';
import Vue from 'vue';
import { mapGetters } from 'vuex';
import { STICKY_NODE_TYPE } from '@/constants';
export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
name: 'DataDisplay',
components: {
NodeSettings,
RunData,
},
props: {
renaming: {
type: Boolean,
},
},
data () {
return {
settingsEventBus: new Vue(),
triggerWaitingWarningEnabled: false,
};
},
computed: {
...mapGetters(['executionWaitingForWebhook']),
workflowRunning (): boolean {
return this.$store.getters.isActionActive('workflowRunning');
},
showTriggerWaitingWarning(): boolean {
return this.triggerWaitingWarningEnabled && !!this.nodeType && !this.nodeType.group.includes('trigger') && this.workflowRunning && this.executionWaitingForWebhook;
},
node (): INodeUi {
return this.$store.getters.activeNode;
},
nodeType (): INodeTypeDescription | null {
if (this.node) {
return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
}
return null;
},
isActiveStickyNode(): boolean {
return !!this.$store.getters.activeNode && this.$store.getters.activeNode.type === STICKY_NODE_TYPE;
},
},
watch: {
node (node, oldNode) {
if(node && !oldNode && !this.isActiveStickyNode) {
this.triggerWaitingWarningEnabled = false;
this.$externalHooks().run('dataDisplay.nodeTypeChanged', { nodeSubtitle: this.getNodeSubtitle(node, this.nodeType, this.getWorkflow()) });
this.$telemetry.track('User opened node modal', { node_type: this.nodeType ? this.nodeType.name : '', workflow_id: this.$store.getters.workflowId });
}
if (window.top && !this.isActiveStickyNode) {
window.top.postMessage(JSON.stringify({command: (node? 'openNDV': 'closeNDV')}), '*');
}
},
},
methods: {
onNodeExecute() {
setTimeout(() => {
if (!this.node || !this.workflowRunning) {
return;
}
this.triggerWaitingWarningEnabled = true;
}, 1000);
},
openSettings() {
this.settingsEventBus.$emit('openSettings');
},
valueChanged (parameterData: IUpdateInformation) {
this.$emit('valueChanged', parameterData);
},
nodeTypeSelected (nodeTypeName: string) {
this.$emit('nodeTypeSelected', nodeTypeName);
},
close () {
this.$externalHooks().run('dataDisplay.nodeEditingFinished');
this.triggerWaitingWarningEnabled = false;
this.$store.commit('setActiveNode', null);
},
},
});
</script>
<style lang="scss">
.data-display-wrapper {
height: 85%;
margin-top: 48px !important;
.el-dialog__header {
padding: 0 !important;
}
.el-dialog__body {
padding: 0 !important;
height: 100%;
min-height: 400px;
overflow: hidden;
border-radius: 8px;
}
}
.data-display {
background-color: #fff;
border-radius: 8px;
display: flex;
height: 100%;
}
.fade-enter-active, .fade-enter-to, .fade-leave-active {
transition: all .75s ease;
opacity: 1;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
<style lang="scss" module>
.triggerWarning {
max-width: 180px;
}
.backToCanvas {
position: absolute;
top: -40px;
&:hover {
cursor: pointer;
}
> * {
margin-right: var(--spacing-3xs);
}
}
@media (min-width: $--breakpoint-lg) {
.backToCanvas {
position: fixed;
top: 10px;
left: 20px;
}
}
</style>

View file

@ -0,0 +1,59 @@
<template>
<div
:class="{[$style.dragging]: isDragging }"
@mousedown="onDragStart"
>
<slot :isDragging="isDragging"></slot>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
isDragging: false,
};
},
methods: {
onDragStart(e: MouseEvent) {
e.preventDefault();
e.stopPropagation();
this.isDragging = true;
this.$emit('dragstart');
document.body.style.cursor = 'grabbing';
window.addEventListener('mousemove', this.onDrag);
window.addEventListener('mouseup', this.onDragEnd);
},
onDrag(e: MouseEvent) {
e.preventDefault();
e.stopPropagation();
this.$emit('drag', {x: e.pageX, y: e.pageY});
},
onDragEnd(e: MouseEvent) {
e.preventDefault();
e.stopPropagation();
document.body.style.cursor = 'unset';
window.removeEventListener('mousemove', this.onDrag);
window.removeEventListener('mouseup', this.onDragEnd);
setTimeout(() => {
this.$emit('dragend');
this.isDragging = false;
}, 0);
},
},
});
</script>
<style lang="scss" module>
.dragging {
visibility: visible;
cursor: grabbing;
}
</style>

View file

@ -51,6 +51,8 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
import mixins from 'vue-typed-mixins';
const MAPPING_PARAMS = [`$evaluateExpression`, `$item`, `$jmespath`, `$node`, `$binary`, `$data`, `$env`, `$json`, `$now`, `$parameters`, `$position`, `$resumeWebhookUrl`, `$runIndex`, `$today`, `$workflow`];
export default mixins(
externalHooks,
genericHelpers,
@ -61,6 +63,7 @@ export default mixins(
'parameter',
'path',
'value',
'eventSource',
],
components: {
ExpressionInput,
@ -110,7 +113,14 @@ export default mixins(
this.$externalHooks().run('expressionEdit.dialogVisibleChanged', { dialogVisible: newValue, parameter: this.parameter, value: this.value, resolvedExpressionValue });
if (!newValue) {
this.$telemetry.track('User closed Expression Editor', { empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value, workflow_id: this.$store.getters.workflowId });
this.$telemetry.track('User closed Expression Editor', {
empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value,
workflow_id: this.$store.getters.workflowId,
source: this.eventSource,
session_id: this.$store.getters['ui/ndvSessionId'],
has_parameter: this.value.includes('$parameter'),
has_mapping: !!MAPPING_PARAMS.find((param) => this.value.includes(param)),
});
}
},
},

View file

@ -82,6 +82,7 @@
<div v-if="parameterOptions.length > 0 && !isReadOnly">
<n8n-button
v-if="parameter.options.length === 1"
type="tertiary"
fullWidth
@click="optionSelected(parameter.options[0].name)"
:label="getPlaceholderText"

View file

@ -0,0 +1,234 @@
<template>
<RunData
:nodeUi="currentNode"
:runIndex="runIndex"
:linkedRuns="linkedRuns"
:canLinkRuns="canLinkRuns"
:tooMuchDataTitle="$locale.baseText('ndv.input.tooMuchData.title')"
:noDataInBranchMessage="$locale.baseText('ndv.input.noOutputDataInBranch')"
:isExecuting="isExecutingPrevious"
:executingMessage="$locale.baseText('ndv.input.executingPrevious')"
:sessionId="sessionId"
:overrideOutputs="connectedCurrentNodeOutputs"
paneType="input"
@linkRun="onLinkRun"
@unlinkRun="onUnlinkRun"
@runChange="onRunIndexChange">
<template v-slot:header>
<div :class="$style.titleSection">
<n8n-select v-if="parentNodes.length" :popper-append-to-body="true" size="small" :value="currentNodeName" @input="onSelect" :no-data-text="$locale.baseText('ndv.input.noNodesFound')" :placeholder="$locale.baseText('ndv.input.parentNodes')" filterable>
<template slot="prepend">
<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
</template>
<n8n-option v-for="node in parentNodes" :value="node.name" :key="node.name" class="node-option">
{{ truncate(node.name) }}&nbsp;
<span >{{ $locale.baseText('ndv.input.nodeDistance', {adjustToNumber: node.depth}) }}</span>
</n8n-option>
</n8n-select>
<span v-else :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
</div>
</template>
<template v-slot:node-not-run>
<div :class="$style.noOutputData" v-if="parentNodes.length">
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData.title') }}</n8n-text>
<NodeExecuteButton type="outline" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" />
<n8n-text tag="div" size="small">
{{ $locale.baseText('ndv.input.noOutputData.hint') }}
</n8n-text>
</div>
<div :class="$style.notConnected" v-else>
<div>
<WireMeUp />
</div>
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.notConnected.title') }}</n8n-text>
<n8n-text tag="div">
{{ $locale.baseText('ndv.input.notConnected.message') }}
<a href="https://docs.n8n.io/workflows/connections/" target="_blank" @click="onConnectionHelpClick">
{{$locale.baseText('ndv.input.notConnected.learnMore')}}
</a>
</n8n-text>
</div>
</template>
<template v-slot:no-output-data>
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData') }}</n8n-text>
</template>
</RunData>
</template>
<script lang="ts">
import { INodeUi } from '@/Interface';
import { IConnectedNode, Workflow } from 'n8n-workflow';
import RunData from './RunData.vue';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import mixins from 'vue-typed-mixins';
import NodeExecuteButton from './NodeExecuteButton.vue';
import WireMeUp from './WireMeUp.vue';
export default mixins(
workflowHelpers,
).extend({
name: 'InputPanel',
components: { RunData, NodeExecuteButton, WireMeUp },
props: {
currentNodeName: {
type: String,
},
runIndex: {
type: Number,
},
linkedRuns: {
type: Boolean,
},
workflow: {
},
canLinkRuns: {
type: Boolean,
},
sessionId: {
type: String,
},
},
computed: {
isExecutingPrevious(): boolean {
const triggeredNode = this.$store.getters.executedNode;
const executingNode = this.$store.getters.executingNode;
if (this.activeNode && triggeredNode === this.activeNode.name && this.activeNode.name !== executingNode) {
return true;
}
if (executingNode || triggeredNode) {
return !!this.parentNodes.find((node) => node.name === executingNode || node.name === triggeredNode);
}
return false;
},
currentWorkflow(): Workflow {
return this.workflow as Workflow;
},
activeNode (): INodeUi | null {
return this.$store.getters.activeNode;
},
currentNode (): INodeUi {
return this.$store.getters.getNodeByName(this.currentNodeName);
},
connectedCurrentNodeOutputs(): number[] | undefined {
const search = this.parentNodes.find(({name}) => name === this.currentNodeName);
if (search) {
return search.indicies;
}
return undefined;
},
parentNodes (): IConnectedNode[] {
if (!this.activeNode) {
return [];
}
const nodes: IConnectedNode[] = (this.workflow as Workflow).getParentNodesByDepth(this.activeNode.name);
return nodes.filter(({name}, i) => (this.activeNode && (name !== this.activeNode.name)) && nodes.findIndex((node) => node.name === name) === i);
},
},
methods: {
onNodeExecute() {
this.$emit('execute');
if (this.activeNode) {
this.$telemetry.track('User clicked ndv button', {
node_type: this.activeNode.type,
workflow_id: this.$store.getters.workflowId,
session_id: this.sessionId,
pane: 'input',
type: 'executePrevious',
});
}
},
onRunIndexChange(run: number) {
this.$emit('runChange', run);
},
onLinkRun() {
this.$emit('linkRun');
},
onUnlinkRun() {
this.$emit('unlinkRun');
},
onSelect(value: string) {
const index = this.parentNodes.findIndex((node) => node.name === value) + 1;
this.$emit('select', value, index);
},
onConnectionHelpClick() {
if (this.activeNode) {
this.$telemetry.track('User clicked ndv link', {
node_type: this.activeNode.type,
workflow_id: this.$store.getters.workflowId,
session_id: this.sessionId,
pane: 'input',
type: 'not-connected-help',
});
}
},
truncate(nodeName: string) {
const truncated = nodeName.substring(0, 30);
if (truncated.length < nodeName.length) {
return `${truncated}...`;
}
return truncated;
},
},
});
</script>
<style lang="scss" module>
.titleSection {
display: flex;
max-width: 300px;
> * {
margin-right: var(--spacing-2xs);
}
}
.noOutputData {
max-width: 180px;
> *:first-child {
margin-bottom: var(--spacing-m);
}
> * {
margin-bottom: var(--spacing-2xs);
}
}
.notConnected {
max-width: 300px;
> *:first-child {
margin-bottom: var(--spacing-m);
}
> * {
margin-bottom: var(--spacing-2xs);
}
}
.title {
text-transform: uppercase;
color: var(--color-text-light);
letter-spacing: 3px;
font-size: var(--font-size-s);
font-weight: var(--font-weight-bold);
}
</style>
<style lang="scss" scoped>
.node-option {
font-weight: var(--font-weight-regular) !important;
span {
color: var(--color-text-light);
}
&.selected > span {
color: var(--color-primary);
}
}
</style>

View file

@ -28,7 +28,7 @@
<div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist">
<n8n-text size="small">{{ $locale.baseText('multipleParameter.currentlyNoItemsExist') }}</n8n-text>
</div>
<n8n-button v-if="!isReadOnly" fullWidth @click="addItem()" :label="addButtonText" />
<n8n-button v-if="!isReadOnly" type="tertiary" fullWidth @click="addItem()" :label="addButtonText" />
</div>
</n8n-input-label>

View file

@ -0,0 +1,215 @@
<template>
<div>
<div :class="$style.inputPanel" v-if="!isTriggerNode" :style="inputPanelStyles">
<slot name="input"></slot>
</div>
<div :class="$style.outputPanel" :style="outputPanelStyles">
<slot name="output"></slot>
</div>
<div :class="$style.mainPanel" :style="mainPanelStyles">
<div :class="$style.dragButtonContainer" @click="close">
<PanelDragButton
:class="{ [$style.draggable]: true, [$style.visible]: isDragging }"
v-if="!isTriggerNode"
:canMoveLeft="canMoveLeft"
:canMoveRight="canMoveRight"
@dragstart="onDragStart"
@drag="onDrag"
@dragend="onDragEnd"
/>
</div>
<slot name="main"></slot>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import PanelDragButton from './PanelDragButton.vue';
const MAIN_PANEL_WIDTH = 360;
const SIDE_MARGIN = 24;
export default Vue.extend({
name: 'NDVDraggablePanels',
components: {
PanelDragButton,
},
props: {
isTriggerNode: {
type: Boolean,
},
},
data() {
return {
windowWidth: 0,
isDragging: false,
};
},
mounted() {
this.setTotalWidth();
window.addEventListener('resize', this.setTotalWidth);
this.$emit('init', { position: this.getRelativePosition() });
},
destroyed() {
window.removeEventListener('resize', this.setTotalWidth);
},
computed: {
mainPanelPosition(): number {
if (this.isTriggerNode) {
return 0;
}
const relativePosition = this.$store.getters['ui/mainPanelPosition'] as number;
return relativePosition * this.windowWidth;
},
inputPanelMargin(): number {
return this.isTriggerNode ? 0 : 80;
},
minimumLeftPosition(): number {
return SIDE_MARGIN + this.inputPanelMargin;
},
maximumRightPosition(): number {
return this.windowWidth - MAIN_PANEL_WIDTH - this.minimumLeftPosition;
},
mainPanelFinalPositionPx(): number {
const padding = this.minimumLeftPosition;
let pos = this.mainPanelPosition + MAIN_PANEL_WIDTH / 2;
pos = Math.max(padding, pos - MAIN_PANEL_WIDTH);
pos = Math.min(pos, this.maximumRightPosition);
return pos;
},
canMoveLeft(): boolean {
return this.mainPanelFinalPositionPx > this.minimumLeftPosition;
},
canMoveRight(): boolean {
return this.mainPanelFinalPositionPx < this.maximumRightPosition;
},
mainPanelStyles(): { left: string } {
return {
left: `${this.mainPanelFinalPositionPx}px`,
};
},
inputPanelStyles(): { width: string } {
let width = this.mainPanelPosition - MAIN_PANEL_WIDTH / 2 - SIDE_MARGIN;
width = Math.min(
width,
this.windowWidth - SIDE_MARGIN * 2 - this.inputPanelMargin - MAIN_PANEL_WIDTH,
);
width = Math.max(320, width);
return {
width: `${width}px`,
};
},
outputPanelStyles(): { width: string } {
let width = this.windowWidth - this.mainPanelPosition - MAIN_PANEL_WIDTH / 2 - SIDE_MARGIN;
width = Math.min(
width,
this.windowWidth - SIDE_MARGIN * 2 - this.inputPanelMargin - MAIN_PANEL_WIDTH,
);
width = Math.max(320, width);
return {
width: `${width}px`,
};
},
},
methods: {
getRelativePosition() {
const current = this.mainPanelFinalPositionPx + MAIN_PANEL_WIDTH / 2 - this.windowWidth / 2;
const pos = Math.floor(
(current / ((this.maximumRightPosition - this.minimumLeftPosition) / 2)) * 100,
);
return pos;
},
onDragStart() {
this.isDragging = true;
this.$emit('dragstart', { position: this.getRelativePosition() });
},
onDrag(e: {x: number, y: number}) {
const relativePosition = e.x / this.windowWidth;
this.$store.commit('ui/setMainPanelRelativePosition', relativePosition);
},
onDragEnd() {
setTimeout(() => {
this.isDragging = false;
this.$emit('dragend', {
windowWidth: this.windowWidth,
position: this.getRelativePosition(),
});
}, 0);
},
setTotalWidth() {
this.windowWidth = window.innerWidth;
},
close() {
this.$emit('close');
},
},
});
</script>
<style lang="scss" module>
$--main-panel-width: 360px;
.dataPanel {
position: absolute;
height: calc(100% - 2 * var(--spacing-l));
position: absolute;
top: var(--spacing-l);
z-index: 0;
}
.inputPanel {
composes: dataPanel;
left: var(--spacing-l);
> * {
border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
}
}
.outputPanel {
composes: dataPanel;
right: var(--spacing-l);
width: $--main-panel-width;
> * {
border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
}
}
.mainPanel {
position: absolute;
height: 100%;
&:hover {
.draggable {
visibility: visible;
}
}
}
.draggable {
position: absolute;
left: 40%;
visibility: hidden;
}
.dragButtonContainer {
position: absolute;
top: -12px;
width: $--main-panel-width;
height: 12px;
&:hover .draggable {
visibility: visible;
}
}
.visible {
visibility: visible;
}
</style>

View file

@ -323,7 +323,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
mounted() {
this.setSubtitle();
setTimeout(() => {
this.$emit('run', {name: this.data.name, data: this.nodeRunData, waiting: !!this.waiting});
this.$emit('run', {name: this.data && this.data.name, data: this.nodeRunData, waiting: !!this.waiting});
}, 0);
},
data () {

View file

@ -0,0 +1,524 @@
<template>
<el-dialog
:visible="(!!activeNode || renaming) && !isActiveStickyNode"
:before-close="close"
:show-close="false"
custom-class="data-display-wrapper"
class="ndv-wrapper"
width="auto"
append-to-body
>
<n8n-tooltip
placement="bottom-start"
:value="showTriggerWaitingWarning"
:disabled="!showTriggerWaitingWarning"
:manual="true"
>
<div slot="content" :class="$style.triggerWarning">
{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
</div>
<div :class="$style.backToCanvas" @click="close">
<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
<n8n-text color="text-xlight" size="medium" :bold="true">
{{ $locale.baseText('ndv.backToCanvas') }}
</n8n-text>
</div>
</n8n-tooltip>
<div class="data-display" v-if="activeNode">
<div @click="close" :class="$style.modalBackground"></div>
<NDVDraggablePanels :isTriggerNode="isTriggerNode" @close="close" @init="onPanelsInit" @dragstart="onDragStart" @dragend="onDragEnd">
<template #input>
<InputPanel
:workflow="workflow"
:canLinkRuns="canLinkRuns"
:runIndex="inputRun"
:linkedRuns="linked"
:currentNodeName="inputNodeName"
:sessionId="sessionId"
@linkRun="onLinkRunToInput"
@unlinkRun="() => onUnlinkRun('input')"
@runChange="onRunInputIndexChange"
@openSettings="openSettings"
@select="onInputSelect"
@execute="onNodeExecute"
/>
</template>
<template #output>
<OutputPanel
:canLinkRuns="canLinkRuns"
:runIndex="outputRun"
:linkedRuns="linked"
:sessionId="sessionId"
@linkRun="onLinkRunToOutput"
@unlinkRun="() => onUnlinkRun('output')"
@runChange="onRunOutputIndexChange"
@openSettings="openSettings"
/>
</template>
<template #main>
<NodeSettings
:eventBus="settingsEventBus"
:dragging="isDragging"
:sessionId="sessionId"
@valueChanged="valueChanged"
@execute="onNodeExecute"
/>
<a
v-if="featureRequestUrl"
@click="onFeatureRequestClick"
:class="$style.featureRequest"
target="_blank"
>
<font-awesome-icon icon="lightbulb" />
{{ $locale.baseText('ndv.featureRequest') }}
</a>
</template>
</NDVDraggablePanels>
</div>
</el-dialog>
</template>
<script lang="ts">
import {
INodeConnections,
INodeTypeDescription,
IRunData,
IRunExecutionData,
Workflow,
} from 'n8n-workflow';
import { IExecutionResponse, INodeUi, IUpdateInformation } from '../Interface';
import { externalHooks } from '@/components/mixins/externalHooks';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import NodeSettings from '@/components/NodeSettings.vue';
import NDVDraggablePanels from './NDVDraggablePanels.vue';
import mixins from 'vue-typed-mixins';
import Vue from 'vue';
import OutputPanel from './OutputPanel.vue';
import InputPanel from './InputPanel.vue';
import { mapGetters } from 'vuex';
import { BASE_NODE_SURVEY_URL, START_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
import { editor } from 'monaco-editor';
export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
name: 'NodeDetailsView',
components: {
NodeSettings,
InputPanel,
OutputPanel,
NDVDraggablePanels,
},
props: {
renaming: {
type: Boolean,
},
},
data() {
return {
settingsEventBus: new Vue(),
runInputIndex: -1,
runOutputIndex: -1,
isLinkingEnabled: true,
selectedInput: undefined as string | undefined,
triggerWaitingWarningEnabled: false,
isDragging: false,
mainPanelPosition: 0,
};
},
mounted() {
this.$store.commit('ui/setNDVSessionId');
},
computed: {
...mapGetters(['executionWaitingForWebhook']),
sessionId(): string {
return this.$store.getters['ui/ndvSessionId'];
},
workflowRunning(): boolean {
return this.$store.getters.isActionActive('workflowRunning');
},
showTriggerWaitingWarning(): boolean {
return (
this.triggerWaitingWarningEnabled &&
!!this.activeNodeType &&
!this.activeNodeType.group.includes('trigger') &&
this.workflowRunning &&
this.executionWaitingForWebhook
);
},
activeNode(): INodeUi {
return this.$store.getters.activeNode;
},
inputNodeName(): string | undefined {
return this.selectedInput || this.parentNode;
},
inputNode(): INodeUi | null {
if (this.inputNodeName) {
return this.$store.getters.getNodeByName(this.inputNodeName);
}
return null;
},
activeNodeType(): INodeTypeDescription | null {
if (this.activeNode) {
return this.$store.getters.nodeType(this.activeNode.type, this.activeNode.typeVersion);
}
return null;
},
workflow(): Workflow {
return this.getWorkflow();
},
parentNodes(): string[] {
if (this.activeNode) {
return (
this.workflow.getParentNodesByDepth(this.activeNode.name, 1).map(({ name }) => name) || []
);
}
return [];
},
parentNode(): string | undefined {
return this.parentNodes[0];
},
isTriggerNode(): boolean {
return (
!!this.activeNodeType &&
(this.activeNodeType.group.includes('trigger') ||
this.activeNodeType.name === START_NODE_TYPE)
);
},
isActiveStickyNode(): boolean {
return (
!!this.$store.getters.activeNode && this.$store.getters.activeNode.type === STICKY_NODE_TYPE
);
},
workflowExecution(): IExecutionResponse | null {
return this.$store.getters.getWorkflowExecution;
},
workflowRunData(): IRunData | null {
if (this.workflowExecution === null) {
return null;
}
const executionData: IRunExecutionData = this.workflowExecution.data;
if (executionData && executionData.resultData) {
return executionData.resultData.runData;
}
return null;
},
maxOutputRun(): number {
if (this.activeNode === null) {
return 0;
}
const runData: IRunData | null = this.workflowRunData;
if (runData === null || !runData.hasOwnProperty(this.activeNode.name)) {
return 0;
}
if (runData[this.activeNode.name].length) {
return runData[this.activeNode.name].length - 1;
}
return 0;
},
outputRun(): number {
if (this.runOutputIndex === -1) {
return this.maxOutputRun;
}
return Math.min(this.runOutputIndex, this.maxOutputRun);
},
maxInputRun(): number {
if (this.inputNode === null) {
return 0;
}
const runData: IRunData | null = this.workflowRunData;
if (runData === null || !runData.hasOwnProperty(this.inputNode.name)) {
return 0;
}
if (runData[this.inputNode.name].length) {
return runData[this.inputNode.name].length - 1;
}
return 0;
},
inputRun(): number {
if (this.isLinkingEnabled && this.maxOutputRun === this.maxInputRun) {
return this.outputRun;
}
if (this.runInputIndex === -1) {
return this.maxInputRun;
}
return Math.min(this.runInputIndex, this.maxInputRun);
},
canLinkRuns(): boolean {
return this.maxOutputRun > 0 && this.maxOutputRun === this.maxInputRun;
},
linked(): boolean {
return this.isLinkingEnabled && this.canLinkRuns;
},
inputPanelMargin(): number {
return this.isTriggerNode ? 0 : 80;
},
featureRequestUrl(): string {
if (!this.activeNodeType) {
return '';
}
return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`;
},
},
watch: {
activeNode(node, oldNode) {
if (node && !oldNode && !this.isActiveStickyNode) {
this.runInputIndex = -1;
this.runOutputIndex = -1;
this.isLinkingEnabled = true;
this.selectedInput = undefined;
this.triggerWaitingWarningEnabled = false;
this.$store.commit('ui/setNDVSessionId');
this.$externalHooks().run('dataDisplay.nodeTypeChanged', {
nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getWorkflow()),
});
setTimeout(() => {
const outogingConnections = this.$store.getters.outgoingConnectionsByNodeName(
this.activeNode.name,
) as INodeConnections;
this.$telemetry.track('User opened node modal', {
node_type: this.activeNodeType ? this.activeNodeType.name : '',
workflow_id: this.$store.getters.workflowId,
session_id: this.sessionId,
parameters_pane_position: this.mainPanelPosition,
input_first_connector_runs: this.maxInputRun,
output_first_connector_runs: this.maxOutputRun,
selected_view_inputs: this.isTriggerNode
? 'trigger'
: this.$store.getters['ui/inputPanelDispalyMode'],
selected_view_outputs: this.$store.getters['ui/outputPanelDispalyMode'],
input_connectors: this.parentNodes.length,
output_connectors:
outogingConnections && outogingConnections.main && outogingConnections.main.length,
input_displayed_run_index: this.inputRun,
output_displayed_run_index: this.outputRun,
});
}, 0); // wait for display mode to be set correctly
}
if (window.top && !this.isActiveStickyNode) {
window.top.postMessage(JSON.stringify({ command: node ? 'openNDV' : 'closeNDV' }), '*');
}
},
maxOutputRun() {
this.runOutputIndex = -1;
},
maxInputRun() {
this.runInputIndex = -1;
},
},
methods: {
onFeatureRequestClick() {
window.open(this.featureRequestUrl, '_blank');
this.$telemetry.track('User clicked ndv link', {
node_type: this.activeNode.type,
workflow_id: this.$store.getters.workflowId,
session_id: this.sessionId,
pane: 'main',
type: 'i-wish-this-node-would',
});
},
onPanelsInit(e: { position: number }) {
this.mainPanelPosition = e.position;
},
onDragStart(e: { position: number }) {
this.isDragging = true;
this.mainPanelPosition = e.position;
},
onDragEnd(e: { windowWidth: number, position: number }) {
this.isDragging = false;
this.$telemetry.track('User moved parameters pane', {
window_width: e.windowWidth,
start_position: this.mainPanelPosition,
end_position: e.position,
node_type: this.activeNodeType ? this.activeNodeType.name : '',
session_id: this.sessionId,
workflow_id: this.$store.getters.workflowId,
});
this.mainPanelPosition = e.position;
},
onLinkRunToInput() {
this.runOutputIndex = this.runInputIndex;
this.isLinkingEnabled = true;
this.trackLinking('input');
},
onLinkRunToOutput() {
this.isLinkingEnabled = true;
this.trackLinking('output');
},
onUnlinkRun(pane: string) {
this.runInputIndex = this.runOutputIndex;
this.isLinkingEnabled = false;
this.trackLinking(pane);
},
trackLinking(pane: string) {
this.$telemetry.track('User changed ndv run linking', {
node_type: this.activeNodeType ? this.activeNodeType.name : '',
session_id: this.sessionId,
linked: this.linked,
pane,
});
},
onNodeExecute() {
setTimeout(() => {
if (!this.activeNode || !this.workflowRunning) {
return;
}
this.triggerWaitingWarningEnabled = true;
}, 1000);
},
openSettings() {
this.settingsEventBus.$emit('openSettings');
},
valueChanged(parameterData: IUpdateInformation) {
this.$emit('valueChanged', parameterData);
},
nodeTypeSelected(nodeTypeName: string) {
this.$emit('nodeTypeSelected', nodeTypeName);
},
close() {
if (this.isDragging) {
return;
}
this.$externalHooks().run('dataDisplay.nodeEditingFinished');
this.$telemetry.track('User closed node modal', {
node_type: this.activeNodeType ? this.activeNodeType.name : '',
session_id: this.sessionId,
workflow_id: this.$store.getters.workflowId,
});
this.triggerWaitingWarningEnabled = false;
this.$store.commit('setActiveNode', null);
this.$store.commit('ui/resetNDVSessionId');
},
onRunOutputIndexChange(run: number) {
this.runOutputIndex = run;
this.trackRunChange(run, 'output');
},
onRunInputIndexChange(run: number) {
this.runInputIndex = run;
if (this.linked) {
this.runOutputIndex = run;
}
this.trackRunChange(run, 'input');
},
trackRunChange(run: number, pane: string) {
this.$telemetry.track('User changed ndv run dropdown', {
session_id: this.sessionId,
run_index: run,
node_type: this.activeNodeType ? this.activeNodeType.name : '',
pane,
});
},
onInputSelect(value: string, index: number) {
this.runInputIndex = -1;
this.isLinkingEnabled = true;
this.selectedInput = value;
this.$telemetry.track('User changed ndv input dropdown', {
node_type: this.activeNode ? this.activeNode.type : '',
session_id: this.sessionId,
workflow_id: this.$store.getters.workflowId,
selection_value: index,
input_node_type: this.inputNode ? this.inputNode.type : '',
});
},
},
});
</script>
<style lang="scss">
.ndv-wrapper {
overflow: hidden;
}
.data-display-wrapper {
height: 93%;
width: 100%;
margin-top: var(--spacing-xl) !important;
background: none;
border: none;
.el-dialog__header {
padding: 0 !important;
}
.el-dialog__body {
padding: 0 !important;
height: 100%;
min-height: 400px;
overflow: hidden;
border-radius: 8px;
}
}
.data-display {
height: 100%;
width: 100%;
display: flex;
}
</style>
<style lang="scss" module>
$--main-panel-width: 360px;
.modalBackground {
height: 100%;
width: 100%;
}
.triggerWarning {
max-width: 180px;
}
.backToCanvas {
position: fixed;
top: var(--spacing-xs);
left: var(--spacing-l);
&:hover {
cursor: pointer;
}
> * {
margin-right: var(--spacing-3xs);
}
}
@media (min-width: $--breakpoint-lg) {
.backToCanvas {
top: var(--spacing-xs);
left: var(--spacing-m);
}
}
.featureRequest {
position: absolute;
bottom: var(--spacing-4xs);
left: calc(100% + var(--spacing-s));
color: var(--color-text-xlight);
font-size: var(--font-size-2xs);
white-space: nowrap;
* {
margin-right: var(--spacing-3xs);
}
}
</style>

View file

@ -1,8 +1,11 @@
<template>
<n8n-button
:loading="workflowRunning"
:label="label"
size="small"
:loading="nodeRunning"
:disabled="workflowRunning && !nodeRunning"
:label="buttonLabel"
:type="type"
:size="size"
:transparentBackground="transparent"
@click="onClick"
/>
</template>
@ -20,6 +23,19 @@ export default mixins(
nodeName: {
type: String,
},
label: {
type: String,
},
type: {
type: String,
},
size: {
type: String,
},
transparent: {
type: Boolean,
default: false,
},
},
computed: {
node (): INodeUi {
@ -31,6 +47,11 @@ export default mixins(
}
return null;
},
nodeRunning (): boolean {
const triggeredNode = this.$store.getters.executedNode;
const executingNode = this.$store.getters.executingNode;
return executingNode === this.node.name || triggeredNode === this.node.name;
},
workflowRunning (): boolean {
return this.$store.getters.isActionActive('workflowRunning');
},
@ -43,7 +64,10 @@ export default mixins(
isScheduleTrigger (): boolean {
return !!(this.nodeType && this.nodeType.group.includes('schedule'));
},
label(): string {
buttonLabel(): string {
if (this.label) {
return this.label;
}
if (this.isPollingTypeNode) {
return this.$locale.baseText('ndv.execute.fetchEvent');
}

View file

@ -1,15 +1,15 @@
<template>
<div class="node-settings" @keydown.stop>
<div :class="{'node-settings': true, 'dragging': dragging}" @keydown.stop>
<div :class="$style.header">
<div class="header-side-menu">
<NodeTitle class="node-name" :value="node.name" :nodeType="nodeType" @input="nameChanged" :readOnly="isReadOnly"></NodeTitle>
<div
v-if="!isReadOnly"
>
<NodeExecuteButton :nodeName="node.name" @execute="onNodeExecute" />
<NodeExecuteButton :nodeName="node.name" @execute="onNodeExecute" size="small" />
</div>
</div>
<NodeTabs v-model="openPanel" :nodeType="nodeType" />
<NodeSettingsTabs v-model="openPanel" :nodeType="nodeType" :sessionId="sessionId" />
</div>
<div class="node-is-not-valid" v-if="node && !nodeValid">
<n8n-text>
@ -59,7 +59,7 @@ import NodeTitle from '@/components/NodeTitle.vue';
import ParameterInputFull from '@/components/ParameterInputFull.vue';
import ParameterInputList from '@/components/ParameterInputList.vue';
import NodeCredentials from '@/components/NodeCredentials.vue';
import NodeTabs from '@/components/NodeTabs.vue';
import NodeSettingsTabs from '@/components/NodeSettingsTabs.vue';
import NodeWebhooks from '@/components/NodeWebhooks.vue';
import { get, set, unset } from 'lodash';
@ -82,7 +82,7 @@ export default mixins(
NodeCredentials,
ParameterInputFull,
ParameterInputList,
NodeTabs,
NodeSettingsTabs,
NodeWebhooks,
NodeExecuteButton,
},
@ -151,6 +151,12 @@ export default mixins(
props: {
eventBus: {
},
dragging: {
type: Boolean,
},
sessionId: {
type: String,
},
},
data () {
return {
@ -542,8 +548,13 @@ export default mixins(
<style lang="scss">
.node-settings {
overflow: hidden;
min-width: 350px;
max-width: 350px;
min-width: 360px;
max-width: 360px;
background-color: var(--color-background-xlight);
height: 100%;
border: var(--border-base);
border-radius: var(--border-radius-large);
box-shadow: 0 4px 16px rgb(50 61 85 / 10%);
.no-parameters {
margin-top: var(--spacing-xs);
@ -569,6 +580,11 @@ export default mixins(
overflow-y: auto;
padding: 0 20px 200px 20px;
}
&.dragging {
border-color: var(--color-primary);
box-shadow: 0px 6px 16px rgba(255, 74, 51, 0.15);
}
}
.parameter-content {

View file

@ -8,7 +8,7 @@
<script lang="ts">
import { externalHooks } from '@/components/mixins/externalHooks';
import { ITab } from '@/Interface';
import { INodeUi, ITab } from '@/Interface';
import { INodeTypeDescription } from 'n8n-workflow';
import mixins from 'vue-typed-mixins';
@ -16,15 +16,21 @@ import mixins from 'vue-typed-mixins';
export default mixins(
externalHooks,
).extend({
name: 'NodeTabs',
name: 'NodeSettingsTabs',
props: {
value: {
type: String,
},
nodeType: {
},
sessionId: {
type: String,
},
},
computed: {
activeNode(): INodeUi {
return this.$store.getters.activeNode;
},
documentationUrl (): string {
const nodeType = this.nodeType as INodeTypeDescription | null;
if (!nodeType) {
@ -70,6 +76,13 @@ export default mixins(
onTabSelect(tab: string) {
if (tab === 'docs' && this.nodeType) {
this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', { nodeType: this.nodeType as INodeTypeDescription, documentationUrl: this.documentationUrl });
this.$telemetry.track('User clicked ndv link', {
node_type: this.activeNode.type,
workflow_id: this.$store.getters.workflowId,
session_id: this.sessionId,
pane: 'main',
type: 'docs',
});
}
if(tab === 'settings' && this.nodeType) {

View file

@ -0,0 +1,209 @@
<template>
<RunData
:nodeUi="node"
:runIndex="runIndex"
:linkedRuns="linkedRuns"
:canLinkRuns="canLinkRuns"
:tooMuchDataTitle="$locale.baseText('ndv.output.tooMuchData.title')"
:noDataInBranchMessage="$locale.baseText('ndv.output.noOutputDataInBranch')"
:isExecuting="isNodeRunning"
:executingMessage="$locale.baseText('ndv.output.executing')"
:sessionId="sessionId"
paneType="output"
@runChange="onRunIndexChange"
@linkRun="onLinkRun"
@unlinkRun="onUnlinkRun"
>
<template v-slot:header>
<div :class="$style.titleSection">
<span :class="$style.title">{{ $locale.baseText('ndv.output') }}</span>
<RunInfo v-if="runsCount === 1" :taskData="runTaskData" />
<n8n-info-tip
theme="warning"
type="tooltip"
tooltipPlacement="right"
v-if="hasNodeRun && staleData"
>
<template>
<span v-html="$locale.baseText('ndv.output.staleDataWarning')"></span>
</template>
</n8n-info-tip>
</div>
</template>
<template v-slot:node-not-run>
<n8n-text v-if="workflowRunning">{{ $locale.baseText('ndv.output.waitingToRun') }}</n8n-text>
<n8n-text v-else-if="isPollingTypeNode">{{ $locale.baseText('ndv.output.pollEventNodeHint') }}</n8n-text>
<n8n-text v-else-if="isTriggerNode && !isScheduleTrigger">{{ $locale.baseText('ndv.output.triggerEventNodeHint') }}</n8n-text>
<n8n-text v-else>{{ $locale.baseText('ndv.output.runNodeHint') }}</n8n-text>
</template>
<template v-slot:no-output-data>
<n8n-text :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.output.noOutputData.title') }}</n8n-text>
<n8n-text>
{{ $locale.baseText('ndv.output.noOutputData.message') }}
<a @click="openSettings">{{ $locale.baseText('ndv.output.noOutputData.message.settings') }}</a>
{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
</n8n-text>
</template>
<template #run-info v-if="runsCount > 1">
<RunInfo :taskData="runTaskData" />
</template>
</RunData>
</template>
<script lang="ts">
import { IExecutionResponse, INodeUi } from '@/Interface';
import { INodeTypeDescription, IRunData, IRunExecutionData, ITaskData } from 'n8n-workflow';
import Vue from 'vue';
import RunData from './RunData.vue';
import RunInfo from './RunInfo.vue';
export default Vue.extend({
name: 'OutputPanel',
components: { RunData, RunInfo },
props: {
runIndex: {
type: Number,
},
linkedRuns: {
type: Boolean,
},
canLinkRuns: {
type: Boolean,
},
sessionId: {
type: String,
},
},
computed: {
node(): INodeUi {
return this.$store.getters.activeNode;
},
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'));
},
isNodeRunning(): boolean {
const executingNode = this.$store.getters.executingNode;
return executingNode === this.node.name;
},
workflowRunning (): boolean {
return this.$store.getters.isActionActive('workflowRunning');
},
workflowExecution(): IExecutionResponse | null {
return this.$store.getters.getWorkflowExecution;
},
workflowRunData(): IRunData | null {
if (this.workflowExecution === null) {
return null;
}
const executionData: IRunExecutionData = this.workflowExecution.data;
return executionData.resultData.runData;
},
hasNodeRun(): boolean {
return Boolean(
this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name),
);
},
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];
},
runsCount(): number {
if (this.node === null) {
return 0;
}
const runData: IRunData | null = this.workflowRunData;
if (runData === null || !runData.hasOwnProperty(this.node.name)) {
return 0;
}
if (runData[this.node.name].length) {
return runData[this.node.name].length;
}
return 0;
},
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;
},
},
methods: {
onLinkRun() {
this.$emit('linkRun');
},
onUnlinkRun() {
this.$emit('unlinkRun');
},
openSettings() {
this.$emit('openSettings');
this.$telemetry.track('User clicked ndv link', {
node_type: this.node.type,
workflow_id: this.$store.getters.workflowId,
session_id: this.sessionId,
pane: 'output',
type: 'settings',
});
},
onRunIndexChange(run: number) {
this.$emit('runChange', run);
},
},
});
</script>
<style lang="scss" module>
.titleSection {
display: flex;
> * {
margin-right: var(--spacing-2xs);
}
}
.title {
text-transform: uppercase;
color: var(--color-text-light);
letter-spacing: 3px;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-s);
}
</style>

View file

@ -0,0 +1,132 @@
<template>
<Draggable @drag="onDrag" @dragstart="onDragStart" @dragend="onDragEnd">
<template v-slot="{ isDragging }">
<div
:class="{ [$style.dragButton]: true }"
>
<span v-if="canMoveLeft" :class="{ [$style.leftArrow]: true, [$style.visible]: isDragging }">
<font-awesome-icon icon="arrow-left" />
</span>
<span v-if="canMoveRight" :class="{ [$style.rightArrow]: true, [$style.visible]: isDragging }">
<font-awesome-icon icon="arrow-right" />
</span>
<div :class="$style.grid">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</template>
</Draggable>
</template>
<script lang="ts">
import mixins from 'vue-typed-mixins';
import Draggable from './Draggable.vue';
import dragging from './Draggable.vue';
export default mixins(dragging).extend({
components: {
Draggable,
},
props: {
canMoveRight: {
type: Boolean,
},
canMoveLeft: {
type: Boolean,
},
},
methods: {
onDrag(e: {x: number, y: number}) {
this.$emit('drag', e);
},
onDragStart() {
this.$emit('dragstart');
},
onDragEnd() {
this.$emit('dragend');
},
},
});
</script>
<style lang="scss" module>
.dragButton {
background-color: var(--color-background-base);
width: 64px;
height: 21px;
border-top-left-radius: var(--border-radius-base);
border-top-right-radius: var(--border-radius-base);
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
&:hover {
.leftArrow, .rightArrow {
visibility: visible;
}
}
}
.visible {
visibility: visible !important;
}
.arrow {
position: absolute;
color: var(--color-background-xlight);
font-size: var(--font-size-3xs);
visibility: hidden;
top: 0;
}
.leftArrow {
composes: arrow;
left: -16px;
}
.rightArrow {
composes: arrow;
right: -16px;
}
.grid {
> div {
display: flex;
&:first-child {
> div {
margin-bottom: 2px;
}
}
> div {
height: 2px;
width: 2px;
border-radius: 50%;
background-color: var(--color-foreground-xdark);
margin-right: 4px;
&:last-child {
margin-right: 0;
}
}
}
}
</style>

View file

@ -1,6 +1,6 @@
<template>
<div @keydown.stop :class="parameterInputClasses">
<expression-edit :dialogVisible="expressionEditDialogVisible" :value="value" :parameter="parameter" :path="path" @closeDialog="closeExpressionEditDialog" @valueChanged="expressionUpdated"></expression-edit>
<expression-edit :dialogVisible="expressionEditDialogVisible" :value="value" :parameter="parameter" :path="path" :eventSource="eventSource || 'ndv'" @closeDialog="closeExpressionEditDialog" @valueChanged="expressionUpdated"></expression-edit>
<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle" @click="openExpressionEdit">
<n8n-input
@ -244,6 +244,7 @@ export default mixins(
'hideIssues', // boolean
'errorHighlight',
'isForCredential', // boolean
'eventSource', // string
],
data () {
return {
@ -640,6 +641,8 @@ export default mixins(
parameter_field_type: this.parameter.type,
new_expression: !this.isValueExpression,
workflow_id: this.$store.getters.workflowId,
session_id: this.$store.getters['ui/ndvSessionId'],
source: this.eventSource || 'ndv',
});
}
},

View file

@ -19,6 +19,7 @@
@textInput="valueChanged"
@valueChanged="valueChanged"
inputSize="large"
:eventSource="eventSource"
/>
<div :class="$style.errors" v-if="showRequiredErrors">
<n8n-text color="danger" size="small">
@ -55,6 +56,9 @@ export default Vue.extend({
documentationUrl: {
type: String,
},
eventSource: {
type: String,
},
},
data() {
return {

View file

@ -3,21 +3,7 @@
<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>
<div :class="$style.header">
<div :class="$style.titleSection">
<span :class="$style.title">{{ $locale.baseText('ndv.output') }}</span>
<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right" v-if="runMetadata">
<div>
<n8n-text :bold="true" size="small">{{ $locale.baseText('runData.startTime') + ':' }}</n8n-text> {{runMetadata.startTime}}<br/>
<n8n-text :bold="true" size="small">{{ $locale.baseText('runData.executionTime') + ':' }}</n8n-text> {{runMetadata.executionTime}} {{ $locale.baseText('runData.ms') }}
</div>
</n8n-info-tip>
<n8n-info-tip theme="warning" type="tooltip" tooltipPlacement="right" v-if="hasNodeRun && staleData">
<template>
<span v-html="$locale.baseText('ndv.output.staleDataWarning')"></span>
</template>
</n8n-info-tip>
</div>
<slot name="header"></slot>
<div v-if="!hasRunError" @click.stop :class="$style.displayModes">
<n8n-radio-buttons
@ -29,19 +15,27 @@
</div>
<div :class="$style.runSelector" v-if="maxRunIndex > 0" >
<n8n-select size="small" v-model="runIndex" @click.stop>
<n8n-select size="small" :value="runIndex" @input="onRunIndexChange" @click.stop>
<template slot="prepend">{{ $locale.baseText('ndv.output.run') }}</template>
<n8n-option v-for="option in (maxRunIndex + 1)" :label="getRunLabel(option)" :value="option - 1" :key="option"></n8n-option>
</n8n-select>
<n8n-tooltip placement="right" v-if="canLinkRuns" :content="$locale.baseText(linkedRuns ? 'runData.unlinking.hint': 'runData.linking.hint')">
<n8n-icon-button v-if="linkedRuns" icon="unlink" type="text" size="small" @click="unlinkRun" />
<n8n-icon-button v-else icon="link" type="text" size="small" @click="linkRun" />
</n8n-tooltip>
<slot name="run-info"></slot>
</div>
<div v-if="maxOutputIndex > 0" :class="{[$style.tabs]: displayMode === 'table'}">
<n8n-tabs v-model="outputIndex" :options="branches" />
<n8n-tabs :value="currentOutputIndex" @input="onBranchChange" :options="branches" />
</div>
<div v-else-if="hasNodeRun && dataCount > 0 && maxRunIndex === 0" :class="$style.itemsCount">
<n8n-text>
{{ dataCount }} {{ $locale.baseText(dataCount === 1 ? 'ndv.output.item' : 'ndv.output.items') }}
{{ dataCount }} {{ $locale.baseText('ndv.output.items', {adjustToNumber: dataCount}) }}
</n8n-text>
</div>
@ -65,46 +59,49 @@
</el-dropdown>
</div>
<div v-if="!hasNodeRun" :class="$style.center">
<div v-if="workflowRunning">
<div :class="$style.spinner"><n8n-spinner /></div>
<n8n-text>{{ $locale.baseText('ndv.output.executing') }}</n8n-text>
</div>
<n8n-text v-else-if="isPollingTypeNode">{{ $locale.baseText('ndv.output.pollEventNodeHint') }}</n8n-text>
<n8n-text v-else-if="isTriggerNode && !isScheduleTrigger">{{ $locale.baseText('ndv.output.triggerEventNodeHint') }}</n8n-text>
<n8n-text v-else>{{ $locale.baseText('ndv.output.runNodeHint') }}</n8n-text>
<div v-if="isExecuting" :class="$style.center">
<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
<n8n-text>{{ executingMessage }}</n8n-text>
</div>
<div v-else-if="hasNodeRun && hasRunError" :class="$style.dataDisplay">
<div v-else-if="!hasNodeRun" :class="$style.center">
<slot name="node-not-run"></slot>
</div>
<div v-else-if="hasNodeRun && hasRunError" :class="$style.errorDisplay">
<NodeErrorView :error="workflowRunData[node.name][runIndex].error" />
</div>
<div v-else-if="hasNodeRun && jsonData && jsonData.length === 0 && branches.length > 1" :class="$style.center">
<n8n-text>
{{ $locale.baseText('ndv.output.noOutputDataInBranch') }}
{{ noDataInBranchMessage }}
</n8n-text>
</div>
<div v-else-if="hasNodeRun && jsonData && jsonData.length === 0" :class="$style.center">
<n8n-text :bold="true" color="text-dark">{{ $locale.baseText('ndv.output.noOutputData.title') }}</n8n-text>
<n8n-text>
{{ $locale.baseText('ndv.output.noOutputData.message') }}
<a @click="openSettings">{{ $locale.baseText('ndv.output.noOutputData.message.settings') }}</a>
{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
</n8n-text>
<slot name="no-output-data"></slot>
</div>
<div v-else-if="hasNodeRun && !showData" :class="$style.center">
<n8n-text :bold="true" color="text-dark">{{ $locale.baseText('ndv.output.tooMuchData.title') }}</n8n-text>
<n8n-text :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</n8n-text>
<n8n-text align="center" tag="div"><span v-html="$locale.baseText('ndv.output.tooMuchData.message', { interpolate: {size: dataSizeInMB }})"></span></n8n-text>
<n8n-button
type="outline"
:label="$locale.baseText('ndv.output.tooMuchData.showDataAnyway')"
@click="showData = true"
@click="showTooMuchData"
/>
</div>
<div v-else-if="hasNodeRun && displayMode === 'table' && tableData && tableData.columns && tableData.columns.length === 0 && binaryData.length > 0" :class="$style.center">
<n8n-text>
{{ $locale.baseText('runData.switchToBinary.info') }}
<a @click="switchToBinary">
{{ $locale.baseText('runData.switchToBinary.binary') }}
</a>
</n8n-text>
</div>
<div v-else-if="hasNodeRun && displayMode === 'table' && tableData && tableData.columns && tableData.columns.length === 0" :class="$style.dataDisplay">
<table :class="$style.table">
<tr>
@ -112,7 +109,7 @@
</tr>
<tr v-for="(row, index1) in tableData.data" :key="index1">
<td>
<n8n-text>{{ $locale.baseText('ndv.output.emptyOutput') }}</n8n-text>
<n8n-text>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-text>
</td>
</tr>
</table>
@ -198,6 +195,7 @@
:pager-count="5"
:page-size="pageSize"
layout="prev, pager, next"
@current-change="onCurrentPageChange"
:total="dataCount">
</el-pagination>
@ -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';
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);
}
</style>

View file

@ -0,0 +1,40 @@
<template>
<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right" v-if="runMetadata">
<div>
<n8n-text :bold="true" size="small">{{
$locale.baseText('runData.startTime') + ':'
}}</n8n-text>
{{ runMetadata.startTime }}<br />
<n8n-text :bold="true" size="small">{{
$locale.baseText('runData.executionTime') + ':'
}}</n8n-text>
{{ runMetadata.executionTime }} {{ $locale.baseText('runData.ms') }}
</div>
</n8n-info-tip>
</template>
<script lang="ts">
import { ITaskData } from 'n8n-workflow';
import Vue from 'vue';
export default Vue.extend({
props: {
taskData: {}, // ITaskData
},
computed: {
runTaskData(): ITaskData {
return this.taskData as ITaskData;
},
runMetadata(): { executionTime: number; startTime: string } | null {
if (!this.runTaskData) {
return null;
}
return {
executionTime: this.runTaskData.executionTime,
startTime: new Date(this.runTaskData.startTime).toLocaleString(),
};
},
},
});
</script>

File diff suppressed because one or more lines are too long

View file

@ -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;
}

View file

@ -263,11 +263,21 @@ export const pushConnection = mixins(
} else {
// Workflow did execute without a problem
this.$titleSet(workflow.name as string, 'IDLE');
const execution = this.$store.getters.getWorkflowExecution;
if (execution && execution.executedNode) {
this.$showMessage({
title: this.$locale.baseText('pushConnection.showMessage.title'),
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
// node that did finish. For that reason copy in here the data

View file

@ -176,6 +176,7 @@ export const workflowRun = mixins(
startedAt: new Date(),
stoppedAt: undefined,
workflowId: workflow.id,
executedNode: nodeName,
data: {
resultData: {
runData: newRunData || {},

View file

@ -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 = `
//////

View file

@ -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<IUiState, IRootState> = {
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<IUiState, IRootState> = {
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<IUiState, IRootState> = {
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<IUiState, IRootState>, modalKey: string) => {

View file

@ -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 */
}
}

View file

@ -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. <br />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",

View file

@ -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);

View file

@ -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;
},

View file

@ -58,7 +58,7 @@
</div>
</div>
</div>
<DataDisplay :renaming="renamingActive" @valueChanged="valueChanged"/>
<NodeDetailsView :renaming="renamingActive" @valueChanged="valueChanged"/>
<div
class="node-buttons-wrapper"
v-if="!createNodeActive && !isReadOnly"
@ -161,11 +161,10 @@ import { newVersions } from '@/components/mixins/newVersions';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import { workflowRun } from '@/components/mixins/workflowRun';
import DataDisplay from '@/components/DataDisplay.vue';
import NodeDetailsView from '@/components/NodeDetailsView.vue';
import Node from '@/components/Node.vue';
import NodeCreator from '@/components/NodeCreator/NodeCreator.vue';
import NodeSettings from '@/components/NodeSettings.vue';
import RunData from '@/components/RunData.vue';
import Sticky from '@/components/Sticky.vue';
import * as CanvasHelpers from './canvasHelpers';
@ -232,11 +231,10 @@ export default mixins(
.extend({
name: 'NodeView',
components: {
DataDisplay,
NodeDetailsView,
Node,
NodeCreator,
NodeSettings,
RunData,
Sticky,
},
errorCaptured: (err, vm, info) => {

View file

@ -1457,3 +1457,9 @@ export interface ITelemetrySettings {
enabled: boolean;
config?: ITelemetryClientConfig;
}
export interface IConnectedNode {
name: string;
indicies: number[];
depth: number;
}

View file

@ -46,7 +46,11 @@ import {
WorkflowExecuteMode,
} from '.';
import { IConnection, IDataObject, IObservableObject } from './Interfaces';
import { IConnection, IDataObject, IConnectedNode, IObservableObject } from './Interfaces';
function dedupe<T>(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.

View file

@ -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<void> {}

View file

@ -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',
},
]);
});
});
});