From a5bb05090eb5c66ff9ca6a35cb9d903ba7ee023b Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Mon, 23 Sep 2024 16:51:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20mysql=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E7=AE=B1=E6=94=AF=E6=8C=81=E6=A0=BC=E5=AD=90=E5=86=85=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E9=9B=86=E7=BE=A4/=E5=AE=9E=E4=BE=8B/IP=20#6997=20#?=
 =?UTF-8?q?=20Reviewed,=20transaction=20id:=2019102?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../generateCloneData/redis/scaleUpdown.ts    |  1 -
 dbm-ui/frontend/src/locales/zh-cn.json        |  1 -
 dbm-ui/frontend/src/types/auto-imports.d.ts   |  1 -
 .../pages/page1/components/RenderData/Row.vue |  1 +
 .../edit-field/InstanceWithSelector.vue       | 36 +++++++--
 .../mysql/proxy-replace/pages/page1/Index.vue | 33 ++++----
 .../ReplaceHost/components/RenderData/Row.vue | 76 +++++++++++++++---
 .../components/RenderData/Row.vue             | 78 ++++++++++++++++---
 .../components/common/RenderTargetProxy.vue   |  4 +-
 9 files changed, 178 insertions(+), 53 deletions(-)

diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/scaleUpdown.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/scaleUpdown.ts
index f7357a48cd..0d61b283b6 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/scaleUpdown.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/scaleUpdown.ts
@@ -46,7 +46,6 @@ 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,
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 147b01c963..8edfce33c8 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3524,7 +3524,6 @@
     "DB名称支持通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔": "DB名称支持通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔",
     "统计视图": "统计视图",
     "主机列表": "主机列表",
-    "DB名称支持通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔": "DB名称支持通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔",
     "不允许输入系统库和特殊库，如mysql、sys 等": "不允许输入系统库和特殊库，如mysql、sys 等",
     "DB名、表名不允许为空，忽略DB名、忽略表名不允许为 *": "DB名、表名不允许为空，忽略DB名、忽略表名不允许为 *",
     "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符": "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符",
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
index 6bc2ae2a45..79be9ca2a4 100644
--- a/dbm-ui/frontend/src/types/auto-imports.d.ts
+++ b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -3,7 +3,6 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: (typeof import('vue'))['EffectScope'];
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
index d087f3f32d..a86d482a5c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
@@ -124,6 +124,7 @@
       id: 0,
     },
     version: '',
+    is_stand_by: false,
   });
 
   export type IDataRowBatchKey = keyof Pick<IDataRow, 'dbPatterns' | 'ignoreDbs' | 'tablePatterns' | 'ignoreTables'>;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
index 4d5313afda..cfbd672f98 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
@@ -49,13 +49,14 @@
     @change="handleInstancesChange" />
 </template>
 <script lang="ts">
+  type InstanceInfo = ServiceReturnType<typeof checkMysqlInstances>[number];
+
   const instanceWithSelectorMemo: { [key: string]: Record<string, boolean> } = {};
 </script>
 <script setup lang="ts">
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import TendbhaInstanceModel from '@services/model/mysql/tendbha-instance';
   import { checkMysqlInstances } from '@services/source/instances';
 
   import { ClusterTypes } from '@common/const';
@@ -63,6 +64,7 @@
 
   import InstanceSelector, {
     type InstanceSelectorValues,
+    type IValue,
     type PanelListType,
   } from '@components/instance-selector/Index.vue';
   import TableEditInput from '@components/render-table/columns/input/index.vue';
@@ -81,6 +83,11 @@
     db_module_name?: string;
     master_domain?: string;
     cluster_type?: string;
+    related_clusters?: InstanceInfo['related_clusters'];
+    related_instances?: {
+      cluster_id: number;
+      instance_address: string;
+    }[];
   }
 
   interface Props {
@@ -97,7 +104,7 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<InstanceBasicInfo>;
+    getValue: () => Promise<Required<InstanceBasicInfo>>;
     focus: () => void;
   }
 
@@ -119,9 +126,10 @@
   const isFocused = ref(false);
   const isShowInstanceSelecotr = ref(false);
   const localValue = ref('');
-  const selectedIntances = shallowRef<InstanceSelectorValues<TendbhaInstanceModel>>({ [ClusterTypes.TENDBHA]: [] });
+  const selectedIntances = shallowRef<InstanceSelectorValues<IValue>>({ [ClusterTypes.TENDBHA]: [] });
 
   const instanceKey = `instance_${random()}`;
