Optimize DAG page opening speed (#6830)

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

@@ -659,10 +659,10 @@
           const processDefinitionId =
             this.backfillItem.params.processDefinitionId
           const process = this.processListS.find(
-            (process) => process.processDefinition.id === processDefinitionId
+            (def) => def.id === processDefinitionId
           )
           this.$emit('onSubProcess', {
-            subProcessCode: process.processDefinition.code,
+            subProcessCode: process.code,
             fromThis: this
           })
         }
@@ -949,7 +949,7 @@
        * Child workflow entry show/hide
        */
       _isGoSubProcess () {
-        return this.nodeData.taskType === 'SUB_PROCESS' && this.name
+        return this.nodeData.taskType === 'SUB_PROCESS' && this.name && this.processListS && this.processListS.length > 0
       },
       taskInstance () {
         if (this.taskInstances.length > 0) {

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

@@ -42,6 +42,7 @@
   import i18n from '@/module/i18n'
   import disabledState from '@/module/mixin/disabledState'
   import mListBox from './_source/listBox'
+  import { mapActions, mapState } from 'vuex'
 
   export default {
     name: 'sub_process',
@@ -57,7 +58,11 @@
     props: {
       backfillItem: Object
     },
+    computed: {
+      ...mapState('dag', ['processListS'])
+    },
     methods: {
+      ...mapActions('dag', ['getProcessList']),
       /**
        * Node unified authentication parameters
        */
@@ -82,6 +87,15 @@
        */
       _handleName (id) {
         return _.filter(this.processDefinitionList, v => id === v.id)[0].name
+      },
+      /**
+       * Get all processDefinition list
+       */
+      getAllProcessDefinitions () {
+        if (!this.processListS || this.processListS.length === 0) {
+          return this.getProcessList()
+        }
+        return Promise.resolve(this.processListS)
       }
     },
     watch: {
@@ -92,32 +106,32 @@
       }
     },
     created () {
-      let processListS = _.cloneDeep(this.store.state.dag.processListS)
       let code = null
       if (this.router.history.current.name === 'projects-instance-details') {
         code = this.router.history.current.query.code || null
       } else {
         code = this.router.history.current.params.code || null
       }
-      this.processDefinitionList = processListS.map(v => {
+      this.getAllProcessDefinitions().then((processListS) => {
-        return {
+        this.processDefinitionList = processListS.map(def => {
-          id: v.processDefinition.id,
+          return {
-          code: v.processDefinition.code,
+            id: def.id,
-          name: v.processDefinition.name,
+            code: def.code,
-          disabled: false
+            name: def.name,
+            disabled: false
+          }
+        }).filter(a => (a.code + '') !== code)
+        let o = this.backfillItem
+        // Non-null objects represent backfill
+        if (!_.isEmpty(o)) {
+          this.wdiCurr = o.params.processDefinitionId
+        } else {
+          if (this.processDefinitionList.length) {
+            this.wdiCurr = this.processDefinitionList[0].id
+            this.$emit('on-set-process-name', this._handleName(this.wdiCurr))
+          }
         }
-      }).filter(a => (a.code + '') !== code)
+      })
-
-      let o = this.backfillItem
-      // Non-null objects represent backfill
-      if (!_.isEmpty(o)) {
-        this.wdiCurr = o.params.processDefinitionId
-      } else {
-        if (this.processDefinitionList.length) {
-          this.wdiCurr = this.processDefinitionList[0].id
-          this.$emit('on-set-process-name', this._handleName(this.wdiCurr))
-        }
-      }
     },
     mounted () {
     },

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

@@ -46,7 +46,7 @@
     props: {},
     methods: {
       ...mapMutations('dag', ['resetParams', 'setIsDetails']),
-      ...mapActions('dag', ['getProcessList', 'getProjectList', 'getResourcesList', 'getProcessDetails', 'getResourcesListJar']),
+      ...mapActions('dag', ['getProjectList', 'getResourcesList', 'getProcessDetails', 'getResourcesListJar']),
       ...mapActions('security', ['getTenantList', 'getWorkerGroupsAll', 'getAlarmGroupsAll']),
       /**
        * init
@@ -59,8 +59,6 @@
         Promise.all([
           // Node details
           this.getProcessDetails(this.$route.params.code),
-          // get process definition
-          this.getProcessList(),
           // get project
           this.getProjectList(),
           // get resource

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

@@ -40,7 +40,7 @@
     props: {},
     methods: {
       ...mapMutations('dag', ['resetParams']),
-      ...mapActions('dag', ['getProcessList', 'getProjectList', 'getResourcesList', 'getResourcesListJar', 'getResourcesListJar']),
+      ...mapActions('dag', ['getProjectList', 'getResourcesList', 'getResourcesListJar', 'getResourcesListJar']),
       ...mapActions('security', ['getTenantList', 'getWorkerGroupsAll', 'getAlarmGroupsAll']),
       /**
        * init
@@ -51,8 +51,6 @@
         this.resetParams()
         // Promise Get node needs data
         Promise.all([
-          // get process definition
-          this.getProcessList(),
           // get project
           this.getProjectList(),
           // get jar

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

@@ -43,7 +43,7 @@
     props: {},
     methods: {
       ...mapMutations('dag', ['setIsDetails', 'resetParams']),
-      ...mapActions('dag', ['getProcessList', 'getProjectList', 'getResourcesList', 'getInstancedetail', 'getResourcesListJar']),
+      ...mapActions('dag', ['getProjectList', 'getResourcesList', 'getInstancedetail', 'getResourcesListJar']),
       ...mapActions('security', ['getTenantList', 'getWorkerGroupsAll', 'getAlarmGroupsAll']),
       /**
        * init
@@ -56,8 +56,6 @@
         Promise.all([
           // Process instance details
           this.getInstancedetail(this.$route.params.id),
-          // get process definition
-          this.getProcessList(),
           // get project
           this.getProjectList(),
           // get resources

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

@@ -352,7 +352,7 @@ export default {
         resolve()
         return
       }
-      io.get(`projects/${state.projectCode}/process-definition/list`, payload, res => {
+      io.get(`projects/${state.projectCode}/process-definition/simple-list`, payload, res => {
         state.processListS = res.data
         resolve(res.data)
       }).catch(res => {