perf: 定时任务列表页面响应速度优化 #3275

# Reviewed, transaction id: 22630
TencentBlueKing · Nov 1, 2024 · 6784fd7 · 6784fd7
1 parent 8b5ea3c
commit 6784fd7
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 47 deletions.
diff --git a/src/frontend/src/components/jb-edit/host.vue b/src/frontend/src/components/jb-edit/host.vue
@@ -153,13 +153,16 @@
     watch: {
       value: {
         handler(value) {
-          this.localValue = Object.freeze(_.cloneDeep(value));
+          this.localValue = Object.freeze({
+            ...value,
+            originalExecuteObjectsInfo: ExecuteTargetModel.cloneExecuteObjectsInfo(this.value.executeObjectsInfo),
+          });
         },
         immediate: true,
       },
     },
     created() {
-      this.originalExecuteObjectsInfo = _.cloneDeep(this.value.executeObjectsInfo);
+      this.originalExecuteObjectsInfo = ExecuteTargetModel.cloneExecuteObjectsInfo(this.value.executeObjectsInfo);
     },
     methods: {
       /**

diff --git a/src/frontend/src/domain/model/execute-target.js b/src/frontend/src/domain/model/execute-target.js
@@ -40,6 +40,22 @@ export default class ExecuteObjectsInfo {
             && containerList.length < 1;
   }
 
+  static cloneExecuteObjectsInfo(executeObjectsInfo) {
+    const {
+      dynamicGroupList,
+      hostList,
+      nodeList,
+      containerList = [],
+    } = executeObjectsInfo;
+
+    return {
+      dynamicGroupList: [...dynamicGroupList],
+      hostList: [...hostList],
+      nodeList: [...nodeList],
+      containerList: [...containerList],
+    };
+  }
+
   constructor(payload = {}) {
     this.variable = payload.variable || '';
     this.executeObjectsInfo = this.initExecuteObjectsInfo(payload.executeObjectsInfo || {});

diff --git a/src/frontend/src/domain/service/cron-job.js b/src/frontend/src/domain/service/cron-job.js
@@ -55,7 +55,7 @@ export default {
 
         if (planIds.length > 0) {
           // 获取定时任务的支持方案信息
-          TaskPlanSource.getPlansBasicInfo({ planIds })
+          TaskPlanSource.getPlansBasicinfo({ planIds })
             .then((plansBasicInfo) => {
               const planMap = {};
               plansBasicInfo.data.forEach((item) => {

diff --git a/src/frontend/src/domain/service/task-plan.js b/src/frontend/src/domain/service/task-plan.js
@@ -39,7 +39,7 @@ export default {
       });
   },
   fetchBatchPlan(params) {
-    return TaskPlanSource.getPlansBasicInfo(params)
+    return TaskPlanSource.getPlansInfo(params)
       .then(({ data }) => data.map(item => new PlanModel(item)));
   },
   fetchTaskPlan(params, config) {

diff --git a/src/frontend/src/domain/source/task-plan.js b/src/frontend/src/domain/source/task-plan.js
@@ -91,10 +91,14 @@ class TaskPlan extends ModuleBase {
     });
   }
 
-  // 批量获取执行方案基础信息
-  getPlansBasicInfo(params = {}) {
+  // 批量获取执行方案信息
+  getPlansInfo(params = {}) {
     return Request.get(`${this.path}/task/plan`, { params });
   }
+  // 批量获取执行方案基础信息
+  getPlansBasicinfo(params = {}) {
+    return Request.get(`${this.path}/task/plan/basicInfo`, { params });
+  }
 
   // 获取业务下的执行方案列表
   getAllPlan(params = {}) {

diff --git a/.../components/batch-edit-gobal-variable/edit-value/components/edit-global-variable/host.vue b/.../components/batch-edit-gobal-variable/edit-value/components/edit-global-variable/host.vue
@@ -68,8 +68,6 @@
   </div>
 </template>
 <script>
-  import _ from 'lodash';
-
   import ExecuteTargetModel from '@model/execute-target';
 
   export default {
@@ -109,7 +107,7 @@
       },
     },
     created() {
-      this.originalValue = _.cloneDeep(this.value.executeObjectsInfo);
+      this.originalValue = ExecuteTargetModel.cloneExecuteObjectsInfo(this.value.executeObjectsInfo);
     },
     methods: {
       handleRemove() {

diff --git a/...ntend/src/views/task-manage/common/render-global-var/batch-operation/create-table-row.vue b/...ntend/src/views/task-manage/common/render-global-var/batch-operation/create-table-row.vue
@@ -121,8 +121,7 @@
   </tr>
 </template>
 <script>
-  import _ from 'lodash';
-
+  import ExecuteTargetModel from '@model/execute-target';
   import GlobalVariableModel from '@model/task/global-variable';
 
   import { globalVariableNameRule } from '@utils/validator';
@@ -149,7 +148,7 @@
     },
     data() {
       return {
-        formData: _.cloneDeep(this.data),
+        formData: { ...this.data },
         isShowChooseIp: false,
         isShowNameError: false,
         errorNameText: '',
@@ -185,7 +184,7 @@
       },
     },
     created() {
-      this.originalValue = _.cloneDeep(this.data.defaultTargetValue.executeObjectsInfo);
+      this.originalValue = ExecuteTargetModel.cloneExecuteObjectsInfo(this.data.defaultTargetValue.executeObjectsInfo);
 
       this.typeList = [
         {
@@ -261,7 +260,10 @@
        * @param { Object } executeObjectsInfo 主机信息
        */
       handleExecuteObjectsInfoChange(executeObjectsInfo) {
-        this.formData.defaultTargetValue.executeObjectsInfo = executeObjectsInfo;
+        this.formData.defaultTargetValue = {
+          ...this.formData.defaultTargetValue,
+          executeObjectsInfo,
+        };
         this.triggerChange();
       },
       /**

diff --git a/src/frontend/src/views/task-manage/common/render-global-var/batch-operation/index.vue b/src/frontend/src/views/task-manage/common/render-global-var/batch-operation/index.vue
@@ -90,8 +90,6 @@
   </div>
 </template>
 <script>
-  import _ from 'lodash';
-
   import GlobalVariableModel from '@model/task/global-variable';
 
   import { createVariable } from '../util';
@@ -113,7 +111,7 @@
     },
     data() {
       return {
-        variableList: _.cloneDeep(this.variable),
+        variableList: Object.freeze([...this.variable]),
       };
     },
     computed: {
@@ -154,7 +152,7 @@
         const variableList = [...this.variableList];
         const variable = new GlobalVariableModel(variableData);
         variableList.splice(index, 1, variable);
-        this.variableList = variableList;
+        this.variableList = Object.freeze(variableList);
         window.changeFlag = true;
       },
       /**
@@ -171,15 +169,18 @@
           // 删除新建的变量——直接删除
           variableList.splice(index, 1);
         }
-        this.variableList = variableList;
+        this.variableList = Object.freeze(variableList);
         window.changeFlag = true;
       },
       /**
        * @desc 在指定索引位置添加一个新变量
        * @param {Number} index 编辑的变量索引
        */
       handleAppendVariable(index) {
-        this.variableList.splice(index + 1, 0, createVariable());
+        const variableList = [...this.variableList];
+        variableList.splice(index + 1, 0, createVariable());
+
+        this.variableList = Object.freeze(variableList);
         window.changeFlag = true;
       },
       /**
@@ -195,7 +196,7 @@
           queue.push(...this.$refs.variableCreate.map(item => item.validate()));
         }
         return Promise.all(queue)
-          .then(() => this.$emit('on-change', this.variableList));
+          .then(() => this.$emit('on-change', [...this.variableList]));
       },
     },
   };

diff --git a/src/frontend/src/views/task-manage/common/render-global-var/edit-of-plan/host.vue b/src/frontend/src/views/task-manage/common/render-global-var/edit-of-plan/host.vue
@@ -124,7 +124,7 @@
       },
     },
     created() {
-      this.originalExecuteObjectsInfoInfo = _.cloneDeep(this.formData.defaultTargetValue.executeObjectsInfo);
+      this.originalExecuteObjectsInfoInfo = ExecuteTargetModel.cloneExecuteObjectsInfo(this.formData.defaultTargetValue.executeObjectsInfo);
     },
     methods: {
       handleExecuteObjectsInfoChange(executeObjectsInfo) {

diff --git a/src/frontend/src/views/task-manage/common/render-global-var/index.vue b/src/frontend/src/views/task-manage/common/render-global-var/index.vue
@@ -48,7 +48,7 @@
         </bk-button>
       </div>
       <div class="task-global-variable-box">
-        <template v-for="(item, index) in variable">
+        <template v-for="(item, index) in variableList">
           <div
             v-if="item.delete !== 1"
             :key="`${item.name}_${index}`"
@@ -158,7 +158,7 @@
           v-if="isShowBatchEditOfPlan"
           ref="planGlobalVar"
           :selected-list="selectValue"
-          :variable-list="variable"
+          :variable-list="variableList"
           @on-change="handleBatchPlanEditSubmit" />
       </jb-sideslider>
       <jb-sideslider
@@ -180,15 +180,13 @@
         :title="$t('template.批量编辑变量')">
         <batch-operation
           v-if="isShowBatchOperation"
-          :variable="variable"
+          :variable="variableList"
           @on-change="handleBatchOperationSubmit" />
       </jb-sideslider>
     </template>
   </div>
 </template>
 <script>
-  import _ from 'lodash';
-
   import VariableModel from '@model/task/global-variable';
 
   import I18n from '@/i18n';
@@ -250,7 +248,7 @@
         isShowBatchOperation: false,
         isShowEditOfPlan: false,
         isShowBatchEditOfPlan: false,
-        variable: [],
+        variableList: [],
         currentPopoverDetail: {},
         currentData: {},
         currentIndex: -1,
@@ -267,7 +265,7 @@
         if (this.isOperation) {
           return false;
         }
-        return this.variable.length < 1;
+        return this.variableList.length < 1;
       },
       /**
        * @desc 新建、编辑全局变量
@@ -310,7 +308,7 @@
        */
       realVariable() {
         // 过滤掉已经删除的变量
-        const validVariable = this.variable.filter(item => !item.delete);
+        const validVariable = this.variableList.filter(item => !item.delete);
         // 编辑操作不包含正在编辑的变量
         if (this.currentOperation === 'edit') {
           return validVariable.filter(item => item.name !== this.currentData.name);
@@ -337,7 +335,7 @@
     watch: {
       list: {
         handler(value) {
-          this.variable = _.cloneDeep(value);
+          this.variableList = Object.freeze([...value]);
         },
         immediate: true,
       },
@@ -350,7 +348,7 @@
        * @desc 更新外部数据
        */
       triggerChange() {
-        this.$emit('on-change', this.variable);
+        this.$emit('on-change', [...this.variableList]);
       },
       /**
        * @desc 显示全局变量详情tips
@@ -406,15 +404,17 @@
           title: I18n.t('template.确定删除该全局变量？'),
           subTitle: I18n.t('template.若该变量被步骤引用，请及时检查并更新步骤设置'),
           confirmFn: () => {
-            const currentVar = this.variable[index];
+            const currentVar = this.variableList[index];
             if (currentVar.id > 0) {
               // 删除已存在的变量
               //  —设置delete
               currentVar.delete = 1;
             } else {
               // 删除新建的变量
               //  —直接删除
-              this.variable.splice(index, 1);
+              const nextVariableList = [...this.variableList];
+              nextVariableList.splice(index, 1);
+              this.variableList = Object.freeze([...nextVariableList]);
             }
             this.triggerChange();
           },
@@ -434,32 +434,36 @@
        * @param {Object} payload 全局变量数据
        */
       handlePlanEditSubmit(payload) {
-        const variable = new VariableModel(payload);
-        this.variable.splice(this.currentIndex, 1, variable);
+        const newVariable = new VariableModel(payload);
+        const nextVariableList = [...this.variableList];
+        nextVariableList.splice(this.currentIndex, 1, newVariable);
+        this.variableList = Object.freeze([...nextVariableList]);
         this.triggerChange();
       },
       /**
        * @desc 批量编辑执行方案全局变量
        * @param {Array} variableList 全局变量列表
        */
       handleBatchPlanEditSubmit(variableList) {
-        const variables = variableList.map(item => new VariableModel(item));
-        this.variable = variables;
+        const nextVariableList = variableList.map(item => new VariableModel(item));
+        this.variableList = Object.freeze(nextVariableList);
         this.triggerChange();
       },
       /**
        * @desc 全局变量编辑
        * @param {Object} payload 全局变量数据
        */
       handleOperationSubmit(payload) {
+        const nextVariableList = [...this.variableList];
         const payloadModel = new VariableModel(payload);
         if (this.currentOperation === 'create') {
           // 新建变量——追加
-          this.variable.push(payloadModel);
+          nextVariableList.push(payloadModel);
         } else {
           // 编辑变量——替换
-          this.variable.splice(this.currentIndex, 1, payloadModel);
+          nextVariableList.splice(this.currentIndex, 1, payloadModel);
         }
+        this.variableList = Object.freeze(nextVariableList);
         this.triggerChange();
         this.currentOperation = '';
       },
@@ -468,7 +472,7 @@
        * @param {Array} variableList 全局变量数据
        */
       handleBatchOperationSubmit(variableList) {
-        this.variable = variableList;
+        this.variableList = Object.freeze(variableList);
         this.triggerChange();
       },
       handleUseGuideToggle() {

diff --git a/src/frontend/src/views/task-manage/common/render-global-var/operation/host.vue b/src/frontend/src/views/task-manage/common/render-global-var/operation/host.vue
@@ -85,8 +85,6 @@
   </div>
 </template>
 <script>
-  import _ from 'lodash';
-
   import ExecuteTargetModel from '@model/execute-target';
   import TaskGlobalVariableModel from '@model/task/global-variable';
 
@@ -130,7 +128,7 @@
     },
     created() {
       if (this.$route.name !== 'templateCreate') {
-        this.originalExecuteObjectsInfo = _.cloneDeep(this.formData.defaultTargetValue.executeObjectsInfo);
+        this.originalExecuteObjectsInfo = ExecuteTargetModel.cloneExecuteObjectsInfo(this.formData.defaultTargetValue.executeObjectsInfo);
       } else {
         this.originalExecuteObjectsInfo = null;
       }

diff --git a/src/frontend/src/views/task-manage/sync-plan/components/crontab-detail.vue b/src/frontend/src/views/task-manage/sync-plan/components/crontab-detail.vue
@@ -97,8 +97,6 @@
   </div>
 </template>
 <script>
-  import _ from 'lodash';
-
   import CronJobService from '@service/cron-job';
 
   import Empty from '@components/empty';
@@ -155,7 +153,7 @@
       // 没有确认的定时任务，通过接口获取定时任务的name和变量
       // 默认展示模板的变量
       if (!this.info.hasConfirm) {
-        this.info.variableValue = Object.freeze(_.cloneDeep(this.variableList));
+        this.info.variableValue = Object.freeze([...this.variableList]);
         this.fetchData();
       }
     },