feat(frontend): mysql proxy替换重构 TencentBlueKing#7006

# Reviewed, transaction id: 20158
JustaCattt · Oct 10, 2024 · d0e898c · d0e898c
1 parent a3b45a9
commit d0e898c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 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
@@ -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
@@ -27,22 +27,22 @@
           :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
       :is="renderComponent"
       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/...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
@@ -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/.../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
@@ -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],