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

zhangzhw8 · Oct 22, 2024 · 7eadc9b · 7eadc9b
1 parent c8e2737
commit 7eadc9b
Show file tree

Hide file tree

Showing 25 changed files with 1,076 additions and 404 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
@@ -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: {

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,

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3466,5 +3466,6 @@
     "整型(int)": "整型(int)",
     "整型(bigint)": "整型(bigint)",
     "新proxy主机": "新proxy主机",
+    "必须要能除尽总分片数": "必须要能除尽总分片数",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis.ts
@@ -286,7 +286,16 @@ export interface RedisDetails extends DetailBase {
       affinity: string;
       count: number;
       spec_id: number;
-      spec_info: SpecInfo;
+      spec_info: {
+        spec_name: string;
+        machine_pair: number;
+        cluster_shard_num: number;
+        cluster_capacity: number;
+        qps?: {
+          max: number;
+          min: number;
+        };
+      };
       location_spec: {
         city: string;
         sub_zone_ids: number[];

diff --git a/dbm-ui/frontend/src/views/db-manage/common/apply-items/SpecSelector.vue b/dbm-ui/frontend/src/views/db-manage/common/apply-items/SpecSelector.vue
@@ -94,10 +94,6 @@
     count?: number;
   }
 
-  interface Emits {
-    (e: 'update:modelValue', value: number | string): void;
-  }
-
   interface Props {
     modelValue: number | string;
     clusterType: string;
@@ -109,6 +105,16 @@
     city?: string;
   }
 
+  interface Emits {
+    (e: 'update:modelValue', value: number | string): void;
+  }
+
+  interface Expose {
+    getData: () => Pick<ResourceSpecModel, 'spec_name' | 'cpu' | 'mem' | 'storage_spec' | 'qps'> & {
+      instance_num?: number;
+    };
+  }
+
   const props = withDefaults(defineProps<Props>(), {
     showRefresh: true,
     clearable: true,
@@ -202,7 +208,7 @@
     { immediate: true, deep: true },
   );
 
-  defineExpose({
+  defineExpose<Expose>({
     getData() {
       const item = list.value.find((item) => item.spec_id === props.modelValue);
       if (item) {
@@ -216,7 +222,7 @@
           qps: item.qps,
         };
       }
-      return {};
+      return {} as ReturnType<Expose['getData']>;
     },
   });
 </script>

diff --git a/dbm-ui/frontend/src/views/db-manage/common/apply-schema/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/apply-schema/Index.vue
@@ -0,0 +1,41 @@
+<template>
+  <DbFormItem
+    :label="t('部署方案选择')"
+    required>
+    <BkRadioGroup
+      v-model="modelValue"
+      style="width: 314px">
+      <BkRadioButton
+        :label="APPLY_SCHEME.AUTO"
+        style="flex: 1">
+        {{ t('自动推荐方案') }}
+        <BkTag
+          size="small"
+          theme="success">
+          {{ t('实验') }}
+        </BkTag>
+      </BkRadioButton>
+      <BkRadioButton
+        :label="APPLY_SCHEME.CUSTOM"
+        style="flex: 1">
+        {{ t('自定义方案') }}
+      </BkRadioButton>
+    </BkRadioGroup>
+  </DbFormItem>
+</template>
+
+<script lang="ts">
+  export enum APPLY_SCHEME {
+    AUTO = 'auto',
+    CUSTOM = 'custom',
+  }
+</script>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<APPLY_SCHEME>({
+    required: true,
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue b/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue
@@ -16,8 +16,8 @@
     <div class="apply-instance">
       <DbForm
         ref="formRef"
-        auto-label-width
         class="apply-form"
+        :label-width="200"
         :model="state.formdata"
         :rules="rules">
         <DbCard :title="t('业务信息')">
@@ -378,7 +378,6 @@
   import IpSelector from '@components/ip-selector/IpSelector.vue';
 
   import AffinityItem from '@views/db-manage/common/apply-items/AffinityItem.vue';
-  import BackendQPSSpec from '@views/db-manage/common/apply-items/BackendSpec.vue';
   import BusinessItems from '@views/db-manage/common/apply-items/BusinessItems.vue';
   import CloudItem from '@views/db-manage/common/apply-items/CloudItem.vue';
   import ClusterAlias from '@views/db-manage/common/apply-items/ClusterAlias.vue';
@@ -391,6 +390,7 @@
   import { generateId } from '@utils';
 
   import { redisClusterTypes, redisIpSources } from './common/const';
+  import BackendQPSSpec from './components/backend-spec/Index.vue';
   import RecommendArchitectrue from './components/recommend-architectrue/Index.vue';
 
   type CapSepcs = ServiceReturnType<typeof getCapSpecs>[number];
@@ -452,7 +452,7 @@
           count: 2,
         },
         backend_group: {
-          count: 0,
+          count: 1,
           spec_id: '' as number | '',
           capacity: '' as number | string,
           future_capacity: '' as number | string,
@@ -614,7 +614,7 @@
     state.formdata.details.resource_spec.proxy.spec_id = '';
     state.formdata.details.resource_spec.backend_group = {
       ...state.formdata.details.resource_spec.backend_group,
-      count: 0,
+      count: 1,
       spec_id: '',
       capacity: '',
       future_capacity: '',

diff --git a/...manage/common/apply-items/BackendSpec.vue → ...s/apply/components/backend-spec/Index.vue b/...manage/common/apply-items/BackendSpec.vue → ...s/apply/components/backend-spec/Index.vue
@@ -1,58 +1,69 @@
 <template>
   <div class="redis-backend-spec">
-    <BkFormItem
-      :label="targetCapacityTitle"
-      property="details.resource_spec.backend_group.capacity"
-      required>
-      <BkInput
-        :min="1"
-        :model-value="modelValue.capacity"
-        style="width: 314px"
-        type="number"
-        @change="handleChangeCapacity" />
-      <span class="input-desc">G</span>
-    </BkFormItem>
-    <BkFormItem
-      :label="futureCapacityTitle"
-      property="details.resource_spec.backend_group.future_capacity"
-      required>
-      <BkInput
-        :min="Number(modelValue.capacity)"
-        :model-value="modelValue.future_capacity"
-        style="width: 314px"
-        type="number"
-        @change="handleChangeFutureCapacity" />
-      <span class="input-desc">G</span>
-    </BkFormItem>
-    <BkFormItem
-      ref="specRef"
-      :label="t('集群部署方案')"
-      property="details.resource_spec.backend_group.spec_id"
-      required>
-      <DbOriginalTable
-        v-bkloading="{ loading: isLoading }"
-        class="custom-edit-table"
-        :columns="columns"
-        :data="specs"
-        @row-click="handleRowClick">
-        <template #empty>
-          <p
-            v-if="!modelValue.capacity || !modelValue.future_capacity"
-            style="width: 100%; line-height: 128px; text-align: center">
-            <DbIcon
-              class="mr-4"
-              type="attention" />
-            <span>{{ t('请先设置容量') }}</span>
-          </p>
-          <BkException
-            v-else
-            :description="t('无匹配的资源规格_请先修改容量设置')"
-            scene="part"
-            style="font-size: 12px"
-            type="empty" />
-        </template>
-      </DbOriginalTable>
-    </BkFormItem>
+    <ApplySchema v-model="applySchema" />
+    <template v-if="applySchema === APPLY_SCHEME.AUTO">
+      <BkFormItem
+        :label="targetCapacityTitle"
+        property="details.resource_spec.backend_group.capacity"
+        required>
+        <BkInput
+          :min="1"
+          :model-value="modelValue.capacity"
+          style="width: 314px"
+          type="number"
+          @change="handleChangeCapacity" />
+        <span class="input-desc">G</span>
+      </BkFormItem>
+      <BkFormItem
+        :label="futureCapacityTitle"
+        property="details.resource_spec.backend_group.future_capacity"
+        required>
+        <BkInput
+          :min="Number(modelValue.capacity)"
+          :model-value="modelValue.future_capacity"
+          style="width: 314px"
+          type="number"
+          @change="handleChangeFutureCapacity" />
+        <span class="input-desc">G</span>
+      </BkFormItem>
+      <BkFormItem
+        ref="specRef"
+        :label="t('集群部署方案')"
+        property="details.resource_spec.backend_group.spec_id"
+        required>
+        <DbOriginalTable
+          v-bkloading="{ loading: isLoading }"
+          class="custom-edit-table"
+          :columns="columns"
+          :data="specs"
+          @row-click="handleRowClick">
+          <template #empty>
+            <p
+              v-if="!modelValue.capacity || !modelValue.future_capacity"
+              style="width: 100%; line-height: 128px; text-align: center">
+              <DbIcon
+                class="mr-4"
+                type="attention" />
+              <span>{{ t('请先设置容量') }}</span>
+            </p>
+            <BkException
+              v-else
+              :description="t('无匹配的资源规格_请先修改容量设置')"
+              scene="part"
+              style="font-size: 12px"
+              type="empty" />
+          </template>
+        </DbOriginalTable>
+      </BkFormItem>
+    </template>
+    <CustomSchema
+      v-else
+      ref="customSchemaRef"
+      v-model="modelValue"
+      :biz-id="bizId"
+      :cloud-id="cloudId"
+      :cluster-type="clusterType"
+      :machine-type="machineType" />
   </div>
 </template>
 
@@ -68,8 +79,13 @@
 
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
+  import ApplySchema, { APPLY_SCHEME } from '@views/db-manage/common/apply-schema/Index.vue';
+
+  import CustomSchema from './components/CustomSchema.vue';
+
   interface ModelValue {
     spec_id: number | '',
+    count: number,
     capacity: number | string,
     future_capacity: number | string,
   }
@@ -86,10 +102,12 @@
 
   const { t } = useI18n();
 
-
   const specRef = ref();
-  const specs = shallowRef<ClusterSpecModel[]>([]);
+  const customSchemaRef = ref<InstanceType<typeof CustomSchema>>()
   const isLoading = ref(false);
+  const applySchema = ref(APPLY_SCHEME.AUTO)
+
+  const specs = shallowRef<ClusterSpecModel[]>([]);
   const countMap = shallowRef({} as Record<number, number>)
 
   const isTendisCache = computed(() => props.clusterType === ClusterTypes.TWEMPROXY_REDIS_INSTANCE);
@@ -154,15 +172,12 @@
 
   watch(() => modelValue.value.spec_id, () => {
     if (modelValue.value.spec_id) {
-      specRef.value.clearValidate();
+      specRef.value?.clearValidate();
     }
   });
 
-  watch([
-    () => props.bizId,
-    () => props.cloudId,
-    specs,
-  ], () => {
+  watch(
+    () => [props.bizId, props.cloudId, specs], () => {
     if (
       typeof props.bizId === 'number'
       && props.bizId > 0
@@ -173,10 +188,7 @@
     }
   }, { immediate: true, deep: true });
 
-  watch([
-    () => modelValue.value.capacity,
-    () => modelValue.value.future_capacity,
-  ], ([capacityValue, futureCapacityValue]) => {
+  watch(() => [modelValue.value.capacity, modelValue.value.future_capacity], ([capacityValue, futureCapacityValue]) => {
     if (capacityValue === '' || futureCapacityValue === '') {
       resetSlider();
     } else {
@@ -266,8 +278,21 @@
 
   defineExpose({
     getData() {
-      const item = specs.value.find(item => item.spec_id === Number(modelValue.value.spec_id));
-      return item ?? {};
+      if (applySchema.value === APPLY_SCHEME.AUTO) {
+        const item = specs.value.find(item => item.spec_id === Number(modelValue.value.spec_id));
+        if (item) {
+          return {
+            spec_name: item.spec_name,
+            machine_pair: item.machine_pair,
+            cluster_shard_num: item.cluster_shard_num,
+            cluster_capacity: item.cluster_capacity,
+            qps: item.qps
+          }
+        }
+        return {}
+      }
+
+      return customSchemaRef.value!.getInfo()
     },
   });
 </script>