[Improvement-6151] Performance optimization of DEPENDENT task (#7725)

* Performance optimization of DEPENDENT task

* fix eslint

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

@@ -76,7 +76,8 @@
     props: {
       dependItemList: Array,
       index: Number,
-      dependTaskList: Array
+      dependTaskList: Array,
+      projectDefinitionsCache: Object
     },
     model: {
       prop: 'dependItemList',
@@ -136,6 +137,9 @@
         })
       },
       _getProcessByProjectCode (code) {
+        if (this.projectDefinitionsCache[code]) {
+          return Promise.resolve(this.projectDefinitionsCache[code])
+        }
         return new Promise((resolve, reject) => {
           this.store.dispatch('dag/getProcessByProjectCode', code).then(res => {
             let definitionList = _.map(_.cloneDeep(res), v => {
@@ -144,6 +148,10 @@
                 label: v.processDefinition.name
               }
             })
+            this.$emit('addProjectDefinitionsCache', {
+              projectCode: code,
+              definitionList
+            })
             resolve(definitionList)
           })
         })
@@ -281,14 +289,24 @@
             }
           })
         } else {
-          // get definitionCode codes
-          let codes = _.map(this.dependItemList, v => v.definitionCode).join(',')
-          // get item list
-          this._getDependItemList(codes, false).then(res => {
-            _.map(this.dependItemList, (v, i) => {
-              this._getProcessByProjectCode(v.projectCode).then(definitionList => {
-                this.$set(this.dependItemList, i, this._rtOldParams(v.definitionCode, definitionList, [_.cloneDeep(DEP_ALL_TASK)].concat(_.map(res[v.definitionCode] || [], v => ({ code: v.code, name: v.name }))), v))
-              })
+          // Get uniq definitionCodes and projectCodes
+          const definitionCodes = _.uniq(this.dependItemList.map(dep => dep.definitionCode)).join(',')
+
+          // Query all tasks by definitionCodes, definitionCodes can cross projects
+          this._getDependItemList(definitionCodes, false)
+            .then(definitionTasks => {
+              _.map(this.dependItemList, (dep, i) => {
+                const definitionList = this.projectDefinitionsCache[dep.projectCode]
+                const depTasksList = (definitionTasks[dep.definitionCode] || [])
+                  .map(task => ({ code: task.code, name: task.name }))
+                  .concat(_.cloneDeep(DEP_ALL_TASK))
+
+                this.$set(this.dependItemList, i, this._rtOldParams(
+                  dep.definitionCode,
+                  definitionList,
+                  depTasksList,
+                  dep
+                ))
               })
             })
         }

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

@@ -27,7 +27,7 @@
             <em v-if="isLoading" class="el-icon-loading as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
           </a>
         </div>
-        <div class="dep-box">
+        <div class="dep-box" v-if="cacheReady">
           <span
             class="dep-relation"
             @click="!isDetails && _setGlobalRelation()"
@@ -49,9 +49,11 @@
             </em>
             <m-depend-item-list
               :dependTaskList='dependTaskList'
+              :projectDefinitionsCache='projectDefinitionsCache'
               v-model="el.dependItemList"
               @on-delete-all="_onDeleteAll"
               @getDependTaskList="getDependTaskList"
+              @addProjectDefinitionsCache="addProjectDefinitionsCache"
               :index="$index">
             </m-depend-item-list>
           </div>
@@ -65,7 +67,7 @@
   import mListBox from './_source/listBox'
   import mDependItemList from './_source/dependItemList'
   import disabledState from '@/module/mixin/disabledState'
-  import { mapState } from 'vuex'
+  import { mapState, mapActions } from 'vuex'
 
   export default {
     name: 'dependent',
@@ -73,7 +75,10 @@
       return {
         relation: 'AND',
         dependTaskList: [],
-        isLoading: false
+        isLoading: false,
+        // Reduce repeated requests
+        projectDefinitionsCache: {},
+        cacheReady: false
       }
     },
     mixins: [disabledState],
@@ -81,6 +86,7 @@
       backfillItem: Object
     },
     methods: {
+      ...mapActions('dag', ['getProcessByProjectCode']),
       _addDep () {
         if (!this.isLoading) {
           this.isLoading = true
@@ -125,6 +131,25 @@
           })
         })
         return true
+      },
+      _getProcessByProjectCode (code) {
+        return new Promise((resolve, reject) => {
+          this.getProcessByProjectCode(code).then(res => {
+            let definitionList = _.map(_.cloneDeep(res), v => {
+              return {
+                value: v.processDefinition.code,
+                label: v.processDefinition.name
+              }
+            })
+            resolve({
+              definitionList,
+              projectCode: code
+            })
+          })
+        })
+      },
+      addProjectDefinitionsCache ({ projectCode, definitionList }) {
+        this.projectDefinitionsCache[projectCode] = definitionList
       }
     },
     watch: {
@@ -151,6 +176,17 @@
         _.map(this.dependTaskList, v => _.map(v.dependItemList, v1 => {
           v1.state = dependentResult[`${v1.definitionCode}-${v1.depTaskCode}-${v1.cycle}-${v1.dateValue}`] || defaultState
         }))
+        // cache project definitions
+        const projectCodes = _.uniq(_.flatten(this.dependTaskList.map(dep => dep.dependItemList.map(item => item.projectCode))))
+        Promise.all(projectCodes.map(projectCode => this._getProcessByProjectCode(projectCode))).then((arr) => {
+          arr.forEach((item) => {
+            const { projectCode, definitionList } = item
+            this.projectDefinitionsCache[projectCode] = definitionList
+          })
+          this.cacheReady = true
+        })
+      } else {
+        this.cacheReady = true
       }
     },
     mounted () {