fix(frontend): tendbcluster、doris的tab缺失 TencentBlueKing#8175

# Reviewed, transaction id: 24987
royalpioneer · Nov 27, 2024 · f5f274e · f5f274e
1 parent a5dc8c9
commit f5f274e
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 101 deletions.
diff --git a/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts b/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
@@ -275,26 +275,26 @@ const bigdata: InfoType = {
         name: t('冷_热节点规格'),
       },
     ],
-    [ClusterTypes.DORIS]: {
-      id: ClusterTypes.DORIS,
-      name: 'Doris',
-      dbType: DBTypes.DORIS,
-      moduleId: 'bigdata',
-      machineList: [
-        {
-          id: MachineTypes.DORIS_FOLLOWER,
-          name: t('Follower节点规格'),
-        },
-        {
-          id: MachineTypes.DORIS_OBSERVER,
-          name: t('Observer节点规格'),
-        },
-        {
-          id: MachineTypes.DORIS_BACKEND,
-          name: t('冷_热节点规格'),
-        },
-      ],
-    },
+  },
+  [ClusterTypes.DORIS]: {
+    id: ClusterTypes.DORIS,
+    name: 'Doris',
+    dbType: DBTypes.DORIS,
+    moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.DORIS_FOLLOWER,
+        name: t('Follower节点规格'),
+      },
+      {
+        id: MachineTypes.DORIS_OBSERVER,
+        name: t('Observer节点规格'),
+      },
+      {
+        id: MachineTypes.DORIS_BACKEND,
+        name: t('冷_热节点规格'),
+      },
+    ],
   },
 };
 

diff --git a/dbm-ui/frontend/src/common/const/clusterTypes.ts b/dbm-ui/frontend/src/common/const/clusterTypes.ts
@@ -25,24 +25,21 @@ export enum ClusterTypes {
   TENDIS_PLUS_CLUSTER = 'TendisplusCluster', // TendisplusCluster集群
   DBMON = 'dbmon', // redis监控
 }
-// bigdata
+
 export enum ClusterTypes {
+  // bigdata
   ES = 'es',
   KAFKA = 'kafka',
   HDFS = 'hdfs',
   INFLUXDB = 'influxdb',
   PULSAR = 'pulsar',
   RIAK = 'riak',
   DORIS = 'doris',
-}
-// mongo
-export enum ClusterTypes {
+  // mongo
   MONGO_REPLICA_SET = 'MongoReplicaSet', // Mongo副本集群
   MONGO_SHARED_CLUSTER = 'MongoShardedCluster', // Mongo分片集群
   MONGODB = 'mongodb',
-}
-// sqlserver
-export enum ClusterTypes {
+  // sqlserver
   SQLSERVER_SINGLE = 'sqlserver_single', // SQLServer单节点版
   SQLSERVER_HA = 'sqlserver_ha', // SQLServer主从版
 }

diff --git a/dbm-ui/frontend/src/common/const/machineTypes.ts b/dbm-ui/frontend/src/common/const/machineTypes.ts
@@ -2,73 +2,58 @@
  * 机器类型
  */
 
