From 28920c8108f21fa725512ce05e1acfcd7b4e1409 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Tue, 15 Oct 2024 15:31:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E4=BF=AE=E5=A4=8Dmysql=20pro?=
 =?UTF-8?q?xy=E6=9B=BF=E6=8D=A2=E9=97=AE=E9=A2=98=20#7006=20#=20Reviewed,?=
 =?UTF-8?q?=20transaction=20id:=2021211?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |   1 +
 .../mysql/proxy-replace/pages/page1/Index.vue |  37 ++++---
 .../components/RenderData/Index.vue           |   6 ++
 .../ReplaceHost/components/RenderData/Row.vue |  23 +++-
 .../components/RenderOriginalProxyHost.vue    |  20 +++-
 .../components/RenderData/Row.vue             |   5 +-
 .../RenderRelatedClusters.vue                 |   0
 .../components/demand-factory/Index.vue       |   4 +-
 .../demand-factory/mysql/ProxySwitch.vue      | 101 ------------------
 .../mysql/proxy-replace/Index.vue             |  70 ++++++++++++
 .../proxy-replace/components/ReplaceHost.vue  | 100 +++++++++++++++++
 .../components/ReplaceInstance.vue            |  94 ++++++++++++++++
 12 files changed, 335 insertions(+), 126 deletions(-)
 rename dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/{ReplaceInstance/components => common}/RenderRelatedClusters.vue (100%)
 delete mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxySwitch.vue
 create mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceHost.vue
 create mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 99df896027..7f673185af 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3463,5 +3463,6 @@
     "时间戳类型(timestamp)": "时间戳类型(timestamp)",
     "整型(int)": "整型(int)",
     "整型(bigint)": "整型(bigint)",
+    "新proxy主机": "新proxy主机",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
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 18d6858cd3..6482d75a36 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
@@ -37,9 +37,11 @@
           :true-value="ProxyReplaceTypes.HOST_REPLACE" />
       </div>
     </div>
-    <Component
-      :is="renderComponent"
-      ref="tableRef" />
+    <KeepAlive>
+      <Component
+        :is="renderComponent"
+        ref="tableRef" />
+    </KeepAlive>
     <div class="safe-action">
       <BkCheckbox
         v-model="force"
@@ -71,6 +73,12 @@
   </SmartAction>
 </template>
 
+<script lang="tsx">
+  export enum ProxyReplaceTypes {
+    INSTANCE_REPLACE = 'INSTANCE_REPLACE', // 实例替换
+    HOST_REPLACE = 'HOST_REPLACE', // 整机替换
+  }
+</script>
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
@@ -85,24 +93,19 @@
   import ReplaceHost from './components/ReplaceHost/Index.vue';
   import ReplaceInstance from './components/ReplaceInstance/Index.vue';
 
-  enum ProxyReplaceTypes {
-    INSTANCE_REPLACE = 'INSTANCE_REPLACE', // 实例替换
-    HOST_REPLACE = 'HOST_REPLACE', // 整机替换
-  }
-
-  const ProxyReplaceMap = {
-    [ProxyReplaceTypes.INSTANCE_REPLACE]: ReplaceInstance,
-    [ProxyReplaceTypes.HOST_REPLACE]: ReplaceHost,
-  };
-
   const { t } = useI18n();
   const router = useRouter();
 
   const tableRef = ref();
   const replaceType = ref(ProxyReplaceTypes.INSTANCE_REPLACE);
-  const force = ref(true);
+  const force = ref(false);
   const isSubmitting = ref(false);
 
