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

# Reviewed, transaction id: 20160
JustaCattt · Oct 18, 2024 · 68e9c20 · 68e9c20
1 parent 8a803da
commit 68e9c20
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 141 deletions.
diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -300,7 +300,7 @@
   type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number];
 
   interface Props {
-    clusterTypes: (ClusterTypes | 'TendbClusterHost' | 'RedisHost' | 'mongoCluster')[];
+    clusterTypes: (ClusterTypes | 'TendbhaHost' | 'TendbClusterHost' | 'RedisHost' | 'mongoCluster')[];
     tabListConfig?: Record<string, PanelListType>;
     selected?: InstanceSelectorValues<T>;
     unqiuePanelValue?: boolean;

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,25 +27,22 @@
           :desc="t('只替换目标实例')"
           icon="rebuild"
           :title="t('实例替换')"
-          :true-value="ProxyReplaceTypes.MYSQL_PROXY_REPLACE"
-          @update:model-value="handleReplaceTypeChange" />
+          :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"
-          @update:model-value="handleReplaceTypeChange" />
+          :true-value="ProxyReplaceTypes.HOST_REPLACE" />
       </div>
     </div>
     <Component
       :is="renderComponent"
-      ref="tableRef"
-      :data="data" />
+      ref="tableRef" />
     <div class="safe-action">
       <BkCheckbox
-        v-model="isSafe"
+        v-model="force"
         v-bk-tooltips="t('如忽略_在有连接的情况下Proxy也会执行替换')"
         :false-label="false"
         true-label>
@@ -75,10 +72,8 @@
 </template>
 
 <script setup lang="tsx">
-  import { type Component, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import type { MySQLProxySwitchDetails } from '@services/model/ticket/details/mysql';
   import { createTicket } from '@services/source/ticket';
 
   import { useTicketCloneInfo } from '@hooks';
@@ -91,69 +86,64 @@
   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: Record<ProxyReplaceTypes, Component> = {
-    [ProxyReplaceTypes.MYSQL_PROXY_REPLACE]: ReplaceInstance,
-    [ProxyReplaceTypes.MYSQL_PROXY_HOST_REPLACE]: ReplaceHost,
+  const ProxyReplaceMap = {
+    [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 data = shallowRef<MySQLProxySwitchDetails['infos']>([]);
-  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, infos } = cloneData;
-      data.value = infos;
-      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;
     },
   });
 
-  const handleReplaceTypeChange = () => {
-    data.value = [];
-  };
-
-  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,
+  const handleSubmit = async () => {
+    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,
+          force: force.value,
+        },
+      }).then((data) => {
+        window.changeConfirm = false;
+        router.push({
+          name: 'MySQLProxyReplace',
+          params: {
+            page: 'success',
+          },
+          query: {
+            ticketId: data.id,
           },
-        }).then((data) => {
-          window.changeConfirm = false;
-          router.push({
-            name: 'MySQLProxyReplace',
-            params: {
-              page: 'success',
-            },
-            query: {
-              ticketId: data.id,
-            },
-          });
         });
-      })
-      .finally(() => {
-        isSubmitting.value = false;
       });