-// mysql
 export enum MachineTypes {
-  MYSQL_PROXY = 'proxy', // Proxy
-  MYSQL_BACKEND = 'backend', // 后端存储
-  // SINGLE = 'single',
-}
-// spider
-export enum MachineTypes {
-  // SPIDER = 'spider',
-  // REMOTE = 'remote',
-  TENDBCLUSTER_PROXY = 'proxy', // 接入层Master
-  TENDBCLUSTER_BACKEND = 'backend', // 后端存储
-}
-// redis
-export enum MachineTypes {
-  REDIS_PROXY = 'proxy',
-  REDIS_TENDIS_CACHE = 'TwemproxyRedisInstance', // TendisCache后端存储
-  REDIS_TENDIS_SSD = 'TwemproxyTendisSSDInstance', // TendisSSD后端存储
-  REDIS_TENDIS_PLUS = 'PredixyTendisplusCluster', // TendisPlus后端存储
-  REDIS_CLUSTER = 'PredixyRedisCluster', // RedisCluster
-  REDIS_INSTANCE = 'RedisInstance', // Redis主从
-}
-// mongodb
-export enum MachineTypes {
-  MONGOS = 'mongos', // Mongos
-  MONGODB = 'mongodb', // 副本集/ShardSvr
-  MONGO_CONFIG = 'mongo_config', // ConfigSvr
-}
-// sqlserver
-export enum MachineTypes {
-  // SQLSERVER_HA = 'sqlserver_ha',
-  // SQLSERVER_SINGLE = 'sqlserver_single',
-  SQLSERVER = 'sqlserver', // 后端存储
-}
-// kafka
-export enum MachineTypes {
-  KAFKA_BROKER = 'broker', // Broker节点
-  KAFKA_ZOOKEEPER = 'zookeeper', // Zookeeper节点
-}
-// es
-export enum MachineTypes {
-  ES_DATANODE = 'es_datanode', // 冷/热节点
-  ES_MASTER = 'es_master', // Master节点
-  ES_CLIENT = 'es_client', // Client节点
-}
-// hdfs
-export enum MachineTypes {
-  HDFS_MASTER = 'hdfs_master', // NameNode/Zookeeper/JournalNode节点
-  HDFS_DATANODE = 'hdfs_datanode', // DataNode节点
-}
-// pulsar
-export enum MachineTypes {
-  PULSAR_BROKER = 'pulsar_broker', // Broker节点
-  PULSAR_BOOKKEEPER = 'pulsar_bookkeeper', // Bookkeeper节点
-  PULSAR_ZOOKEEPER = 'pulsar_zookeeper', // Zookeeper节点
-}
-// influxdb
-export enum MachineTypes {
-  INFLUXDB = 'influxdb', // 后端存储
-}
-// riak
-export enum MachineTypes {
-  RIAK = 'riak', // 后端存储
-}
-// doris
-export enum MachineTypes {
-  DORIS_FOLLOWER = 'doris_follower', // Follower节点
-  DORIS_OBSERVER = 'doris_observer', // Observer节点
-  DORIS_BACKEND = 'doris_backend', // 冷/热节点
+  // mysql
+  BACKEND = 'backend',
+  PROXY = 'proxy',
+  SINGLE = 'single',
+
+  // spider
+  SPIDER = 'spider',
+  REMOTE = 'remote',
+
+  // redis
+  TENDISCACHE = 'tendiscache',
+  TENDISSSD = 'tendisssd',
+  TENDISPLUS = 'tendisplus',
+  TWEMPROXY = 'twemproxy',
+  PREDIXY = 'predixy',
+
+  // mongodb
+  MONGOS = 'mongos',
+  MONGODB = 'mongodb',
+  MONGO_CONFIG = 'mongo_config',
+
+  // sqlserver
+  SQLSERVER_HA = 'sqlserver_ha',
+  SQLSERVER_SINGLE = 'sqlserver_single',
+
+  // kafka
+  BROKER = 'broker',
+  ZOOKEEPER = 'zookeeper',
+
+  // es
+  ES_DATANODE = 'es_datanode',
+  ES_MASTER = 'es_master',
+  ES_CLIENT = 'es_client',
+
+  // hdfs
+  HDFS_MASTER = 'hdfs_master',
+  HDFS_DATANODE = 'hdfs_datanode',
+
+  // pulsar
+  PULSAR_BROKER = 'pulsar_broker',
+  PULSAR_BOOKKEEPER = 'pulsar_bookkeeper',
+  PULSAR_ZOOKEEPER = 'pulsar_zookeeper',
+
+  // doris
+  DORIS_FOLLOWER = 'doris_follower',
+  DORIS_OBSERVER = 'doris_observer',
+  DORIS_BACKEND = 'doris_backend',
+
+  // influxdb
+  INFLUXDB = 'influxdb',
+
+  // riak
+  RIAK = 'riak',
 }
diff --git a/dbm-ui/frontend/src/views/db-configure/business/Detail.vue b/dbm-ui/frontend/src/views/db-configure/business/Detail.vue
@@ -118,6 +118,9 @@
       if (!route.query.form) {
         router.push({
           name: 'DbConfigureList',
+          params: {
+            clusterType: props.clusterType,
+          },
         });
         return;
       }

