From 51d1f9e34224e788201da1ee3e88fd2acd30e669 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= Date: Wed, 2 Mar 2022 14:13:15 +0100 Subject: [PATCH] Add error hover tooltip --- src/components/WorkflowEditor.vue | 152 ++++++++++++++++++------------ 1 file changed, 92 insertions(+), 60 deletions(-) diff --git a/src/components/WorkflowEditor.vue b/src/components/WorkflowEditor.vue index 96d8a5d..121334a 100644 --- a/src/components/WorkflowEditor.vue +++ b/src/components/WorkflowEditor.vue @@ -577,7 +577,8 @@ export default { currentLabel: undefined, - functions: [], + eventTypes: [], + functionTypes: [], deferredKinds: ['delay', 'prompt'], } @@ -696,6 +697,7 @@ export default { this.styling() this.connectionHandler() + this.getEventTypes() this.getFunctionTypes() this.$root.$on('trigger-updated', ({ mxObjectId }) => { @@ -868,30 +870,41 @@ export default { values = cell.edges .filter(({ source }) => cell.id === source.id) .map(({ id }) => this.edges[id]) - .map(({ node, config }) => `${encodeHTML(node.value)}${encodeHTML(config.expr || '')}`) + .map(({ node, config }) => `${encodeHTML(node.value)}${encodeHTML(config.expr || '')}`) .join('') } else if (['expressions', 'function', 'prompt', 'iterator'].includes(kind)) { let { arguments: args = [], results = [], ref } = vertex.config || {} - const functionLabel = (this.functions.find(f => f.ref === ref) || { meta: {} }).meta.short || '' + const { meta = {}, results: functionResults = [] } = this.functionTypes.find(f => f.ref === ref) || {} + + const functionLabel = meta.short + + console.log(functionResults) + console.log(results) if (functionLabel) { - values.push(`${functionLabel}`) + values.push(`${functionLabel}`) } if (args.length && kind !== 'expressions') { values.push('Arguments') } - args = args.map(({ target = '', type = 'Any', expr = '', value = '' }) => `${encodeHTML(target)} (${type})${encodeHTML(expr || value)}`) + args = args.map(({ target = '', type = 'Any', expr = '', value = '' }) => `${encodeHTML(target)} (${type})${encodeHTML(expr || value)}`) if (results.length) { args.push('Results') } - results = results.map(({ target = '', type = 'Any', expr = '', value = '' }) => `${encodeHTML(target)} (${type})${encodeHTML(expr || value)}`) + results = results.map(({ target = '', expr = '', value = '' }) => { + const { types = [] } = functionResults.find(({ name }) => name === expr || name === value) || {} + const type = types.length ? `(${types[0]})` : '' + return `${encodeHTML(target)} ${type}${encodeHTML(expr || value)}` + }) + values = [...values, ...args, ...results].join('') } else if (kind === 'trigger') { let { resourceType = '', eventType = '', constraints = [] } = vertex.triggers || {} + let { properties = [] } = this.eventTypes.find(et => resourceType === et.resourceType && eventType === et.eventType) || {} if (resourceType) { resourceType = resourceType.split(':').map(s => { @@ -900,24 +913,39 @@ export default { } values.push('Configuration') - values.push(`Resource${resourceType || ''}`) - values.push(`Event${eventType || ''}`) + values.push(`Resource${resourceType || ''}`) + values.push(`Event${eventType || ''}`) if (constraints.length && eventType && eventType !== 'onManual') { - values.push('Constraints') - constraints = constraints.map(({ name = '', op = '', values = '' }) => { - return `${name || eventType.includes('on') ? eventType.replace('on', '') : ''}${op}${encodeHTML(values.join(' or '))}` - }) + constraints = [ + 'Constraints', + ...constraints.map(({ name = '', op = '', values = '' }) => { + return `${name || eventType.includes('on') ? eventType.replace('on', '') : ''}${op}${encodeHTML(values.join(' or '))}` + }), + ] } else { constraints = [] } + if (properties.length) { + properties = [ + 'Initial scope', + ...properties.map(({ name = '', type = '' }) => { + return `${name}${type || 'Any'}` + }), + ] + } + values = [ ...values, ...constraints, - ] + ...properties, + ].join('') + } else if (kind === 'error') { + const { arguments: args = [] } = vertex.config || {} + const { expr, value } = args[0] || {} - values = values.join('') + values = `Message${encodeHTML(expr || value)}` } else { values = '' } @@ -1984,55 +2012,51 @@ export default { // Assume trigger is valid since workflow is saved and has no issues const { resourceType, eventType } = this.vertices[this.dryRun.cellID].triggers - await this.$AutomationAPI.eventTypesList() - .then(({ set }) => { - const et = (set.find(et => resourceType === et.resourceType && eventType === et.eventType) || {}).properties - if (et) { - // Flag to check if lookup should be opened, or JSON editor - let lookup = false - if (et.length) { - this.dryRun.initialScope = et.reduce((initialScope, p) => { - let label = `${p.name}${lookupableTypes.includes(p.name) ? this.$t('editor:id-parenthesis') : ''}` - if (p.type === 'ComposeNamespace' || p.type === 'ComposeModule') { - label = `${p.name} ${this.$t('editor:handle')}` - } + const et = (this.eventTypes.find(et => resourceType === et.resourceType && eventType === et.eventType) || {}).properties + if (et) { + // Flag to check if lookup should be opened, or JSON editor + let lookup = false + if (et.length) { + this.dryRun.initialScope = et.reduce((initialScope, p) => { + let label = `${p.name}${lookupableTypes.includes(p.name) ? this.$t('editor:id-parenthesis') : ''}` + if (p.type === 'ComposeNamespace' || p.type === 'ComposeModule') { + label = `${p.name} ${this.$t('editor:handle')}` + } - let description = '' - if (p.type === 'ComposeRecord') { - description = this.$t('editor:required-namespace-and-module') - } else if (p.type === 'ComposeModule' || p.name === 'page' || p.name === 'oldPage') { - description = this.$t('editor:required-namespace') - } + let description = '' + if (p.type === 'ComposeRecord') { + description = this.$t('editor:required-namespace-and-module') + } else if (p.type === 'ComposeModule' || p.name === 'page' || p.name === 'oldPage') { + description = this.$t('editor:required-namespace') + } - initialScope[p.name] = ({ - label, - value: (this.dryRun.initialScope[p.name] || {}).value, - lookup: lookupableTypes.includes(p.name), - description, - }) + initialScope[p.name] = ({ + label, + value: (this.dryRun.initialScope[p.name] || {}).value, + lookup: lookupableTypes.includes(p.name), + description, + }) - lookup = lookup ? true : lookupableTypes.includes(p.name) - return initialScope - }, {}) + lookup = lookup ? true : lookupableTypes.includes(p.name) + return initialScope + }, {}) - // Set initial values for unlookable types - encodeInput(this.dryRun.initialScope, this.$ComposeAPI, this.$SystemAPI) - .then(input => { - this.dryRun.input = input - this.dryRun.lookup = lookup - this.dryRun.show = true - }) - .catch(this.defaultErrorHandler(this.$t('notification:initial-scope-load-failed'))) - } else { - // If no constraints, just run - this.dryRun.initialScope = {} - this.testWorkflow() - } - } else { - this.raiseWarningAlert(this.$t('notification:event-type-not-found'), this.$t('notification:failed-test')) - } - }) - .catch(this.defaultErrorHandler(this.$t('notification:event-type-fetch-failed'))) + // Set initial values for unlookable types + encodeInput(this.dryRun.initialScope, this.$ComposeAPI, this.$SystemAPI) + .then(input => { + this.dryRun.input = input + this.dryRun.lookup = lookup + this.dryRun.show = true + }) + .catch(this.defaultErrorHandler(this.$t('notification:initial-scope-load-failed'))) + } else { + // If no constraints, just run + this.dryRun.initialScope = {} + this.testWorkflow() + } + } else { + this.raiseWarningAlert(this.$t('notification:event-type-not-found'), this.$t('notification:failed-test')) + } }, async dryRunOk (e) { @@ -2361,10 +2385,18 @@ export default { async getFunctionTypes () { return this.$AutomationAPI.functionList() .then(({ set }) => { - this.functions = set.sort((a, b) => a.meta.short.localeCompare(b.meta.short)) + this.functionTypes = set }) .catch(this.defaultErrorHandler(this.$t('notification:failed-fetch-functions'))) }, + + async getEventTypes () { + return this.$AutomationAPI.eventTypesList() + .then(({ set }) => { + this.eventTypes = set + }) + .catch(this.defaultErrorHandler(this.$t('notification:failed-fetch-event-types'))) + }, }, }