From e2d516f27989618461b72aca899205a152a4cfe6 Mon Sep 17 00:00:00 2001 From: wangyizhi Date: Fri, 12 Nov 2021 15:48:55 +0800 Subject: [PATCH] Optimize DAG page opening speed (#6830) --- .../pages/dag/_source/formModel/formModel.vue | 6 +-- .../_source/formModel/tasks/sub_process.vue | 52 ++++++++++++------- .../conf/home/pages/dag/definitionDetails.vue | 4 +- .../src/js/conf/home/pages/dag/index.vue | 4 +- .../conf/home/pages/dag/instanceDetails.vue | 4 +- .../src/js/conf/home/store/dag/actions.js | 2 +- 6 files changed, 40 insertions(+), 32 deletions(-) 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 2995da1466..fcafefc268 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 @@ -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) { diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue index 189f92f493..e0041e15ae 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue +++ b/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 => { - return { - id: v.processDefinition.id, - code: v.processDefinition.code, - name: v.processDefinition.name, - disabled: false + this.getAllProcessDefinitions().then((processListS) => { + this.processDefinitionList = processListS.map(def => { + return { + id: def.id, + code: def.code, + 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 () { }, diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/definitionDetails.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/definitionDetails.vue index 2e1f69f3dd..052d956ab1 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/definitionDetails.vue +++ b/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 diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/index.vue index 81d129a47e..2099c38f46 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/index.vue +++ b/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 diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/instanceDetails.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/instanceDetails.vue index 7faa41e789..c9e3b98e93 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/instanceDetails.vue +++ b/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 diff --git a/dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js b/dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js index f8136d5185..1a92cc1649 100644 --- a/dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js +++ b/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 => {