mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 01:56:46 +00:00
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" 8edb68dbffa0aa0d8189117e1a53381cb2c27608 * 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" 3772487d985f226acab7144c7672b5696deabb55 * 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
209
packages/editor-ui/src/components/OutputPanel.vue
Normal file
209
packages/editor-ui/src/components/OutputPanel.vue
Normal 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>
|
||||
Reference in New Issue
Block a user