feat(frontend): mysql工具箱支持格子内选择集群/实例/IP TencentBlueKing#6997

# Reviewed, transaction id: 19121
jinquantianxia · Sep 23, 2024 · 2ac219e · 2ac219e
1 parent d871494
commit 2ac219e
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 51 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3529,5 +3529,11 @@
   "不允许输入系统库和特殊库，如mysql、sys 等": "不允许输入系统库和特殊库，如mysql、sys 等",
   "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符": "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符",
   "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用",
+  "选择实例": "选择实例",
+  "格式不正确": "格式不正确",
+  "ip不存在": "ip不存在",
+  "请输入或选择主机": "请输入或选择主机",
+  "实例/IP重复": "实例/IP重复",
+  "同主机关联的其他集群，勾选后一同克隆": "同主机关联的其他集群，勾选后一同克隆",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -3,7 +3,6 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: (typeof import('vue'))['EffectScope'];

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
@@ -124,6 +124,7 @@
       id: 0,
     },
     version: '',
+    is_stand_by: false,
   });
 
   export type IDataRowBatchKey = keyof Pick<IDataRow, 'dbPatterns' | 'ignoreDbs' | 'tablePatterns' | 'ignoreTables'>;

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
@@ -49,20 +49,22 @@
     @change="handleInstancesChange" />
 </template>
 <script lang="ts">
+  type InstanceInfo = ServiceReturnType<typeof checkMysqlInstances>[number];
+
   const instanceWithSelectorMemo: { [key: string]: Record<string, boolean> } = {};
 </script>
 <script setup lang="ts">
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import TendbhaInstanceModel from '@services/model/mysql/tendbha-instance';
   import { checkMysqlInstances } from '@services/source/instances';
 
   import { ClusterTypes } from '@common/const';
   import { ipPort, ipv4 } from '@common/regex';
 
   import InstanceSelector, {
     type InstanceSelectorValues,
+    type IValue,
     type PanelListType,
   } from '@components/instance-selector/Index.vue';
   import TableEditInput from '@components/render-table/columns/input/index.vue';
@@ -81,6 +83,11 @@
     db_module_name?: string;
     master_domain?: string;
     cluster_type?: string;
+    related_clusters?: InstanceInfo['related_clusters'];
+    related_instances?: {
+      cluster_id: number;
+      instance_address: string;
+    }[];
   }
 
   interface Props {
@@ -97,7 +104,7 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<InstanceBasicInfo>;
+    getValue: () => Promise<Required<InstanceBasicInfo>>;
     focus: () => void;
   }
 
@@ -119,9 +126,10 @@
   const isFocused = ref(false);
   const isShowInstanceSelecotr = ref(false);
   const localValue = ref('');
-  const selectedIntances = shallowRef<InstanceSelectorValues<TendbhaInstanceModel>>({ [ClusterTypes.TENDBHA]: [] });
+  const selectedIntances = shallowRef<InstanceSelectorValues<IValue>>({ [ClusterTypes.TENDBHA]: [] });
 
   const instanceKey = `instance_${random()}`;
+  let modelValueLocal: InstanceBasicInfo;
   instanceWithSelectorMemo[instanceKey] = {};
 
   const rules = [
@@ -155,10 +163,17 @@
           instanceWithSelectorMemo[instanceKey][instanceData.instance_address] = true;
           if (
             !modelValue.value?.instance_address ||
-            modelValue.value.instance_address !== instanceData.instance_address
+            modelValueLocal?.instance_address !== instanceData.instance_address
           ) {
-            modelValue.value = instanceData;
-            emits('instanceChange', instanceData);
+            modelValueLocal = _.cloneDeep({
+              ...instanceData,
+              related_instances: data.map((item) => ({
+                cluster_id: item.cluster_id,
+                instance_address: item.instance_address,
+              })),
+            });
+            modelValue.value = modelValueLocal;
+            emits('instanceChange', modelValueLocal as Required<InstanceBasicInfo>);
           }
           return true;
         }),
@@ -207,6 +222,11 @@
       } else {
         localValue.value = `${modelValue.value.bk_cloud_id}:${modelValue.value.ip}:${modelValue.value.port}`;
       }
+      if (modelValueLocal?.ip !== modelValue.value?.ip) {
+        setTimeout(() => {
+          inputRef.value.getValue();
+        });
+      }
     },
     {
       immediate: true,
@@ -218,9 +238,9 @@
   };
 
   // 批量选择