+  let modelValueLocal: InstanceBasicInfo;
   instanceWithSelectorMemo[instanceKey] = {};
 
   const rules = [
@@ -155,10 +163,17 @@
           instanceWithSelectorMemo[instanceKey][instanceData.instance_address] = true;
           if (
             !modelValue.value?.instance_address ||
-            modelValue.value.instance_address !== instanceData.instance_address
+            modelValueLocal?.instance_address !== instanceData.instance_address
           ) {
-            modelValue.value = instanceData;
-            emits('instanceChange', instanceData);
+            modelValueLocal = _.cloneDeep({
+              ...instanceData,
+              related_instances: data.map((item) => ({
+                cluster_id: item.cluster_id,
+                instance_address: item.instance_address,
+              })),
+            });
+            modelValue.value = modelValueLocal;
+            emits('instanceChange', modelValueLocal as Required<InstanceBasicInfo>);
           }
           return true;
         }),
@@ -207,6 +222,11 @@
       } else {
         localValue.value = `${modelValue.value.bk_cloud_id}:${modelValue.value.ip}:${modelValue.value.port}`;
       }
+      if (modelValueLocal?.ip !== modelValue.value?.ip) {
+        setTimeout(() => {
+          inputRef.value.getValue();
+        });
+      }
     },
     {
       immediate: true,
@@ -218,9 +238,9 @@
   };
 
   // 批量选择
