From b489233bcad057cbc74e2f923543b78bd33fd29f Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Fri, 18 Oct 2024 19:37:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20redis=E9=9B=86=E7=BE=A4?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E6=96=B9=E6=A1=88?=
 =?UTF-8?q?=20#7272?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../redis/clusterShardUpdate.ts               |  5 +--
 .../redis/clusterTypeUpdate.ts                |  5 +--
 .../page1/components/ClusterDeployPlan.vue    | 16 +++++-----
 .../page1/components/RenderTargetCapacity.vue | 31 ++++++++++++++-----
 .../pages/page1/Index.vue                     |  5 +--
 .../page1/components/RenderDeployPlan.vue     | 24 +++++++++-----
 .../pages/page1/components/Row.vue            |  6 ++--
 .../cluster-type-update/pages/page1/Index.vue |  5 +--
 .../page1/components/RenderDeployPlan.vue     | 24 +++++++++-----
 .../pages/page1/components/Row.vue            |  6 ++--
 .../common/cluster-deploy-plan/Index.vue      | 11 ++++---
 11 files changed, 77 insertions(+), 61 deletions(-)

diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterShardUpdate.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterShardUpdate.ts
index 4c7ea5cc5a..1eaa450928 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterShardUpdate.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterShardUpdate.ts
@@ -54,6 +54,7 @@ export async function generateRedisClusterShardUpdateCloneData(
       clusterType: currentClusterInfo.cluster_spec.spec_cluster_type,
       clusterTypeName: currentClusterInfo.cluster_type_name,
       currentShardNum: currentClusterInfo.cluster_shard_num,
+      groupNum: currentClusterInfo.machine_pair_cnt,
       currentSpecId: currentClusterInfo.cluster_spec.spec_id,
       dbVersion: item.db_version,
       specConfig: {
@@ -66,10 +67,6 @@ export async function generateRedisClusterShardUpdateCloneData(
         id: currentClusterInfo.proxy[0].spec_config.id,
         count: new Set(currentClusterInfo.proxy.map((item) => item.ip)).size,
       },
-      backendGroup: {
-        id: currentClusterInfo.cluster_spec.spec_id,
-        count: currentClusterInfo.redis_master.length,
-      },
     };
   });
   return {
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterTypeUpdate.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterTypeUpdate.ts
index 0e2b02470c..b50d95c8a9 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterTypeUpdate.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterTypeUpdate.ts
@@ -53,6 +53,7 @@ export async function generateRedisClusterTypeUpdateCloneData(ticketData: Ticket
       currentSepc: `${currentClusterInfo.cluster_capacity}G_${currentClusterInfo.cluster_spec.qps.max}/s${t('（n 分片）', { n: currentClusterInfo.cluster_shard_num })}`,
       targetClusterType: item.target_cluster_type,
       currentShardNum: currentClusterInfo.cluster_shard_num,
+      groupNum: currentClusterInfo.machine_pair_cnt,
       clusterTypeName: currentClusterInfo.cluster_type_name,
       currentSpecId: currentClusterInfo.cluster_spec.spec_id,
       dbVersion: item.db_version,
@@ -66,10 +67,6 @@ export async function generateRedisClusterTypeUpdateCloneData(ticketData: Ticket
         id: currentClusterInfo.proxy[0].spec_config.id,
         count: new Set(currentClusterInfo.proxy.map((item) => item.ip)).size,
       },
-      backendGroup: {
-        id: currentClusterInfo.cluster_spec.spec_id,
-        count: currentClusterInfo.redis_master.length,
-      },
     };
   });
   return {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
index c9c217456a..b43ea304b9 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
@@ -186,6 +186,7 @@
         <div class="title-spot">{{ t('集群部署方案') }}<span class="required" /></div>
         <DbForm
           ref="formRef"
+          class="mt-16"
           :model="specInfo">
           <ApplySchema v-model="applySchema" />
           <template v-if="applySchema === APPLY_SCHEME.AUTO">
@@ -324,11 +325,10 @@
         total: number,
         used: number,
       },
-      clusterType: RedisClusterTypes,
+      clusterType: string,
       cloudId: number,
       groupNum: number,
       shardNum: number,
-      machinePair: number,
       bkCloudId: number
     };
     title?: string,
@@ -415,9 +415,9 @@
 
   const specInfo = reactive({
     specId: '',
-    count: 0,
-    shardNum: 0,
-    clusterShardNum: 0,
+    count: 1,
+    shardNum: 1,
+    clusterShardNum: 1,
     totalCapcity: 0,
   })
 
