fix(frontend): redis容量变更数据请求交互优化 TencentBlueKing#8946

3octaves · Jan 7, 2025 · d7a5597 · d7a5597
1 parent 19df630
commit d7a5597
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/...nd/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue b/...nd/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
@@ -250,13 +250,13 @@
       <BkButton
         class="mr-8"
         :disabled="!isAbleSubmit"
-        :loading="isConfirmLoading"
+        :loading="isLoading"
         theme="primary"
         @click="handleConfirm">
         {{ t('确定') }}
       </BkButton>
       <BkButton
-        :disabled="isConfirmLoading"
+        :disabled="isLoading"
         @click="handleClose">
         {{ t('取消') }}
       </BkButton>
@@ -407,11 +407,12 @@
   const radioValue = ref(-1);
   const radioChoosedId  = ref(''); // 标记，sort重新定位index用
   const isTableLoading = ref(false);
-  const isConfirmLoading = ref(false);
   const tableData = ref<ClusterSpecModel[]>([]);
   const targetInfo = ref(createDefaultTargetInfo());
   const applySchema = ref(APPLY_SCHEME.AUTO);
   const updateInfoError = ref(false)
+  const customUpdateInfoLoading = ref(false)
+  const autoUpdateInfoLoading = ref(false)
 
   const specDisabledMap = shallowRef<Record<number, boolean>>({})
 
@@ -457,6 +458,8 @@
     return stats
   })
 
+  const isLoading = computed(() => customUpdateInfoLoading.value || autoUpdateInfoLoading.value)
+
   const currentCapacity = computed(() => {
     if (_.isEmpty(props.clusterStats)) {
       return props.data.capacity.total ?? 0
@@ -537,9 +540,9 @@
     immediate: true,
   });
 
-  watch(() => props.data.shardNum, () => {
-    specInfo.shardNum = props.data.shardNum
-  })
+  // watch(() => props.data.shardNum, () => {
+  //   specInfo.shardNum = props.data.shardNum
+  // })
 
   watch(specInfo, () => {
     if (specInfo.specId && specInfo.count && specInfo.clusterShardNum) {
@@ -551,6 +554,7 @@
   })
 
   const getCustomUpdateInfo = _.debounce(() => {
+    customUpdateInfoLoading.value = true
     getRedisClusterCapacityUpdateInfo({
       cluster_id: props.clusterId!,
       new_storage_version: props.targetVerison!,
@@ -580,6 +584,8 @@
         shardNum: specInfo.clusterShardNum,
         updateMode: updateInfo.capacity_update_type
       }
+    }).finally(() => {
+      customUpdateInfoLoading.value = false
     })
   }, 200)
 
@@ -665,6 +671,7 @@
   }
 
   const getUpdateInfo = (row: ClusterSpecModel) => {
+    autoUpdateInfoLoading.value = true
     getRedisClusterCapacityUpdateInfo({
       cluster_id: props.clusterId!,
       new_storage_version: props.targetVerison!,
@@ -695,6 +702,8 @@
         updateMode: updateInfo.capacity_update_type
       }
       radioChoosedId.value = row.spec_name;
+    }).finally(() => {
+      autoUpdateInfoLoading.value = false
     })
   }
 

diff --git a/...src/views/db-manage/redis/capacity-change/pages/page1/components/RenderTargetCapacity.vue b/...src/views/db-manage/redis/capacity-change/pages/page1/components/RenderTargetCapacity.vue
@@ -183,6 +183,9 @@
       localValue.cluster_shard_num = props.rowData?.shardNum || 0;
       localValue.machine_pair = props.rowData?.groupNum || 0;
     },
+    {
+      immediate: true,
+    },
   );
 
   const rules = [
@@ -215,7 +218,7 @@
         cloudId: rowData.bkCloudId,
         // groupNum: rowData.groupNum ?? 0,
         groupNum: localValue.machine_pair,
-        shardNum: rowData.shardNum ?? 0,
+        shardNum: localValue.cluster_shard_num,
         bkCloudId: rowData.bkCloudId,
       };
       activeRowData.value = obj;