+  const ProxyReplaceMap = {
+    [ProxyReplaceTypes.INSTANCE_REPLACE]: ReplaceInstance,
+    [ProxyReplaceTypes.HOST_REPLACE]: ReplaceHost,
+  };
+
   const renderComponent = computed(() => ProxyReplaceMap[replaceType.value]);
 
   useTicketCloneInfo({
@@ -149,6 +152,12 @@
   const handleReset = () => {
     tableRef.value.reset();
   };
+
+  watch(replaceType, () => {
+    nextTick(() => {
+      tableRef.value.reset();
+    });
+  });
 </script>
 
 <style lang="less">
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Index.vue
index 2c2b7f596b..63f6468e12 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Index.vue
@@ -33,6 +33,12 @@
       :width="240">
       {{ t('同机关联实例') }}
     </RenderTableHeadColumn>
+    <RenderTableHeadColumn
+      :min-width="200"
+      :required="false"
+      :width="240">
+      {{ t('同机关联集群') }}
+    </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="200"
       :width="240">
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 72517dfd8b..f98491dbea 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
@@ -24,6 +24,11 @@
         ref="relatedInstancesRef"
         :list="localRelatedInstances" />
     </td>
+    <td style="padding: 0">
+      <RenderRelatedClusters
+        ref="relatedClustersRef"
+        :list="localRelatedClusters" />
+    </td>
     <td style="padding: 0">
       <RenderTargetProxy
         ref="targetRef"
@@ -54,6 +59,10 @@
       cluster_id: number;
       instance: string;
     }[];
+    relatedClusters: {
+      cluster_id: number;
+      domain: string;
+    }[];
     targetProxy: {
       bk_cloud_id: number | null;
       bk_host_id: number;
@@ -107,6 +116,7 @@
         port: 0,
       } as IDataRow['originProxy']),
     relatedInstances: data.relatedInstances || [],
+    relatedClusters: data.relatedClusters || [],
     targetProxy:
       data.targetProxy ||
       ({
@@ -124,7 +134,9 @@
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
-  import RenderTargetProxy from '../../../common/RenderTargetProxy.vue';
+  import RenderRelatedClusters from '@views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderRelatedClusters.vue';
+  import RenderTargetProxy from '@views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue';
+
   import RenderOriginalProxyHost from '../RenderOriginalProxyHost.vue';
   import RenderRelatedInstances from '../RenderRelatedInstances.vue';
 
@@ -138,6 +150,7 @@
 
   const localIp = ref('');
   const localRelatedInstances = ref<IDataRow['relatedInstances']>([]);
+  const localRelatedClusters = ref<IDataRow['relatedClusters']>([]);
 
   watch(
     () => props.data,
@@ -149,8 +162,12 @@
     },
   );
 
-  const handleOriginProxyInputFinish = (value: IDataRow['relatedInstances']) => {
-    localRelatedInstances.value = value;
+  const handleOriginProxyInputFinish = (
+    relatedInstances: IDataRow['relatedInstances'],
+    relatedClusters: IDataRow['relatedClusters'],
+  ) => {
+    localRelatedInstances.value = relatedInstances;
+    localRelatedClusters.value = relatedClusters;
   };
 
   const handleAppend = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderOriginalProxyHost.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderOriginalProxyHost.vue
index d73b954e0d..5fee48c5a3 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderOriginalProxyHost.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderOriginalProxyHost.vue
@@ -22,7 +22,11 @@
   const proxyHostMemo: { [key: string]: Record<string, boolean> } = {};
 
   interface Emits {
-    (e: 'inputFinish', relatedInstances: IDataRow['relatedInstances']): void;
+    (
+      e: 'inputFinish',
+      relatedInstances: IDataRow['relatedInstances'],
+      relatedClusters: IDataRow['relatedClusters'],
+    ): void;
   }
 
   interface Exposes {
@@ -32,6 +36,7 @@
   }
 </script>
 <script setup lang="ts">
+  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
   import { checkInstance } from '@services/source/dbbase';
@@ -77,7 +82,7 @@
           instance_addresses: [value],
         }).then((data) => {
           if (data.length < 1) {
-            emits('inputFinish', []);
+            emits('inputFinish', [], []);
             return false;
           }
           const [currentData] = data;
@@ -93,7 +98,14 @@
             cluster_id: item.cluster_id,
             instance: item.instance_address,
           }));
