mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-15 17:14:05 -08:00
469 lines
12 KiB
Vue
469 lines
12 KiB
Vue
<template>
|
|
<div :class="$style.container">
|
|
<transition name="fade" mode="out-in">
|
|
<div key="empty" v-if="hasIssues"></div>
|
|
<div key="listening" v-else-if="isListeningForEvents">
|
|
<n8n-pulse>
|
|
<NodeIcon :nodeType="nodeType" :size="40"></NodeIcon>
|
|
</n8n-pulse>
|
|
<div v-if="isWebhookNode">
|
|
<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
|
|
$locale.baseText('ndv.trigger.webhookNode.listening')
|
|
}}</n8n-text>
|
|
<div :class="[$style.shake, 'mb-xs']">
|
|
<n8n-text>
|
|
{{
|
|
$locale.baseText('ndv.trigger.webhookNode.requestHint', {
|
|
interpolate: { type: this.webhookHttpMethod },
|
|
})
|
|
}}
|
|
</n8n-text>
|
|
</div>
|
|
<CopyInput
|
|
:value="webhookTestUrl"
|
|
:toastTitle="$locale.baseText('ndv.trigger.copiedTestUrl')"
|
|
class="mb-2xl"
|
|
size="medium"
|
|
:collapse="true"
|
|
:copy-button-text="$locale.baseText('generic.clickToCopy')"
|
|
@copy="onTestLinkCopied"
|
|
></CopyInput>
|
|
<NodeExecuteButton
|
|
:nodeName="nodeName"
|
|
@execute="onNodeExecute"
|
|
size="medium"
|
|
telemetrySource="inputs"
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
|
|
$locale.baseText('ndv.trigger.webhookBasedNode.listening')
|
|
}}</n8n-text>
|
|
<div :class="[$style.shake, 'mb-xs']">
|
|
<n8n-text tag="div">
|
|
{{
|
|
$locale.baseText('ndv.trigger.webhookBasedNode.serviceHint', {
|
|
interpolate: { service: serviceName },
|
|
})
|
|
}}
|
|
</n8n-text>
|
|
</div>
|
|
<NodeExecuteButton
|
|
:nodeName="nodeName"
|
|
@execute="onNodeExecute"
|
|
size="medium"
|
|
telemetrySource="inputs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div key="default" v-else>
|
|
<div class="mb-xl" v-if="isActivelyPolling">
|
|
<n8n-spinner type="ring" />
|
|
</div>
|
|
|
|
<div :class="$style.action">
|
|
<div :class="$style.header">
|
|
<n8n-heading v-if="header" tag="h1" bold>
|
|
{{ header }}
|
|
</n8n-heading>
|
|
<n8n-text v-if="subheader">
|
|
<span v-text="subheader" />
|
|
</n8n-text>
|
|
</div>
|
|
|
|
<NodeExecuteButton
|
|
:nodeName="nodeName"
|
|
@execute="onNodeExecute"
|
|
size="medium"
|
|
telemetrySource="inputs"
|
|
/>
|
|
</div>
|
|
|
|
<n8n-text size="small" @click="onLinkClick" v-if="activationHint">
|
|
<span v-html="activationHint"></span>
|
|
</n8n-text>
|
|
<n8n-link
|
|
size="small"
|
|
v-if="activationHint && executionsHelp"
|
|
@click="expandExecutionHelp"
|
|
>{{ $locale.baseText('ndv.trigger.moreInfo') }}</n8n-link
|
|
>
|
|
<n8n-info-accordion
|
|
ref="help"
|
|
v-if="executionsHelp"
|
|
:class="$style.accordion"
|
|
:title="$locale.baseText('ndv.trigger.executionsHint.question')"
|
|
:description="executionsHelp"
|
|
@click="onLinkClick"
|
|
></n8n-info-accordion>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import { mapStores } from 'pinia';
|
|
import { EXECUTIONS_MODAL_KEY, WEBHOOK_NODE_TYPE, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
|
|
import type { INodeUi } from '@/Interface';
|
|
import type { INodeTypeDescription } from 'n8n-workflow';
|
|
import { getTriggerNodeServiceName } from '@/utils';
|
|
import NodeExecuteButton from '@/components/NodeExecuteButton.vue';
|
|
import { workflowHelpers } from '@/mixins/workflowHelpers';
|
|
import CopyInput from '@/components/CopyInput.vue';
|
|
import NodeIcon from '@/components/NodeIcon.vue';
|
|
import { copyPaste } from '@/mixins/copyPaste';
|
|
import { useUIStore } from '@/stores/ui.store';
|
|
import { useWorkflowsStore } from '@/stores/workflows.store';
|
|
import { useNDVStore } from '@/stores/ndv.store';
|
|
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
|
import type { N8nInfoAccordion } from 'n8n-design-system';
|
|
|
|
type HelpRef = InstanceType<typeof N8nInfoAccordion>;
|
|
|
|
export default defineComponent({
|
|
name: 'TriggerPanel',
|
|
mixins: [workflowHelpers, copyPaste],
|
|
components: {
|
|
NodeExecuteButton,
|
|
CopyInput,
|
|
NodeIcon,
|
|
},
|
|
props: {
|
|
nodeName: {
|
|
type: String,
|
|
},
|
|
sessionId: {
|
|
type: String,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
|
|
node(): INodeUi | null {
|
|
return this.workflowsStore.getNodeByName(this.nodeName);
|
|
},
|
|
nodeType(): INodeTypeDescription | null {
|
|
if (this.node) {
|
|
return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
|
|
}
|
|
|
|
return null;
|
|
},
|
|
hasIssues(): boolean {
|
|
return Boolean(
|
|
this.node &&
|
|
this.node.issues &&
|
|
(this.node.issues.parameters || this.node.issues.credentials),
|
|
);
|
|
},
|
|
serviceName(): string {
|
|
if (this.nodeType) {
|
|
return getTriggerNodeServiceName(this.nodeType);
|
|
}
|
|
|
|
return '';
|
|
},
|
|
isWebhookNode(): boolean {
|
|
return Boolean(this.node && this.node.type === WEBHOOK_NODE_TYPE);
|
|
},
|
|
webhookHttpMethod(): string | undefined {
|
|
if (
|
|
!this.node ||
|
|
!this.nodeType ||
|
|
!this.nodeType.webhooks ||
|
|
!this.nodeType.webhooks.length
|
|
) {
|
|
return undefined;
|
|
}
|
|
|
|
return this.getWebhookExpressionValue(this.nodeType.webhooks[0], 'httpMethod');
|
|
},
|
|
webhookTestUrl(): string | undefined {
|
|
if (
|
|
!this.node ||
|
|
!this.nodeType ||
|
|
!this.nodeType.webhooks ||
|
|
!this.nodeType.webhooks.length
|
|
) {
|
|
return undefined;
|
|
}
|
|
|
|
return this.getWebhookUrl(this.nodeType.webhooks[0], this.node, 'test');
|
|
},
|
|
isWebhookBasedNode(): boolean {
|
|
return Boolean(this.nodeType && this.nodeType.webhooks && this.nodeType.webhooks.length);
|
|
},
|
|
isPollingNode(): boolean {
|
|
return Boolean(this.nodeType && this.nodeType.polling);
|
|
},
|
|
isListeningForEvents(): boolean {
|
|
const waitingOnWebhook = this.workflowsStore.executionWaitingForWebhook as boolean;
|
|
const executedNode = this.workflowsStore.executedNode as string | undefined;
|
|
return (
|
|
!!this.node &&
|
|
!this.node.disabled &&
|
|
this.isWebhookBasedNode &&
|
|
waitingOnWebhook &&
|
|
(!executedNode || executedNode === this.nodeName)
|
|
);
|
|
},
|
|
workflowRunning(): boolean {
|
|
return this.uiStore.isActionActive('workflowRunning');
|
|
},
|
|
isActivelyPolling(): boolean {
|
|
const triggeredNode = this.workflowsStore.executedNode;
|
|
|
|
return this.workflowRunning && this.isPollingNode && this.nodeName === triggeredNode;
|
|
},
|
|
isWorkflowActive(): boolean {
|
|
return this.workflowsStore.isWorkflowActive;
|
|
},
|
|
header(): string {
|
|
const serviceName = this.nodeType ? getTriggerNodeServiceName(this.nodeType) : '';
|
|
|
|
if (this.isActivelyPolling) {
|
|
return this.$locale.baseText('ndv.trigger.pollingNode.fetchingEvent');
|
|
}
|
|
|
|
if (
|
|
this.nodeType &&
|
|
this.nodeType.triggerPanel &&
|
|
typeof this.nodeType.triggerPanel.header === 'string'
|
|
) {
|
|
return this.nodeType.triggerPanel.header;
|
|
}
|
|
|
|
if (this.isWebhookBasedNode) {
|
|
return this.$locale.baseText('ndv.trigger.webhookBasedNode.action', {
|
|
interpolate: { name: serviceName },
|
|
});
|
|
}
|
|
|
|
return '';
|
|
},
|
|
subheader(): string {
|
|
const serviceName = this.nodeType ? getTriggerNodeServiceName(this.nodeType) : '';
|
|
if (this.isActivelyPolling) {
|
|
return this.$locale.baseText('ndv.trigger.pollingNode.fetchingHint', {
|
|
interpolate: { name: serviceName },
|
|
});
|
|
}
|
|
|
|
return '';
|
|
},
|
|
executionsHelp(): string {
|
|
if (
|
|
this.nodeType &&
|
|
this.nodeType.triggerPanel &&
|
|
this.nodeType.triggerPanel.executionsHelp !== undefined
|
|
) {
|
|
if (typeof this.nodeType.triggerPanel.executionsHelp === 'string') {
|
|
return this.nodeType.triggerPanel.executionsHelp;
|
|
}
|
|
if (!this.isWorkflowActive && this.nodeType.triggerPanel.executionsHelp.inactive) {
|
|
return this.nodeType.triggerPanel.executionsHelp.inactive;
|
|
}
|
|
if (this.isWorkflowActive && this.nodeType.triggerPanel.executionsHelp.active) {
|
|
return this.nodeType.triggerPanel.executionsHelp.active;
|
|
}
|
|
}
|
|
|
|
if (this.isWebhookBasedNode) {
|
|
if (this.isWorkflowActive) {
|
|
return this.$locale.baseText('ndv.trigger.webhookBasedNode.executionsHelp.active', {
|
|
interpolate: { service: this.serviceName },
|
|
});
|
|
} else {
|
|
return this.$locale.baseText('ndv.trigger.webhookBasedNode.executionsHelp.inactive', {
|
|
interpolate: { service: this.serviceName },
|
|
});
|
|
}
|
|
}
|
|
|
|
if (this.isPollingNode) {
|
|
if (this.isWorkflowActive) {
|
|
return this.$locale.baseText('ndv.trigger.pollingNode.executionsHelp.active', {
|
|
interpolate: { service: this.serviceName },
|
|
});
|
|
} else {
|
|
return this.$locale.baseText('ndv.trigger.pollingNode.executionsHelp.inactive', {
|
|
interpolate: { service: this.serviceName },
|
|
});
|
|
}
|
|
}
|
|
|
|
return '';
|
|
},
|
|
activationHint(): string {
|
|
if (this.isActivelyPolling) {
|
|
return '';
|
|
}
|
|
|
|
if (
|
|
this.nodeType &&
|
|
this.nodeType.triggerPanel &&
|
|
this.nodeType.triggerPanel.activationHint
|
|
) {
|
|
if (typeof this.nodeType.triggerPanel.activationHint === 'string') {
|
|
return this.nodeType.triggerPanel.activationHint;
|
|
}
|
|
if (
|
|
!this.isWorkflowActive &&
|
|
typeof this.nodeType.triggerPanel.activationHint.inactive === 'string'
|
|
) {
|
|
return this.nodeType.triggerPanel.activationHint.inactive;
|
|
}
|
|
if (
|
|
this.isWorkflowActive &&
|
|
typeof this.nodeType.triggerPanel.activationHint.active === 'string'
|
|
) {
|
|
return this.nodeType.triggerPanel.activationHint.active;
|
|
}
|
|
}
|
|
|
|
if (this.isWebhookBasedNode) {
|
|
if (this.isWorkflowActive) {
|
|
return this.$locale.baseText('ndv.trigger.webhookBasedNode.activationHint.active', {
|
|
interpolate: { service: this.serviceName },
|
|
});
|
|
} else {
|
|
return this.$locale.baseText('ndv.trigger.webhookBasedNode.activationHint.inactive', {
|
|
interpolate: { service: this.serviceName },
|
|
});
|
|
}
|
|
}
|
|
|
|
if (this.isPollingNode) {
|
|
if (this.isWorkflowActive) {
|
|
return this.$locale.baseText('ndv.trigger.pollingNode.activationHint.active', {
|
|
interpolate: { service: this.serviceName },
|
|
});
|
|
} else {
|
|
return this.$locale.baseText('ndv.trigger.pollingNode.activationHint.inactive', {
|
|
interpolate: { service: this.serviceName },
|
|
});
|
|
}
|
|
}
|
|
|
|
return '';
|
|
},
|
|
},
|
|
methods: {
|
|
expandExecutionHelp() {
|
|
if (this.$refs.help) {
|
|
(this.$refs.help as HelpRef).$emit('expand');
|
|
}
|
|
},
|
|
onLinkClick(e: MouseEvent) {
|
|
if (!e.target) {
|
|
return;
|
|
}
|
|
const target = e.target as HTMLElement;
|
|
if (target.localName !== 'a') return;
|
|
|
|
if (target.dataset && target.dataset.key) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
if (target.dataset.key === 'activate') {
|
|
this.$emit('activate');
|
|
} else if (target.dataset.key === 'executions') {
|
|
this.$telemetry.track('User clicked ndv link', {
|
|
workflow_id: this.workflowsStore.workflowId,
|
|
session_id: this.sessionId,
|
|
pane: 'input',
|
|
type: 'open-executions-log',
|
|
});
|
|
this.ndvStore.activeNodeName = null;
|
|
this.uiStore.openModal(EXECUTIONS_MODAL_KEY);
|
|
} else if (target.dataset.key === 'settings') {
|
|
this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
|
|
}
|
|
}
|
|
},
|
|
onTestLinkCopied() {
|
|
this.$telemetry.track('User copied webhook URL', {
|
|
pane: 'inputs',
|
|
type: 'test url',
|
|
});
|
|
},
|
|
onNodeExecute() {
|
|
this.$emit('execute');
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--color-background-base);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--spacing-s) var(--spacing-s) var(--spacing-xl) var(--spacing-s);
|
|
text-align: center;
|
|
overflow: hidden;
|
|
|
|
> * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: var(--spacing-s);
|
|
|
|
> * {
|
|
margin-bottom: var(--spacing-2xs);
|
|
}
|
|
}
|
|
|
|
.action {
|
|
margin-bottom: var(--spacing-2xl);
|
|
}
|
|
|
|
.shake {
|
|
animation: shake 8s infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
90% {
|
|
transform: translateX(0);
|
|
}
|
|
92.5% {
|
|
transform: translateX(6px);
|
|
}
|
|
95% {
|
|
transform: translateX(-6px);
|
|
}
|
|
97.5% {
|
|
transform: translateX(6px);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.accordion {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 200ms;
|
|
}
|
|
.fade-enter,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|