[Fix-6139][UI] fix some UI bugs (#6225)

* Hide the reference task feature

* fix the bug that Element-ui(2.13.2) auto focus on the first input

* Fix delete process version error

* add switch and tis task icons

* Change the default value of environmentCode to - 1

* Replace projectId to projectCode & remove definitionList field in the DEPENDENT node

* fix delete process instance error

* Fix error entering sub process instance page

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/taskbar.scss

@@ -105,6 +105,12 @@
           &.icos-spark {
             background-image: url("../images/task-icos/spark.png");
           }
+          &.icos-switch {
+            background-image: url("../images/task-icos/switch.png");
+          }
+          &.icos-tis {
+            background-image: url("../images/task-icos/tis.png");
+          }
         }
 
         span {
@@ -159,6 +165,12 @@
             &.icos-spark {
               background-image: url("../images/task-icos/spark_hover.png");
             }
+            &.icos-switch {
+              background-image: url("../images/task-icos/switch_hover.png");
+            }
+            &.icos-tis {
+              background-image: url("../images/task-icos/tis_hover.png");
+            }
           }
         }
       }

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

@@ -112,7 +112,7 @@
       >
       <el-button
         class="toolbar-el-btn"
-        v-if="$route.query.subProcessCodes"
+        v-if="$route.query.subs"
         type="primary"
         size="mini"
         icon="el-icon-back"

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

@@ -24,6 +24,10 @@
       :with-header="false"
       :wrapperClosable="false"
     >
+      <!-- fix the bug that Element-ui(2.13.2) auto focus on the first input -->
+      <div style="width:0px;height:0px;overflow:hidden;">
+        <el-input type="text" />
+      </div>
       <m-form-model
         v-if="taskDrawer"
         :nodeData="nodeData"
@@ -134,13 +138,16 @@
           pageSize: null
         },
         // the task status refresh timer
