[Feature-3223][ui]Click DAG connection to add label function (#3224)

* Click DAG connection to add label function 

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,6 +523,39 @@
        * 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
         let preNode = []
@@ -549,6 +588,7 @@
           preNode = []
         }
         if (eventModel) {
+          // Close the popup
           eventModel.remove()
         }
 
@@ -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 @@
 <style lang="scss" rel="stylesheet/scss">
   @import "./dag";
 </style>
-
-

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue

+/*
+ * 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.
+ */
+<template>
+  <div class="form-model-model" v-clickoutside="_handleClose">
+    <div class="title-box">
+      <span class="name">{{$t('Current connection settings')}}</span>
+    </div>
+    <div class="content-box">
+      <div class="from-model">
+        <!-- Node name -->
+        <div class="clearfix list">
+          <div class="text-box"><span>{{$t('Connection name')}}</span></div>
+          <div class="cont-box">
+            <label class="label-box">
+              <x-input
+                type="text"
+                v-model="labelName"
+                :disabled="isDetails"
+                :placeholder="$t('Please enter name')"
+                maxlength="100"
+                autocomplete="off">
+              </x-input>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-box">
+      <div class="submit" style="background: #fff;">
+        <x-button type="text" @click="cancel()"> {{$t('Cancel')}} </x-button>
+        <x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </x-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import _ from 'lodash'
+  import { mapActions } from 'vuex'
+  import i18n from '@/module/i18n'
+  import JSP from './../plugIn/jsPlumbHandle'
+  import disabledState from '@/module/mixin/disabledState'
+
+  export default {
+    name: 'form-line-model',
+    data () {
+      return {
+          // loading
+        spinnerLoading: false,
+        // node name
+        labelName: '',
+      }
+    },
+    mixins: [disabledState],
+    props: {
+      id: String,
+      sourceId: String,
+      targetId: String
+    },
+    methods: {
+        cancel() {
+            this.$emit('cancel', {
+                fromThis: this
+            })
+        },
+        ok() {
+          $(`#${this.id}`).text(this.labelName)
+            this.$emit('addLineInfo', {
+              item: {
+                labelName: this.labelName,
+                sourceId: this.sourceId,
+                targetId: this.targetId
+              },
+              fromThis: this
+            })
+        }
+    }, 
+    watch: {
+      
+    },
+    created () {
+        let connects = this.store.state.dag.connects
+        connects.filter( item => {
+            if(item.endPointSourceId===this.sourceId && item.endPointTargetId===this.targetId) {
+                this.labelName =  item.label
+            }
+        });
+    },
+    mounted () {
+      
+    },
+    updated () {
+    },
+    beforeDestroy () {
+    },
+    destroyed () {
+    },
+    computed: {
+      
+    },
+    components: {}
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+
+</style>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js

@@ -84,8 +84,11 @@ JSP.prototype.init = function ({ dag, instance, options }) {
 
   // Monitor line click
   this.JspInstance.bind('click', e => {
+    // Untie event
     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})
     }
   })
 
@@ -496,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)
 }
 
 /**
@@ -645,14 +658,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 +783,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 +816,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} ]]
         })
       }
     })

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

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'
 }

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': '当前连线设置'
 }