feat(frontend): 工具箱支持资源池协议变更_mysql迁移升级问题处理、mysql新机重建新从机ip重复校验 #8076

# Reviewed, transaction id: 32173

Author: JustaCattt

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

@@ -4135,5 +4135,8 @@
   "退回资源池": "退回资源池",
   "主机回收": "主机回收",
   "版本升级：主从接入层和单节点采用原地升级，存储层小版本升级采用原地升级（注意：暂不支持一主多从），大版本需提供新机迁移方式执行。同一主机所有关联集群将一并同步升级": "版本升级：主从接入层和单节点采用原地升级，存储层小版本升级采用原地升级（注意：暂不支持一主多从），大版本需提供新机迁移方式执行。同一主机所有关联集群将一并同步升级",
+  "集群无只读主机": "集群无只读主机",
+  "IP 重复": "IP 重复",
+  "新只读主机不能为空": "新只读主机不能为空",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-resource-host-column/Index.vue

@@ -87,23 +87,23 @@
 
   const rules = [
     {
-      validator: (value: string) => ipv4.test(value),
       message: t('IP 格式不符合IPv4标准'),
       trigger: 'change',
+      validator: (value: string) => ipv4.test(value),
     },
     {
-      validator: (value: string) => value.split(batchSplitRegex).length <= limit,
       message: t('最多输入n个主机IP', { n: limit }),
       trigger: 'blur',
+      validator: (value: string) => value.split(batchSplitRegex).length <= limit,
     },
     {
-      validator: () => Boolean(modelValue.value.bk_host_id),
       message: t('目标主机不存在'),
       trigger: 'blur',
+      validator: () => Boolean(modelValue.value.bk_host_id),
     },
   ];
 
-  const { run: queryHost, loading } = useRequest(fetchList, {
+  const { loading, run: queryHost } = useRequest(fetchList, {
     manual: true,
     onSuccess: (data) => {
       const [currentHost] = data.results;

dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_UPGRADE/Create.vue

@@ -32,7 +32,8 @@
         <BkRadioGroup
           v-model="formData.roleType"
           style="width: 450px"
-          type="card">
+          type="card"
+          @change="handleChange">
           <BkRadioButton label="haAccessLayer">
             {{ t('主从 - 接入层') }}
           </BkRadioButton>
@@ -101,6 +102,10 @@
     }
     return HaStorageLayerRemote;
   });
+
+  const handleChange = () => {
+    formData.updateType = 'local';
+  };
 </script>
 
 <style lang="less" scoped>

dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_UPGRADE/components/TargetVersionColumn.vue

@@ -80,7 +80,7 @@
               ref="moduleSelectRef"
               is-plain
               :list="moduleSelectList"
-              :model-value="modelValue.target_package"
+              :model-value="modelValue.new_db_module_id"
               :placeholder="t('请选择')"
               :pop-width="240"
               :rules="moduleRules"
@@ -163,9 +163,15 @@
         master_domain: string;
       }[];
     };
+    /**
+     * 代表是否跨版本升级, 默认false
+     */
+    higherMajorVersion?: boolean;
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    higherMajorVersion: false,
+  });
 
   const modelValue = defineModel<{
     charset: string;
@@ -236,6 +242,8 @@
           target_package: lastestVersion.pkg_name,
           target_version: lastestVersion.version,
         };
+
+        fetchModuleList();
       }
     },
   });
@@ -245,35 +253,38 @@
     onSuccess(modules) {
       const currentModule = modules.find((moduleItem) => moduleItem.db_module_id === props.cluster.db_module_id);
       if (currentModule) {
-        const currentCharset = currentModule.db_module_info.conf_items.find(
-          (confItem) => confItem.conf_name === 'charset',
-        )!.conf_value;
-        modelValue.value.charset = currentCharset;
+        modelValue.value.charset = currentModule.db_module_info.conf_items[0]?.conf_value;
+
+        moduleSelectList.value = modules
+          .filter((item) => item.db_module_info.conf_items[1].conf_value === modelValue.value.target_version)
+          .map((item) => ({
+            ...item,
+            id: item.db_module_id,
+          }));
+        modelValue.value.new_db_module_id = moduleSelectList.value[0]?.id;
+        modelValue.value.target_module_name = moduleSelectList.value[0]?.name;
       }
     },
   });
 