-        statusTimer: null
+        statusTimer: null,
+        // the process instance id
+        instanceId: -1
       }
     },
     mounted () {
       this.setIsEditDag(false)
 
       if (this.type === 'instance') {
+        this.instanceId = this.$route.params.id
         this.definitionCode = this.$route.query.code
       } else if (this.type === 'definition') {
         this.definitionCode = this.$route.params.code
@@ -463,28 +470,29 @@
        */
       returnToPrevProcess () {
         let $name = this.$route.name.split('-')
-        let subProcessCodes = this.$route.query.subProcessCodes
-        let codes = subProcessCodes.split(',')
-        const last = codes.pop()
+        let subs = this.$route.query.subs
+        let ids = subs.split(',')
+        const last = ids.pop()
         this.$router.push({
-          path: `/${$name[0]}/${this.projectId}/${$name[1]}/list/${last}`,
-          query: codes.length > 0 ? { subProcessCodes: codes.join(',') } : null
+          path: `/${$name[0]}/${this.projectCode}/${$name[1]}/list/${last}`,
+          query: ids.length > 0 ? { subs: ids.join(',') } : null
         })
       },
-      toSubProcess ({ subProcessCode, fromThis }) {
-        let subProcessCodes = []
-        let getIds = this.$route.query.subProcessCodes
-        if (getIds) {
-          let newId = getIds.split(',')
-          newId.push(this.definitionCode)
-          subProcessCodes = newId
+      toSubProcess ({ subProcessCode, subInstanceId }) {
+        const tarIdentifier = this.type === 'instance' ? subInstanceId : subProcessCode
+        const curIdentifier = this.type === 'instance' ? this.instanceId : this.definitionCode
+        let subs = []
+        let olds = this.$route.query.subs
+        if (olds) {
+          subs = olds.split(',')
+          subs.push(curIdentifier)
         } else {
-          subProcessCodes.push(this.definitionCode)
+          subs.push(curIdentifier)
         }
         let $name = this.$route.name.split('-')
         this.$router.push({
-          path: `/${$name[0]}/${this.projectCode}/${$name[1]}/list/${subProcessCode}`,
-          query: { subProcessCodes: subProcessCodes.join(',') }
+          path: `/${$name[0]}/${this.projectCode}/${$name[1]}/list/${tarIdentifier}`,
+          query: { subs: subs.join(',') }
         })
       },
       seeHistory (taskName) {

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

@@ -16,7 +16,7 @@
  */
 <template>
   <list-box>
-    <div slot="text">{{ $t("Copy from") }}</div>
+    <div slot="text">{{ $t("Reference from") }}</div>
     <div slot="content" class="copy-from" ref="copyFrom">
       <div class="copy-from-content">
         <el-input
@@ -121,7 +121,7 @@
           this.formModel.backfillRefresh = false
           this.$nextTick(() => {
             this.formModel.backfillItem = backfillItem
-            this.formModel.backfill(backfillItem, true)
+            this.formModel.backfill(backfillItem)
             this.formModel.backfillRefresh = true
           })
         }

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

@@ -46,6 +46,10 @@
     </div>
     <div class="content-box" v-if="isContentBox">
       <div class="form-model">
+
+        <!-- Reference from task -->
+        <!-- <reference-from-task :taskType="nodeData.taskType" /> -->
+
         <!-- Node name -->
         <m-list-box>
           <div slot="text">{{ $t("Node name") }}</div>
@@ -63,9 +67,6 @@
           </div>
         </m-list-box>
 
-        <!-- Copy from task -->
-        <copy-from-task v-if="!isDetails" :taskType="nodeData.taskType" />
-
         <!-- Running sign -->
         <m-list-box>
           <div slot="text">{{ $t("Run flag") }}</div>
@@ -442,7 +443,7 @@
   import disabledState from '@/module/mixin/disabledState'
   import mPriority from '@/module/components/priority/priority'
   import { findComponentDownward } from '@/module/util/'
-  import CopyFromTask from './_source/copyFromTask.vue'
+  // import ReferenceFromTask from './_source/referenceFromTask.vue'
 
   export default {
     name: 'form-model',
@@ -632,7 +633,7 @@
             .dispatch('dag/getSubProcessId', { taskId: this.taskInstance.id })
             .then((res) => {
               this.$emit('onSubProcess', {
-                subProcessId: res.data.subProcessInstanceId,
+                subInstanceId: res.data.subProcessInstanceId,
                 fromThis: this
               })
             })
@@ -768,7 +769,7 @@
             timeoutNotifyStrategy: this.timeout.strategy,
             timeout: this.timeout.interval || 0,
             delayTime: this.delayTime,
-            environmentCode: this.environmentCode,
+            environmentCode: this.environmentCode || -1,
             status: this.status,
             branch: this.branch
           },
@@ -839,12 +840,12 @@
           fromThis: this
         })
       },
-      backfill (backfillItem, copyFromTask) {
+      backfill (backfillItem) {
         const o = backfillItem
         // Non-null objects represent backfill
         if (!_.isEmpty(o)) {
           this.code = o.code
-          !copyFromTask && (this.name = o.name)
+          this.name = o.name
           this.taskInstancePriority = o.taskInstancePriority
           this.runFlag = o.runFlag || 'YES'
           this.desc = o.desc
@@ -880,7 +881,7 @@
           } else {
             this.workerGroup = o.workerGroup
           }
-          this.environmentCode = o.environmentCode
+          this.environmentCode = o.environmentCode === -1 ? '' : o.environmentCode
           this.params = o.params || {}
           this.dependence = o.dependence || {}
           this.cacheDependence = o.dependence || {}
@@ -971,8 +972,8 @@
       mPriority,
       mWorkerGroups,
       mRelatedEnvironment,
-      mPreTasks,
-      CopyFromTask
+      mPreTasks
+      // ReferenceFromTask
     }
   }
 </script>

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

@@ -17,7 +17,7 @@
 <template>
   <div class="dep-list-model">
     <div v-for="(el,$index) in dependItemList" :key='$index'>
-      <el-select filterable :disabled="isDetails" style="width: 450px" v-model="el.projectId" @change="v => _onChangeProjectId(v, $index)" size="small">
+      <el-select filterable :disabled="isDetails" style="width: 450px" v-model="el.projectCode" @change="v => _onChangeProjectCode(v, $index)" size="small">
         <el-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label"></el-option>
       </el-select>
       <el-select filterable :disabled="isDetails" style="width: 450px" v-model="el.definitionCode" @change="v => _onChangeDefinitionCode(v, $index)" size="small">
@@ -84,8 +84,8 @@
         this.isLoading = true
 
         // add task list
-        let projectId = this.projectList[0].value
-        this._getProcessByProjectCode().then(definitionList => {
+        let projectCode = this.projectList[0].value
+        this._getProcessByProjectCode(projectCode).then(definitionList => {
           // dependItemList index
           let is = (value) => _.some(this.dependItemList, { definitionCode: value })
           let noArr = _.filter(definitionList, v => !is(v.value))
@@ -93,7 +93,7 @@
           let val = value || definitionList[0].value
           this._getDependItemList(val).then(depTasksList => {
             this.$nextTick(() => {
-              this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams(val, definitionList, depTasksList, projectId)))
+              this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams(val, definitionList, depTasksList, projectCode)))
             })
           })
         })
