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

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

@@ -11,7 +11,7 @@
  * the specific language governing permissions and limitations under the License.
  */
 
-import type { InstanceInfos, ListBase } from '@services/types';
+import type { ClusterInfo, InstanceInfos, ListBase } from '@services/types';
 
 import { ClusterTypes } from '@common/const';
 
@@ -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; // 集群域名
@@ -121,24 +143,12 @@ export function queryAllTypeCluster(params: {
   limit?: number;
   offset?: number;
 }) {
-  return http.get<
-    ListBase<
-      {
-        alias: string;
-        bk_biz_id: number;
-        bk_cloud_id: number;
-        bk_cloud_name: string;
-        cluster_type: string;
-        db_module_id: number;
-        db_module_name: string;
-        id: number;
-        immute_domain: string;
-        major_version: string;
-        name: string;
-        phase: string;
-        region: string;
-        status: string;
-      }[]
-    >
-  >(`${path}/simple_query_cluster/`, params);
+  return http.get<ListBase<ClusterInfo[]>>(`${path}/simple_query_cluster_v2/`, params);
+}
+
+/**
+ * 根据用户手动输入的域名列表查询
+ */
+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/services/types/clusterInfo.ts

@@ -0,0 +1,32 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+/**
+ * 通用集群信息
+ */
+export interface ClusterInfo {
+  alias: string;
+  bk_biz_id: number;
+  bk_cloud_id: number;
+  bk_cloud_name: string;
+  cluster_type: string;
+  db_module_id: number;
+  db_module_name: string;
+  id: number;
+  immute_domain: string;
+  major_version: string;
+  name: string;
+  phase: string;
+  region: string;
+  status: string;
+}

dbm-ui/frontend/src/services/types/index.ts

@@ -12,6 +12,7 @@
  */
 
 export * from './bizItem';
+export * from './clusterInfo';
 export * from './common';
 export * from './db';
 export * from './hostInfo';

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,59 @@
     </template>
   </BkDialog>
 </template>
-
 <script lang="ts">
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/types';
 
-  export type ICluster = ServiceReturnType<typeof queryAllTypeCluster>['results'][number];
+  import { ClusterTypes, DBTypes } from '@common/const';
 
-  interface Props {
-    dbType: DBTypes;
-    selected: Record<string, ICluster[]>;
-  }
-
-  interface Emits {
-    (e: 'change', value: Props['selected']): void;
+  interface SelectedMap {
+    [DBTypes.MYSQL]: {
+      [ClusterTypes.TENDBHA]?: ClusterInfo[];
+      [ClusterTypes.TENDBSINGLE]?: ClusterInfo[];
+    };
+    [DBTypes.TENDBCLUSTER]: {
+      [ClusterTypes.TENDBCLUSTER]?: ClusterInfo[];
+    };
   }
 </script>
-<script setup lang="ts">
-  import { ClusterTypes, DBTypes } from '@common/const';
-
-  import { t } from '@locales/index';
+<script setup lang="ts" generic="T extends keyof SelectedMap">
+  import { useI18n } from 'vue-i18n';
 
   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 Props {
+    dbType: T;
+    selected: SelectedMap[T];
+  }
+
+  interface Emits {
+    (e: 'change', value: Props['selected']): 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 { t } = useI18n();
+
+  const panelTabActive = ref();
+  const lastValues = reactive<Props['selected']>({});
+
+  // const renderCom = computed(
+  //   () => {
+  //     if (panelTabActive.value === 'manual') {
+  //       return ManualInput;
+  //     }
+  //     return ClusterSelect;
+  //   }
+  // );
   const isEmpty = computed(() => Object.values(lastValues).every((values) => values.length < 1));
 
   watch(
@@ -149,10 +145,12 @@
   );
 
   watch(panelTabActive, (_, oldValue) => {
-    lastValues[oldValue] = [];
+    Object.assign(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/types';
 
   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/types';
 
   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;