feat(frontend): 集群标准化 #4654

# Reviewed, transaction id: 24305

dbm-ui/frontend/src/common/const/queryClusterTypes.ts → dbm-ui/frontend/src/common/const/dbClusterTypes.ts

@@ -4,7 +4,7 @@ import { DBTypes } from './dbTypes';
 /**
  * db类型关联集群类型集合映射关系
  */
-export const queryClusterTypes = {
+export const DBClusterTypes = {
   [DBTypes.MYSQL]: [ClusterTypes.TENDBSINGLE, ClusterTypes.TENDBHA],
   [DBTypes.TENDBCLUSTER]: [ClusterTypes.TENDBCLUSTER],
   [DBTypes.REDIS]: [

dbm-ui/frontend/src/common/const/index.ts

@@ -4,6 +4,7 @@ export * from './clusterInsStatus';
 export * from './clusterTypeInfos';
 export * from './clusterTypes';
 export * from './confLevels';
+export * from './dbClusterTypes';
 export * from './dbSysExclude';
 export * from './dbTypeInfos';
 export * from './dbTypes';
@@ -12,7 +13,6 @@ export * from './machineTypes';
 export * from './occupiedInnerHeight';
 export * from './osTypes';
 export * from './pipelineStatus';
-export * from './queryClusterTypes';
 export * from './ticketTypeInfos';
 export * from './ticketTypes';
 export * from './userPersonalSettings';

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3659,5 +3659,6 @@
   "模糊搜索": "模糊搜索",
   "精确搜索": "精确搜索",
   "每个分类最多显示 10 条记录，点击搜索可查看全部记录。": "每个分类最多显示 10 条记录，点击搜索可查看全部记录。",
+  "TenDBCluster集群": "TenDBCluster集群",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/services/source/dbbase.ts

@@ -106,6 +106,28 @@ export function checkInstance<T extends InstanceInfos>(params: { instance_addres
 
 // 查询全集群信息
 export function queryAllTypeCluster(params: {
+  bk_biz_id: number;
+  cluster_types?: string;
+  immute_domain?: string;
+  phase?: string;
+  limit?: number;
+  offset?: number;
+}) {
+  return http.get<
+    {
+      bk_cloud_id: number;
+      cluster_type: string;
+      id: number;
+      immute_domain: string;
+      major_version: string;
+      name: string;
+      region: string;
+    }[]
+  >(`${path}/simple_query_cluster/`, params);
+}
+
+// 全集群列表
+export function queryAllTypeClusterList(params: {
   bk_biz_id?: number; // 业务id
   cluster_types?: string; // 集群类型(逗号间隔)
   immute_domain?: string; // 集群域名
@@ -140,5 +162,13 @@ export function queryAllTypeCluster(params: {
         status: string;
       }[]
     >
-  >(`${path}/simple_query_cluster/`, params);
+  >(`${path}/simple_query_cluster_v2/`, params);
+}
+export type ClusterInfo = ServiceReturnType<typeof queryAllTypeClusterList>['results'][number];
+
+/**
+ * 根据用户手动输入的域名列表查询
+ */
+export function checkDomains(params: { domains: string[] }) {
+  return http.post<ClusterInfo[]>(`${path}/check_domains/`, params);
 }

dbm-ui/frontend/src/services/source/mysql.ts

@@ -39,10 +39,3 @@ export function getClusterList(params: {
 }) {
   return http.post<ListBase<TendbhaModel[]>>(`/apis/mysql/query_clusters/`, params);
 }
-
-/**
- * 根据用户手动输入的域名列表查询
- */
-export function checkDomains(params: { domains: Array<string> }) {
-  return http.post<Array<TendbhaModel>>(`/apis/mysql/check_domains/`, params);
-}

dbm-ui/frontend/src/views/cluster-standardize/Index.vue

@@ -28,14 +28,16 @@
 
   import Mysql from './components/mysql/Index.vue';
   import Success from './components/Success.vue';
+  import Tendbcluster from './components/tendbcluster/Index.vue';
 
   const router = useRouter();
   const route = useRoute();
 
-  const exclude = Object.values(DBTypes).filter((type) => type !== DBTypes.MYSQL);
+  const exclude = Object.values(DBTypes).filter((type) => ![DBTypes.TENDBCLUSTER, DBTypes.MYSQL].includes(type));
 
   const comMap = {
     [DBTypes.MYSQL]: Mysql,
+    [DBTypes.TENDBCLUSTER]: Tendbcluster,
   } as Record<string, any>;
 
   const active = ref(DBTypes.MYSQL);

dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue

@@ -31,9 +31,9 @@
       <template #main>
         <PanelTab
           v-model="panelTabActive"
-          :tab-list="tabListMap[dbType]" />
+          :db-type="dbType" />
         <Component
-          :is="renderCom"
+          :is="ClusterSelect"
           :key="panelTabActive"
           :active-panel-id="panelTabActive"
           :last-values="lastValues"
@@ -68,63 +68,60 @@
     </template>
   </BkDialog>
 </template>
+<script setup lang="ts" generic="T extends DBTypes.MYSQL | DBTypes.TENDBCLUSTER">
+  import type { ClusterInfo } from '@services/source/dbbase';
 
-<script lang="ts">
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
-
-  export type ICluster = ServiceReturnType<typeof queryAllTypeCluster>['results'][number];
-
-  interface Props {
-    dbType: DBTypes;
-    selected: Record<string, ICluster[]>;
-  }
-
-  interface Emits {
-    (e: 'change', value: Props['selected']): void;
-  }
-</script>
-<script setup lang="ts">
   import { ClusterTypes, DBTypes } from '@common/const';
 
   import { t } from '@locales/index';
 
   import ClusterSelect from './components/cluster-select/Index.vue';
   import PanelTab from './components/common/PanelTab.vue';
-  import ManualInput from './components/manual-input/Index.vue';
+  // import ManualInput from './components/manual-input/Index.vue';
   import PreviewResult from './components/preview-result/Index.vue';
 
-  const props = withDefaults(defineProps<Props>(), {
-    selected: () => ({}),
-  });
+  interface SelectedMap {
+    [DBTypes.MYSQL]: {
+      [ClusterTypes.TENDBHA]: ClusterInfo[];
+      [ClusterTypes.TENDBSINGLE]: ClusterInfo[];
+    };
+    [DBTypes.TENDBCLUSTER]: {
+      [ClusterTypes.TENDBCLUSTER]: ClusterInfo[];
+    };
+  }
+
+  interface Props {
+    dbType: T;
+    selected: SelectedMap[T];
+  }
+
+  interface Emits {
+    (e: 'change', value: Record<string, ClusterInfo[]>): void;
+  }
+
+  const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
   const isShow = defineModel<boolean>('isShow', {
     default: false,
   });
 
-  const tabListMap = {
-    [DBTypes.MYSQL]: [
-      {
-        id: ClusterTypes.TENDBHA,
-        name: t('MySQL主从'),
-      },
-      {
-        id: ClusterTypes.TENDBSINGLE,
-        name: t('MySQL单节点'),
-      },
-    ],
-  } as Record<DBTypes, { id: string; name: string }[]>;
-
-  const panelTabActive = ref(tabListMap[props.dbType][0].id);
-  const lastValues = reactive<NonNullable<Props['selected']>>({});
-
-  const renderCom = computed(() => {
-    if (panelTabActive.value === 'manual') {
-      return ManualInput;
-    }
-    return ClusterSelect;
+  const panelTabActive = ref();
+  const lastValues = reactive<NonNullable<Record<string, ClusterInfo[]>>>({
+    [ClusterTypes.TENDBHA]: [],
+    [ClusterTypes.TENDBSINGLE]: [],
+    [ClusterTypes.TENDBCLUSTER]: [],
   });
+
+  // const renderCom = computed(
+  //   () => {
+  //     if (panelTabActive.value === 'manual') {
+  //       return ManualInput;
+  //     }
+  //     return ClusterSelect;
+  //   }
+  // );
   const isEmpty = computed(() => Object.values(lastValues).every((values) => values.length < 1));
 
   watch(
@@ -152,7 +149,7 @@
     lastValues[oldValue] = [];
   });
 
-  const handleChange = (values: Props['selected']) => {
+  const handleChange = (values: Record<string, ClusterInfo[]>) => {
     Object.assign(lastValues, values);
   };
 

dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue

@@ -78,19 +78,19 @@
     </div>
   </BkLoading>
 </template>
-<script setup lang="ts" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/source/dbbase';
 
   import { ClusterTypes } from '@common/const';
 
   import { useTopoData } from './hooks/useTopoData';
   import Table from './Table.vue';
 
   interface Props {
-    lastValues: Record<string, T[]>;
-    activePanelId?: string;
+    lastValues: Record<string, ClusterInfo[]>;
+    activePanelId: string;
   }
 
   interface Emits {

dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue

@@ -36,10 +36,10 @@
     </BkLoading>
   </div>
 </template>
-<script setup lang="tsx" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/source/dbbase';
 
   import { useLinkQueryColumnSerach } from '@hooks';
 
@@ -51,12 +51,12 @@
   import type { TopoTreeNode } from './hooks/useTopoData';
 
   interface DataRow {
-    data: T,
+    data: ClusterInfo,
   }
 
   interface Props {
+    lastValues: Record<string, ClusterInfo[]>;
     activePanelId: string;
-    lastValues: Record<string, T[]>;
     selectedTreeNode?: TopoTreeNode;
   }
 
@@ -112,10 +112,10 @@
   } = useLinkQueryColumnSerach({
     searchType: props.activePanelId,
     fetchDataFn: () => fetchResources(),
-    isQueryAttrs: false
+    isQueryAttrs: false,
   });
 
-  const checkedMap = shallowRef({} as Record<string, T>);
+  const checkedMap = shallowRef({} as Record<string, ClusterInfo>);
 
   const params = computed<{ cluster_types: string; bk_biz_id?: number; db_module_id?: number }>(() => {
     const base = {
@@ -263,12 +263,12 @@
   }, { immediate: true, deep: true });
 
   const triggerChange = () => {
-    const result = Object.values(checkedMap.value).reduce((result, item) => {
+    const result = Object.values(checkedMap.value).reduce<ClusterInfo[]>((result, item) => {
       result.push({
         ...item,
       });
       return result;
-    }, [] as T[]);
+    }, []);
 
     if (props.activePanelId) {
       emits('change', {
@@ -278,7 +278,7 @@
     }
   };
 
-  const handleTableSelectOne = (checked: boolean, data: T) => {
+  const handleTableSelectOne = (checked: boolean, data: ClusterInfo) => {
     const lastCheckMap = { ...checkedMap.value };
     if (checked) {
       lastCheckMap[data.immute_domain] = data;

dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/hooks/useTableData.ts

@@ -12,9 +12,10 @@
  */
 
 import type { ISearchValue } from 'bkui-vue/lib/search-select/utils';
+import _ from 'lodash';
 import { useRequest } from 'vue-request';
 
-import { queryAllTypeCluster } from '@services/source/dbbase';
+import { type ClusterInfo, queryAllTypeClusterList } from '@services/source/dbbase';
 
 import { getSearchSelectorParams } from '@utils';
 
@@ -29,7 +30,7 @@ export function useTableData(
     db_module_id?: number;
   }>,
 ) {
-  const tableData = shallowRef<ServiceReturnType<typeof queryAllTypeCluster>['results']>([]);
+  const tableData = shallowRef<ClusterInfo[]>([]);
   const pagination = reactive({
     count: 0,
     current: 1,
@@ -39,15 +40,21 @@ export function useTableData(
     layout: ['total', 'limit', 'list'],
   });
 
-  const searchParams = computed(() => ({
-    limit: pagination.limit,
-    offset: (pagination.current - 1) * pagination.limit,
-    extra: 1,
-    ...getSearchSelectorParams(searchSelectValue.value),
-    ...params.value,
-  }));
+  const searchParams = computed(() => {
+    const comParams = getSearchSelectorParams(searchSelectValue.value);
+    const cloneParams = _.cloneDeep(comParams);
+    delete cloneParams.domain;
+    return {
+      limit: pagination.limit,
+      offset: (pagination.current - 1) * pagination.limit,
+      extra: 1,
+      immute_domain: comParams.domain,
+      ...cloneParams,
+      ...params.value,
+    };
+  });
 
-  const { run: fetchDataFn, loading: isLoading } = useRequest(queryAllTypeCluster, {
+  const { run: fetchDataFn, loading: isLoading } = useRequest(queryAllTypeClusterList, {
     manual: true,
     onSuccess(data) {
       tableData.value = data.results;