This is an automated email from the ASF dual-hosted git repository.
chenxingchun pushed a commit to branch 1.3.2-release
in repository https://gitbox.apache.org/repos/asf/incubator-dolphinscheduler.git
The following commit(s) were added to refs/heads/1.3.2-release by this push:
new d1b6e6c Click DAG connection to add label function
new f7badc2 Merge pull request #3275 from break60/1.3.2-release
d1b6e6c is described below
commit d1b6e6c945165b3ec9d5311e211ab62d31833006
Author: break60 <[email protected]>
AuthorDate: Thu Jul 16 13:47:22 2020 +0800
Click DAG connection to add label function
---
.../src/js/conf/home/pages/dag/_source/dag.vue | 55 +++++++++-
.../pages/dag/_source/formModel/formLineModel.vue | 120 +++++++++++++++++++++
.../home/pages/dag/_source/plugIn/jsPlumbHandle.js | 47 ++++++--
.../src/js/conf/home/store/dag/mutations.js | 8 ++
.../src/js/module/i18n/locale/en_US.js | 6 +-
.../src/js/module/i18n/locale/zh_CN.js | 13 ++-
6 files changed, 233 insertions(+), 16 deletions(-)
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 eb58da4..a5098a0 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
@@ -131,6 +131,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'
@@ -165,7 +166,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() {
@@ -190,9 +191,14 @@
length: 12,
foldback: 0.8
}
- ]
+ ],
+ ['Label', {
+ location: 0.5,
+ id: 'label'
+ }]
],
- Container: 'canvas'
+ Container: 'canvas',
+ ConnectionsDetachable: true
})
})
if (this.tasks.length) {
@@ -498,8 +504,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 = []
@@ -630,9 +670,14 @@
length: 12,
foldback: 0.8
}
- ]
+ ],
+ ['Label', {
+ location: 0.5,
+ id: 'label'
+ }]
],
- Container: 'canvas'
+ Container: 'canvas',
+ ConnectionsDetachable: true
})
})
},
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 0000000..e3c25b4
--- /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.
+ */
+<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>
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 8dbc634..0cd8bc3 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
@@ -83,6 +83,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)
}
@@ -641,14 +645,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,
@@ -741,6 +770,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]}`
@@ -773,7 +803,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 509ae3c..11395db 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 def4c1a..657dcef 100755
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
@@ -595,5 +595,9 @@ export default {
'Please delete all non-existent resources': 'Please delete all non-existent
resources',
'The Worker group no longer exists, please select the correct Worker
group!': 'The Worker group no longer exists, please select the correct Worker
group!',
'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'
+ 'User name length is between 3 and 39': 'User name length is between 3 and
39',
+ zkDirectory: 'zkDirectory',
+ '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 add8601..8f38f34 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': '刷新日志',
@@ -595,5 +594,15 @@ export default {
'Please delete all non-existent resources': '请删除所有未授权或已删除资源',
'The Worker group no longer exists, please select the correct Worker
group!': '该Worker分组已经不存在，请选择正确的Worker分组！',
'Please confirm whether the workflow has been saved before downloading':
'下载前请确定工作流是否已保存',
- 'User name length is between 3 and 39': '用户名长度在3～39之间'
+ 'User name length is between 3 and 39': '用户名长度在3～39之间',
+ 'Timeout Settings': '超时设置',
+ 'Connect Timeout':'连接超时',
+ 'Socket Timeout':'Socket超时',
+ 'Connect timeout be a positive integer': '连接超时必须为数字',
+ 'Socket Timeout be a positive integer': 'Socket超时必须为数字',
+ 'ms':'毫秒',
+ zkDirectory: 'zk注册目录',
+ 'Directory detail': '查看目录详情',
+ 'Connection name': '连线名',
+ 'Current connection settings': '当前连线设置'
}
