feat(frontend): 资源池统计视图 TencentBlueKing#6519

# Reviewed, transaction id: 20145
JustaCattt · Oct 10, 2024 · b46b028 · b46b028
1 parent 0052aa3
commit b46b028
Show file tree

Hide file tree

Showing 61 changed files with 2,570 additions and 1,541 deletions.
diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
@@ -30,6 +30,7 @@
     "bkui-vue": "2.0.1-beta.74",
     "date-fns": "3.6.0",
     "dayjs": "^1.11.13",
+    "echarts": "^5.5.1",
     "html-to-image": "1.11.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
@@ -49,7 +50,7 @@
     "vue-router": "^4.4.5",
     "vue-types": "^5.1.3",
     "vuedraggable": "4.1.0",
-    "xlsx": "0.18.5"
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.5.0",

diff --git a/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts b/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
@@ -4,18 +4,23 @@ import { t } from '@locales/index';
 
 import { ClusterTypes } from './clusterTypes';
 import { DBTypes } from './dbTypes';
+import { MachineTypes } from './machineTypes';
 
-interface InfoItem {
+export interface ClusterTypeInfoItem {
   id: ClusterTypes;
   name: string;
   dbType: DBTypes;
   moduleId: ExtractedControllerDataKeys;
+  machineList: {
+    id: MachineTypes;
+    name: string;
+  }[];
 }
 type InfoType = {
-  [x in ClusterTypes]?: InfoItem;
+  [x in ClusterTypes]?: ClusterTypeInfoItem;
 };
 type RequiredInfoType = {
-  [x in ClusterTypes]: InfoItem;
+  [x in ClusterTypes]: ClusterTypeInfoItem;
 };
 
 const mysql: InfoType = {
@@ -24,18 +29,47 @@ const mysql: InfoType = {
     name: t('MySQL单节点'),
     dbType: DBTypes.MYSQL,
     moduleId: 'mysql',
+    machineList: [
+      {
+        id: MachineTypes.SINGLE,
+        name: t('后端存储机型'),
+      },
+    ],
   },
   [ClusterTypes.TENDBHA]: {
     id: ClusterTypes.TENDBHA,
     name: t('MySQL主从'),
     dbType: DBTypes.MYSQL,
     moduleId: 'mysql',
+    machineList: [
+      {
+        id: MachineTypes.BACKEND,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.PROXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
+};
+
+const spider: InfoType = {
   [ClusterTypes.TENDBCLUSTER]: {
     id: ClusterTypes.TENDBCLUSTER,
     name: 'TenDBCluster',
-    dbType: DBTypes.MYSQL,
+    dbType: DBTypes.TENDBCLUSTER,
     moduleId: 'mysql',
+    machineList: [
+      {
+        id: MachineTypes.SPIDER,
+        name: t('接入层Master'),
+      },
+      {
+        id: MachineTypes.REMOTE,
+        name: t('后端存储规格'),
+      },
+    ],
   },
 };
 
@@ -45,90 +79,198 @@ const redis: InfoType = {
     name: 'TendisCache',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISCACHE,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.TWEMPROXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
   [ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE]: {
     id: ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
     name: 'TendisSSD',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISSSD,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.TWEMPROXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
   [ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER]: {
     id: ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
     name: 'Tendisplus',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISPLUS,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.PREDIXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
   [ClusterTypes.PREDIXY_REDIS_CLUSTER]: {
     id: ClusterTypes.PREDIXY_REDIS_CLUSTER,
     name: 'RedisCluster',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISCACHE,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.PREDIXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
   [ClusterTypes.REDIS_INSTANCE]: {
     id: ClusterTypes.REDIS_INSTANCE,
     name: t('Redis主从'),
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISCACHE,
+        name: t('后端存储机型'),
+      },
+    ],
   },
 };
 
 const bigdata: InfoType = {
   [ClusterTypes.ES]: {
     id: ClusterTypes.ES,
-    name: 'ES',
+    name: 'ElasticSearch',
     dbType: DBTypes.ES,
     moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.ES_MASTER,
+        name: t('Master节点规格'),
+      },
+      {
+        id: MachineTypes.ES_CLIENT,
+        name: t('Client节点规格'),
+      },
+      {
+        id: MachineTypes.ES_DATANODE,
+        name: t('冷_热节点规格'),
+      },
+    ],
   },
   [ClusterTypes.KAFKA]: {
     id: ClusterTypes.KAFKA,
     name: 'Kafka',
     dbType: DBTypes.KAFKA,
     moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.ZOOKEEPER,
+        name: t('Zookeeper节点规格'),
+      },
+      {
+        id: MachineTypes.BROKER,
+        name: t('Broker节点规格'),
+      },
+    ],
   },
   [ClusterTypes.HDFS]: {
     id: ClusterTypes.HDFS,
     name: 'HDFS',
     dbType: DBTypes.HDFS,
     moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.HDFS_DATANODE,
+        name: t('DataNode节点规格'),
+      },
+      {
+        id: MachineTypes.HDFS_MASTER,
+        name: t('NameNode_Zookeeper_JournalNode节点规格'),
+      },
+    ],
   },
   [ClusterTypes.INFLUXDB]: {
     id: ClusterTypes.INFLUXDB,
     name: 'InfuxDB',
     dbType: DBTypes.INFLUXDB,
     moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.INFLUXDB,
+        name: t('后端存储机型'),
+      },
+    ],
   },
   [ClusterTypes.PULSAR]: {
     id: ClusterTypes.PULSAR,
     name: 'Pulsar',
     dbType: DBTypes.PULSAR,
     moduleId: 'bigdata',
-  },
-  [ClusterTypes.RIAK]: {
-    id: ClusterTypes.RIAK,
-    name: 'Riak',
-    dbType: DBTypes.RIAK,
-    moduleId: 'bigdata',
-  },
-  [ClusterTypes.DORIS]: {
-    id: ClusterTypes.DORIS,
-    name: 'Dodis',
-    dbType: DBTypes.DORIS,
-    moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.PULSAR_BOOKKEEPER,
+        name: t('Bookkeeper节点规格'),
+      },
+      {
+        id: MachineTypes.PULSAR_ZOOKEEPER,
+        name: t('Zookeeper节点规格'),
+      },
+      {
+        id: MachineTypes.PULSAR_BROKER,
+        name: t('Broker节点规格'),
+      },
+    ],
   },
 };
 