@@ -520,9 +520,9 @@
   watch(() => props.data, () => {
     if (props.data) {
       Object.assign(specInfo, {
-        spec_id: props.data.currentSepc.id,
-        count: props.data.machinePair,
-        clusterShardNum: props.data.shardNum
+        count: props.data.groupNum,
+        shardNum: props.data.shardNum / props.data.groupNum,
+        clusterShardNum: props.data.shardNum,
       })
       Object.assign(clusterInfo, {
         bizId: window.PROJECT_CONFIG.BIZ_ID,
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderTargetCapacity.vue b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderTargetCapacity.vue
index bf6b05e9c4..73ebc7b3e9 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderTargetCapacity.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderTargetCapacity.vue
@@ -152,11 +152,18 @@
   const selectRef = ref();
   const activeRowData = ref<TargetPlanProps['data']>();
   const showChooseClusterTargetPlan = ref(false);
-  const localValue = shallowRef<SpecResultInfo>();
   const futureCapacity = ref(1);
   const targetObj = ref<TargetInfo>();
   const targetClusterStats = ref<RedisModel['cluster_stats']>({} as Record<string, never>);
 
+  const localValue = reactive<SpecResultInfo>({
+    cluster_capacity: 0,
+    max: 0,
+    cluster_shard_num: 0,
+    spec_id: 0,
+    machine_pair: 0,
+  });
+
   const currentCapacity = computed(() => {
     if (!props.rowData || _.isEmpty(props.rowData?.clusterStats)) {
       return props.rowData?.currentCapacity?.total ?? 0;
@@ -164,6 +171,14 @@
     return convertStorageUnits(props.rowData.clusterStats.total, 'B', 'GB');
   });
 
+  watchEffect(() => {
+    localValue.cluster_shard_num = props.rowData?.shardNum || 0;
+  });
+
+  watchEffect(() => {
+    localValue.machine_pair = props.rowData?.groupNum || 0;
+  });
+
   const rules = [
     {
       validator: (value: string) => Boolean(value),
@@ -192,9 +207,9 @@
         capacity: rowData.currentCapacity ?? { used: 0, total: 1 },
         clusterType: rowData.clusterType ?? RedisClusterTypes.TwemproxyRedisInstance,
         cloudId: rowData.bkCloudId,
-        groupNum: rowData.groupNum ?? 0,
+        // groupNum: rowData.groupNum ?? 0,
+        groupNum: localValue.machine_pair,
         shardNum: rowData.shardNum ?? 0,
-        machinePair: targetObj.value?.groupNum ?? 0,
         bkCloudId: rowData.bkCloudId,
       };
       activeRowData.value = obj;
@@ -204,7 +219,7 @@
 
   // 从侧边窗点击确认后触发
   const handleChoosedTargetCapacity = (obj: SpecResultInfo, capacity: number, targetInfo: TargetInfo) => {
-    localValue.value = obj;
+    Object.assign(localValue, obj);
     futureCapacity.value = capacity;
     targetObj.value = targetInfo;
     showChooseClusterTargetPlan.value = false;
@@ -216,18 +231,18 @@
 
   defineExpose<Exposes>({
     getValue() {
-      if (!localValue.value) {
+      if (!localValue.spec_id || !localValue.machine_pair || !localValue.cluster_shard_num) {
         return selectRef.value.getValue().then(() => true);
       }
       return Promise.resolve({
-        shard_num: localValue.value.cluster_shard_num, // props.rowData!.shardNum
-        group_num: localValue.value.machine_pair, // targetObj.value!.requireMachineGroupNum,
+        shard_num: localValue.cluster_shard_num, // props.rowData!.shardNum
+        group_num: localValue.machine_pair, // targetObj.value!.requireMachineGroupNum,
         capacity: futureCapacity.value ?? 1,
         future_capacity: futureCapacity.value ?? 1,
         update_mode: targetObj.value?.updateMode,
         resource_spec: {
           backend_group: {
-            spec_id: localValue.value.spec_id,
+            spec_id: localValue.spec_id,
             count: targetObj.value!.requireMachineGroupNum, // 机器实际需要申请的组数
             affinity: AffinityType.CROS_SUBZONE, // 暂时固定 'CROS_SUBZONE',
           },
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/Index.vue
index d386b3bab6..545cec338e 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/Index.vue
@@ -255,6 +255,7 @@
       currentSepc: `${item.cluster_capacity}G_${specConfig.qps.max}/s（${item.cluster_shard_num} 分片）`,
       clusterType: item.cluster_spec.spec_cluster_type,
       currentShardNum: item.cluster_shard_num,
+      groupNum: item.machine_pair_cnt,
       clusterTypeName: item.cluster_type_name,
       currentSpecId: item.cluster_spec.spec_id,
       dbVersion: item.major_version,
@@ -268,10 +269,6 @@
         id: item.proxy[0].spec_config.id,
         count: new Set(item.proxy.map((item) => item.ip)).size,
       },
-      backendGroup: {
-        id: item.cluster_spec.spec_id,
-        count: item.redis_master.length,
-      },
     };
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/components/RenderDeployPlan.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/components/RenderDeployPlan.vue
index d675ec1066..ffc5b797e3 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/components/RenderDeployPlan.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/components/RenderDeployPlan.vue
@@ -74,7 +74,7 @@
   const showChooseClusterTargetPlan = ref(false);
   const activeRowData = ref<TargetPlanProps['data']>();
 
-  const localValue = ref({
+  const localValue = reactive({
     spec_id: 0,
     count: 0,
     target_shard_num: 0,
@@ -88,21 +88,29 @@
       message: t('请选择目标容量'),
     },
     {
-      validator: () => props.rowData.currentShardNum !== localValue.value.target_shard_num,
+      validator: () => props.rowData.currentShardNum !== localValue.target_shard_num,
       message: t('目标分片数不能与当前分片数相同'),
     },
   ];
 
+  watchEffect(() => {
+    localValue.target_shard_num = props.rowData.currentShardNum;
+  });
+
+  watchEffect(() => {
+    localValue.count = props.rowData.groupNum;
+  });
+
   // 从侧边窗点击确认后触发
   const handleChoosedTargetCapacity = (choosedObj: SpecResultInfo, capacity: CapacityNeed) => {
     displayText.value = `${choosedObj.cluster_capacity}G_（${choosedObj.cluster_shard_num} 分片）`;
-    localValue.value = {
+    Object.assign(localValue, {
       spec_id: choosedObj.spec_id,
       count: choosedObj.machine_pair,
       target_shard_num: choosedObj.cluster_shard_num,
       capacity: capacity.current,
       future_capacity: capacity.future,
-    };
+    });
     showChooseClusterTargetPlan.value = false;
   };
 
@@ -119,11 +127,11 @@
           disks: rowData.currentCapacity?.total,
           qps: specConfig.qps.max,
         }),
-        currentSepcId: `${rowData.backendGroup?.id || ''}`,
+        currentSepcId: `${specConfig.id}`,
         capacity: { total: rowData.currentCapacity?.total ?? 1, used: 0 },
         clusterType: rowData.clusterType as RedisClusterTypes,
         shardNum: rowData.currentShardNum,
-        machinePair: rowData.backendGroup?.count || 0,
+        groupNum: localValue.count,
         bkCloudId: rowData.bkCloudId,
       };
       activeRowData.value = obj;
@@ -135,8 +143,8 @@
     getValue() {
       return selectRef.value
         .getValue()
-        .then(() => localValue.value)
-        .catch(() => localValue.value);
+        .then(() => localValue)
+        .catch(() => localValue);
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/components/Row.vue
index 5f0b6c0262..1a590fc244 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/components/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/components/Row.vue
@@ -82,6 +82,7 @@
     switchMode: string;
     clusterType: string;
     currentShardNum: number;
+    groupNum: number;
     currentSpecId: number;
     clusterTypeName: string;
     dbVersion: string;
@@ -114,10 +115,6 @@
       qps: number;
       shardNum: number;
     };
-    backendGroup?: {
-      id: number;
-      count: number;
-    };
     targetShardNum?: number;
   }
 
@@ -157,6 +154,7 @@
     clusterType: '',
     clusterTypeName: '',
     currentShardNum: 0,
+    groupNum: 0,
     currentSpecId: 0,
     dbVersion: '',
     specConfig: {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue
index 057c4fdb29..ba4d440c3b 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue
@@ -258,6 +258,7 @@
     clusterType: item.cluster_type,
     machineType: item.cluster_spec.spec_machine_type,
     currentShardNum: item.cluster_shard_num,
+    groupNum: item.machine_pair_cnt,
     dbVersion: item.major_version,
     specConfig: {
       cpu: item.cluster_spec.cpu,
@@ -269,10 +270,6 @@
       id: item.proxy[0].spec_config.id,
       count: new Set(item.proxy.map((item) => item.ip)).size,
     },
-    backendGroup: {
-      id: item.cluster_spec.spec_id,
-      count: item.redis_master.length,
-    },
   });
 
   // 批量选择
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/RenderDeployPlan.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/RenderDeployPlan.vue
index 7d7f996e8e..2e91be52f2 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/RenderDeployPlan.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/RenderDeployPlan.vue
@@ -76,7 +76,7 @@
   const showChooseClusterTargetPlan = ref(false);
   const activeRowData = ref<TargetPlanProps['data']>();
 
-  const localValue = ref({
+  const localValue = reactive({
     spec_id: 0,
     count: 0,
     target_shard_num: 0,
@@ -91,16 +91,24 @@
     },
   ];
 
+  watchEffect(() => {
+    localValue.target_shard_num = props.rowData.currentShardNum;
+  });
+
+  watchEffect(() => {
+    localValue.count = props.rowData.groupNum;
+  });
+
   // 从侧边窗点击确认后触发
   const handleChoosedTargetCapacity = (choosedObj: SpecResultInfo, capacity: CapacityNeed) => {
     displayText.value = `${choosedObj.cluster_capacity}G_（${choosedObj.cluster_shard_num} 分片）`;
-    localValue.value = {
+    Object.assign(localValue, {
       spec_id: choosedObj.spec_id,
       count: choosedObj.machine_pair,
       target_shard_num: choosedObj.cluster_shard_num,
       capacity: capacity.current,
       future_capacity: capacity.future,
-    };
+    });
     showChooseClusterTargetPlan.value = false;
   };
 
@@ -120,11 +128,11 @@
           disks: rowData.currentCapacity?.total,
           qps: specConfig.qps.max,
         }),
-        currentSepcId: `${rowData.backendGroup?.id || ''}`,
+        currentSepcId: `${specConfig.id}`,
         capacity: { total: rowData.currentCapacity?.total ?? 1, used: 0 },
         clusterType: props.targetClusterType as RedisClusterTypes,
-        shardNum: rowData.currentShardNum,
-        machinePair: rowData.backendGroup?.count || 0,
+        shardNum: localValue.target_shard_num,
+        groupNum: localValue.count,
         bkCloudId: rowData.bkCloudId,
       };
       activeRowData.value = obj;
@@ -136,8 +144,8 @@
     getValue() {
       return selectRef.value
         .getValue()
-        .then(() => localValue.value)
-        .catch(() => Promise.reject(localValue.value));
+        .then(() => localValue)
+        .catch(() => Promise.reject(localValue));
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/Row.vue
index 3c7b5e9b4a..50f50ebf50 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/Row.vue
@@ -104,6 +104,7 @@
     srcClusterType: string;
     clusterType: string;
     currentShardNum: number;
+    groupNum: number;
     clusterTypeName: string;
     specConfig: {
       cpu: {
@@ -134,10 +135,6 @@
       current: number;
       total: number;
     };
-    backendGroup?: {
-      id: number;
-      count: number;
-    };
     targetShardNum?: number;
   }
 
@@ -181,6 +178,7 @@
     clusterType: '',
     dbVersion: '',
     currentShardNum: 0,
+    groupNum: 0,
     clusterTypeName: '',
     currentSepc: '',
     specConfig: {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
index df149fd3c5..580df4bbc7 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
@@ -207,7 +207,7 @@
       },
       clusterType: RedisClusterTypes,
       shardNum: number,
-      machinePair: number,
+      groupNum: number,
       bkCloudId: number
     };
     title?: string,
@@ -248,7 +248,7 @@
       },
       clusterType: RedisClusterTypes.TwemproxyRedisInstance,
       shardNum: 0,
-      machinePair: 0,
+      groupNum: 0,
       bkCloudId: 0
     }),
     title: '',
@@ -281,7 +281,7 @@
     specId: '',
     count: 1,
     shardNum: 1,
-    clusterShardNum: 0,
+    clusterShardNum: 1,
     totalCapcity: 0,
   })
 
@@ -377,8 +377,9 @@
     if (props.data) {
       targetCapacity.value.current = props.data.capacity.total;
       Object.assign(specInfo, {
-        spec_id: props.data.currentSepcId,
-        count: props.data.machinePair
+        count: props.data.groupNum,
+        shardNum: props.data.shardNum / props.data.groupNum,
+        clusterShardNum: props.data.shardNum,
       })
       Object.assign(clusterInfo, {
         bizId: window.PROJECT_CONFIG.BIZ_ID,