Improve the user experience in the task definition page (#1678) (cfe17429) · Commits · SUMMER2020 / students / proj-2002252

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

+10 −2

Original line number	Diff line number	Diff line
		@@ -156,7 +156,7 @@
		},
		methods: {
		...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState']),
		...mapMutations('dag', ['addTasks', 'resetParams', 'setIsEditDag', 'setName']),
		...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName']),

		// DAG automatic layout
		dagAutomaticLayout() {
		@@ -495,6 +495,14 @@
		removeNodesEvent(fromThis)
		}, 100)
		},
		/**
		* Cache the item
		* @param item
		* @param fromThis
		*/
		cacheTaskInfo({item, fromThis}) {
		self.cacheTasks(item)
		},
		close ({ flag, fromThis }) {
		// Edit status does not allow deletion of nodes
		if (flag) {

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

+73 −17

Original line number	Diff line number	Diff line
		@@ -184,6 +184,7 @@
		<m-http
		v-if="taskType === 'HTTP'"
		@on-params="_onParams"
		@on-cache-params="_onCacheParams"
		ref="HTTP"
		:backfill-item="backfillItem">
		</m-http>
		@@ -333,6 +334,31 @@
		_onParams (o) {
		this.params = Object.assign(this.params, {}, o)
		},

		_onCacheParams (o) {
		this.params = Object.assign(this.params, {}, o)
		this._cacheItem()
		},

		_cacheItem () {
		this.$emit('cacheTaskInfo', {
		item: {
		type: this.taskType,
		id: this.id,
		name: this.name,
		params: this.params,
		description: this.description,
		runFlag: this.runFlag,
		dependence: this.dependence,
		maxRetryTimes: this.maxRetryTimes,
		retryInterval: this.retryInterval,
		timeout: this.timeout,
		taskInstancePriority: this.taskInstancePriority,
		workerGroupId: this.workerGroupId
		},
		fromThis: this
		})
		},
		/**
		* verification name
		*/
		@@ -431,14 +457,26 @@
		}
		},
		watch: {

		/**
		* Watch the item change, cache the value it changes
		**/
		_item (val) {
		this._cacheItem()
		}
		},
		created () {
		// Unbind copy and paste events
		JSP.removePaste()
		// Backfill data
		let taskList = this.store.state.dag.tasks

		//fillback use cacheTasks
		let cacheTasks = this.store.state.dag.cacheTasks
		let o = {}
		if (cacheTasks[this.id]) {
		o = cacheTasks[this.id]
		this.backfillItem = cacheTasks[this.id]
		} else {
		if (taskList.length) {
		taskList.forEach(v => {
		if (v.id === this.id) {
		@@ -446,6 +484,8 @@
		this.backfillItem = v
		}
		})
		}
		}
		// Non-null objects represent backfill
		if (!_.isEmpty(o)) {
		this.name = o.name
		@@ -472,7 +512,6 @@
		}

		}
		}
		this.isContentBox = true
		},
		mounted () {
		@@ -490,6 +529,23 @@
		*/
		_isGoSubProcess () {
		return this.taskType === 'SUB_PROCESS' && this.name
		},

		//Define the item model
		_item () {
		return {
		type: this.taskType,
		id: this.id,
		name: this.name,
		description: this.description,
		runFlag: this.runFlag,
		dependence: this.dependence,
		maxRetryTimes: this.maxRetryTimes,
		retryInterval: this.retryInterval,
		timeout: this.timeout,
		taskInstancePriority: this.taskInstancePriority,
		workerGroupId: this.workerGroupId
		}
		}
		},
		components: {

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

+19 −0

Original line number	Diff line number	Diff line
		@@ -164,7 +164,26 @@
		return true
		}
		},
		computed: {
		cacheParams () {
		return {
		localParams: this.localParams,
		httpParams: this.httpParams,
		url: this.url,
		httpMethod: this.httpMethod,
		httpCheckCondition: this.httpCheckCondition,
		condition: this.condition
		}
		}
		},
		watch: {
		/**
		* Watch the cacheParams
		* @param val
		*/
		cacheParams (val) {
		this.$emit('on-cache-params', val);
		}
		},
		created () {
		let o = this.backfillItem

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

+17 −0

Original line number	Diff line number	Diff line
		@@ -125,6 +125,11 @@ export default {
		} else {
		state.tasks.push(payload)
		}
		if (state.cacheTasks[payload.id]) {
		state.cacheTasks[payload.id] = Object.assign(state.cacheTasks[payload.id], {}, payload)
		} else {
		state.cacheTasks[payload.id] = payload;
		}
		let dom = $(`#${payload.id}`)
		state.locations[payload.id] = _.assign(state.locations[payload.id], {
		name: dom.find('.name-p').text(),
		@@ -132,5 +137,17 @@ export default {
		x: parseInt(dom.css('left'), 10),
		y: parseInt(dom.css('top'), 10)
		})
		},
		/**
		* Cache the input
		* @param state
		* @param payload
		*/
		cacheTasks (state, payload) {
		if (state.cacheTasks[payload.id]) {
		state.cacheTasks[payload.id] = Object.assign(state.cacheTasks[payload.id], {}, payload)
		} else {
		state.cacheTasks[payload.id] = payload;
		}
		}
		}

dolphinscheduler-ui/src/js/conf/home/store/dag/state.js

+2 −0

Original line number	Diff line number	Diff line
		@@ -29,6 +29,8 @@ export default {
		globalParams: [],
		// Node information
		tasks: [],
		// Node cache information, cache the previous input
		cacheTasks: {},
		// Timeout alarm
		timeout: 0,
		// tenant id