-const mongo: InfoType = {
+const mongodb: InfoType = {
   [ClusterTypes.MONGO_REPLICA_SET]: {
     id: ClusterTypes.MONGO_REPLICA_SET,
     name: t('Mongo副本集'),
     dbType: DBTypes.MONGODB,
     moduleId: 'mongodb',
+    machineList: [
+      {
+        id: MachineTypes.MONGODB,
+        name: t('Mongodb规格'),
+      },
+    ],
   },
   [ClusterTypes.MONGO_SHARED_CLUSTER]: {
     id: ClusterTypes.MONGO_SHARED_CLUSTER,
     name: t('Mongo分片集'),
     dbType: DBTypes.MONGODB,
     moduleId: 'mongodb',
+    machineList: [
+      {
+        id: MachineTypes.MONGOS,
+        name: t('Mongos规格'),
+      },
+      {
+        id: MachineTypes.MONGODB,
+        name: t('ConfigSvr规格'),
+      },
+      {
+        id: MachineTypes.MONGO_CONFIG,
+        name: t('ShardSvr规格'),
+      },
+    ],
   },
 };
 
@@ -138,12 +280,24 @@ const sqlserver: InfoType = {
     name: t('SQLServer单节点'),
     dbType: DBTypes.SQLSERVER,
     moduleId: 'sqlserver',
+    machineList: [
+      {
+        id: MachineTypes.SQLSERVER_SINGLE,
+        name: t('单节点规格'),
+      },
+    ],
   },
   [ClusterTypes.SQLSERVER_HA]: {
     id: ClusterTypes.SQLSERVER_HA,
     name: t('SQLServer主从'),
     dbType: DBTypes.SQLSERVER,
     moduleId: 'sqlserver',
+    machineList: [
+      {
+        id: MachineTypes.SQLSERVER_HA,
+        name: t('主从规格'),
+      },
+    ],
   },
 };
 
@@ -152,9 +306,10 @@ const sqlserver: InfoType = {
  */
 export const clusterTypeInfos: RequiredInfoType = {
   ...mysql,
+  ...spider,
   ...redis,
   ...bigdata,
-  ...mongo,
+  ...mongodb,
   ...sqlserver,
 } as RequiredInfoType;
 export type ClusterTypeInfos = keyof typeof clusterTypeInfos;
diff --git a/dbm-ui/frontend/src/common/const/dbTypeInfos.ts b/dbm-ui/frontend/src/common/const/dbTypeInfos.ts
@@ -50,7 +50,7 @@ const sqlserver: InfoType = {
 const bigdata: InfoType = {
   [DBTypes.ES]: {
     id: DBTypes.ES,
-    name: 'ES',
+    name: 'ElasticSearch',
     moduleId: 'bigdata',
   },
   [DBTypes.KAFKA]: {
@@ -84,7 +84,7 @@ const bigdata: InfoType = {
     moduleId: 'bigdata',
   },
 };
-export const DBTypeInfos: RequiredInfoType = {
+export const DBTypeInfos = {
   ...mysql,
   ...redis,
   ...mongo,