Browse Source

Merge pull request #3275 from break60/1.3.2-release

[Feature-3223][ui] cherry pick commit from dev for Click DAG connection to add label function
pull/3/MERGE
xingchun-chen 4 years ago committed by GitHub
parent
commit
f7badc2749
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 55
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
  2. 120
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
  3. 37
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
  4. 8
      dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
  5. 6
      dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
  6. 13
      dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

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

@ -131,6 +131,7 @@
import { allNodesId } from './plugIn/util' import { allNodesId } from './plugIn/util'
import { toolOper, tasksType } from './config' import { toolOper, tasksType } from './config'
import mFormModel from './formModel/formModel' import mFormModel from './formModel/formModel'
import mFormLineModel from './formModel/formLineModel'
import { formatDate } from '@/module/filter/filter' import { formatDate } from '@/module/filter/filter'
import { findComponentDownward } from '@/module/util/' import { findComponentDownward } from '@/module/util/'
import disabledState from '@/module/mixin/disabledState' import disabledState from '@/module/mixin/disabledState'
@ -165,7 +166,7 @@
}, },
methods: { methods: {
...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState']), ...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState']),
...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName']), ...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName', 'addConnects']),
// DAG automatic layout // DAG automatic layout
dagAutomaticLayout() { dagAutomaticLayout() {
@ -190,9 +191,14 @@
length: 12, length: 12,
foldback: 0.8 foldback: 0.8
} }
]
], ],
Container: 'canvas' ['Label', {
location: 0.5,
id: 'label'
}]
],
Container: 'canvas',
ConnectionsDetachable: true
}) })
}) })
if (this.tasks.length) { if (this.tasks.length) {
@ -498,8 +504,42 @@
* Create a node popup layer * Create a node popup layer
* @param Object id * @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 }) { _createNodes ({ id, type }) {
let self = this let self = this
self.$modal.destroy()
let preNode = [] let preNode = []
let rearNode = [] let rearNode = []
let rearList = [] let rearList = []
@ -630,9 +670,14 @@
length: 12, length: 12,
foldback: 0.8 foldback: 0.8
} }
]
], ],
Container: 'canvas' ['Label', {
location: 0.5,
id: 'label'
}]
],
Container: 'canvas',
ConnectionsDetachable: true
}) })
}) })
}, },

120
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>

37
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 // Monitor line click
this.JspInstance.bind('click', e => { 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) { if (this.config.isClick) {
this.connectClick(e) this.connectClick(e)
} }
@ -641,13 +645,38 @@ JSP.prototype.saveStore = function () {
tasks.push(tasksParam) tasks.push(tasksParam)
} }
}) })
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 => { _.map(this.JspInstance.getConnections(), v => {
connects.push({ connects.push({
endPointSourceId: v.sourceId, endPointSourceId: v.sourceId,
endPointTargetId: v.targetId endPointTargetId: v.targetId,
label: v._jsPlumb.overlays.label.canvas.innerText
}) })
}) })
}
_.map(tasksAll(), v => { _.map(tasksAll(), v => {
locations[v.id] = { locations[v.id] = {
@ -741,6 +770,7 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
_.map(connects, v => { _.map(connects, v => {
let sourceId = v.endPointSourceId.split('-') let sourceId = v.endPointSourceId.split('-')
let targetId = v.endPointTargetId.split('-') let targetId = v.endPointTargetId.split('-')
let labels = v.label
if (sourceId.length === 4 && targetId.length === 4) { if (sourceId.length === 4 && targetId.length === 4) {
sourceId = `${sourceId[0]}-${sourceId[1]}-${sourceId[2]}` sourceId = `${sourceId[0]}-${sourceId[1]}-${sourceId[2]}`
targetId = `${targetId[0]}-${targetId[1]}-${targetId[2]}` targetId = `${targetId[0]}-${targetId[1]}-${targetId[2]}`
@ -773,7 +803,8 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
target: targetId, target: targetId,
type: 'basic', type: 'basic',
paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' }, paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' },
HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3} HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
overlays:[["Label", { label: labels} ]]
}) })
} }
}) })

8
dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js

@ -140,6 +140,14 @@ export default {
y: parseInt(dom.css('top'), 10) 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 * Cache the input
* @param state * @param state

6
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', '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!', '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', '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'
} }

13
dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

@ -47,7 +47,6 @@ export default {
'Confirm add': '确认添加', 'Confirm add': '确认添加',
'The newly created sub-Process has not yet been executed and cannot enter the sub-Process': '新创建子工作流还未执行不能进入子工作流', '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': '该任务还未执行不能进入子工作流', 'The task has not been executed and cannot enter the sub-Process': '该任务还未执行不能进入子工作流',
'Please enter name (required)': '请输入名称必填',
'Name already exists': '名称已存在请重新输入', 'Name already exists': '名称已存在请重新输入',
'Download Log': '下载日志', 'Download Log': '下载日志',
'Refresh Log': '刷新日志', 'Refresh Log': '刷新日志',
@ -595,5 +594,15 @@ 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!': '该Worker分组已经不存在请选择正确的Worker分组', 'The Worker group no longer exists, please select the correct Worker group!': '该Worker分组已经不存在请选择正确的Worker分组',
'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': '用户名长度在339之间' 'User name length is between 3 and 39': '用户名长度在339之间',
'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': '当前连线设置'
} }

Loading…
Cancel
Save