-          emits('inputFinish', relatedInstances);
+          const relatedClusters = _.sortBy(
+            currentData.related_clusters.map((item) => ({
+              cluster_id: item.id,
+              domain: item.master_domain,
+            })),
+            'cluster_id',
+          );
+          emits('inputFinish', relatedInstances, relatedClusters);
           return true;
         }),
       message: t('目标Proxy主机不存在'),
@@ -115,7 +127,7 @@
         const currentSelectClusterIdList = Object.keys(currentClusterSelectMap);
         for (let i = 0; i < currentSelectClusterIdList.length; i++) {
           if (otherClusterIdMap[currentSelectClusterIdList[i]]) {
-            emits('inputFinish', []);
+            emits('inputFinish', [], []);
             return false;
           }
         }
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 1a1cd00fe0..d440d035fc 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
@@ -125,9 +125,10 @@
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
-  import RenderTargetProxy from '../../../common/RenderTargetProxy.vue';
+  import RenderRelatedClusters from '@views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderRelatedClusters.vue';
+  import RenderTargetProxy from '@views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue';
+
   import RenderOriginalProxyInst from '../RenderOriginalProxyInst.vue';
-  import RenderRelatedClusters from '../RenderRelatedClusters.vue';
 
   const props = defineProps<Props>();
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderRelatedClusters.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderRelatedClusters.vue
similarity index 100%
rename from dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderRelatedClusters.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderRelatedClusters.vue
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
index ab72218ea9..1bbbf1887f 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
@@ -76,8 +76,8 @@
   import MySQLMigrateCluster from './mysql/MigrateCluster.vue';
   import MysqlOpenArea from './mysql/openarea/Index.vue';
   import MysqlParition from './mysql/Partition.vue';
+  import MySQLProxyReplace from './mysql/proxy-replace/Index.vue';
   import MySQLProxyAdd from './mysql/ProxyAdd.vue';
-  import MySQLProxySwitch from './mysql/ProxySwitch.vue';
   import MySQLRename from './mysql/Rename.vue';
   import MySQLRestoreLocalSlave from './mysql/RestoreLocalSlave.vue';
   import MySQLRestoreSlave from './mysql/RestoreSlave.vue';
@@ -285,7 +285,7 @@
     [TicketTypes.INFLUXDB_APPLY]: DetailsInfluxDB,
     [TicketTypes.INFLUXDB_REPLACE]: InfluxdbReplace,
     [TicketTypes.KAFKA_APPLY]: DetailsKafka,
-    [TicketTypes.MYSQL_PROXY_SWITCH]: MySQLProxySwitch,
+    [TicketTypes.MYSQL_PROXY_SWITCH]: MySQLProxyReplace,
     [TicketTypes.MYSQL_HA_DB_TABLE_BACKUP]: MySQLTableBackup,
     [TicketTypes.MYSQL_MIGRATE_CLUSTER]: MySQLMigrateCluster,
     [TicketTypes.MYSQL_PROXY_ADD]: MySQLProxyAdd,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxySwitch.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxySwitch.vue
