fix(frontend): tendbcluster迁移主从单据bug TencentBlueKing#7767

# Reviewed, transaction id: 23436
jinquantianxia · Nov 11, 2024 · e5403f7 · e5403f7
1 parent c3bfc6f
commit e5403f7
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 196 deletions.
diff --git a/...i/frontend/src/components/instance-selector/components/tendb-cluster-host/table/Index.vue b/...i/frontend/src/components/instance-selector/components/tendb-cluster-host/table/Index.vue
@@ -186,7 +186,7 @@
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {
-      label: t('关联的从库实例'),
+      label: t('关联实例'),
       field: 'related_instances',
       showOverflowTooltip: true,
       width: 200,

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3606,5 +3606,6 @@
   "无只读主机": "无只读主机",
   "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
   "高可用": "高可用",
+  "关联实例": "关联实例",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/master-slave-clone/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/master-slave-clone/pages/page1/Index.vue
@@ -26,6 +26,7 @@
           :key="item.rowKey"
           ref="rowRefs"
           :data="item"
+          :inputed-ips="inputedIps"
           :removeable="tableData.length < 2"
           @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
           @clone="(payload: IDataRow) => handleClone(index, payload)"
@@ -129,6 +130,7 @@
 
   const selected = shallowRef({ TendbClusterHost: [] } as InstanceSelectorValues<IValue>);
 
+  const inputedIps = computed(() => tableData.value.map((item) => item.clusterData.ip));
   const totalNum = computed(() => tableData.value.filter((item) => Boolean(item.clusterData.ip)).length);
 
   // ip 是否已存在表格的映射表
@@ -222,6 +224,11 @@
       masterInstanceList: spiderMachineItem.related_instances,
     });
     ipMemo[ip] = true;
+    Object.keys(ipMemo).forEach((ip) => {
+      if (ipMemo[ip]) {
+        selected.value.TendbClusterHost.push({ ip } as IValue);
+      }
+    });
   };
 
   // 追加一个集群