-  const handleInstancesChange = (selected: InstanceSelectorValues<TendbhaInstanceModel>) => {
+  const handleInstancesChange = (selected: InstanceSelectorValues<IValue>) => {
     selectedIntances.value = selected;
-    const list = selected[ClusterTypes.TENDBHA];
+    const list = _.flatMap(Object.values(selected));
     if (props.type === 'instance') {
       localValue.value = list[0].instance_address;
     } else if (props.type === 'ip') {

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
@@ -127,17 +127,18 @@
 
   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,
-        },
-      })
-        .then((data) => {
+    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,
+          },
+        }).then((data) => {
           window.changeConfirm = false;
           router.push({
             name: 'MySQLProxyReplace',
@@ -148,11 +149,11 @@
               ticketId: data.id,
             },
           });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
-    });
+        }),
+      )
+      .finally(() => {
+        isSubmitting.value = false;
+      });
   };
 
   const handleReset = () => {

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
@@ -16,8 +16,11 @@
     <FixedColumn fixed="left">
       <RenderOriginalProxyHost
         ref="originRef"
-        v-model="localIp"
-        @input-finish="handleOriginProxyInputFinish" />
+        :cluster-types="['TendbhaHost']"
+        :model-value="data.originProxy"
+        :tab-list-config="tabListConfig"
+        type="ip"
+        @instance-change="handleOriginProxyInputFinish" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderRelatedInstances
@@ -45,7 +48,7 @@
     rowKey: string;
     originProxy: {
       ip: string;
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
       port: number;
@@ -55,7 +58,7 @@
       instance: string;
     }[];
     targetProxy: {
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
       cluster_id: number;
@@ -79,14 +82,14 @@
       cluster_ids: number[];
       origin_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
       };
       target_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
@@ -101,7 +104,7 @@
       data.originProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -111,7 +114,7 @@
       data.targetProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -120,25 +123,58 @@
 </script>
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
 
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderOriginalProxyHost from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import RenderTargetProxy from '../../../common/RenderTargetProxy.vue';
-  import RenderOriginalProxyHost from '../RenderOriginalProxyHost.vue';
   import RenderRelatedInstances from '../RenderRelatedInstances.vue';
 
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
+  const { t } = useI18n();
+
   const originRef = ref<InstanceType<typeof RenderOriginalProxyHost>>();
   const relatedInstancesRef = ref<InstanceType<typeof RenderRelatedInstances>>();
   const targetRef = ref<InstanceType<typeof RenderTargetProxy>>();
 
   const localIp = ref('');
   const localRelatedInstances = ref<IDataRow['relatedInstances']>([]);
 
+  const tabListConfig = {
+    TendbhaHost: [
+      {
+        id: 'TendbhaHost',
+        name: t('目标Proxy主机'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
   watch(
     () => props.data,
     () => {
@@ -149,8 +185,18 @@
     },
   );
 
-  const handleOriginProxyInputFinish = (value: IDataRow['relatedInstances']) => {
-    localRelatedInstances.value = value;
+  const handleOriginProxyInputFinish = (info: {
+    ip: string;
+    related_instances: {
+      cluster_id: number;
+      instance_address: string;
+    }[];
+  }) => {
+    localIp.value = info.ip;
+    localRelatedInstances.value = info.related_instances.map((item) => ({
+      cluster_id: item.cluster_id,
+      instance: item.instance_address,
+    }));
   };
 
   const handleAppend = () => {
@@ -171,7 +217,13 @@
         relatedInstancesRef.value!.getValue(),
         targetRef.value!.getValue(),
       ]).then(([originData, relatedInstancesData, targetData]) => ({
-        ...originData,
+        origin_proxy: {
+          ip: originData.ip,
+          bk_cloud_id: originData.bk_cloud_id,
+          bk_host_id: originData.bk_host_id,
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          port: originData.port,
+        },
         ...relatedInstancesData,
         ...targetData,
       }));
-Original file line number
+Diff line change
@@ Expand Up / @@ -124,6 +124,7 @@ @@
           id: 0,
         },
         version: '',
+        is_stand_by: false,
       });
       export type IDataRowBatchKey = keyof Pick<IDataRow, 'dbPatterns' | 'ignoreDbs' | 'tablePatterns' | 'ignoreTables'>;
@@ Expand Down @@