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

# Reviewed, transaction id: 23991

Author: JustaCattt

dbm-ui/frontend/src/common/const/queryClusterTypes.ts renamed to 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/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; // 集群域名
@@ -118,7 +140,7 @@ export function queryAllTypeCluster(params: {
   status?: string; // 集群状态
   bk_cloud_id?: number; // 集群所属云区域id
   region?: string; // 集群所属地域
-  limit?: number;
+  limit?: number; // limit: 10 表示分页，limit: -1表示分页结构的全量数据， limit： 不传limit参数或者值为空就返回旧数据结构的全量数据
   offset?: number;
 }) {
   return http.get<
@@ -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/components/cluster-selector/Index.vue

@@ -68,30 +68,26 @@
     </template>
   </BkDialog>
 </template>
+<script setup lang="ts">
+  import type { ClusterInfo } from '@services/source/dbbase';
 
-<script lang="ts">
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import { ClusterTypes, DBTypes } from '@common/const';
 
-  export type ICluster = ServiceReturnType<typeof queryAllTypeCluster>['results'][number];
+  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 PreviewResult from './components/preview-result/Index.vue';
 
   interface Props {
     dbType: DBTypes;
-    selected: Record<string, ICluster[]>;
+    selected: Record<string, ClusterInfo[]>;
   }
 
   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 PreviewResult from './components/preview-result/Index.vue';
 
   const props = withDefaults(defineProps<Props>(), {
     selected: () => ({}),

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

@@ -78,10 +78,10 @@
     </div>
   </BkLoading>
 </template>
-<script setup lang="ts" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="ts" generic="T extends ClusterInfo">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/source/dbbase';
 
   import { ClusterTypes } from '@common/const';
 

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" generic="T extends ClusterInfo">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/source/dbbase';
 
   import { useLinkQueryColumnSerach } from '@hooks';
 
@@ -112,7 +112,7 @@
   } = useLinkQueryColumnSerach({
     searchType: props.activePanelId,
     fetchDataFn: () => fetchResources(),
-    isQueryAttrs: false
+    isQueryAttrs: false,
   });
 
   const checkedMap = shallowRef({} as Record<string, T>);

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;

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

@@ -79,40 +79,38 @@
       <template #main>
         <BkLoading :loading="inputState.isLoading">
           <Table
-            :checked="checkedMap"
+            :active-panel-id="activePanelId"
+            :last-values="lastValues"
             :table-data="tableData"
             @change="handleChange" />
         </BkLoading>
       </template>
     </BkResizeLayout>
   </div>
 </template>
-<script setup lang="ts" generic="T extends TendbhaModel">
+<script setup lang="ts" generic="T extends ClusterInfo">
   import { useI18n } from 'vue-i18n';
 
-  import type TendbhaModel from '@services/model/mysql/tendbha';
-  import { checkDomains } from '@services/source/mysql';
+  import type { ClusterInfo } from '@services/source/dbbase';
+  import { checkDomains } from '@services/source/dbbase';
 
   import { domainRegex } from '@common/regex';
 
   import Table from './Table.vue';
 
   interface Props {
-    checked: Record<string, T>;
-    checkKey?: string;
+    lastValues: Record<string, T[]>;
+    activePanelId: string;
   }
 
   interface Emits {
-    (e: 'change', value: Props['checked']): void;
+    (e: 'change', value: Props['lastValues']): void;
   }
-  const props = withDefaults(defineProps<Props>(), {
-    checkKey: 'master_domain',
-  });
+  const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const inputRef = ref();
-  const checkedMap = computed(() => props.checked);
 
   const inputState = reactive({
     values: '',
@@ -135,7 +133,7 @@
     },
   });
 
-  const handleChange = (checked: Props['checked']) => {
+  const handleChange = (checked: Props['lastValues']) => {
     emits('change', checked);
   };
 
@@ -198,7 +196,7 @@
         const item = lines[i];
         const infos = results[i];
         const remove = lines.splice(i, 1);
-        const isExisted = results.find((existItem) => existItem[props.checkKey as keyof TendbhaModel] === item);
+        const isExisted = results.find((existItem) => existItem.immute_domain === item);
         if (!isExisted) {
           legalLines.push(...remove);
         } else {
@@ -212,12 +210,24 @@
       errorState.domain.selectionEnd = legalLines.join('\n').length;
 
       // 解析完成后选中
-      const checked = { ...props.checked };
+      const lastValues = { ...props.lastValues };
       for (const item of tableData.value) {
-        const domain = item.master_domain;
-        checked[domain] = item as T;
+        const clusterType = props.activePanelId;
+        if (!lastValues[clusterType]) {
+          lastValues[clusterType] = [];
+        }
+        const list = lastValues[clusterType];
+        const isExisted =
+          list.length > 0 &&
+          list.find((i) => `${i.immute_domain}_${i.bk_cloud_id}` === `${item.immute_domain}_${item.bk_cloud_id}`);
+        if (!isExisted) {
+          lastValues[clusterType].push(item);
+        }
       }
-      emits('change', checked);
+      emits('change', {
+        ...props.lastValues,
+        ...lastValues,
+      });
     } catch (_) {
       console.error(_);
     }

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

@@ -27,10 +27,10 @@
       :settings="tableSettings" />
   </div>
 </template>
-<script setup lang="tsx" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="tsx" generic="T extends ClusterInfo">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/source/dbbase';
 
   import DbStatus from '@components/db-status/index.vue';