feat(frontend): redis集群支持自定义方案 TencentBlueKing#7272

3octaves · Oct 18, 2024 · 96dd0ec · 96dd0ec
1 parent ea99a2a
commit 96dd0ec
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 116 deletions.
diff --git a/dbm-ui/frontend/.vscode/settings.json b/dbm-ui/frontend/.vscode/settings.json
@@ -1,60 +1,19 @@
 {
-  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
-  "eslint.alwaysShowStatus": true,
+  "files.eol": "\n",
+  "editor.unfoldOnClickAfterEndOfLine": true,
+  "editor.tabSize": 2,
+  "diffEditor.ignoreTrimWhitespace": false,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "explorer.confirmDelete": false,
+  "explorer.confirmDragAndDrop": false,
+  "editor.fontLigatures": false,
+  "editor.fontVariations": false,
+  "i18n-lazyer.defaultFolder": "/src/locales",
+  "search.smartCase": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
+  // "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "editor.tabSize": 2,
-  "css.validate": false,
-  "stylelint.enable": true,
-  "scss.validate": false,
-  "stylelint.validate": ["css", "scss", "vue"],
-  "preCI.localCodeCheck.filter.whitePath": "",
-  "preCI.localCodeCheck.filter.skipPath": "",
-  "preCI.localCodeCheck.checkerSet.JS": ["standard_js"],
-  "peacock.remoteColor": "#45e35f",
-  "bk-code-ai.enable": false,
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#71ea85",
-    "activityBar.background": "#71ea85",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#8874ea",
-    "activityBarBadge.foreground": "#15202b",
-    "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#71ea85",
-    "statusBar.background": "#45e35f",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#20d53e",
-    "statusBarItem.remoteBackground": "#45e35f",
-    "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#45e35f",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#45e35f99",
-    "titleBar.inactiveForeground": "#15202b99"
-  },
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git 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
@@ -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/...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
@@ -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/...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
@@ -152,18 +152,33 @@
   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;
     }
     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
@@ -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/...rc/views/db-manage/redis/cluster-shard-update/pages/page1/components/RenderDeployPlan.vue b/...rc/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/...ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/components/Row.vue b/...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
@@ -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,
-    },
   });
 
   // 批量选择