@@ -117,16 +117,16 @@
         return new Promise((resolve, reject) => {
           this.projectList = _.map(_.cloneDeep(this.store.state.dag.projectListS), v => {
             return {
-              value: v.id,
+              value: v.code,
               label: v.name
             }
           })
           resolve()
         })
       },
-      _getProcessByProjectCode () {
+      _getProcessByProjectCode (code) {
         return new Promise((resolve, reject) => {
-          this.store.dispatch('dag/getProcessByProjectCode').then(res => {
+          this.store.dispatch('dag/getProcessByProjectCode', code).then(res => {
             let definitionList = _.map(_.cloneDeep(res), v => {
               return {
                 value: v.processDefinition.code,
@@ -156,8 +156,8 @@
       /**
        * change process get dependItemList
        */
-      _onChangeProjectId (value, itemIndex) {
-        this._getProcessByProjectCode().then(definitionList => {
+      _onChangeProjectCode (value, itemIndex) {
+        this._getProcessByProjectCode(value).then(definitionList => {
           /* this.$set(this.dependItemList, itemIndex, this._dlOldParams(value, definitionList, item)) */
           let definitionCode = definitionList[0].value
           this._getDependItemList(definitionCode).then(depTasksList => {
@@ -184,9 +184,9 @@
         this.$set(this.dependItemList[itemIndex], 'dateValue', list[0].value)
         this.$set(this.dependItemList[itemIndex], 'dateValueList', list)
       },
-      _rtNewParams (value, definitionList, depTasksList, projectId) {
+      _rtNewParams (value, definitionList, depTasksList, projectCode) {
         return {
-          projectId: projectId,
+          projectCode: projectCode,
           definitionCode: value,
           // dependItem need private definitionList
           definitionList: definitionList,
@@ -200,7 +200,7 @@
       },
       _rtOldParams (value, definitionList, depTasksList, item) {
         return {
-          projectId: item.projectId,
+          projectCode: item.projectCode,
           definitionCode: value,
           // dependItem need private definitionList
           definitionList: definitionList,
@@ -215,7 +215,7 @@
 
       _cpOldParams (value, definitionCode, definitionList, depTasksList, item) {
         return {
-          projectId: value,
+          projectCode: value,
           definitionList: definitionList,
           definitionCode: definitionCode,
           depTasks: item.depTasks || 'ALL',
@@ -244,11 +244,11 @@
       this._getProjectList().then(() => {
         if (!this.dependItemList.length) {
           if (!this.projectList.length) return
-          let projectId = this.projectList[0].value
-          this._getProcessByProjectCode().then(definitionList => {
+          let projectCode = this.projectList[0].value
+          this._getProcessByProjectCode(projectCode).then(definitionList => {
             let value = definitionList[0].value
             this._getDependItemList(value).then(depTasksList => {
-              this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams(value, definitionList, depTasksList, projectId)))
+              this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams(value, definitionList, depTasksList, projectCode)))
             })
           })
         } else {
@@ -257,7 +257,7 @@
           // get item list
           this._getDependItemList(codes, false).then(res => {
             _.map(this.dependItemList, (v, i) => {
-              this._getProcessByProjectCode().then(definitionList => {
+              this._getProcessByProjectCode(v.projectCode).then(definitionList => {
                 this.$set(this.dependItemList, i, this._rtOldParams(v.definitionCode, definitionList, ['ALL'].concat(_.map(res[v.definitionCode] || [], v => v.name)), v))
               })
             })

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

@@ -107,9 +107,9 @@
           resolve()
         })
       },
-      _getProcessByProjectCode () {
+      _getProcessByProjectCode (code) {
         return new Promise((resolve, reject) => {
-          this.store.dispatch('dag/getProcessByProjectCode').then(res => {
+          this.store.dispatch('dag/getProcessByProjectCode', code).then(res => {
             this.definitionList = _.map(_.cloneDeep(res), v => {
               return {
                 value: v.code,
@@ -168,7 +168,7 @@
           // get item list
           this._getDependItemList(codes, false).then(res => {
             _.map(this.dependItemList, (v, i) => {
-              this._getProcessByProjectCode().then(definitionList => {
+              this._getProcessByProjectCode(v.projectCode).then(definitionList => {
                 this.$set(this.dependItemList, i, this._rtOldParams(v.definitionCode, ['ALL'].concat(_.map(res[v.definitionCode] || [], v => v.name)), v))
               })
             })

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

@@ -119,7 +119,7 @@
           dependTaskList: _.map(this.dependTaskList, v => {
             return {
               relation: v.relation,
-              dependItemList: _.map(v.dependItemList, v1 => _.omit(v1, ['depTasksList', 'state', 'dateValueList']))
+              dependItemList: _.map(v.dependItemList, v1 => _.omit(v1, ['depTasksList', 'state', 'dateValueList', 'definitionList']))
             }
           })
         })
@@ -163,7 +163,7 @@
           dependTaskList: _.map(this.dependTaskList, v => {
             return {
               relation: v.relation,
-              dependItemList: _.map(v.dependItemList, v1 => _.omit(v1, ['depTasksList', 'state', 'dateValueList']))
+              dependItemList: _.map(v.dependItemList, v1 => _.omit(v1, ['depTasksList', 'state', 'dateValueList', 'definitionList']))
             }
           })
         }

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

@@ -64,16 +64,17 @@
     mounted () {
       const canvas = this.getDagCanvasRef()
       const edges = canvas.getEdges()
+      this.preTasks = canvas.getPrevNodes(this.code).map(node => node.id)
       this.options = this.tasks.filter((task) => {
         // The current node cannot be used as the prev node
         if (task.code === this.code) return false
+        if (this.preTasks.includes(task.code)) return true
         // The number of edges start with CONDITIONS task cannot be greater than 2
         if (task.taskType === 'CONDITIONS') {
           return edges.filter((e) => e.sourceId === task.code).length < 2
         }
         return true
       })
-      this.preTasks = canvas.getPrevNodes(this.code).map(node => node.id)
     },
     computed: {
       ...mapState('dag', ['tasks'])

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

@@ -81,7 +81,7 @@ export default {
    */
   deleteProcessDefinitionVersion ({ state }, payload) {
     return new Promise((resolve, reject) => {
-      io.delete(`projects/${state.projectCode}/process-definition/${payload.code}/versiond/${payload.version}`, {}, res => {
+      io.delete(`projects/${state.projectCode}/process-definition/${payload.code}/versions/${payload.version}`, {}, res => {
         resolve(res)
       }).catch(e => {
         reject(e)
@@ -384,11 +384,11 @@ export default {
     })
   },
   /**
-   * Get a list of process definitions by project id
+   * Get a list of process definitions by project code
    */
-  getProcessByProjectCode ({ state }, payload) {
+  getProcessByProjectCode ({ state }, code) {
     return new Promise((resolve, reject) => {
-      io.get(`projects/${state.projectCode}/process-definition/all`, payload, res => {
+      io.get(`projects/${code}/process-definition/all`, res => {
         resolve(res.data)
       }).catch(res => {
         reject(res)
@@ -606,7 +606,7 @@ export default {
    */
   deleteInstance ({ state }, payload) {
     return new Promise((resolve, reject) => {
-      io.delete(`projects/${state.projectCode}/process-instances/${payload.code}`, {}, res => {
+      io.delete(`projects/${state.projectCode}/process-instances/${payload.processInstanceId}`, {}, res => {
         resolve(res)
       }).catch(e => {
         reject(e)

dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js

@@ -707,6 +707,6 @@ export default {
   'Please select worker groups': 'Please select worker groups',
   condition: 'condition',
   'The condition content cannot be empty': 'The condition content cannot be empty',
-  'Copy from': 'Copy from',
+  'Reference from': 'Reference from',
   'No more...': 'No more...'
 }

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

@@ -706,6 +706,6 @@ export default {
   'Please select worker groups': '请选择Worker分组',
   condition: '条件',
   'The condition content cannot be empty': '条件内容不能为空',
-  'Copy from': '从任务复制',
+  'Reference from': '使用已有任务',
   'No more...': '没有更多了...'
 }