Implement Wait functionality (#1817)

* refactor saving

* refactor api layer to be stateless

* refactor header details

* set variable for menu height

* clean up scss

* clean up indentation

* clean up dropdown impl

* refactor no tags view

* split away header

* Fix tslint issues

* Refactor tag manager

* add tags to patch request

* clean up scss

*  Refactor types to entities

* fix issues

* update no workflow error

* clean up tagscontainer

* use getters instead of state

* remove imports

* use custom colors

* clean up tags container

* clean up dropdown

* clean up focusoncreate

*  Ignore mistaken ID in POST /workflows

*  Fix undefined tag ID in PATCH /workflows

*  Shorten response for POST /tags

* remove scss mixins

* clean up imports

*  Implement validation with class-validator

* address ivan's comments

* implement modals

* Fix lint issues

* fix disabling shortcuts

* fix focus issues

* fix focus issues

* fix focus issues with modal

* fix linting issues

* use dispatch

* use constants for modal keys

* fix focus

* fix lint issues

* remove unused prop

* add modal root

* fix lint issues

* remove unused methods

* fix shortcut

* remove max width

*  Fix duplicate entry error for pg and MySQL

* update rename messaging

* update order of buttons

* fix firefox overflow on windows

* fix dropdown height

* 🔨 refactor tag crud controllers

* 🧹 remove unused imports

* use variable for number of items

* fix dropdown spacing

*  Restore type to fix build

*  Fix post-refactor PATCH /workflows/:id

*  Fix PATCH /workflows/:id for zero tags

*  Fix usage count becoming stringified

* address max's comments

* fix filter spacing

* fix blur bug

* address most of ivan's comments

* address tags type concern

* remove defaults

*  return tag id as string

* 🔨 add hooks to tag CUD operations

* 🏎 simplify timestamp pruning

* remove blur event

* fix onblur bug

*  Fix fs import to fix build

* address max's comments

* implement responsive tag container

* fix lint issues

* update tag limits

* address ivan's comments

* remove rename, refactor header, implement new designs for save, remove responsive tag container

* update styling

* update styling

* implement responsive tag container

* implement header tags edit

* implement header tags edit

* fix lint issues

* implement expandable input

* minor fixes

* minor fixes

* use variable

* rename save as

* duplicate fixes

* minor edit fixes

* lint fixes

* style fixes

* hook up saving name

* hook up tags

* clean up impl

* fix dirty state bug

* update limit

* update notification messages

* on click outside

* fix minor bug with count

* lint fixes

* handle minor edge cases

* handle minor edge cases

* handle minor bugs; fix firefox dropdown issue

* Fix min width

* apply tags only after api success

* remove count fix

* clean up workflow tags impl, fix tags delete bug

* fix minor issue

* fix minor spacing issue

* disable wrap for ops

* fix viewport root; save on click in dropdown

* save button loading when saving name/tags

* implement max width on tags container

* implement cleaner create experience

* disable edit while updating

* codacy hex color

* refactor tags container

* fix clickability

* fix workflow open and count

* clean up structure

* fix up lint issues

* fix button size

* increase workflow name limit for larger screen

* tslint fixes

* disable responsiveness for workflow modal

* rename event

* change min width for tags

* clean up pr

* address max's comments on styles

* remove success toasts

* add hover mode to name

* minor fixes

* refactor name preview

* fix name input not to jiggle

* finish up name input

* Fix up add tags

* clean up param

* clean up scss

* fix resizing name

* fix resizing name

* fix resize bug

* clean up edit spacing

* ignore on esc

* fix input bug

* focus input on clear

* build

* fix up add tags clickablity

* remove scrollbars

* move into folders

* clean up multiple patch req

* remove padding top from edit

* update tags on enter

* build

* rollout blur on enter behavior

* rollout esc behavior

* fix tags bug when duplicating tags

* move key to reload tags

* update header spacing

* build

* update hex case

* refactor workflow title

* remove unusued prop

* keep focus on error, fix bug on error

* Fix bug with name / tags toggle on error

* fix connection push bug

* :spakles: Implement wait functionality

* 🐛 Do not delete waiting executions with prune

*  Improve SQLite migration to not lose execution data anymore

*  Make it possible to restart waiting execution via webhook

*  Add missing file

* 🐛 Some more merge fixes

*  Do not show error for Wait-Nodes if in time-mode

*  Make $executionId available in expressions

* 👕 Fix lint issue

* 👕 Fix lint issue

* 👕 Fix lint issue

*  Set the unlimited sleep time as a variable

*  Add also sleeping webhook path to config

*  Make it possible to retrieve restartUrl in workflow

*  Add authentication to Wait-Node in Webhook-Mode

*  Return 404 when trying to restart execution via webhook which does
not support it

*  Make it possible to set absolute time on Wait-Node

*  Remove not needed imports

*  Fix description format

*  Implement missing webhook features on Wait-Node

*  Display webhook variable in NodeWebhooks

*  Include also date in displayed sleep time

*  Make it possible to see sleep time on node

*  Make sure that no executions does get executed twice

*  Add comment

*  Further improvements

*  Make Wait-Node easier to use

*  Add support for "notice" parameter type

* Fixing wait node to work with queue, improved logging and execution view

* Added support for mysql and pg

*  Add support for webhook postfix path

*  Make it possible to stop sleeping executions

*  Fix issue with webhook paths in not webhook mode

*  Remove not needed console.log

*  Update TODOs

*  Increase min time of workflow staying active to descrease possible issue
with overlap

* 👕 Fix lint issue

* 🐛 Fix issues with webhooks

*  Make error message clearer

*  Fix issue with missing execution ID in scaling mode

* Fixed execution list to correctly display waiting executins

* Feature: enable webhook wait workflows to continue after specified time

* Fixed linting

*  Improve waiting description text

*  Fix parameter display issue and rename

*  Remove comment

*  Do not display webhooks on Wait-Node

* Changed wording from restart to resume on wait node

* Fixed wording and inconsistent screen when changing resume modes

* Removed dots from the descriptions

* Changed docs url and renaming postfix to suffix

* Changed names from sleep to wait

*  Apply suggestions from ben

Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>

* Some fixes by Ben

*  Remove console.logs

*  Fixes and improvements

Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>
This commit is contained in:
Jan
2021-08-21 14:11:32 +02:00
committed by GitHub
parent 12417ea323
commit 5a179cd5ae
59 changed files with 1823 additions and 192 deletions

View File

@@ -4,7 +4,7 @@
:eventBus="modalBus"
@enter="save"
size="sm"
title="Duplicate Workflow"
title="Duplicate Workflow"
>
<template v-slot:content>
<el-row>
@@ -122,4 +122,4 @@ export default mixins(showMessage, workflowHelpers).extend({
},
},
});
</script>
</script>