-  const fetchModuleList = () => {
+  function fetchModuleList() {
     if (props.cluster) {
       fetchModules({
         bk_biz_id: bizId,
         cluster_type: props.cluster.cluster_type,
       });
     }
-  };
+  }
 
   watch(
     () => props.cluster,
     () => {
       if (props.cluster.id) {
         queryMysqlHigherVersionPkgListRun({
           cluster_id: props.cluster.id,
-          higher_major_version: false,
+          higher_major_version: props.higherMajorVersion,
         });
       }
-      if (props.cluster.cluster_type) {
-        fetchModuleList();
-      }
     },
     {
       immediate: true,
@@ -282,7 +293,6 @@
 
   const handleVersionChange = (value: string) => {
     modelValue.value.target_version = value;
-    modelValue.value.new_db_module_id = '';
     fetchModuleList();
   };
 
@@ -299,6 +309,7 @@
 
   const handleModuleChange = (value: number) => {
     modelValue.value.new_db_module_id = value;
+    modelValue.value.target_module_name = moduleSelectList.value.find((item) => item.id === value)?.name || '';
   };
 
   const handleCreateModule = () => {

dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_UPGRADE/ha-access-layer/Index.vue

@@ -130,11 +130,9 @@
     formData.tableData
       .filter((item) => item.cluster.id)
       .reduce<Record<string, true>>((acc, cur) => {
-        // eslint-disable-next-line no-param-reassign
-        acc[cur.cluster.master_domain] = true;
+        Object.assign(acc[cur.cluster.master_domain], true);
         cur.cluster.related_clusters.forEach((item) => {
-          // eslint-disable-next-line no-param-reassign
-          acc[item.master_domain] = true;
+          Object.assign(acc[item.master_domain], true);
         });
         return acc;
       }, {}),

dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_UPGRADE/ha-storage-layer-local/Index.vue

@@ -138,11 +138,9 @@
     formData.tableData
       .filter((item) => item.cluster.id)
       .reduce<Record<string, true>>((acc, cur) => {
-        // eslint-disable-next-line no-param-reassign
-        acc[cur.cluster.master_domain] = true;
+        Object.assign(acc[cur.cluster.master_domain], true);
         cur.cluster.related_clusters.forEach((item) => {
-          // eslint-disable-next-line no-param-reassign
-          acc[item.master_domain] = true;
+          Object.assign(acc[item.master_domain], true);
         });
         return acc;
       }, {}),

dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_UPGRADE/ha-storage-layer-remote/Index.vue

@@ -48,7 +48,7 @@
             v-if="!item.cluster.id"
             :placeholder="t('自动生成')" />
           <EditableBlock
-            v-else-if="item.cluster.id && !item.cluster.readonly_host.bk_host_id"
+            v-else-if="item.cluster.id && !item.cluster.readonly_host"
             :placeholder="t('无只读主机')" />
           <EditableBlock
             v-else
@@ -57,7 +57,8 @@
         <CurrentVersionColumn :cluster="item.cluster" />
         <TargetVersionColumn
           v-model="item.target_version"
-          :cluster="item.cluster" />
+          :cluster="item.cluster"
+          higher-major-version />
         <MultipleResourceHostColumn
           v-model="item.new_master_slave_host"
           field="new_master_slave_host"
@@ -68,15 +69,9 @@
             for_bizs: [currentBizId, 0],
             resource_types: [DBTypes.MYSQL, 'PUBLIC'],
           }" />
-        <SingleResourceHostColumn
+        <NewReadonlyHostColumn
           v-model="item.new_readonly_host"
-          field="new_readonly_host.ip"
-          :label="t('新只读主机')"
-          :min-width="200"
-          :params="{
-            for_bizs: [currentBizId, 0],
-            resource_types: [DBTypes.MYSQL, 'PUBLIC'],
-          }" />
+          :cluster="item.cluster" />
         <OperationColumn
           v-model:table-data="formData.tableData"
           :create-row-method="createTableRow" />
@@ -120,7 +115,6 @@
   import { DBTypes, TicketTypes } from '@common/const';
 
   import MultipleResourceHostColumn from '@views/db-manage/common/toolbox-field/column/multiple-resource-host-column/Index.vue';
-  import SingleResourceHostColumn from '@views/db-manage/common/toolbox-field/column/single-resource-host-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
   import IgnoreBiz from '@views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue';
   import TicketPayload, {
@@ -131,6 +125,8 @@
   import HaClusterColumn from '../components/HaClusterColumn.vue';
   import TargetVersionColumn from '../components/TargetVersionColumn.vue';
 
+  import NewReadonlyHostColumn from './components/NewReadonlyHostColumn.vue';
+
   interface IHostData {
     bk_biz_id: number;
     bk_cloud_id: number;
@@ -223,11 +219,9 @@
     formData.tableData
       .filter((item) => item.cluster.id)
       .reduce<Record<string, true>>((acc, cur) => {
-        // eslint-disable-next-line no-param-reassign
-        acc[cur.cluster.master_domain] = true;
+        Object.assign(acc[cur.cluster.master_domain], true);
         cur.cluster.related_clusters.forEach((item) => {
-          // eslint-disable-next-line no-param-reassign
-          acc[item.master_domain] = true;
+          Object.assign(acc[item.master_domain], true);
         });
         return acc;
       }, {}),
@@ -330,12 +324,14 @@
             },
             new_db_module_id: item.target_version.new_db_module_id,
             pkg_id: item.target_version.pkg_id,
-            read_only_slaves: [
-              {
-                new_slave: item.new_readonly_host,
-                old_slave: item.cluster.readonly_host,
-              },
-            ],
+            read_only_slaves: item.cluster.readonly_host
+              ? [
+                  {
+                    new_slave: item.new_readonly_host,
+                    old_slave: item.cluster.readonly_host,
+                  },
+                ]
+              : [],
             resource_spec: {
               new_master: {
                 hosts: [item.new_master_slave_host[0]],