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

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

Hide file tree

Showing 7 changed files with 108 additions and 132 deletions.
diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -292,7 +292,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/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,19 @@
           :desc="t('只替换目标实例')"
           icon="rebuild"
           :title="t('实例替换')"
-          :true-value="ProxyReplaceTypes.MYSQL_PROXY_REPLACE"
-          @update:model-value="handleReplaceTypeChange" />
+          :true-value="ProxyReplaceTypes.MYSQL_PROXY_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.MYSQL_PROXY_HOST_REPLACE" />
       </div>
     </div>
     <Component
       :is="renderComponent"
-      ref="tableRef"
-      :data="data" />
+      ref="tableRef" />
     <div class="safe-action">
       <BkCheckbox
         v-model="isSafe"
@@ -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';
@@ -95,7 +90,7 @@
     MYSQL_PROXY_HOST_REPLACE = 'MYSQL_PROXY_HOST_REPLACE', // 整机替换
   }
 
-  const ProxyReplaceMap: Record<ProxyReplaceTypes, Component> = {
+  const ProxyReplaceMap = {
     [ProxyReplaceTypes.MYSQL_PROXY_REPLACE]: ReplaceInstance,
     [ProxyReplaceTypes.MYSQL_PROXY_HOST_REPLACE]: ReplaceHost,
   };
@@ -105,7 +100,6 @@
 
   const tableRef = ref();
   const replaceType = ref<ProxyReplaceTypes>(ProxyReplaceTypes.MYSQL_PROXY_REPLACE);
-  const data = shallowRef<MySQLProxySwitchDetails['infos']>([]);
   const isSafe = ref(true);
   const isSubmitting = ref(false);
 
@@ -114,46 +108,39 @@
   useTicketCloneInfo({
     type: TicketTypes.MYSQL_PROXY_SWITCH,
     onSuccess(cloneData) {
-      const { force, infos } = cloneData;
-      data.value = infos;
+      const { force } = cloneData;
       isSafe.value = 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();
+      await 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',
+          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,29 @@
   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(cloneData) {
+      const { infos } = cloneData;
+      tableData.value = 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 +87,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 +109,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 +133,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) {

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
@@ -36,11 +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 { ClusterTypes } from '@common/const';
+  import { ClusterTypes, TicketTypes } from '@common/const';
 
   import InstanceSelector, {
     type InstanceSelectorValues,
@@ -51,19 +49,29 @@
   import RenderData from './components/RenderData/Index.vue';
   import RenderRow, { 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(cloneData) {
+      const { infos } = cloneData;
+      tableData.value = infos.map((item) =>
+        createRowData({
+          originProxy: {
+            cluster_id: item.cluster_ids[0],
+            ...item.origin_proxy,
+            instance_address: `${item.origin_proxy.ip}:${item.origin_proxy.port}`,
+          },
+          targetProxy: item.target_proxy,
+        }),
+      );
+      window.changeConfirm = true;
+    },
+  });
 
   const tabListConfig = {
     [ClusterTypes.TENDBHA]: [
@@ -100,27 +108,6 @@
   const tableData = shallowRef<IDataRow[]>([createRowData({})]);
   const selectedIntances = shallowRef<InstanceSelectorValues<IValue>>({ [ClusterTypes.TENDBHA]: [] });
 
-  watch(
-    () => props.data,
-    () => {
-      if (props.data.length > 0) {
-        tableData.value = props.data.map((item) =>
-          createRowData({
-            originProxy: {
-              cluster_id: item.cluster_ids[0],
-              ...item.origin_proxy,
-              instance_address: `${item.origin_proxy.ip}:${item.origin_proxy.port}`,
-            },
-            targetProxy: item.target_proxy,
-          }),
-        );
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
   const handleShowInstanceSelector = () => {
     isShowInstanceSelecotr.value = true;
   };
@@ -146,7 +133,7 @@
             ip: item.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.port,
             instance_address: instance,
           },