-  const handleInstancesChange = (selected: InstanceSelectorValues<TendbhaInstanceModel>) => {
+  const handleInstancesChange = (selected: InstanceSelectorValues<IValue>) => {
     selectedIntances.value = selected;
-    const list = selected[ClusterTypes.TENDBHA];
+    const list = _.flatMap(Object.values(selected));
     if (props.type === 'instance') {
       localValue.value = list[0].instance_address;
     } else if (props.type === 'ip') {
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
index 1595394fd3..472b77bcb6 100644
--- 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
@@ -127,17 +127,18 @@
 
   const handleSubmit = () => {
     isSubmitting.value = true;
-    tableRef.value!.getValue().then((infos: MySQLProxySwitchDetails['infos']) => {
-      createTicket({
-        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-        ticket_type: TicketTypes.MYSQL_PROXY_SWITCH,
-        remark: '',
-        details: {
-          infos,
-          is_safe: isSafe.value,
-        },
-      })
-        .then((data) => {
+    tableRef
+      .value!.getValue()
+      .then((infos: MySQLProxySwitchDetails['infos']) =>
+        createTicket({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          ticket_type: TicketTypes.MYSQL_PROXY_SWITCH,
+          remark: '',
+          details: {
+            infos,
+            is_safe: isSafe.value,
+          },
+        }).then((data) => {
           window.changeConfirm = false;
           router.push({
             name: 'MySQLProxyReplace',
@@ -148,11 +149,11 @@
               ticketId: data.id,
             },
           });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
-    });
+        }),
+      )
+      .finally(() => {
+        isSubmitting.value = false;
+      });
   };
 
   const handleReset = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue
index f7330a8286..466867c991 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue
@@ -16,8 +16,11 @@
     <FixedColumn fixed="left">
       <RenderOriginalProxyHost
         ref="originRef"
-        v-model="localIp"
-        @input-finish="handleOriginProxyInputFinish" />
+        :cluster-types="['TendbhaHost']"
+        :model-value="data.originProxy"
+        :tab-list-config="tabListConfig"
+        type="ip"
+        @instance-change="handleOriginProxyInputFinish" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderRelatedInstances
@@ -45,7 +48,7 @@
     rowKey: string;
     originProxy: {
       ip: string;
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
       port: number;
@@ -55,7 +58,7 @@
       instance: string;
     }[];
     targetProxy: {
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
       cluster_id: number;
@@ -79,14 +82,14 @@
       cluster_ids: number[];
       origin_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
       };
       target_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
@@ -101,7 +104,7 @@
       data.originProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -111,7 +114,7 @@
       data.targetProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -120,18 +123,22 @@
 </script>
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
 
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderOriginalProxyHost from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import RenderTargetProxy from '../../../common/RenderTargetProxy.vue';
-  import RenderOriginalProxyHost from '../RenderOriginalProxyHost.vue';
   import RenderRelatedInstances from '../RenderRelatedInstances.vue';
 
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
+  const { t } = useI18n();
+
   const originRef = ref<InstanceType<typeof RenderOriginalProxyHost>>();
   const relatedInstancesRef = ref<InstanceType<typeof RenderRelatedInstances>>();
   const targetRef = ref<InstanceType<typeof RenderTargetProxy>>();
@@ -139,6 +146,35 @@
   const localIp = ref('');
   const localRelatedInstances = ref<IDataRow['relatedInstances']>([]);
 
+  const tabListConfig = {
+    TendbhaHost: [
+      {
+        id: 'TendbhaHost',
+        name: t('目标Proxy主机'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
   watch(
     () => props.data,
     () => {
@@ -149,8 +185,18 @@
     },
   );
 
-  const handleOriginProxyInputFinish = (value: IDataRow['relatedInstances']) => {
-    localRelatedInstances.value = value;
+  const handleOriginProxyInputFinish = (info: {
+    ip: string;
+    related_instances: {
+      cluster_id: number;
+      instance_address: string;
+    }[];
+  }) => {
+    localIp.value = info.ip;
+    localRelatedInstances.value = info.related_instances.map((item) => ({
+      cluster_id: item.cluster_id,
+      instance: item.instance_address,
+    }));
   };
 
   const handleAppend = () => {
@@ -171,7 +217,13 @@
         relatedInstancesRef.value!.getValue(),
         targetRef.value!.getValue(),
       ]).then(([originData, relatedInstancesData, targetData]) => ({
-        ...originData,
+        origin_proxy: {
+          ip: originData.ip,
+          bk_cloud_id: originData.bk_cloud_id,
+          bk_host_id: originData.bk_host_id,
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          port: originData.port,
+        },
         ...relatedInstancesData,
         ...targetData,
       }));
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue
index 3f6c693ff7..2335dacaed 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue
+++ b/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"
-        v-model="localInstanceAddress"
-        @input-finish="handleOriginProxyInputFinish" />
+        :model-value="data.originProxy"
+        :tab-list-config="tabListConfig"
+        @instance-change="handleOriginProxyInputFinish" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderRelatedClusters
@@ -46,7 +47,7 @@
     originProxy: {
       cluster_id: number;
       ip: string;
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
       port: number;
@@ -58,7 +59,7 @@
     }[];
     targetProxy: {
       ip: string;
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
     };
@@ -79,14 +80,14 @@
       cluster_ids: number[];
       origin_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
       };
       target_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
@@ -101,7 +102,7 @@
       data.originProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -112,7 +113,7 @@
       data.targetProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -121,18 +122,24 @@
 </script>
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { ClusterTypes } from '@common/const';
 
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderOriginalProxyInst from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import RenderTargetProxy from '../../../common/RenderTargetProxy.vue';
-  import RenderOriginalProxyInst from '../RenderOriginalProxyInst.vue';
   import RenderRelatedClusters from '../RenderRelatedClusters.vue';
 
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
+  const { t } = useI18n();
+
   const originRef = ref<InstanceType<typeof RenderOriginalProxyInst>>();
   const relatedClustersRef = ref<InstanceType<typeof RenderRelatedClusters>>();
   const targetRef = ref<InstanceType<typeof RenderTargetProxy>>();
@@ -150,8 +157,47 @@
     },
   );
 
-  const handleOriginProxyInputFinish = (value: IDataRow['relatedClusters']) => {
-    localRelatedClusters.value = value;
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        id: ClusterTypes.TENDBHA,
+        name: t('目标实例'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 实例'),
+            field: 'instance_address',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 实例'),
+            field: 'instance_address',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
+  const handleOriginProxyInputFinish = (info: {
+    instance_address: string;
+    related_clusters: {
+      id: number;
+      master_domain: string;
+    }[];
+  }) => {
+    localInstanceAddress.value = info.instance_address;
+    localRelatedClusters.value = info.related_clusters.map((item) => ({
+      cluster_id: item.id,
+      domain: item.master_domain,
+    }));
   };
 
   const handleAppend = () => {
@@ -172,7 +218,15 @@
         relatedClustersRef.value!.getValue(),
         targetRef.value!.getValue(),
       ]).then(([originData, relatedClustersData, targetData]) => ({
-        ...originData,
+        origin_proxy: {
+          cluster_id: originData.cluster_id,
+          ip: originData.ip,
+          bk_cloud_id: originData.bk_cloud_id,
+          bk_host_id: originData.bk_host_id,
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          port: originData.port,
+          instance_address: originData.instance_address,
+        },
         ...relatedClustersData,
         ...targetData,
       }));
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue
index c3cc95dc40..aa92f88f5a 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue
@@ -32,10 +32,10 @@
   import TableEditInput from '@components/render-table/columns/input/index.vue';
 
   interface Props {
-    cloudId: number | null;
+    cloudId: number;
     modelValue: {
       ip: string;
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
     };