feat(frontend): 工具箱支持资源池协议变更_验收问题处理 #8076

# Reviewed, transaction id: 32593

Author: JustaCattt

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

@@ -4138,5 +4138,6 @@
   "集群无只读主机": "集群无只读主机",
   "IP 重复": "IP 重复",
   "新只读主机不能为空": "新只读主机不能为空",
+  "添加资源标签": "添加资源标签",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/services/source/mysqlCluster.ts

@@ -21,7 +21,7 @@ const getRootPath = () => `/apis/mysql/bizs/${window.PROJECT_CONFIG.BIZ_ID}/clus
 /**
  * 通过集群查询同机关联集群
  */
-export function findRelatedClustersByClusterIds(params: { bk_biz_id: number; cluster_ids: number[] }) {
+export function findRelatedClustersByClusterIds(params: { bk_biz_id: number; cluster_ids: number[]; role?: string }) {
   return http.post<
     Array<{
       cluster_id: number;

dbm-ui/frontend/src/types/biz-components.d.ts

@@ -31,8 +31,6 @@ declare module 'vue' {
     FunController: typeof import('@components/function-controller/FunController.vue').default;
     MoreActionExtend: typeof import('@components/more-action-extend/Index.vue').default;
     OperationColumn: typeof import('@views/db-manage/common/toolbox-field/column/operation-column/Index.vue').default;
-    OperationColumn: typeof import('@views/db-manage/common/toolbox-field/column/operation-column/Index.vue').default;
-    OperationRow: typeof import('@views/db-manage/common/toolbox-field/row/operation-row/Index.vue').default;
     ScrollFaker: typeof import('@components/scroll-faker/Index.vue').default;
     SmartAction: typeof import('@components/smart-action/Index.vue').default;
   }

dbm-ui/frontend/src/utils/createToolboxRoute.ts

@@ -6,16 +6,16 @@ export function createToolboxRoute(dbType: DBTypes) {
   const createRouteItem = (
     ticketType: TicketTypes,
     navName: string,
-    meta: { navName?: string; fullscreen?: boolean; dbConsole?: string } = {},
+    meta: { dbConsole?: string; fullscreen?: boolean; navName?: string } = {},
   ) => ({
-    name: ticketType,
-    path: `${ticketType}/:page?`,
+    component: () => import(`@views/db-manage/${dbToolbox}/${ticketType}/Index.vue`),
     meta: {
-      navName,
       fullscreen: true,
+      navName,
       ...meta,
     },
-    component: () => import(`@views/db-manage/${dbToolbox}/${ticketType}/Index.vue`),
+    name: ticketType,
+    path: `${ticketType}/:page?`,
   });
 
   return {

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

@@ -31,11 +31,12 @@
           :key="index">
           <WithRelatedClustersColumn
             v-model="item.cluster"
+            role="proxy"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
           <SingleResourceHostColumn
-            v-model="item.proxy"
-            field="proxy.ip"
+            v-model="item.new_proxy"
+            field="new_proxy.ip"
             :label="t('新Proxy主机')"
             :params="{
               for_bizs: [currentBizId, 0],
@@ -94,7 +95,7 @@
         master_domain: string;
       }[];
     };
-    proxy: {
+    new_proxy: {
       bk_biz_id: number;
       bk_cloud_id: number;
       bk_host_id: number;
@@ -113,7 +114,7 @@
       master_domain: '',
       related_clusters: [],
     },
-    proxy: data.proxy || {
+    new_proxy: data.new_proxy || {
       bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
       bk_cloud_id: 0,
       bk_host_id: 0,
@@ -131,47 +132,76 @@
   const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
   // 集群域名到自身及其下集群id、域名映射
   const clusterMap = computed(() => {
-    const result = selected.value.reduce<Record<string, { ids: number[]; domains: string[] }>>((acc, cur) => {
-      acc[cur.master_domain] = {
-        ids: [cur.id, ...cur.related_clusters.map((item) => item.id)],
-        domains: [cur.master_domain, ...cur.related_clusters.map((item) => item.master_domain)],
-      };
+    const result = selected.value.reduce<Record<string, { domains: string[]; ids: number[] }>>((acc, cur) => {
+      Object.assign(acc, {
+        [cur.master_domain]: {
+          domains: [cur.master_domain, ...cur.related_clusters.map((item) => item.master_domain)],
+          ids: [cur.id, ...cur.related_clusters.map((item) => item.id)],
+        },
+      });
       return acc;
     }, {});
     return result;
   });
+  const newProxyCounter = computed(() => {
+    return formData.tableData.reduce(
+      (result, item) => {
+        Object.assign(result, {
+          [item.new_proxy.ip]: (result[item.new_proxy.ip] || 0) + 1,
+        });
+        return result;
+      },
+      {} as Record<string, number>,
+    );
+  });
 
   const rules = {
     'cluster.master_domain': [
       {
+        message: '',
+        trigger: 'blur',
         validator: (value: string) => {
           const repeatTarget = Object.keys(clusterMap.value).find(
             (domain) => clusterMap.value[domain].domains.includes(value) && domain !== value,
           );
           return repeatTarget ? t('目标集群是集群target的关联集群_请勿重复添加', { target: repeatTarget }) : true;
         },
-        message: '',
+      },
+    ],
+    'new_proxy.ip': [
+      {
+        message: t('IP 重复'),
         trigger: 'blur',
+        validator: (value: string, rowData: RowData) => {
+          return newProxyCounter.value[rowData.new_proxy.ip] <= 1;
+        },
+      },
+      {
+        message: t('IP 重复'),
+        trigger: 'change',
+        validator: (value: string, rowData: RowData) => {
+          return newProxyCounter.value[rowData.new_proxy.ip] <= 1;
+        },
       },
     ],
   };
 
-  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
-    ip_source: 'resource_pool';
+  const { loading: isSubmitting, run: createTicketRun } = useCreateTicket<{
     infos: {
       cluster_ids: number[];
       resource_spec: {
         new_proxy: {
-          spec_id: number;
           hosts: {
             bk_biz_id: number;
             bk_cloud_id: number;
             bk_host_id: number;
             ip: string;
           }[];
+          spec_id: number;
         };
       };
     }[];
+    ip_source: 'resource_pool';
   }>(TicketTypes.MYSQL_PROXY_ADD);
 
   const handleSubmit = async () => {
@@ -181,16 +211,16 @@
     }
     createTicketRun({
       details: {
-        ip_source: 'resource_pool',
         infos: formData.tableData.map((item) => ({
           cluster_ids: clusterMap.value[item.cluster.master_domain].ids,
           resource_spec: {
             new_proxy: {
+              hosts: [item.new_proxy],
               spec_id: 0,
-              hosts: [item.proxy],
             },
           },
         })),
+        ip_source: 'resource_pool',
       },
       remark: formData.remark,
     });

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

@@ -27,14 +27,14 @@
           :desc="t('只替换目标实例')"
           icon="rebuild"
           :title="t('实例替换')"
-          :true-value="ProxyReplaceTypes.INSTANCE_REPLACE" />
+          true-value="INSTANCE_REPLACE" />
         <CardCheckbox
           v-model="replaceType"
           class="ml-8"
           :desc="t('主机关联的所有实例一并替换')"
           icon="host"
           :title="t('整机替换')"
-          :true-value="ProxyReplaceTypes.HOST_REPLACE" />
+          true-value="HOST_REPLACE" />
       </div>
     </div>
     <BkForm
@@ -86,40 +86,42 @@
     createTickePayload,
   } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
-  import HostTable from './components/HostTable.vue';
-  import InstanceTable from './components/InstanceTable.vue';
-  import { ProxyReplaceTypes } from './types';
+  import HOST_REPLACE from './components/HOST_REPLACE/Index.vue';
+  import INSTANCE_REPLACE from './components/INSTANCE_REPLACE/Index.vue';
 
   const { t } = useI18n();
   const tableRef = useTemplateRef('table');
 
   const defaultData = () => ({
-    tableData: [],
     force: false,
+    tableData: [],
     ...createTickePayload(),
   });
 
   const tableComponentMap = {
-    [ProxyReplaceTypes.INSTANCE_REPLACE]: InstanceTable,
-    [ProxyReplaceTypes.HOST_REPLACE]: HostTable,
+    HOST_REPLACE,
+    INSTANCE_REPLACE,
   };
 
-  const replaceType = ref(ProxyReplaceTypes.INSTANCE_REPLACE);
+  const replaceType = ref<'INSTANCE_REPLACE' | 'HOST_REPLACE'>('INSTANCE_REPLACE');
   const formData = reactive(defaultData());
 
-  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+  const { loading: isSubmitting, run: createTicketRun } = useCreateTicket<{
     force: boolean;
-    ip_source: 'resource_pool';
     infos: {
       cluster_ids: number[];
+      display_info: {
+        related_clusters: string[];
+        type: typeof replaceType.value;
+      };
       old_nodes: {
         origin_proxy: {
           bk_biz_id: number;
           bk_cloud_id: number;
           bk_host_id: number;
+          instance_address?: string;
           ip: string;
           port?: number;
-          instance_address?: string;
         }[];
       };
       resource_spec: {
@@ -132,11 +134,8 @@
           }[];
         };
       };
-      display_info: {
-        type: ProxyReplaceTypes;
-        related_clusters: string[];
-      };
     }[];
+    ip_source: 'resource_pool';
   }>(TicketTypes.MYSQL_PROXY_SWITCH);
 
   const handleSubmit = async () => {
@@ -145,8 +144,8 @@
       createTicketRun({
         details: {
           force: formData.force,
-          ip_source: 'resource_pool',
           infos,
+          ip_source: 'resource_pool',
         },
         remark: formData.remark,
       });