[Feature-3223][ui]Click DAG connection to add label function (#3224) (a03d5483) · Commits · SUMMER2020 / students / proj-2002251

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

+50 −7

Original line number	Diff line number	Diff line
		@@ -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
		}
		]
		],
		Container: 'canvas'
		['Label', {
		location: 0.5,
		id: 'label'
		}]
		],
		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
		}
		]
		],
		Container: 'canvas'
		['Label', {
		location: 0.5,
		id: 'label'
		}]
		],
		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

0 → 100644

+120 −0

Original line number	Diff line number	Diff line
		/*
		* 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

+48 −8

Original line number	Diff line number	Diff line
		@@ -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,13 +658,38 @@ JSP.prototype.saveStore = function () {
		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 => {
		connects.push({
		endPointSourceId: v.sourceId,
		endPointTargetId: v.targetId
		endPointTargetId: v.targetId,
		label: v._jsPlumb.overlays.label.canvas.innerText
		})
		})
		}

		_.map(tasksAll(), v => {
		locations[v.id] = {
		@@ -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

+8 −0

Original line number	Diff line number	Diff line
		@@ -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

+3 −1

Original line number	Diff line number	Diff line
		@@ -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'
		}