From d0e898ccde420f65bb8269dad7030b0b7edb275a Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Thu, 10 Oct 2024 16:57:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20mysql=20proxy=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=E9=87=8D=E6=9E=84=20#7006=20#=20Reviewed,=20transacti?=
 =?UTF-8?q?on=20id:=2020158?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../services/model/ticket/details/mysql.ts    |  1 +
 .../mysql/proxy-replace/pages/page1/Index.vue | 29 ++++++++++---------
 .../page1/components/ReplaceHost/Index.vue    |  5 ++--
 .../components/ReplaceInstance/Index.vue      |  5 ++--
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts b/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts
index 536d5da77e..5ab3593414 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts
@@ -401,6 +401,7 @@ export interface MySQLProxySwitchDetails extends DetailBase {
   clusters: DetailClusters;
   force: boolean;
   infos: {
+    display_info: Record<string, string>;
     cluster_ids: number[];
     origin_proxy: MysqlIpItem;
     target_proxy: MysqlIpItem;
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 bf8f7926f7..18d6858cd3 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
@@ -27,14 +27,14 @@
           :desc="t('只替换目标实例')"
           icon="rebuild"
           :title="t('实例替换')"
-          :true-value="ProxyReplaceTypes.MYSQL_PROXY_REPLACE" />
+          :true-value="ProxyReplaceTypes.INSTANCE_REPLACE" />
         <CardCheckbox
           v-model="replaceType"
           class="ml-8"
           :desc="t('主机关联的所有实例一并替换')"
           icon="host"
           :title="t('整机替换')"
-          :true-value="ProxyReplaceTypes.MYSQL_PROXY_HOST_REPLACE" />
+          :true-value="ProxyReplaceTypes.HOST_REPLACE" />
       </div>
     </div>
     <Component
@@ -42,7 +42,7 @@
       ref="tableRef" />
     <div class="safe-action">
       <BkCheckbox
-        v-model="isSafe"
+        v-model="force"
         v-bk-tooltips="t('如忽略_在有连接的情况下Proxy也会执行替换')"
         :false-label="false"
         true-label>
@@ -86,30 +86,30 @@
   import ReplaceInstance from './components/ReplaceInstance/Index.vue';
 
   enum ProxyReplaceTypes {
-    MYSQL_PROXY_REPLACE = 'MYSQL_PROXY_REPLACE', // 实例替换
-    MYSQL_PROXY_HOST_REPLACE = 'MYSQL_PROXY_HOST_REPLACE', // 整机替换
+    INSTANCE_REPLACE = 'INSTANCE_REPLACE', // 实例替换
+    HOST_REPLACE = 'HOST_REPLACE', // 整机替换
   }
 
   const ProxyReplaceMap = {
-    [ProxyReplaceTypes.MYSQL_PROXY_REPLACE]: ReplaceInstance,
-    [ProxyReplaceTypes.MYSQL_PROXY_HOST_REPLACE]: ReplaceHost,
+    [ProxyReplaceTypes.INSTANCE_REPLACE]: ReplaceInstance,
+    [ProxyReplaceTypes.HOST_REPLACE]: ReplaceHost,
   };
 
   const { t } = useI18n();
   const router = useRouter();
 
   const tableRef = ref();
-  const replaceType = ref<ProxyReplaceTypes>(ProxyReplaceTypes.MYSQL_PROXY_REPLACE);
-  const isSafe = ref(true);
+  const replaceType = ref(ProxyReplaceTypes.INSTANCE_REPLACE);
+  const force = ref(true);
   const isSubmitting = ref(false);
 
   const renderComponent = computed(() => ProxyReplaceMap[replaceType.value]);
 
   useTicketCloneInfo({
     type: TicketTypes.MYSQL_PROXY_SWITCH,
-    onSuccess(cloneData) {
-      const { force } = cloneData;
-      isSafe.value = force;
+    onSuccess(data) {
+      replaceType.value = (data.infos[0].display_info.type as ProxyReplaceTypes) || ProxyReplaceTypes.INSTANCE_REPLACE;
+      force.value = data.force;
       window.changeConfirm = true;
     },
   });
@@ -118,13 +118,16 @@
     try {
       isSubmitting.value = true;
       const infos = await tableRef.value!.getValue();
+      infos[0].display_info = {
+        type: replaceType.value,
+      };
       await createTicket({
         bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         ticket_type: TicketTypes.MYSQL_PROXY_SWITCH,
         remark: '',
         details: {
           infos,
-          is_safe: isSafe.value,
+          force: force.value,
         },
       }).then((data) => {
         window.changeConfirm = false;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue
index b187bfc121..e95ccaed2b 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue
@@ -57,9 +57,8 @@
   const { t } = useI18n();
   useTicketCloneInfo({
     type: TicketTypes.MYSQL_PROXY_SWITCH,
-    onSuccess(cloneData) {
-      const { infos } = cloneData;
-      tableData.value = infos.map((item) =>
+    onSuccess(data) {
+      tableData.value = data.infos.map((item) =>
         createRowData({
           originProxy: item.origin_proxy,
           targetProxy: {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue
index 907b8f6d0f..9fb1a6314f 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue
@@ -57,9 +57,8 @@
   const { t } = useI18n();
   useTicketCloneInfo({
     type: TicketTypes.MYSQL_PROXY_SWITCH,
-    onSuccess(cloneData) {
-      const { infos } = cloneData;
-      tableData.value = infos.map((item) =>
+    onSuccess(data) {
+      tableData.value = data.infos.map((item) =>
         createRowData({
           originProxy: {
             cluster_id: item.cluster_ids[0],