@@ -264,32 +271,17 @@
   const handleSubmit = async () => {
     try {
       isSubmitting.value = true;
-      const rowDataList = await Promise.all(rowRefs.value!.map((item) => item.getValue()));
+      const infos = await Promise.all(rowRefs.value!.map((item) => item.getValue()));
       const params = {
         bk_biz_id: currentBizId,
         ticket_type: TicketTypes.TENDBCLUSTER_MIGRATE_CLUSTER,
         remark: formData.remark,
         details: {
           ...formData,
           ip_source: 'manual_input',
-          infos: rowDataList.map((rowItem, rowIndex) => {
-            const { clusterData } = tableData.value[rowIndex];
-            return {
-              cluster_id: clusterData.clusterId,
-              new_master: rowItem.newInstaceList[0],
-              new_slave: rowItem.newInstaceList[1],
-              old_master: {
-                ip: clusterData.ip,
-                bk_cloud_id: clusterData.cloudId,
-                bk_host_id: clusterData.hostId,
-                bk_biz_id: currentBizId,
-              },
-              old_slave: rowItem.old_master,
-            };
-          }),
+          infos,
         },
       };
-
       await createTicket(params).then((data) => {
         window.changeConfirm = false;
         router.push({

diff --git a/...ws/db-manage/tendb-cluster/master-slave-clone/pages/page1/components/RenderMasterHost.vue b/...ws/db-manage/tendb-cluster/master-slave-clone/pages/page1/components/RenderMasterHost.vue
@@ -22,9 +22,6 @@
   </div>
 </template>
 
-<script lang="ts">
-  const hostsMemo: { [key: string]: Record<string, boolean> } = {};
-</script>
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
@@ -36,33 +33,40 @@
 
   import TableEditInput from '@components/render-table/columns/input/index.vue';
 
-  import { random } from '@utils';
-
   interface Props {
     ip?: string;
+    inputedIps?: string[];
   }
 
   interface Emits {
     (e: 'inputFinish', value: string): void;
   }
 
   interface Exposes {
-    getValue: () => Promise<string>;
+    getValue: () => Promise<{
+      cluster_id: number;
+      old_master: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
+    }>;
   }
 
   const props = withDefaults(defineProps<Props>(), {
     ip: '',
+    inputedIps: () => [],
   });
-  const emits = defineEmits<Emits>();
 
-  const instanceKey = `render_host_${random()}`;
-  hostsMemo[instanceKey] = {};
+  const emits = defineEmits<Emits>();
 
   const { currentBizId } = useGlobalBizs();
   const { t } = useI18n();
 
   const localValue = ref(props.ip);
   const editRef = ref();
+  const hostInfo = ref<ServiceReturnType<typeof checkMysqlInstances>[number]>();
 
   const rules = [
     {
@@ -80,45 +84,27 @@
           instance_addresses: [value],
         });
         if (data.length > 0) {
+          [hostInfo.value] = data;
           localValue.value = data[0].ip;
+          emits('inputFinish', value);
           return true;
         }
         return false;
       },
       message: t('目标主机不存在'),
     },
     {
-      validator: () => {
-        const currentClusterSelectMap = hostsMemo[instanceKey];
-        const otherClusterMemoMap = { ...hostsMemo };
-        delete otherClusterMemoMap[instanceKey];
-
-        const otherClusterIdMap = Object.values(otherClusterMemoMap).reduce(
-          (result, item) => ({
-            ...result,
-            ...item,
-          }),
-          {} as Record<string, boolean>,
-        );
-
-        const currentSelectClusterIdList = Object.keys(currentClusterSelectMap);
-        for (let i = 0; i < currentSelectClusterIdList.length; i++) {
-          if (otherClusterIdMap[currentSelectClusterIdList[i]]) {
-            return false;
-          }
-        }
-        return true;
-      },
+      validator: (value: string) => props.inputedIps.filter((item) => item === value).length < 2,
       message: t('目标主机重复'),
     },
   ];
 
   // 同步外部值
   watch(
     () => props.ip,
-    (newIp) => {
-      if (newIp) {
-        localValue.value = newIp;
+    () => {
+      if (props.ip) {
+        localValue.value = props.ip;
       }
     },
     {
@@ -130,7 +116,9 @@
     localValue,
     () => {
       if (localValue.value) {
-        hostsMemo[instanceKey][localValue.value] = true;
+        setTimeout(() => {
+          editRef.value!.getValue();
+        });
       }
     },
     {
@@ -139,20 +127,20 @@
   );
 
   const handleInputFinish = (value: string) => {
-    hostsMemo[instanceKey][localValue.value] = true;
-    emits('inputFinish', value);
+    localValue.value = value;
   };
 
-  onBeforeUnmount(() => {
-    delete hostsMemo[instanceKey];
-  });
-
   defineExpose<Exposes>({
     getValue() {
-      return editRef.value
-        .getValue()
-        .then(() => localValue.value)
-        .catch(() => Promise.reject(localValue.value));
+      return editRef.value!.getValue().then(() => ({
+        cluster_id: hostInfo.value?.cluster_id,
+        old_master: {
+          ip: hostInfo.value?.ip,
+          bk_cloud_id: hostInfo.value?.bk_cloud_id,
+          bk_host_id: hostInfo.value?.bk_host_id,
+          bk_biz_id: currentBizId,
+        },
+      }));
     },
   });
 </script>

diff --git a/...ws/db-manage/tendb-cluster/master-slave-clone/pages/page1/components/RenderNewInstace.vue b/...ws/db-manage/tendb-cluster/master-slave-clone/pages/page1/components/RenderNewInstace.vue
@@ -96,7 +96,6 @@
       }"
       :data="localHostList"
       :disable-dialog-submit-method="disableDialogSubmitMethod"
-      :disable-host-method="disableHostMethod"
       :os-types="[OSTypes.Linux]"
       service-mode="idle_only"
       :show-view="false"
@@ -123,17 +122,33 @@
 </template>
 
 <script lang="ts">
+  import { checkHost, getHostTopoInfos } from '@services/source/ipchooser';
+  import type { HostInfo } from '@services/types';
+
+  import type { HostItem, IDataRow } from './Row.vue';
+
   const singleHostSelectMemo: { [key: string]: Record<string, boolean> } = {};
+
+  type HostTopoInfo = ServiceReturnType<typeof getHostTopoInfos>['hosts_topo_info'][number];
+
+  interface Props {
+    clusterData: IDataRow['clusterData'];
+    newHostList: IDataRow['newHostList'];
+  }
+
+  interface Exposes {
+    getValue: () => Promise<{
+      new_master: HostItem;
+      new_slave: HostItem;
+    }>;
+  }
 </script>
 
 <script setup lang="ts">
   import _ from 'lodash';
   import tippy, { type Instance, type SingleTarget } from 'tippy.js';
   import { useI18n } from 'vue-i18n';
 
-  import { checkHost, getHostTopoInfos } from '@services/source/ipchooser';
-  import type { HostInfo } from '@services/types';
-
   import { useGlobalBizs } from '@stores';
 
   import { OSTypes } from '@common/const';
@@ -145,26 +160,6 @@
 
   import { random } from '@utils';
 
-  import type { IDataRow } from './Row.vue';
-
-  type HostTopoInfo = ServiceReturnType<typeof getHostTopoInfos>['hosts_topo_info'][number];
-
-  interface Props {
-    clusterData: IDataRow['clusterData'];
-    newHostList: IDataRow['newHostList'];
-  }
-
-  interface Exposes {
-    getValue: () => Promise<
-      {
-        ip: string;
-        bk_cloud_id: number;
-        bk_host_id: number;
-        bk_biz_id: number;
-      }[]
-    >;
-  }
-
   const props = defineProps<Props>();
 
   const genHostKey = (hostData: HostTopoInfo) => `#${hostData.bk_cloud_id}#${hostData.ip}`;
@@ -303,7 +298,12 @@
   watch(
     () => props.newHostList,
     () => {
-      localValue.value = props.newHostList.join(',');
+      if (props.newHostList.length > 0) {
+        localValue.value = props.newHostList.join(',');
+        setTimeout(() => {
+          inputRef.value!.getValue();
+        });
+      }
     },
     {
       immediate: true,
@@ -344,13 +344,14 @@
     isShowIpSelector.value = true;
   };
 
-  const disableDialogSubmitMethod = (hostList: HostInfo[]) => (hostList.length === 2 ? false : t('需n台', { n: 2 }));
-
-  const disableHostMethod = (data: HostInfo, list: HostInfo[]) => (list.length >= 2 ? t('仅需n台', { n: 2 }) : false);
+  const disableDialogSubmitMethod = (hostList: HostInfo[]) => (hostList.length === 2 ? false : t('仅需n台', { n: 2 }));
 
   const handleHostChange = (hostList: HostInfo[]) => {
     localHostList.value = hostList;
     localValue.value = hostList.map((hostItem) => hostItem.ip).join(',');
+    setTimeout(() => {
+      inputRef.value!.getValue();
+    });
   };
 
   const handleConflictHostChange = (hostData: HostTopoInfo, checked: boolean) => {
@@ -381,10 +382,10 @@
         bk_host_id: hostItem.host_id,
         bk_biz_id: hostItem.biz.id,
       }));
-      return inputRef
-        .value!.getValue()
-        .then(() => Promise.resolve(hostList))
-        .catch(() => Promise.reject(hostList));
+      return inputRef.value!.getValue().then(() => ({
+        new_master: hostList[0],
+        new_slave: hostList[1],
+      }));
     },
   });
 </script>

diff --git a/...ews/db-manage/tendb-cluster/master-slave-clone/pages/page1/components/RenderSlaveHost.vue b/...ews/db-manage/tendb-cluster/master-slave-clone/pages/page1/components/RenderSlaveHost.vue
@@ -40,12 +40,14 @@
     (e: 'change', value: string): void;
   }
 
-  interface Expose {
+  interface Exposes {
     getValue: () => Promise<{
-      ip: string;
-      bk_cloud_id: number;
-      bk_host_id: number;
-      bk_biz_id: number;
+      old_slave: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
     }>;
   }
 
@@ -94,18 +96,16 @@
     },
   );
 
-  defineExpose<Expose>({
+  defineExpose<Exposes>({
     getValue() {
-      const slave = slaveInfo.value;
-      if (slave) {
-        return Promise.resolve({
-          ip: slave.ip,
-          bk_cloud_id: slave.bk_cloud_id,
-          bk_host_id: slave.bk_host_id,
-          bk_biz_id: slave.bk_biz_id,
-        });
-      }
-      return textRef.value!.getValue();
+      return textRef.value!.getValue().then(() => ({
+        old_slave: {
+          ip: slaveInfo.value?.ip,
+          bk_cloud_id: slaveInfo.value?.bk_cloud_id,
+          bk_host_id: slaveInfo.value?.bk_host_id,
+          bk_biz_id: slaveInfo.value?.bk_biz_id,
+        },
+      }));
     },
   });
 </script>