diff --git a/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useBaseDetails.ts b/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useBaseDetails.ts
@@ -31,7 +31,7 @@ interface State {
 /**
  * 获取参数管理基本信息
  */
-export const useBaseDetails = (immediateFetch = true) => {
+export const useBaseDetails = (immediateFetch = true, confName = 'db_version') => {
   const getFetchParams = (versionKey: 'version' | 'proxy_version', confType = 'dbconf') => {
     if (treeNode === undefined) {
       return {} as ServiceParameters<typeof getLevelConfig>;
@@ -115,7 +115,7 @@ export const useBaseDetails = (immediateFetch = true) => {
     getLevelConfig(params)
       .then((res) => {
         res.conf_items.forEach((item) => {
-          if (item.conf_name === 'db_version') {
+          if (item.conf_name === confName) {
             state.version = item.conf_value ?? '';
           } else if (item.conf_name === 'charset') {
             state.data.charset = item.conf_value ?? '';

diff --git a/dbm-ui/frontend/src/views/db-configure/components/DetailsBase.vue b/dbm-ui/frontend/src/views/db-configure/components/DetailsBase.vue
@@ -39,7 +39,23 @@
           class="details-base__table"
           :data="configItems"
           :level="level"
-          :sticky-top="stickyTop" />
+          :sticky-top="stickyTop">
+          <template
+            v-if="tabs.length > 1"
+            #prefix>
+            <BkRadioGroup
+              v-model="clusterType"
+              type="capsule">
+              <BkRadioButton
+                v-for="tab of tabs"
+                :key="tab"
+                :label="tab"
+                style="width: 200px">
+                {{ tab }} {{ t('参数配置') }}
+              </BkRadioButton>
+            </BkRadioGroup>
+          </template>
+        </ReadonlyTable>
       </DbCard>
       <DbCard
         v-for="card of extraParametersCards"
@@ -76,6 +92,7 @@
 
   import EditInfo, { type EditEmitData } from '@components/editable-info/index.vue';
 
+  import { useBaseDetails } from '../business/list/components/hooks/useBaseDetails';
   import type { ExtraConfListItem } from '../common/types';
 
   import ReadonlyTable from './ReadonlyTable.vue';
@@ -117,11 +134,25 @@
   const { t } = useI18n();
   const router = useRouter();
   const route = useRoute();
+  const { state } = useBaseDetails(true, 'spider_version');
 
+  const clusterType = ref(props.data.version);
+
+  const tabs = computed(() => {
+    if (!state.version) {
+      return [props.data.version];
+    }
+    return [props.data.version, state.data.version];
+  });
   const cardTitle = computed(() => props.title || t('参数配置'));
   // 是否为平台级别配置
   const isPlat = computed(() => ConfLevels.PLAT === props.level);
-  const configItems = computed(() => props.data?.conf_items || []);
+  const configItems = computed(() => {
+    if (clusterType.value === props.data.version) {
+      return props.data.conf_items;
+    }
+    return state.data.conf_items;
+  });
   const isShowCharset = computed(() => !!props.data.charset);
   const baseInfoColumns = computed(() => {
     const baseColumns = [
@@ -161,6 +192,14 @@
     return baseColumns;
   });
 
+  watch(
+    () => props.data.version,
+    () => {
+      clusterType.value = props.data.version;
+    },
+    { immediate: true },
+  );
+
   /**
    * 基础信息编辑
    */
@@ -193,7 +232,12 @@
     const name = isPlat.value ? 'PlatformDbConfigureEdit' : 'DbConfigureEdit';
     router.push({
       name,
-      params: { ...route.params, ...props.routeParams, ...extra },
+      params: {
+        ...route.params,
+        ...props.routeParams,
+        ...extra,
+        version: clusterType.value,
+      },
     });
   };
 </script>

diff --git a/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue b/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue
@@ -13,9 +13,11 @@
 
 <template>
   <div class="db-configure-readonly-parameters-table">
-    <div class="mb-16">
+    <div class="mb-16 operation-box">
+      <slot name="prefix" />
       <BkInput
         v-model="search"
+        class="search-input"
         clearable
         :placeholder="$t('请输入参数项')"
         style="width: 320px" />
@@ -161,6 +163,14 @@
   .db-configure-readonly-parameters-table {
     width: 100%;
 
+    .operation-box {
+      display: flex;
+
+      .search-input {
+        margin-left: auto;
+      }
+    }
+
     .config-name-box {
       display: inline-block;
       max-width: calc(100% - 18px);