deleted file mode 100644
index 9b9c12d23d..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxySwitch.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <DbOriginalTable
-    :columns="columns"
-    :data="dataList" />
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-
-  import type { MysqlIpItem, MySQLProxySwitchDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-
-  interface Props {
-    ticketDetails: TicketModel<MySQLProxySwitchDetails>
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  type dataItem = {
-    cluster_ids: number[],
-    origin_proxy: MysqlIpItem,
-    target_proxy: MysqlIpItem,
-    immute_domain: string,
-    name: string,
-  }
-
-  /**
-   * mysql 替换 proxy
-   */
-
-  const columns: any = [{
-    label: t('集群ID'),
-    field: 'cluster_ids',
-    render: ({ cell }: { cell: number }) => <span>{cell || '--'}</span>,
-  }, {
-    label: t('集群名称'),
-    field: 'immute_domain',
-    showOverflowTooltip: false,
-    render: ({ data }: { data: any }) => (
-      <div class="cluster-name text-overflow"
-        v-overflow-tips={{
-          content: `
-            <p>${t('域名')}：${data.immute_domain}</p>
-            ${data.name ? `<p>${('集群别名')}：${data.name}</p>` : null}
-          `,
-          allowHTML: true,
-      }}>
-        <span>{data.immute_domain}</span><br />
-        <span class="cluster-name__alias">{data.name}</span>
-      </div>
-    ),
-  }, {
-    label: t('目标Proxy主机'),
-    field: 'origin_proxy',
-    render: ({ cell }: { cell: string }) => <span>{cell || '--'}</span>,
-  }, {
-    label: t('新Proxy主机'),
-    field: 'target_proxy',
-    render: ({ cell }: { cell: string }) => <span>{cell || '--'}</span>,
-  }];
-
-  const dataList = computed(() => {
-    const list: dataItem[] = [];
-    const infosData = props.ticketDetails?.details?.infos || [];
-    const clusterIds = props.ticketDetails?.details?.clusters || {};
-    infosData.forEach((item) => {
-      if (item.cluster_ids) {
-        item.cluster_ids.forEach((id) => {
-          const clusterData = clusterIds[id];
-          list.push(Object.assign({
-            cluster_ids: id,
-            origin_proxy: item.origin_proxy.ip,
-            target_proxy: item.target_proxy.ip,
-            immute_domain: clusterData.immute_domain,
-            name: clusterData.name,
-          }));
-        });
-      }
-    });
-    return list;
-  });
-</script>
-
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/DetailsTable.less';
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/Index.vue
new file mode 100644
index 0000000000..bc7dca2e86
--- /dev/null
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/Index.vue
@@ -0,0 +1,70 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('替换类型') }}：</span>
+      <span class="ticket-details-item-value">{{ renderData.label }}</span>
+    </div>
+  </div>
+  <component
+    :is="renderData.tableCom"
+    :ticket-details="ticketDetails" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('忽略业务连接') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.force ? t('是') : t('否') }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import type { MySQLProxySwitchDetails } from '@services/model/ticket/details/mysql';
+  import TicketModel from '@services/model/ticket/ticket';
+
+  import { ProxyReplaceTypes } from '@views/db-manage/mysql/proxy-replace/pages/page1/Index.vue';
+
+  import ReplaceHost from './components/ReplaceHost.vue';
+  import ReplaceInstance from './components/ReplaceInstance.vue';
+
+  interface Props {
+    ticketDetails: TicketModel<MySQLProxySwitchDetails>;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const proxyReplaceInfo = {
+    [ProxyReplaceTypes.INSTANCE_REPLACE]: {
+      label: t('实例替换'),
+      tableCom: ReplaceInstance,
+    },
+    [ProxyReplaceTypes.HOST_REPLACE]: {
+      label: t('整机替换'),
+      tableCom: ReplaceHost,
+    },
+  };
+
+  const renderData = computed(
+    () => proxyReplaceInfo[props.ticketDetails.details.infos[0].display_info.type as ProxyReplaceTypes],
+  );
+</script>
+
+<style lang="less" scoped>
+  @import '@views/tickets/common/styles/DetailsTable.less';
+  @import '@views/tickets/common/styles/ticketDetails.less';
+</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceHost.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceHost.vue
new file mode 100644
index 0000000000..015724b4be
--- /dev/null
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceHost.vue
@@ -0,0 +1,100 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import type { MySQLProxySwitchDetails } from '@services/model/ticket/details/mysql';
+  import TicketModel from '@services/model/ticket/ticket';
+  import { checkInstance } from '@services/source/dbbase';
+
+  interface Props {
+    ticketDetails: TicketModel<MySQLProxySwitchDetails>
+  }
+
+  interface RowData {
+    originProxy: string;
+    relatedInstances: string[];
+    relatedClusters: string[];
+    targetProxy: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const columns = [
+    {
+      label: t('目标Proxy主机'),
+      field: 'originProxy',
+      minWidth: 150,
+      width: 220,
+    },
+    {
+      label: t('同机关联实例'),
+      field: 'relatedInstances',
+      width: 220,
+      render: ({ data }: { data: RowData }) => data.relatedInstances.map((item) => <p>{item}</p>),
+    },
+    {
+      label: t('同机关联集群'),
+      field: 'relatedClusters',
+      width: 220,
+      render: ({ data }: { data: RowData }) => data.relatedClusters.map((item) => <p>{item}</p>),
+    },
+    {
+      label: t('新proxy主机'),
+      field: 'targetProxy',
+      minWidth: 150,
+      width: 220,
+    },
+  ];
+
+  const relatedInstances = shallowRef<Record<string, string[]>>({});
+  const relatedClusters = shallowRef<Record<string, string[]>>({});
+  const tableData = shallowRef<RowData[]>([]);
+
+  watch(
+    () => props.ticketDetails.details,
+    () => {
+      const ips = props.ticketDetails.details.infos.map(item => item.origin_proxy.ip);
+      checkInstance({
+        instance_addresses: ips,
+        bk_biz_id: props.ticketDetails.bk_biz_id,
+      }).then((data) => {
+        const { ip } = data[0];
+        relatedInstances.value[ip] = data.map(item => item.instance_address);
+        relatedClusters.value[ip] = data.map(item => item.master_domain);
+        tableData.value = props.ticketDetails.details.infos.map(item => ({
+          originProxy: item.origin_proxy.ip,
+          relatedInstances: relatedInstances.value[item.origin_proxy.ip] || [],
+          relatedClusters: relatedClusters.value[item.origin_proxy.ip] || [],
+          targetProxy: item.target_proxy.ip,
+        }));
+      })
+    },
+    {
+      immediate: true
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  @import '@views/tickets/common/styles/DetailsTable.less';
+</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue
new file mode 100644
index 0000000000..ed0a660eb8
--- /dev/null
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue
@@ -0,0 +1,94 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import type { MySQLProxySwitchDetails } from '@services/model/ticket/details/mysql';
+  import TicketModel from '@services/model/ticket/ticket';
+  import { checkInstance } from '@services/source/dbbase';
+
+  interface Props {
+    ticketDetails: TicketModel<MySQLProxySwitchDetails>
+  }
+
+  interface RowData {
+    originProxy: string;
+    relatedClusters: string[];
+    targetProxy: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const columns = [
+    {
+      label: t('目标Proxy主机'),
+      field: 'originProxy',
+      minWidth: 150,
+      width: 220,
+    },
+    {
+      label: t('同机关联集群'),
+      field: 'relatedClusters',
+      width: 220,
+      render: ({ data }: { data: RowData }) => data.relatedClusters.map((item) => <p>{item}</p>),
+    },
+    {
+      label: t('新proxy主机'),
+      field: 'targetProxy',
+      minWidth: 150,
+      width: 220,
+    },
+  ];
+
+  const relatedClusters = shallowRef<Record<string, string[]>>({});
+  const tableData = shallowRef<RowData[]>([]);
+
+  watch(
+    () => props.ticketDetails.details,
+    () => {
+      const instanceAddresses = props.ticketDetails.details.infos.map(item => `${item.origin_proxy.ip}:${item.origin_proxy.port}`);
+      checkInstance({
+        instance_addresses: instanceAddresses,
+        bk_biz_id: props.ticketDetails.bk_biz_id,
+      }).then((data) => {
+        data.forEach(item => {
+          relatedClusters.value[item.instance_address] = item.related_clusters.map(cluster => cluster.master_domain);
+        });
+        tableData.value = props.ticketDetails.details.infos.map(item => {
+          const instance = `${item.origin_proxy.ip}:${item.origin_proxy.port}`;
+          return {
+            originProxy: instance,
+            relatedClusters: relatedClusters.value[instance] || [],
+            targetProxy: item.target_proxy.ip,
+          }
+        });
+      })
+    },
+    {
+      immediate: true
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  @import '@views/tickets/common/styles/DetailsTable.less';
+</style>