+    } finally {
+      isSubmitting.value = false;
+    }
   };
 
   const handleReset = () => {

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
@@ -36,9 +36,9 @@
   import { ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import type { MySQLProxySwitchDetails } from '@services/model/ticket/details/mysql';
+  import { useTicketCloneInfo } from '@hooks';
 
-  import { useGlobalBizs } from '@stores';
+  import { TicketTypes } from '@common/const';
 
   import InstanceSelector, {
     type InstanceSelectorValues,
@@ -49,19 +49,28 @@
   import RenderData from './components/RenderData/Index.vue';
   import RenderDataRow, { createRowData, type IDataRow } from './components/RenderData/Row.vue';
 
-  interface Props {
-    data: MySQLProxySwitchDetails['infos'];
-  }
-
   interface Exposes {
     getValue(): Promise<any>;
     reset(): void;
   }
 
-  const props = defineProps<Props>();
-
   const { t } = useI18n();
-  const { currentBizId } = useGlobalBizs();
+  useTicketCloneInfo({
+    type: TicketTypes.MYSQL_PROXY_SWITCH,
+    onSuccess(data) {
+      tableData.value = data.infos.map((item) =>
+        createRowData({
+          originProxy: item.origin_proxy,
+          targetProxy: {
+            cluster_id: item.cluster_ids[0],
+            ...item.origin_proxy,
+            instance_address: `${item.origin_proxy.ip}:${item.origin_proxy.port}`,
+          },
+        }),
+      );
+      window.changeConfirm = true;
+    },
+  });
 
   const TENDBHA_HOST = 'TendbhaHost';
   const tabListConfig = {
@@ -77,19 +86,19 @@
           },
         },
       },
-      // {
-      //   id: 'manualInput',
-      //   name: t('手动输入'),
-      //   tableConfig: {
-      //     firsrColumn: {
-      //       label: t('Proxy 主机'),
-      //       field: 'ip',
-      //       role: 'proxy',
-      //     },
-      //   },
-      // },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+        },
+      },
     ],
-  } as unknown as Record<string, PanelListType>;
+  } as Record<string, PanelListType>;
   // 实例是否已存在表格的映射表
   let ipMemo: Record<string, boolean> = {};
 
@@ -99,27 +108,6 @@
   const tableData = shallowRef<IDataRow[]>([createRowData({})]);
   const selectedIntances = shallowRef<InstanceSelectorValues<IValue>>({ [TENDBHA_HOST]: [] });
 
-  watch(
-    () => props.data,
-    () => {
-      if (props.data.length > 0) {
-        tableData.value = props.data.map((item) =>
-          createRowData({
-            originProxy: item.origin_proxy,
-            targetProxy: {
-              cluster_id: item.cluster_ids[0],
-              ...item.origin_proxy,
-              instance_address: `${item.origin_proxy.ip}:${item.origin_proxy.port}`,
-            },
-          }),
-        );
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
   const handleShowInstanceSelector = () => {
     isShowInstanceSelecotr.value = true;
   };
@@ -144,7 +132,7 @@
             ip,
             bk_cloud_id: item.bk_cloud_id,
             bk_host_id: item.bk_host_id,
-            bk_biz_id: currentBizId,
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
             port: item.related_instances[0].port,
           },
           relatedInstances: item.related_instances.map((item) => ({

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
@@ -48,7 +48,7 @@
       bk_cloud_id: number | null;
       bk_host_id: number;
       bk_biz_id: number;
-      port: number;
+      port?: number;
     };
     relatedInstances: {
       cluster_id: number;
@@ -59,7 +59,7 @@
       bk_host_id: number;
       bk_biz_id: number;
       cluster_id: number;
-      port: number;
+      port?: number;
       ip: string;
       instance_address: string;
     };

diff --git a/...l/proxy-replace/pages/page1/components/ReplaceHost/components/RenderOriginalProxyHost.vue b/...l/proxy-replace/pages/page1/components/ReplaceHost/components/RenderOriginalProxyHost.vue
@@ -34,7 +34,8 @@
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  import { checkMysqlInstances } from '@services/source/instances';
+  import { checkInstance } from '@services/source/dbbase';
+  import type { InstanceInfos } from '@services/types/instanceInfos';
 
   import { useGlobalBizs } from '@stores';
 
@@ -71,8 +72,8 @@
     },
     {
       validator: (value: string): Promise<boolean> =>
-        checkMysqlInstances({
-          bizId: currentBizId,
+        checkInstance<InstanceInfos>({
+          bk_biz_id: currentBizId,
           instance_addresses: [value],
         }).then((data) => {
           if (data.length < 1) {