fix(frontend): mysql proxy替换重构 #7006

dbm-ui/frontend/src/components/apply-items/BackendQPSSpec.vue

@@ -108,7 +108,7 @@
           :biz-id="bizId"
           :cloud-id="cloudId"
           :cluster-type="ClusterTypes.TENDBCLUSTER"
-          machine-type="remote"
+          machine-type="backend"
           style="width: 314px" />
       </BkFormItem>
       <BkFormItem
@@ -193,7 +193,7 @@
   }
 
   interface Props {
-    clusterType: string,
+    dbType: string,
     machineType: string,
     bizId: number | string,
     cloudId: number | string,
@@ -315,7 +315,7 @@
     }
 
     queryQPSRange({
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: props.dbType,
       spec_machine_type: props.machineType,
       capacity: Number(capacity),
       future_capacity: Number(futureCapacity),
@@ -342,7 +342,7 @@
 
     isLoading.value = true;
     getFilterClusterSpec({
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: props.dbType,
       spec_machine_type: props.machineType,
       capacity: Number(capacity),
       future_capacity: Number(futureCapacity),

dbm-ui/frontend/src/components/apply-items/BackendSpec.vue

@@ -75,7 +75,7 @@
   }
 
   interface Props {
-    clusterType: string,
+    dbType: string,
     machineType: string,
     bizId: number | string,
     cloudId: number | string,
@@ -93,7 +93,7 @@
   const isLoading = ref(false);
   const countMap = shallowRef({} as Record<number, number>)
 
-  const isTendisCache = computed(() => props.clusterType === ClusterTypes.TWEMPROXY_REDIS_INSTANCE);
+  const isTendisCache = computed(() => props.machineType === ClusterTypes.TWEMPROXY_REDIS_INSTANCE);
   const targetCapacityTitle = computed(() => (isTendisCache.value ? t('集群容量需求(内存容量)') : t('集群容量需求(磁盘容量)')));
   const futureCapacityTitle = computed(() => (isTendisCache.value ? t('未来集群容量需求(内存容量)') : t('未来集群容量需求(磁盘容量)')));
 
@@ -203,7 +203,7 @@
 
     isLoading.value = true;
     getFilterClusterSpec({
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: props.dbType,
       spec_machine_type: props.machineType,
       capacity: Number(capacity),
       future_capacity: Number(futureCapacity),

dbm-ui/frontend/src/components/cluster-spec-plan-selector/Index.vue

@@ -82,7 +82,7 @@
           :clearable="false"
           :cloud-id="cloudId"
           :cluster-type="ClusterTypes.TENDBCLUSTER"
-          machine-type="remote"
+          machine-type="backend"
           style="width: 314px" />
       </BkFormItem>
       <BkFormItem

dbm-ui/frontend/src/components/instance-selector/components/common/render-instance/Index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="instance-renderer">
     <div
-      v-for="item in displayList"
+      v-for="item in displayList.slice(0, showAll ? undefined : 3)"
       :key="item.instance"
       class="instance-renderer-item">
       <DbStatus :theme="item.theme" />
       <span>{{ item.instance }}</span>
     </div>
     <BkButton
-      v-if="data.length >= 3"
+      v-if="data.length > 3"
       class="ml-20"
       text
       theme="primary"

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/scaleUpdown.ts

@@ -46,6 +46,7 @@ export async function generateRedisScaleUpdownCloneData(ticketData: TicketModel<
     groupNum: clusterListMap[item.cluster_id].machine_pair_cnt,
     version: item.db_version,
     clusterType: clusters[item.cluster_id].cluster_type as RedisClusterTypes,
+    clusterTypeName: clusters[item.cluster_id].cluster_type_name,
     currentCapacity: {
       used: 1,
       total: clusterListMap[item.cluster_id].cluster_capacity,

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3393,8 +3393,6 @@
     "导出列表内容": "导出列表内容",
     "CPU 内存": "CPU 内存",
     "数量（台）": "数量（台）",
-    "统计视图": "统计视图",
-    "主机列表": "主机列表",
     "库表名支持数字、字母、中划线、下划线，最大35字符": "库表名支持数字、字母、中划线、下划线，最大35字符",
     "不允许输入系统库和特殊库": "不允许输入系统库和特殊库",
     "不能以stage_truncate开头或dba_rollback结尾": "不能以 stage_truncate 开头或 dba_rollback 结尾",
@@ -3526,6 +3524,8 @@
     "副本集/ShardSvr": "副本集/ShardSvr",
     "必须要能除尽总分片数": "必须要能除尽总分片数",
     "变更机器组数": "变更机器组数",
+    "统计视图": "统计视图",
+    "主机列表": "主机列表",
     "DB名称支持通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔": "DB名称支持通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔",
     "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/db-manage/mongodb/capacity-change/pages/page1/components/ChooseDeployPlan.vue

@@ -369,8 +369,7 @@
     if (capacityNeed.value > 0) {
       isTableLoading.value = true;
       const params = {
-        // spec_cluster_type: 'MongoShardedCluster',
-        spec_cluster_type: props.data.clusterType,
+        spec_cluster_type: 'mongodb',
         spec_machine_type: 'mongodb',
         capacity: capacityNeed.value,
         shard_num: props.data.shardNum,

dbm-ui/frontend/src/views/db-manage/mongodb/components/MongoConfigSpec.vue

@@ -71,7 +71,7 @@
   import { getFilterClusterSpec } from '@services/source/dbresourceSpec';
 
   import {
-    ClusterTypes,
+    DBTypes,
     MachineTypes,
   } from '@common/const';
 
@@ -98,7 +98,7 @@
     shardNodeCount?: number,
     isApply?: boolean
     originSpecId?: number | string
-    clusterType: ClusterTypes.MONGO_REPLICA_SET | ClusterTypes.MONGO_SHARED_CLUSTER
+    // clusterType: ClusterTypes.MONGO_REPLICA_SET | ClusterTypes.MONGO_SHARED_CLUSTER
   }
 
   interface Emits {
@@ -339,7 +339,7 @@
     }
 
     getFilterClusterSpecRun({
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: DBTypes.MONGODB,
       spec_machine_type: MachineTypes.MONGODB,
       capacity: Number(modelValue.value.capacity),
       shard_num: props.shardNum,

dbm-ui/frontend/src/views/db-manage/mongodb/db-replace/pages/page1/components/Row.vue

@@ -175,7 +175,7 @@
     ([clusterType, machineType]) => {
       if (clusterType && machineType) {
         fetchResourceSpecList({
-          spec_cluster_type: clusterType,
+          spec_cluster_type: 'mongodb',
           spec_machine_type: machineType,
           limit: -1,
           offset: 0,

dbm-ui/frontend/src/views/db-manage/mongodb/db-structure/pages/page1/components/RenderTargetSpec.vue

@@ -23,7 +23,7 @@
         v-model="moduleValue"
         :biz-id="3"
         :cloud-id="0"
-        :cluster-type="clusterType"
+        cluster-type="mongodb"
         machine-type="mongodb"
         :show-refresh="false" />
     </div>

dbm-ui/frontend/src/views/db-manage/mongodb/proxy-scale-up/pages/page1/Index.vue

@@ -117,7 +117,7 @@
   useRequest(getResourceSpecList, {
     defaultParams: [
       {
-        spec_cluster_type: 'MongoShardedCluster',
+        spec_cluster_type: 'mongodb',
         spec_machine_type: 'mongos',
         limit: -1,
         offset: 0,

dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-apply/Index.vue

@@ -126,7 +126,7 @@
               v-model="formData.details.resource_spec.spec_id"
               :biz-id="formData.bk_biz_id"
               :cloud-id="formData.details.bk_cloud_id"
-              :cluster-type="ClusterTypes.MONGO_REPLICA_SET"
+              :cluster-type="DBTypes.MONGODB"
               :machine-type="MachineTypes.MONGODB"
               style="width: 314px" />
             <span class="input-desc ml-32">

dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-apply/Index.vue

@@ -86,7 +86,7 @@
                   v-model="formData.details.resource_spec.mongo_config.spec_id"
                   :biz-id="formData.bk_biz_id"
                   :cloud-id="formData.details.bk_cloud_id"
-                  :cluster-type="ClusterTypes.MONGO_SHARED_CLUSTER"
+                  :cluster-type="DBTypes.MONGODB"
                   :machine-type="MachineTypes.MONGO_CONFIG"
                   style="width: 314px" />
               </BkFormItem>
@@ -115,7 +115,7 @@
                   v-model="formData.details.resource_spec.mongos.spec_id"
                   :biz-id="formData.bk_biz_id"
                   :cloud-id="formData.details.bk_cloud_id"
-                  :cluster-type="ClusterTypes.MONGO_SHARED_CLUSTER"
+                  :cluster-type="DBTypes.MONGODB"
                   :machine-type="MachineTypes.MONGOS"
                   style="width: 314px" />
               </BkFormItem>

dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue

@@ -282,8 +282,8 @@
                   v-model="formdata.details.resource_spec.single.spec_id"
                   :biz-id="formdata.bk_biz_id"
                   :cloud-id="formdata.details.bk_cloud_id"
-                  :cluster-type="ClusterTypes.TENDBSINGLE"
-                  machine-type="single"
+                  cluster-type="mysql"
+                  machine-type="backend"
                   style="width: 435px" />
               </BkFormItem>
               <template v-else>
@@ -296,7 +296,7 @@
                     v-model="formdata.details.resource_spec.proxy.spec_id"
                     :biz-id="formdata.bk_biz_id"
                     :cloud-id="formdata.details.bk_cloud_id"
-                    :cluster-type="ClusterTypes.TENDBHA"
+                    cluster-type="mysql"
                     machine-type="proxy"
                     style="width: 435px" />
                 </BkFormItem>
@@ -309,7 +309,7 @@
                     v-model="formdata.details.resource_spec.backend.spec_id"
                     :biz-id="formdata.bk_biz_id"
                     :cloud-id="formdata.details.bk_cloud_id"
-                    :cluster-type="ClusterTypes.TENDBHA"
+                    cluster-type="mysql"
                     machine-type="backend"
                     style="width: 435px" />
                 </BkFormItem>
@@ -387,7 +387,7 @@
 
   import { useApplyBase, useTicketCloneInfo } from '@hooks';
 
-  import { ClusterTypes, mysqlType, type MysqlTypeString, TicketTypes } from '@common/const';
+  import { mysqlType, type MysqlTypeString, TicketTypes } from '@common/const';
   import { OSTypes } from '@common/const';
   import { nameRegx } from '@common/regex';
 

dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue

@@ -16,8 +16,9 @@
     <FixedColumn fixed="left">
       <RenderOriginalProxyHost
         ref="originRef"
-        :model-value="data.originProxy.ip"
-        @input-finish="handleOriginProxyInputFinish" />
+        :model-value="localIp"
+        @input-finish="handleOriginProxyInputFinish"
+        @update:model-value="handleOriginProxyInput" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderRelatedInstances
@@ -28,7 +29,7 @@
       <RenderTargetProxy
         ref="targetRef"
         :cloud-id="data.originProxy.bk_cloud_id"
-        :disabled="!data.originProxy.ip"
+        :disabled="!localIp"
         :model-value="data.targetProxy"
         :target-ip="data.originProxy.ip" />
     </td>
@@ -136,8 +137,23 @@
   const relatedInstancesRef = ref<InstanceType<typeof RenderRelatedInstances>>();
   const targetRef = ref<InstanceType<typeof RenderTargetProxy>>();
 
+  const localIp = ref('');
   const localRelatedInstances = ref<IDataRow['relatedInstances']>([]);
 
+  watch(
+    () => props.data,
+    () => {
+      localIp.value = props.data.originProxy.ip;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleOriginProxyInput = (value: string) => {
+    localIp.value = value;
+  };
+
   const handleOriginProxyInputFinish = (value: IDataRow['relatedInstances']) => {
     localRelatedInstances.value = value;
   };

dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderOriginalProxyHost.vue

@@ -22,11 +22,12 @@
   const proxyHostMemo: { [key: string]: Record<string, boolean> } = {};
 
   interface Props {
-    modelValue?: string;
+    modelValue: string;
   }
 
   interface Emits {
     (e: 'inputFinish', relatedInstances: IDataRow['relatedInstances']): void;
+    (e: 'update:modelValue', value: string): void;
   }
 
   interface Exposes {
@@ -95,6 +96,7 @@
             cluster_id: item.cluster_id,
             instance: item.instance_address,
           }));
+          emits('update:modelValue', currentData.ip);
           emits('inputFinish', relatedInstances);
           return true;
         }),

dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue

@@ -16,8 +16,9 @@
     <FixedColumn fixed="left">
       <RenderOriginalProxyInst
         ref="originRef"
-        :model-value="data.originProxy.instance_address"
-        @input-finish="handleOriginProxyInputFinish" />
+        :model-value="localInstanceAddress"
+        @input-finish="handleOriginProxyInputFinish"
+        @update:model-value="handleOriginProxyInput" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderRelatedClusters
@@ -28,7 +29,7 @@
       <RenderTargetProxy
         ref="targetRef"
         :cloud-id="data.originProxy.bk_cloud_id"
-        :disabled="!data.originProxy.instance_address"
+        :disabled="!localInstanceAddress"
         :model-value="data.targetProxy"
         :target-ip="data.originProxy.ip" />
     </td>
@@ -137,8 +138,23 @@
   const relatedClustersRef = ref<InstanceType<typeof RenderRelatedClusters>>();
   const targetRef = ref<InstanceType<typeof RenderTargetProxy>>();
 
+  const localInstanceAddress = ref('');
   const localRelatedClusters = ref<IDataRow['relatedClusters']>([]);
 
+  watch(
+    () => props.data,
+    () => {
+      localInstanceAddress.value = props.data.originProxy.instance_address;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleOriginProxyInput = (value: string) => {
+    localInstanceAddress.value = value;
+  };
+
   const handleOriginProxyInputFinish = (value: IDataRow['relatedClusters']) => {
     localRelatedClusters.value = value;
   };

dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderOriginalProxyInst.vue

@@ -22,11 +22,12 @@
   const instanceAddreddMemo: { [key: string]: Record<string, boolean> } = {};
 
   interface Props {
-    modelValue?: string;
+    modelValue: string;
   }
 
   interface Emits {
     (e: 'inputFinish', relatedClusters: IDataRow['relatedClusters']): void;
+    (e: 'update:modelValue', value: string): void;
   }
 
   interface Exposes {
@@ -96,6 +97,7 @@
             cluster_id: item.id,
             domain: item.master_domain,
           }));
+          emits('update:modelValue', currentData.instance_address);
           emits('inputFinish', relatedClusters);
           return true;
         }),

dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue

@@ -145,8 +145,8 @@
               v-model="formData.details.resource_spec.spec_id"
               :biz-id="formData.bk_biz_id"
               :cloud-id="formData.details.bk_cloud_id"
-              :cluster-type="ClusterTypes.REDIS_INSTANCE"
-              :machine-type="MachineTypes.TENDISCACHE"
+              :cluster-type="DBTypes.REDIS"
+              :machine-type="ClusterTypes.REDIS_INSTANCE"
               style="width: 314px" />
           </BkFormItem>
           <BkFormItem
@@ -212,7 +212,7 @@
 
   import { useApplyBase } from '@hooks';
 
-  import { ClusterTypes, MachineTypes, TicketTypes } from '@common/const';
+  import { ClusterTypes, DBTypes, TicketTypes } from '@common/const';
 
   import AffinityItem from '@components/apply-items/AffinityItem.vue';
   import BusinessItems from '@components/apply-items/BusinessItems.vue';