fix(frontend): mysql替换proxy、新增proxy集群id聚合 #8206

# Reviewed, transaction id: 24910
TencentBlueKing · Nov 27, 2024 · a5dc8c9 · a5dc8c9
1 parent 099d2df
commit a5dc8c9
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 21 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3675,5 +3675,6 @@
   "默认协作人": "默认协作人",
   "冷/热节点": "冷/热节点",
   "冷_热节点规格": "冷_热节点规格",
+  "同主机关联的其他集群，勾选后一并添加": "同主机关联的其他集群，勾选后一并添加",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -71,6 +71,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue
@@ -121,7 +121,9 @@
   }
 
   interface Exposes {
-    getValue: () => Array<number>;
+    getValue: () => {
+      cluster_ids: number[];
+    };
   }
 
   interface IClusterData {

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/Index.vue
@@ -202,7 +202,25 @@
   const handleSubmit = async () => {
     try {
       isSubmitting.value = true;
-      const infos = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
+      const rows = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
+      // 新ip一致，聚合clusterid
+      const clusterIdsSet: Record<string, Set<number>> = {};
+      rows.forEach(
+        (item: {
+          cluster_ids: number[];
+          new_proxy: {
+            ip: string;
+          };
+        }) => {
+          const key = item.new_proxy.ip;
+          clusterIdsSet[key] = clusterIdsSet[key] || new Set();
+          item.cluster_ids.forEach((id) => clusterIdsSet[key].add(id));
+        },
+      );
+      const infos = rows.map((item) => ({
+        ...item,
+        cluster_ids: Array.from(clusterIdsSet[item.new_proxy.ip]),
+      }));
       await createTicket({
         ticket_type: 'MYSQL_PROXY_ADD',
         remark: remark.value,

diff --git a/...end/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/RenderProxy.vue b/...end/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/RenderProxy.vue
@@ -43,7 +43,14 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<Array<string>>;
+    getValue: () => Promise<{
+      new_proxy: {
+        bk_biz_id: number;
+        bk_host_id: number;
+        bk_cloud_id: number;
+        ip: string;
+      };
+    }>;
   }
 
   const props = defineProps<Props>();

diff --git a/...ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/Row.vue b/...ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/Row.vue
@@ -85,7 +85,15 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<any>;
+    getValue: () => Promise<{
+      cluster_ids: number[];
+      new_proxy: {
+        bk_biz_id: number;
+        bk_host_id: number;
+        bk_cloud_id: number;
+        ip: string;
+      };
+    }>;
   }
 
   const props = defineProps<Props>();
@@ -128,7 +136,7 @@
     emits('remove');
   };
 
-  const getRowData = () => [clusterRef.value.getValue(), proxyRef.value.getValue()];
+  const getRowData = () => [clusterRef.value!.getValue(), proxyRef.value!.getValue()];
 
   const handleClone = () => {
     Promise.allSettled(getRowData()).then((rowData) => {

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/Index.vue
@@ -114,7 +114,38 @@
   const handleSubmit = async () => {
     try {
       isSubmitting.value = true;
-      const infos = await tableRef.value!.getValue();
+      const rows = await tableRef.value!.getValue();
+      // 原ip和新ip一致，聚合clusterid
+      const clusterIdsSet: Record<string, Set<number>> = {};
+      rows.forEach(
+        (item: {
+          cluster_ids: number[];
+          origin_proxy: {
+            ip: string;
+          };
+          target_proxy: {
+            ip: string;
+          };
+        }) => {
+          const key = `${item.origin_proxy.ip}#${item.target_proxy.ip}`;
+          clusterIdsSet[key] = clusterIdsSet[key] || new Set();
+          item.cluster_ids.forEach((id) => clusterIdsSet[key].add(id));
+        },
+      );
+      const infos = rows.map(
+        (item: {
+          cluster_ids: number[];
+          origin_proxy: {
+            ip: string;
+          };
+          target_proxy: {
+            ip: string;
+          };
+        }) => ({
+          ...item,
+          cluster_ids: Array.from(clusterIdsSet[`${item.origin_proxy.ip}#${item.target_proxy.ip}`]),
+        }),
+      );
       await createTicket({
         bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         ticket_type: TicketTypes.MYSQL_PROXY_SWITCH,

diff --git a/...tend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue b/...tend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue
@@ -52,7 +52,18 @@
   import RenderDataRow, { createRowData, type IDataRow } from './components/RenderData/Row.vue';
 
   interface Exposes {
-    getValue(): Promise<any>;
+    getValue(): Promise<
+      {
+        cluster_ids: number[];
+        origin_proxy: IDataRow['originProxy'];
+        target_proxy: IDataRow['targetProxy'];
+        display_info: {
+          type: string;
+          related_instances: string[];
+          related_clusters: string[];
+        };
+      }[]
+    >;
     reset(): void;
   }
 

diff --git a/...nage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue b/...nage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue
@@ -87,6 +87,11 @@
       cluster_ids: number[];
       origin_proxy: IDataRow['originProxy'];
       target_proxy: IDataRow['targetProxy'];
+      display_info: {
+        type: string;
+        related_instances: string[];
+        related_clusters: string[];
+      };
     }>;
   }
 

diff --git a/.../src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue b/.../src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue
@@ -52,7 +52,17 @@
   import RenderRow, { createRowData, type IDataRow } from './components/RenderData/Row.vue';
 
   interface Exposes {
-    getValue(): Promise<any>;
+    getValue(): Promise<
+      {
+        cluster_ids: number[];
+        origin_proxy: IDataRow['originProxy'];
+        target_proxy: IDataRow['targetProxy'];
+        display_info: {
+          type: string;
+          related_clusters: string[];
+        };
+      }[]
+    >;
     reset(): void;
   }
 
@@ -131,18 +141,19 @@
       if (!instanceMemo[instance]) {
         const row = createRowData({
           originProxy: {
-            cluster_id: item.cluster_id,
             ip: item.ip,
             bk_cloud_id: item.bk_cloud_id,
             bk_host_id: item.bk_host_id,
             bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
             port: item.port,
             instance_address: instance,
           },
-          relatedClusters: item.related_clusters.map((item) => ({
-            cluster_id: item.id,
-            domain: item.master_domain,
-          })),
+          relatedClusters: [
+            {
+              cluster_id: item.cluster_id,
+              domain: item.master_domain,
+            },
+          ],
         });
         results.push(row);
         instanceMemo[instance] = true;

diff --git a/...ysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Index.vue b/...ysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Index.vue
@@ -31,7 +31,7 @@
       :min-width="200"
       :required="false"
       :width="240">
-      {{ t('同机关联集群') }}
+      {{ t('关联集群') }}
     </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="200"

diff --git a/.../mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue b/.../mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue
@@ -80,6 +80,10 @@
       cluster_ids: number[];
       origin_proxy: IDataRow['originProxy'];
       target_proxy: IDataRow['targetProxy'];
+      display_info: {
+        type: string;
+        related_clusters: string[];
+      };
     }>;
   }
 

diff --git a/...oxy-replace/pages/page1/components/ReplaceInstance/components/RenderOriginalProxyInst.vue b/...oxy-replace/pages/page1/components/ReplaceInstance/components/RenderOriginalProxyInst.vue
@@ -94,13 +94,14 @@
             port: currentData.port,
             instance_address: currentData.instance_address,
           };
-          const relatedClusters = currentData.related_clusters.map((item) => ({
-            cluster_id: item.id,
-            domain: item.master_domain,
-          }));
           emits('inputFinish', {
             originProxy,
-            relatedClusters,
+            relatedClusters: [
+              {
+                cluster_id: currentData.cluster_id,
+                domain: currentData.master_domain,
+              },
+            ],
           });
           return true;
         }),

diff --git a/...ckets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue b/...ckets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue
@@ -64,7 +64,7 @@
     () => props.ticketDetails.details,
     () => {
       tableData.value = props.ticketDetails.details.infos.map(item => ({
-        originProxy: item.origin_proxy.ip,
+        originProxy: `${item.origin_proxy.ip}:${item.origin_proxy.port}`,
         relatedClusters: item.display_info.related_clusters as string[],
         targetProxy: item.target_proxy.ip,
       }));