From a5c85cb056ea17e610b9437b465f5b6030ec63ba Mon Sep 17 00:00:00 2001 From: break60 <790061044@qq.com> Date: Thu, 16 Jul 2020 13:47:22 +0800 Subject: [PATCH 1/7] Click DAG connection to add label function --- .../js/conf/home/pages/dag/_source/dag.vue | 57 ++++++++- .../dag/_source/formModel/formLineModel.vue | 120 ++++++++++++++++++ .../pages/dag/_source/plugIn/jsPlumbHandle.js | 47 +++++-- .../src/js/conf/home/store/dag/mutations.js | 8 ++ .../src/js/module/i18n/locale/en_US.js | 4 +- .../src/js/module/i18n/locale/zh_CN.js | 5 +- 6 files changed, 223 insertions(+), 18 deletions(-) create mode 100644 dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue index 7b7315147a..9d2f66d049 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue @@ -142,6 +142,7 @@ import { allNodesId } from './plugIn/util' import { toolOper, tasksType } from './config' import mFormModel from './formModel/formModel' + import mFormLineModel from './formModel/formLineModel' import { formatDate } from '@/module/filter/filter' import { findComponentDownward } from '@/module/util/' import disabledState from '@/module/mixin/disabledState' @@ -176,7 +177,7 @@ }, methods: { ...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState']), - ...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName']), + ...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName', 'addConnects']), // DAG automatic layout dagAutomaticLayout() { @@ -201,9 +202,14 @@ length: 12, foldback: 0.8 } - ] + ], + ['Label', { + location: 0.5, + id: 'label' + }] ], - Container: 'canvas' + Container: 'canvas', + ConnectionsDetachable: true }) }) if (this.tasks.length) { @@ -517,8 +523,42 @@ * Create a node popup layer * @param Object id */ + _createLineLabel({id, sourceId, targetId}) { + // $('#jsPlumb_2_50').text('111') + let self = this + self.$modal.destroy() + const removeNodesEvent = (fromThis) => { + // Manually destroy events inside the component + fromThis.$destroy() + // Close the popup + eventModel.remove() + } + eventModel = this.$drawer({ + render (h) { + return h(mFormLineModel,{ + on: { + addLineInfo ({ item, fromThis }) { + self.addConnects(item) + setTimeout(() => { + removeNodesEvent(fromThis) + }, 100) + }, + cancel ({fromThis}) { + removeNodesEvent(fromThis) + } + }, + props: { + id: id, + sourceId: sourceId, + targetId: targetId + } + }) + } + }) + }, _createNodes ({ id, type }) { let self = this + self.$modal.destroy() let preNode = [] let rearNode = [] let rearList = [] @@ -649,9 +689,14 @@ length: 12, foldback: 0.8 } - ] + ], + ['Label', { + location: 0.5, + id: 'label' + }] ], - Container: 'canvas' + Container: 'canvas', + ConnectionsDetachable: true }) }) }, @@ -679,5 +724,3 @@ - - diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue new file mode 100644 index 0000000000..e3c25b4032 --- /dev/null +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue @@ -0,0 +1,120 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + + + diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js index ef4519ec7b..c893596538 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js @@ -84,6 +84,10 @@ JSP.prototype.init = function ({ dag, instance, options }) { // Monitor line click this.JspInstance.bind('click', e => { + // Untie event + if (this.config.isDblclick) { + findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId}) + } if (this.config.isClick) { this.connectClick(e) } @@ -645,14 +649,39 @@ JSP.prototype.saveStore = function () { tasks.push(tasksParam) } }) - - _.map(this.JspInstance.getConnections(), v => { - connects.push({ - endPointSourceId: v.sourceId, - endPointTargetId: v.targetId + if(store.state.dag.connects.length ===this.JspInstance.getConnections().length) { + _.map(store.state.dag.connects, u => { + connects.push({ + endPointSourceId: u.endPointSourceId, + endPointTargetId: u.endPointTargetId, + label: u.label + }) }) - }) - + } else if(store.state.dag.connects.length>0 && store.state.dag.connects.length < this.JspInstance.getConnections().length) { + _.map(this.JspInstance.getConnections(), v => { + connects.push({ + endPointSourceId: v.sourceId, + endPointTargetId: v.targetId, + label: v._jsPlumb.overlays.label.canvas.innerText + }) + }) + _.map(store.state.dag.connects, u => { + _.map(connects, v => { + if(u.label && u.endPointSourceId === v.endPointSourceId && u.endPointTargetId===v.endPointTargetId) { + v.label = u.label + } + }) + }) + } else if(store.state.dag.connects.length===0) { + _.map(this.JspInstance.getConnections(), v => { + connects.push({ + endPointSourceId: v.sourceId, + endPointTargetId: v.targetId, + label: v._jsPlumb.overlays.label.canvas.innerText + }) + }) + } + _.map(tasksAll(), v => { locations[v.id] = { name: v.name, @@ -745,6 +774,7 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) { _.map(connects, v => { let sourceId = v.endPointSourceId.split('-') let targetId = v.endPointTargetId.split('-') + let labels = v.label if (sourceId.length === 4 && targetId.length === 4) { sourceId = `${sourceId[0]}-${sourceId[1]}-${sourceId[2]}` targetId = `${targetId[0]}-${targetId[1]}-${targetId[2]}` @@ -777,7 +807,8 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) { target: targetId, type: 'basic', paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' }, - HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3} + HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3}, + overlays:[["Label", { label: labels} ]] }) } }) diff --git a/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js b/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js index 509ae3c103..11395dbc5d 100755 --- a/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js +++ b/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js @@ -140,6 +140,14 @@ export default { y: parseInt(dom.css('top'), 10) }) }, + addConnects(state, payload) { + state.connects = _.map(state.connects, v => { + if(v.endPointSourceId===payload.sourceId && v.endPointTargetId===payload.targetId) { + v.label = payload.labelName + } + return v + }) + }, /** * Cache the input * @param state diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js index 9f2c275b62..6de5d94672 100755 --- a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js +++ b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js @@ -618,5 +618,7 @@ export default { 'Please confirm whether the workflow has been saved before downloading': 'Please confirm whether the workflow has been saved before downloading', 'User name length is between 3 and 39': 'User name length is between 3 and 39', zkDirectory: 'zkDirectory', - 'Directory detail': 'Directory detail' + 'Directory detail': 'Directory detail', + 'Connection name': 'Connection name', + 'Current connection settings': 'Current connection settings' } diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js index f55b1c7a74..9fcbb8e88a 100755 --- a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js +++ b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js @@ -47,7 +47,6 @@ export default { 'Confirm add': '确认添加', 'The newly created sub-Process has not yet been executed and cannot enter the sub-Process': '新创建子工作流还未执行，不能进入子工作流', 'The task has not been executed and cannot enter the sub-Process': '该任务还未执行，不能进入子工作流', - 'Please enter name (required)': '请输入名称（必填）', 'Name already exists': '名称已存在请重新输入', 'Download Log': '下载日志', 'Refresh Log': '刷新日志', @@ -618,5 +617,7 @@ export default { 'Socket Timeout be a positive integer': 'Socket超时必须为数字', 'ms':'毫秒', zkDirectory: 'zk注册目录', - 'Directory detail': '查看目录详情' + 'Directory detail': '查看目录详情', + 'Connection name': '连线名', + 'Current connection settings': '当前连线设置' } From 31cdfc4ded194023ae119d0d96f5dccb2c2bea36 Mon Sep 17 00:00:00 2001 From: break60 <790061044@qq.com> Date: Thu, 16 Jul 2020 14:35:18 +0800 Subject: [PATCH 2/7] fix --- .../js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js index c893596538..9c0c359af2 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js @@ -85,11 +85,10 @@ JSP.prototype.init = function ({ dag, instance, options }) { // Monitor line click this.JspInstance.bind('click', e => { // Untie event - if (this.config.isDblclick) { - findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId}) - } if (this.config.isClick) { this.connectClick(e) + } else { + findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId}) } }) From a3a7e22cc226707f3c71e543fdb6c0e93408e3ea Mon Sep 17 00:00:00 2001 From: break60 <790061044@qq.com> Date: Fri, 17 Jul 2020 17:52:57 +0800 Subject: [PATCH 3/7] fix --- .../home/pages/dag/_source/plugIn/jsPlumbHandle.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js index 9c0c359af2..08682a4105 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js @@ -499,6 +499,16 @@ JSP.prototype.removeNodes = function ($id) { // callback onRemoveNodes event this.options && this.options.onRemoveNodes && this.options.onRemoveNodes($id) + let connects = [] + _.map(this.JspInstance.getConnections(), v => { + connects.push({ + endPointSourceId: v.sourceId, + endPointTargetId: v.targetId, + label: v._jsPlumb.overlays.label.canvas.innerText + }) + }) + // Storage line dependence + store.commit('dag/setConnects', connects) } /** From d9b7839ef4eac30f3fd004dfc2d9c09b2be4c082 Mon Sep 17 00:00:00 2001 From: break60 <790061044@qq.com> Date: Mon, 20 Jul 2020 18:15:50 +0800 Subject: [PATCH 4/7] fix --- dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue index 9d2f66d049..51ec2316e7 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue @@ -558,7 +558,6 @@ }, _createNodes ({ id, type }) { let self = this - self.$modal.destroy() let preNode = [] let rearNode = [] let rearList = [] @@ -589,6 +588,7 @@ preNode = [] } if (eventModel) { + // Close the popup eventModel.remove() } From cca78607655c71fef8fbd66b184eec6199d360b2 Mon Sep 17 00:00:00 2001 From: break60 <790061044@qq.com> Date: Tue, 21 Jul 2020 09:29:57 +0800 Subject: [PATCH 5/7] Click Cancel, the node data is restored to the original data --- .../pages/dag/_source/formModel/formModel.vue | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue index 1e2cbd3ba6..d3df6adb77 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue @@ -580,25 +580,8 @@ } this.isContentBox = false // flag Whether to delete a node this.$destroy() - this.$emit('close', { - item: { - type: this.cacheBackfillItem.type, - id: this.cacheBackfillItem.id, - name: this.cacheBackfillItem.name, - params: this.cacheBackfillItem.params, - description: this.cacheBackfillItem.description, - runFlag: this.cacheBackfillItem.runFlag, - conditionResult: this.cacheBackfillItem.conditionResult, - dependence: this.cacheBackfillItem.dependence, - maxRetryTimes: this.cacheBackfillItem.maxRetryTimes, - retryInterval: this.cacheBackfillItem.retryInterval, - timeout: this.cacheBackfillItem.timeout, - taskInstancePriority: this.cacheBackfillItem.taskInstancePriority, - workerGroup: this.cacheBackfillItem.workerGroup, - status: this.cacheBackfillItem.status, - branch: this.cacheBackfillItem.branch - }, + item: this.cacheBackfillItem, flag: flag, fromThis: this }) @@ -672,7 +655,7 @@ } else { this.workerGroup = this.store.state.security.workerGroupsListAll[0].id } - this.cacheBackfillItem = o + this.cacheBackfillItem = JSON.parse(JSON.stringify(o)) this.isContentBox = true }, mounted () { From 8d66fa171e9ce1d7774cccde07f9b59816785d1d Mon Sep 17 00:00:00 2001 From: break60 <790061044@qq.com> Date: Tue, 21 Jul 2020 09:47:08 +0800 Subject: [PATCH 6/7] Note e2e timing --- e2e/testng.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/e2e/testng.xml b/e2e/testng.xml index 32bd0c6009..499fe113bc 100644 --- a/e2e/testng.xml +++ b/e2e/testng.xml @@ -53,7 +53,7 @@ - + From edf1115f167c0563af8602e4de4e78ef30c809d8 Mon Sep 17 00:00:00 2001 From: break60 <790061044@qq.com> Date: Tue, 21 Jul 2020 10:22:20 +0800 Subject: [PATCH 7/7] fix --- .../dolphinscheduler/page/project/ProcessInstancePage.java | 1 + 1 file changed, 1 insertion(+) diff --git a/e2e/src/test/java/org/apache/dolphinscheduler/page/project/ProcessInstancePage.java b/e2e/src/test/java/org/apache/dolphinscheduler/page/project/ProcessInstancePage.java index f8503e51b9..4d1a1c2530 100644 --- a/e2e/src/test/java/org/apache/dolphinscheduler/page/project/ProcessInstancePage.java +++ b/e2e/src/test/java/org/apache/dolphinscheduler/page/project/ProcessInstancePage.java @@ -32,6 +32,7 @@ public class ProcessInstancePage extends PageCommon { * rerun workflow page */ public boolean rerunWorkflowPage() throws InterruptedException { + Thread.sleep(2000); clickTopElement(ProcessInstanceLocator.CLICK_PROCESS_INSTANCE_NAME); clickTopElement(ProcessInstanceLocator.CLICK_RERUN_BUTTON); return ifTitleContains(ProcessInstanceData.PROCESS_INSTANCE_TITLE);