You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by li...@apache.org on 2020/01/03 13:07:28 UTC
[incubator-dolphinscheduler] branch dev updated: Improve the user
experience in the task definition page (#1678)
This is an automated email from the ASF dual-hosted git repository.
liuxiaochun pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new cfe1742 Improve the user experience in the task definition page (#1678)
cfe1742 is described below
commit cfe174293f1a0076340a9ebd84955a6206692257
Author: zhukai <bo...@qq.com>
AuthorDate: Fri Jan 3 21:07:22 2020 +0800
Improve the user experience in the task definition page (#1678)
define the architecture (include actions.js, dag.vue,formModel.vue,mutations.js, and state.js) and implement one of the tasks , such as http.vue.
---
.../src/js/conf/home/pages/dag/_source/dag.vue | 12 ++-
.../home/pages/dag/_source/formModel/formModel.vue | 90 ++++++++++++++++++----
.../pages/dag/_source/formModel/tasks/http.vue | 19 +++++
.../src/js/conf/home/store/dag/mutations.js | 17 ++++
.../src/js/conf/home/store/dag/state.js | 2 +
5 files changed, 121 insertions(+), 19 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 3b70f01..01da782 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -156,8 +156,8 @@
},
methods: {
...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState']),
- ...mapMutations('dag', ['addTasks', 'resetParams', 'setIsEditDag', 'setName']),
-
+ ...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName']),
+
// DAG automatic layout
dagAutomaticLayout() {
$('#canvas').html('')
@@ -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) {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index 59307fa..57c7ad4 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -16,7 +16,7 @@
*/
<template>
<div class="form-model-model" v-clickoutside="_handleClose">
- <div class="title-box">
+ <div class="title-box">
<span class="name">{{$t('Current node settings')}}</span>
<span class="go-subtask">
<!-- Component can't pop up box to do component processing -->
@@ -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,29 +457,43 @@
}
},
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 (taskList.length) {
- taskList.forEach(v => {
- if (v.id === this.id) {
- o = v
- this.backfillItem = v
+ 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) {
+ o = v
+ this.backfillItem = v
+ }
+ })
}
- })
- // Non-null objects represent backfill
- if (!_.isEmpty(o)) {
- this.name = o.name
- this.taskInstancePriority = o.taskInstancePriority
- this.runFlag = o.runFlag || 'NORMAL'
- this.description = o.description
- this.maxRetryTimes = o.maxRetryTimes
- this.retryInterval = o.retryInterval
+ }
+ // Non-null objects represent backfill
+ if (!_.isEmpty(o)) {
+ this.name = o.name
+ this.taskInstancePriority = o.taskInstancePriority
+ this.runFlag = o.runFlag || 'NORMAL'
+ this.description = o.description
+ this.maxRetryTimes = o.maxRetryTimes
+ this.retryInterval = o.retryInterval
// If the workergroup has been deleted, set the default workergroup
var hasMatch = false;
@@ -471,7 +511,6 @@
this.workerGroupId = o.workerGroupId
}
- }
}
this.isContentBox = true
},
@@ -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: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
index adb5441..3e2f6ef 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
@@ -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
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 692fde7..6ceabed 100644
--- a/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
+++ b/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
@@ -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;
+ }
}
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js b/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js
index 9eb4d74..b7d592a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js
+++ b/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js
@@ -29,6 +29,8 @@ export default {
globalParams: [],
// Node information
tasks: [],
+ // Node cache information, cache the previous input
+ cacheTasks: {},
// Timeout alarm
timeout: 0,
// tenant id