View File

@@ -82,7 +82,10 @@
<el-tooltip placement="top" effect="light">
<div slot="content" v-html="statusTooltipText(scope.row)"></div>
<span class="status-badge running" v-if="scope.row.stoppedAt === undefined">
<span class="status-badge running" v-if="scope.row.waitTill">
Waiting
</span>
<span class="status-badge running" v-else-if="scope.row.stoppedAt === undefined">
Running
</span>
<span class="status-badge success" v-else-if="scope.row.finished">
@@ -98,7 +101,7 @@
<el-dropdown trigger="click" @command="handleRetryClick">
<span class="el-dropdown-link">
<el-button class="retry-button" v-bind:class="{ warning: scope.row.stoppedAt === null }" circle v-if="scope.row.stoppedAt !== undefined && !scope.row.finished && scope.row.retryOf === undefined && scope.row.retrySuccessId === undefined" type="text" size="small" title="Retry execution">
<el-button class="retry-button" v-bind:class="{ warning: scope.row.stoppedAt === null }" circle v-if="scope.row.stoppedAt !== undefined && !scope.row.finished && scope.row.retryOf === undefined && scope.row.retrySuccessId === undefined && scope.row.waitTill === undefined" type="text" size="small" title="Retry execution">
<font-awesome-icon icon="redo" />
</el-button>
</span>
@@ -128,12 +131,12 @@
</el-table-column>
<el-table-column label="" width="100" align="center">
<template slot-scope="scope">
<span v-if="scope.row.stoppedAt === undefined">
<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill" class="execution-actions">
<el-button circle title="Stop Execution" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" size="mini">
<font-awesome-icon icon="stop" />
</el-button>
</span>
<span v-else-if="scope.row.id">
<span v-if="scope.row.stoppedAt !== undefined && scope.row.id" class="execution-actions">
<el-button circle title="Open Past Execution" @click.stop="displayExecution(scope.row)" size="mini">
<font-awesome-icon icon="folder-open" />
</el-button>
@@ -159,6 +162,8 @@ import ExecutionTime from '@/components/ExecutionTime.vue';
import WorkflowActivator from '@/components/WorkflowActivator.vue';
import { externalHooks } from '@/components/mixins/externalHooks';
import { WAIT_TIME_UNLIMITED } from '@/constants';
import { restApi } from '@/components/mixins/restApi';
import { genericHelpers } from '@/components/mixins/genericHelpers';
import { showMessage } from '@/components/mixins/showMessage';
@@ -235,6 +240,10 @@ export default mixins(
id: 'success',
name: 'Success',
},
{
id: 'waiting',
name: 'Waiting',
},
],
};
@@ -249,7 +258,7 @@ export default mixins(
if (['ALL', 'running'].includes(this.filter.status)) {
returnData.push.apply(returnData, this.activeExecutions);
}
if (['ALL', 'error', 'success'].includes(this.filter.status)) {
if (['ALL', 'error', 'success', 'waiting'].includes(this.filter.status)) {
returnData.push.apply(returnData, this.finishedExecutions);
}
@@ -287,7 +296,9 @@ export default mixins(
if (this.filter.workflowId !== 'ALL') {
filter.workflowId = this.filter.workflowId;
}
if (['error', 'success'].includes(this.filter.status)) {
if (this.filter.status === 'waiting') {
filter.waitTill = true;
} else if (['error', 'success'].includes(this.filter.status)) {
filter.finished = this.filter.status === 'success';
}
return filter;
@@ -609,7 +620,13 @@ export default mixins(
this.isDataLoading = false;
},
statusTooltipText (entry: IExecutionsSummary): string {
if (entry.stoppedAt === undefined) {
if (entry.waitTill) {
const waitDate = new Date(entry.waitTill);
if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
return 'The workflow is waiting indefinitely for an incoming webhook call.';
}
return `The worklow is waiting till ${waitDate.toLocaleDateString()} ${waitDate.toLocaleTimeString()}.`;
} else if (entry.stoppedAt === undefined) {
return 'The worklow is currently executing.';
} else if (entry.finished === true && entry.retryOf !== undefined) {
return `The workflow execution was a retry of "${entry.retryOf}" and it was successful.`;
@@ -659,6 +676,12 @@ export default mixins(
text-align: right;
}
.execution-actions {
button {
margin: 0 0.25em;
}
}
.filters {
line-height: 2em;
.refresh-button {

View File

@@ -29,7 +29,7 @@ export default Vue.extend({
$--horiz-padding: 15px;
*,
*::after {
*::after {
box-sizing: border-box;
}

View File

@@ -13,7 +13,7 @@
@enter="submit"
/>
</span>
<span @click="onClick" class="preview" v-else>
<ExpandableInputPreview
:value="previewValue || value"
@@ -97,4 +97,4 @@ export default Vue.extend({
.preview {
cursor: pointer;
}
</style>
</style>

View File

@@ -11,6 +11,12 @@
v-if="executionFinished"
title="Execution was successful"
/>
<font-awesome-icon
icon="clock"
class="execution-icon warning"
v-else-if="executionWaiting"
title="Execution waiting"
/>
<font-awesome-icon
icon="times"
class="execution-icon error"
@@ -59,6 +65,11 @@ export default mixins(titleChange).extend({
return !!fullExecution && fullExecution.finished;
},
executionWaiting(): boolean {
const fullExecution = this.$store.getters.getWorkflowExecution;
return !!fullExecution && !!fullExecution.waitTill;
},
workflowExecution(): IExecutionResponse | null {
return this.$store.getters.getWorkflowExecution;
},
@@ -84,8 +95,13 @@ export default mixins(titleChange).extend({
box-sizing: border-box;
}
.execution-icon.success {
.execution-icon {
&.success {
color: $--custom-success-text-light;
}
&.warning {
color: $--custom-running-text;
}
}
.container {
@@ -101,4 +117,4 @@ export default mixins(titleChange).extend({
.read-only {
align-self: flex-end;
}
</style>
</style>

View File

@@ -91,4 +91,4 @@ export default mixins(
font-weight: 400;
padding: 0 20px;
}
</style>
</style>

View File

@@ -8,7 +8,7 @@
:custom="true"
>
<template v-slot="{ shortenedName }">
<InlineTextEdit
<InlineTextEdit
:value="workflowName"
:previewValue="shortenedName"
:isEditEnabled="isNameEditEnabled"
@@ -45,7 +45,7 @@
<span
class="add-tag clickable"
@click="onTagsEditEnable"
>
>
+ Add tag
</span>
</div>
@@ -120,7 +120,7 @@ export default mixins(workflowHelpers).extend({
},
computed: {
...mapGetters({
isWorkflowActive: "isActive",
isWorkflowActive: "isActive",
workflowName: "workflowName",
isDirty: "getStateIsDirty",
currentWorkflowTagIds: "workflowTags",
@@ -276,4 +276,4 @@ $--header-spacing: 20px;
display: flex;
align-items: center;
}
</style>
</style>

View File

@@ -151,4 +151,4 @@ export default Vue.extend({
float: right;
margin-left: 5px;
}
</style>
</style>

View File

@@ -9,6 +9,13 @@
</div>
<el-badge v-else :hidden="workflowDataItems === 0" class="node-info-icon data-count" :value="workflowDataItems"></el-badge>
<div v-if="waiting" class="node-info-icon waiting">
<el-tooltip placement="top" effect="light">
<div slot="content" v-html="waiting"></div>
<font-awesome-icon icon="clock" />
</el-tooltip>
</div>
<div class="node-executing-info" title="Node is executing">
<font-awesome-icon icon="sync-alt" spin />
</div>
@@ -46,6 +53,7 @@
<script lang="ts">
import Vue from 'vue';
import { WAIT_TIME_UNLIMITED } from '@/constants';
import { externalHooks } from '@/components/mixins/externalHooks';
import { nodeBase } from '@/components/mixins/nodeBase';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
@@ -60,6 +68,8 @@ import NodeIcon from '@/components/NodeIcon.vue';
import mixins from 'vue-typed-mixins';
import { get } from 'lodash';
export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
name: 'Node',
components: {
@@ -125,6 +135,22 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
return 'play';
}
},
waiting (): string | undefined {
const workflowExecution = this.$store.getters.getWorkflowExecution;
if (workflowExecution && workflowExecution.waitTill) {
const lastNodeExecuted = get(workflowExecution, 'data.resultData.lastNodeExecuted');
if (this.name === lastNodeExecuted) {
const waitDate = new Date(workflowExecution.waitTill);
if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
return 'The node is waiting indefinitely for an incoming webhook call.';
}
return `Node is waiting till ${waitDate.toLocaleDateString()} ${waitDate.toLocaleTimeString()}`;
}
}
return;
},
workflowRunning (): boolean {
return this.$store.getters.isActionActive('workflowRunning');
},
@@ -283,12 +309,17 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
position: absolute;
top: -18px;
right: 12px;
z-index: 10;
z-index: 11;
&.data-count {
font-weight: 600;
top: -12px;
}
&.waiting {
left: 10px;
top: -12px;
}
}
.node-issues {
@@ -298,6 +329,13 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
color: #ff0000;
}
.waiting {
width: 25px;
height: 25px;
font-size: 20px;
color: #5e5efa;
}
.node-options {
display: none;
position: absolute;

View File

@@ -26,7 +26,7 @@
</div>
<div class="url-field">
<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
{{getWebhookUrl(webhook, 'path')}}<br />
{{getWebhookUrlDisplay(webhook)}}<br />
</div>
</div>
</div>
@@ -39,6 +39,7 @@
<script lang="ts">
import {
INodeTypeDescription,
IWebhookDescription,
NodeHelpers,
} from 'n8n-workflow';
@@ -59,7 +60,7 @@ export default mixins(
name: 'NodeWebhooks',
props: [
'node', // NodeUi
'nodeType', // NodeTypeDescription
'nodeType', // INodeTypeDescription
],
data () {
return {
@@ -73,7 +74,7 @@ export default mixins(
return [];
}
return this.nodeType.webhooks;
return (this.nodeType as INodeTypeDescription).webhooks!.filter(webhookData => webhookData.restartWebhook !== true);
},
},
methods: {
@@ -98,6 +99,9 @@ export default mixins(
}
},
getWebhookUrl (webhookData: IWebhookDescription): string {
if (webhookData.restartWebhook === true) {
return '$resumeWebhookUrl';
}
let baseUrl = this.$store.getters.getWebhookUrl;
if (this.showUrlFor === 'test') {
baseUrl = this.$store.getters.getWebhookTestUrl;
@@ -109,6 +113,9 @@ export default mixins(
return NodeHelpers.getNodeWebhookUrl(baseUrl, workflowId, this.node, path, isFullPath);
},
getWebhookUrlDisplay (webhookData: IWebhookDescription): string {
return this.getWebhookUrl(webhookData);
},
},
watch: {
node () {

View File

@@ -14,6 +14,8 @@
/>
</div>
<div v-else-if="parameter.type === 'notice'" v-html="parameter.displayName" class="parameter-item parameter-notice"></div>
<div
v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
class="multi-parameter"
@@ -299,6 +301,17 @@ export default mixins(
.parameter-name:hover > .delete-option {
display: block;
}
.parameter-notice {
background-color: #fff5d3;
color: $--custom-font-black;
margin: 0.3em 0;
padding: 0.8em;
& a {
color: $--color-primary;
}
}
}
</style>

View File

@@ -26,4 +26,4 @@ export default Vue.extend({
...mapGetters(["pushConnectionActive"]),
},
});
</script>
</script>

View File

@@ -320,7 +320,7 @@ $--border-radius: 20px;
}
li {
height: $--item-height;
height: $--item-height;
background-color: white;
padding: $--item-padding;
margin: 0;

View File

@@ -18,7 +18,7 @@
@delete="onDelete"
@disableCreate="onDisableCreate"
/>
<NoTagsView
<NoTagsView
@enableCreate="onEnableCreate"
v-else />
</el-row>
@@ -114,10 +114,10 @@ export default mixins(showMessage).extend({
cb(true);
return;
}
const updatedTag = await this.$store.dispatch("tags/rename", { id, name });
cb(!!updatedTag);
const escapedName = escape(name);
const escapedOldName = escape(oldName);
@@ -183,8 +183,8 @@ export default mixins(showMessage).extend({
});
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.el-row {
min-height: $--tags-manager-min-height;
}
</style>
</style>

View File

@@ -12,12 +12,17 @@
<script lang="ts">
import {
PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
} from '@/constants';
import {
GenericValue,
IContextObject,
IDataObject,
IRunData,
IRunExecutionData,
IWorkflowDataProxyAdditionalKeys,
Workflow,
WorkflowDataProxy,
} from 'n8n-workflow';
@@ -376,7 +381,12 @@ export default mixins(
return returnData;
}
const dataProxy = new WorkflowDataProxy(workflow, runExecutionData, runIndex, itemIndex, nodeName, connectionInputData, {}, 'manual');
const additionalKeys: IWorkflowDataProxyAdditionalKeys = {
$executionId: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
$resumeWebhookUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
};
const dataProxy = new WorkflowDataProxy(workflow, runExecutionData, runIndex, itemIndex, nodeName, connectionInputData, {}, 'manual', additionalKeys);
const proxy = dataProxy.getDataProxy();
// @ts-ignore

View File

@@ -1,3 +1,7 @@
import {
PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
} from '@/constants';
import {
IBinaryKeyData,
ICredentialType,
@@ -328,35 +332,35 @@ export const nodeHelpers = mixins(
if (data.notesInFlow) {
return data.notes;
}
if (nodeType !== null && nodeType.subtitle !== undefined) {
return workflow.expression.getSimpleParameterValue(data as INode, nodeType.subtitle, 'internal') as string | undefined;
return workflow.expression.getSimpleParameterValue(data as INode, nodeType.subtitle, 'internal', PLACEHOLDER_FILLED_AT_EXECUTION_TIME) as string | undefined;
}
if (data.parameters.operation !== undefined) {
const operation = data.parameters.operation as string;
if (nodeType === null) {
return operation;
}
const operationData:INodeProperties = nodeType.properties.find((property: INodeProperties) => {
return property.name === 'operation';
});
if (operationData === undefined) {
return operation;
}
if (operationData.options === undefined) {
return operation;
}
const optionData = operationData.options.find((option) => {
return (option as INodePropertyOptions).value === data.parameters.operation;
});
if (optionData === undefined) {
return operation;
}
return optionData.name;
}
return undefined;

View File

@@ -217,7 +217,15 @@ export const pushConnection = mixins(
// @ts-ignore
const workflow = this.getWorkflow();
if (runDataExecuted.finished !== true) {
if (runDataExecuted.waitTill !== undefined) {
// Workflow did start but had been put to wait
this.$titleSet(workflow.name as string, 'IDLE');
this.$showMessage({
title: 'Workflow got started',
message: 'Workflow execution has started and is now waiting!',
type: 'success',
});
} else if (runDataExecuted.finished !== true) {
this.$titleSet(workflow.name as string, 'ERROR');
this.$showMessage({

View File

@@ -1,4 +1,7 @@
import { PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
import {
PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
PLACEHOLDER_EMPTY_WORKFLOW_ID,
} from '@/constants';
import {
IConnections,
@@ -8,6 +11,7 @@ import {
INodeIssues,
INodeParameters,
NodeParameterValue,
INodeCredentials,
INodeType,
INodeTypes,
INodeTypeData,
@@ -15,7 +19,7 @@ import {
IRunData,
IRunExecutionData,
IWorfklowIssues,
INodeCredentials,
IWorkflowDataProxyAdditionalKeys,
Workflow,
NodeHelpers,
} from 'n8n-workflow';
@@ -368,7 +372,12 @@ export const workflowHelpers = mixins(
connectionInputData = [];
}
return workflow.expression.getParameterValue(parameter, runExecutionData, runIndex, itemIndex, activeNode.name, connectionInputData, 'manual', false) as IDataObject;
const additionalKeys: IWorkflowDataProxyAdditionalKeys = {
$executionId: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
$resumeWebhookUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
};
return workflow.expression.getParameterValue(parameter, runExecutionData, runIndex, itemIndex, activeNode.name, connectionInputData, 'manual', additionalKeys, false) as IDataObject;
},
resolveExpression(expression: string, siblingParameters: INodeParameters = {}) {