fix:UI bugfix and add fields for cluster info (#243)

* fix:UI bugfix and add fields for cluster info * delete console
oceanbase · Mar 14, 2024 · 81ebf94 · 81ebf94
1 parent 8343be3
commit 81ebf94
Show file tree

Hide file tree

Showing 15 changed files with 621 additions and 139 deletions.
diff --git a/ui/src/i18n/strings/en-US.json b/ui/src/i18n/strings/en-US.json
@@ -567,7 +567,7 @@
   "Dashboard.pages.Overview.OverviewStatus.Running": "Running",
   "Dashboard.pages.Overview.OverviewStatus.Deleting": "Deleting",
   "Dashboard.pages.Overview.OverviewStatus.InOperation": "In operation",
-  "Dashboard.pages.Overview.OverviewStatus.AnErrorHasOccurred": "An error has occurred.",
+  "Dashboard.pages.Overview.OverviewStatus.AnErrorHasOccurred": "Failed",
   "Dashboard.Tenant.New.TenantSource.NfsTypeSeePathFormat": "NFS type, see path format: path/to/dir",
   "Dashboard.Tenant.New.TenantSource.OssTypeForMoreInformation": "OSS type. For more information, see oss:// bucket/dir? host=xxx",
   "Dashboard.src.utils.helper.OceanbaseCluster": "OceanBase cluster",
@@ -588,5 +588,46 @@
   "Dashboard.Cluster.New.BasicInfo.PleaseSelect": "Please select",
   "Dashboard.Tenant.New.BasicInfo.ResourceNamesCanOnlyConsist": "Resource names can only consist of lowercase letters and-",
   "Dashboard.Tenant.New.BasicInfo.TheFirstCharacterMustBe": "The first character must be a letter or an underscore and cannot contain-",
-  "Dashboard.components.customModal.AddZoneModal.TheFirstCharacterMustBe": "The first character must be a letter or an underscore and cannot contain-"
+  "Dashboard.components.customModal.AddZoneModal.TheFirstCharacterMustBe": "The first character must be a letter or an underscore and cannot contain-",
+  "Dashboard.Detail.Overview.BasicInfo.DatafileStorageClass": "Datafile storage class",
+  "Dashboard.Detail.Overview.BasicInfo.DatafileStorageSize": "Datafile storage size",
+  "Dashboard.Detail.Overview.BasicInfo.RedologStorageClass": "RedoLog storage class",
+  "Dashboard.Detail.Overview.BasicInfo.RedologSize": "RedoLog size",
+  "Dashboard.Detail.Overview.BasicInfo.SystemLogStorageClass": "System Log storage class",
+  "Dashboard.Detail.Overview.BasicInfo.SystemLogStorageSize": "System Log storage size",
+  "Dashboard.Detail.Overview.BasicInfo.BasicClusterInformation": "Basic cluster information",
+  "Dashboard.Detail.Overview.BasicInfo.ClusterMode": "Cluster mode",
+  "Dashboard.Detail.Overview.BasicInfo.RootPasswordSecret": "root password Secret",
+  "Dashboard.Detail.Overview.BasicInfo.DetailedClusterConfiguration": "Detailed cluster configuration",
+  "Dashboard.Detail.Overview.BasicInfo.ObserverResourceConfiguration": "OBServer resource configuration",
+  "Dashboard.Detail.Overview.BasicInfo.ClusterParameters": "Cluster Parameters",
+  "Dashboard.Detail.Overview.BasicInfo.MonitoringConfiguration": "Monitoring configuration",
+  "Dashboard.Detail.Overview.BasicInfo.Image": "Image",
+  "Dashboard.Detail.Overview.BasicInfo.BackupVolumeConfiguration": "Backup volume configuration",
+  "Dashboard.Detail.Overview.BasicInfo.Address": "Address",
+  "Dashboard.Detail.Overview.BasicInfo.Path": "Path",
+  "Dashboard.Detail.Overview.ClusterOverview": "Cluster overview",
+  "Dashboard.Detail.Backup.BackupConfiguration.BackupMediaType": "Backup media type",
+  "Dashboard.Detail.Backup.BackupConfiguration.ConfigureAtLeastOneFull": "Configure at least one full backup",
+  "Dashboard.Detail.NewBackup.ConfigureAtLeastOneFull": "Configure at least one full backup",
+  "Dashboard.Detail.Overview.Backups.BackupMediaType": "Backup media type",
+  "Dashboard.Detail.Overview.Backups.DataBackupPath": "Data Backup Path",
+  "Dashboard.Detail.Overview.Backups.MonthlyCycle": "Monthly cycle",
+  "Dashboard.Detail.Overview.Backups.CycleByWeek": "Cycle by week",
+  "Dashboard.Detail.Overview.Backups.FullBackupTheFirstOf": "Full backup: The first of each month",
+  "Dashboard.Detail.Overview.Backups.Days": "Days",
+  "Dashboard.Detail.Overview.Backups.IncrementalBackupTheFirstOf": "Incremental backup: The first of each month",
+  "Dashboard.Detail.Overview.Backups.Name": "Name",
+  "Dashboard.Detail.Overview.Backups.Path": "Path",
+  "Dashboard.Detail.Overview.Backups.EncryptionKeySecret": "Encryption key Secret",
+  "Dashboard.Detail.Overview.BasicInfo.TenantBasicInformation": "Tenant Basic information",
+  "Dashboard.Detail.Overview.Replicas.Priority": "Priority",
+  "Dashboard.Detail.Overview.Replicas.ReplicaType": "Replica Type",
+  "Dashboard.Detail.Overview.Replicas.MaximumAvailableCpu": "Maximum available CPU",
+  "Dashboard.Detail.Overview.Replicas.MemorySize": "Memory size",
+  "Dashboard.Detail.Overview.Replicas.MinimumAvailableCpu": "Minimum available CPU",
+  "Dashboard.Detail.Overview.Replicas.ClogDiskSize": "Clog disk size",
+  "Dashboard.Detail.Overview.Replicas.ResourcePool": "Resource Pool",
+  "Dashboard.Detail.Overview.Replicas.ResourcePoolReplicazone": "Resource pool-{replicaZone}",
+  "Dashboard.Detail.Overview.TenantOverview": "Tenant overview"
 }
diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json
@@ -588,5 +588,46 @@
   "Dashboard.Cluster.New.BasicInfo.PleaseSelect": "请选择",
   "Dashboard.Tenant.New.BasicInfo.ResourceNamesCanOnlyConsist": "资源名只能由小写字母和 - 组成",
   "Dashboard.Tenant.New.BasicInfo.TheFirstCharacterMustBe": "首字符必须是字母或者下划线，不能包含 -",
-  "Dashboard.components.customModal.AddZoneModal.TheFirstCharacterMustBe": "首字符必须是字母或者下划线，不能包含 -"
+  "Dashboard.components.customModal.AddZoneModal.TheFirstCharacterMustBe": "首字符必须是字母或者下划线，不能包含 -",
+  "Dashboard.Detail.Overview.BasicInfo.DatafileStorageClass": "Datafile 存储类",
+  "Dashboard.Detail.Overview.BasicInfo.DatafileStorageSize": "Datafile 存储大小",
+  "Dashboard.Detail.Overview.BasicInfo.RedologStorageClass": "RedoLog 存储类",
+  "Dashboard.Detail.Overview.BasicInfo.RedologSize": "RedoLog 大小",
+  "Dashboard.Detail.Overview.BasicInfo.SystemLogStorageClass": "系统日志存储类",
+  "Dashboard.Detail.Overview.BasicInfo.SystemLogStorageSize": "系统日志存储大小",
+  "Dashboard.Detail.Overview.BasicInfo.BasicClusterInformation": "集群基本信息",
+  "Dashboard.Detail.Overview.BasicInfo.ClusterMode": "集群模式",
+  "Dashboard.Detail.Overview.BasicInfo.RootPasswordSecret": "root 用户密码 Secret",
+  "Dashboard.Detail.Overview.BasicInfo.DetailedClusterConfiguration": "集群详细配置",
+  "Dashboard.Detail.Overview.BasicInfo.ObserverResourceConfiguration": "OBServer 资源配置",
+  "Dashboard.Detail.Overview.BasicInfo.ClusterParameters": "集群参数",
+  "Dashboard.Detail.Overview.BasicInfo.MonitoringConfiguration": "监控配置",
+  "Dashboard.Detail.Overview.BasicInfo.Image": "镜像",
+  "Dashboard.Detail.Overview.BasicInfo.BackupVolumeConfiguration": "备份卷配置",
+  "Dashboard.Detail.Overview.BasicInfo.Address": "地址",
+  "Dashboard.Detail.Overview.BasicInfo.Path": "路径",
+  "Dashboard.Detail.Overview.ClusterOverview": "集群概览",
+  "Dashboard.Detail.Backup.BackupConfiguration.BackupMediaType": "备份介质类型",
+  "Dashboard.Detail.Backup.BackupConfiguration.ConfigureAtLeastOneFull": "请至少配置 1 个全量备份",
+  "Dashboard.Detail.NewBackup.ConfigureAtLeastOneFull": "请至少配置 1 个全量备份",
+  "Dashboard.Detail.Overview.Backups.BackupMediaType": "备份介质类型",
+  "Dashboard.Detail.Overview.Backups.DataBackupPath": "数据备份路径",
+  "Dashboard.Detail.Overview.Backups.MonthlyCycle": "按月为周期",
+  "Dashboard.Detail.Overview.Backups.CycleByWeek": "按周为周期",
+  "Dashboard.Detail.Overview.Backups.FullBackupTheFirstOf": "全量备份：每个月第",
+  "Dashboard.Detail.Overview.Backups.Days": "天",
+  "Dashboard.Detail.Overview.Backups.IncrementalBackupTheFirstOf": "增量备份：每个月第",
+  "Dashboard.Detail.Overview.Backups.Name": "名称",
+  "Dashboard.Detail.Overview.Backups.Path": "路径",
+  "Dashboard.Detail.Overview.Backups.EncryptionKeySecret": "加密密钥 Secret",
+  "Dashboard.Detail.Overview.BasicInfo.TenantBasicInformation": "租户基本信息",
+  "Dashboard.Detail.Overview.Replicas.Priority": "优先级",
+  "Dashboard.Detail.Overview.Replicas.ReplicaType": "副本类型",
+  "Dashboard.Detail.Overview.Replicas.MaximumAvailableCpu": "最大可用 CPU",
+  "Dashboard.Detail.Overview.Replicas.MemorySize": "内存大小",
+  "Dashboard.Detail.Overview.Replicas.MinimumAvailableCpu": "最小可用 CPU",
+  "Dashboard.Detail.Overview.Replicas.ClogDiskSize": "Clog 盘大小",
+  "Dashboard.Detail.Overview.Replicas.ResourcePool": "资源池",
+  "Dashboard.Detail.Overview.Replicas.ResourcePoolReplicazone": "资源池 - {{replicaZone}}",
+  "Dashboard.Detail.Overview.TenantOverview": "租户概览"
 }
diff --git a/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx b/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx
@@ -1,30 +1,86 @@
 import { COLOR_MAP } from '@/constants';
 import { intl } from '@/utils/intl';
-import { Col, Descriptions, Tag, Card } from 'antd';
+import { Card, Col, Descriptions, Switch, Tag } from 'antd';
+import { useState } from 'react';
 
-interface BasicInfoProps {
-  name: string;
-  namespace: string;
-  status: string;
-  image: string;
-  style?:any
-}
+import styles from './index.less';
 
 export default function BasicInfo({
   name,
   namespace,
   status,
   image,
-  style
-}: BasicInfoProps) {
+  resource,
+  storage,
+  backupVolume,
+  monitor,
+  rootPasswordSecret,
+  mode,
+  parameters,
+  style,
+}: API.ClusterInfo & { style: React.CSSProperties }) {
+  const [checked, setChecked] = useState<boolean>(false);
+  const OBServerConfig = [
+    {
+      label: 'CPU',
+      value: resource.cpu,
+    },
+    {
+      label: 'Memory',
+      value: resource.memory,
+    },
+    {
+      label: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageClass',
+        defaultMessage: 'Datafile 存储类',
+      }),
+      value: storage.dataStorage.storageClass,
+    },
+    {
+      label: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageSize',
+        defaultMessage: 'Datafile 存储大小',
+      }),
+      value: storage.dataStorage.size,
+    },
+    {
+      label: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.BasicInfo.RedologStorageClass',
+        defaultMessage: 'RedoLog 存储类',
+      }),
+      value: storage.redoLogStorage.storageClass,
+    },
+    {
+      label: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.BasicInfo.RedologSize',
+        defaultMessage: 'RedoLog 大小',
+      }),
+      value: storage.redoLogStorage.size,
+    },
+    {
+      label: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageClass',
+        defaultMessage: '系统日志存储类',
+      }),
+      value: storage.sysLogStorage.storageClass,
+    },
+    {
+      label: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageSize',
+        defaultMessage: '系统日志存储大小',
+      }),
+      value: storage.sysLogStorage.size,
+    },
+  ];
+
   return (
     <Col span={24}>
       <Card style={style}>
         <Descriptions
-          column={5}
+          column={4}
           title={intl.formatMessage({
-            id: 'dashboard.Detail.Overview.BasicInformation',
-            defaultMessage: '基本信息',
+            id: 'Dashboard.Detail.Overview.BasicInfo.BasicClusterInformation',
+            defaultMessage: '集群基本信息',
           })}
         >
           <Descriptions.Item
@@ -43,6 +99,22 @@ export default function BasicInfo({
           >
             {namespace}
           </Descriptions.Item>
+          <Descriptions.Item
+            label={intl.formatMessage({
+              id: 'Dashboard.Detail.Overview.BasicInfo.ClusterMode',
+              defaultMessage: '集群模式',
+            })}
+          >
+            {mode || '-'}
+          </Descriptions.Item>
+          <Descriptions.Item
+            label={intl.formatMessage({
+              id: 'OBDashboard.Detail.Overview.BasicInfo.ClusterStatus',
+              defaultMessage: '集群状态',
+            })}
+          >
+            <Tag color={COLOR_MAP.get(status)}>{status}</Tag>
+          </Descriptions.Item>
           <Descriptions.Item
             span={2}
             label={intl.formatMessage({
@@ -52,15 +124,117 @@ export default function BasicInfo({
           >
             {image}
           </Descriptions.Item>
+
           <Descriptions.Item
+            span={2}
             label={intl.formatMessage({
-              id: 'OBDashboard.Detail.Overview.BasicInfo.ClusterStatus',
-              defaultMessage: '集群状态',
+              id: 'Dashboard.Detail.Overview.BasicInfo.RootPasswordSecret',
+              defaultMessage: 'root 用户密码 Secret',
             })}
           >
-            <Tag color={COLOR_MAP.get(status)}>{status}</Tag>
+            {rootPasswordSecret || '-'}
           </Descriptions.Item>
         </Descriptions>
+        <div style={{ marginBottom: 12 }}>
+          <span
+            style={{
+              color: '#132039',
+              fontSize: 16,
+              fontWeight: 600,
+              marginRight: 8,
+            }}
+          >
+            {intl.formatMessage({
+              id: 'Dashboard.Detail.Overview.BasicInfo.DetailedClusterConfiguration',
+              defaultMessage: '集群详细配置',
+            })}
+          </span>
+          <Switch
+            checked={checked}
+            onChange={(checked) => setChecked(checked)}
+          />
+        </div>
+        {checked && (
+          <div className={styles.detailConfig}>
+            <Descriptions
+              style={{ width: '50%' }}
+              title={intl.formatMessage({
+                id: 'Dashboard.Detail.Overview.BasicInfo.ObserverResourceConfiguration',
+                defaultMessage: 'OBServer 资源配置',
+              })}
+            >
+              {OBServerConfig.map((item, index) => (
+                <Descriptions.Item span={2} key={index} label={item.label}>
+                  {item.value}
+                </Descriptions.Item>
+              ))}
+            </Descriptions>
+            {parameters && (
+              <Descriptions
+                title={intl.formatMessage({
+                  id: 'Dashboard.Detail.Overview.BasicInfo.ClusterParameters',
+                  defaultMessage: '集群参数',
+                })}
+              >
+                {parameters.map((parameter, index) => (
+                  <Descriptions.Item label={parameter.key} key={index}>
+                    {parameter.value}
+                  </Descriptions.Item>
+                ))}
+              </Descriptions>
+            )}
+
+            {monitor && (
+              <Descriptions
+                title={intl.formatMessage({
+                  id: 'Dashboard.Detail.Overview.BasicInfo.MonitoringConfiguration',
+                  defaultMessage: '监控配置',
+                })}
+              >
+                <Descriptions.Item label="CPU">
+                  {monitor.resource.cpu}
+                </Descriptions.Item>
+                <Descriptions.Item label="Memory">
+                  {monitor.resource.memory}
+                </Descriptions.Item>
+                <Descriptions.Item
+                  label={intl.formatMessage({
+                    id: 'Dashboard.Detail.Overview.BasicInfo.Image',
+                    defaultMessage: '镜像',
+                  })}
+                >
+                  {monitor.image}
+                </Descriptions.Item>
+              </Descriptions>
+            )}
+
+            {backupVolume && (
+              <Descriptions
+                title={intl.formatMessage({
+                  id: 'Dashboard.Detail.Overview.BasicInfo.BackupVolumeConfiguration',
+                  defaultMessage: '备份卷配置',
+                })}
+              >
+                <Descriptions.Item
+                  label={intl.formatMessage({
+                    id: 'Dashboard.Detail.Overview.BasicInfo.Address',
+                    defaultMessage: '地址',
+                  })}
+                >
+                  {backupVolume.address}
+                </Descriptions.Item>
+                <Descriptions.Item
+                  label={intl.formatMessage({
+                    id: 'Dashboard.Detail.Overview.BasicInfo.Path',
+                    defaultMessage: '路径',
+                  })}
+                >
+                  {backupVolume.path}
+                </Descriptions.Item>
+              </Descriptions>
+            )}
+          </div>
+        )}
       </Card>
     </Col>
   );

diff --git a/ui/src/pages/Cluster/Detail/Overview/helper.ts b/ui/src/pages/Cluster/Detail/Overview/helper.ts
@@ -32,6 +32,20 @@ const getNSName = () => {
   return res;
 };
 
+const clusterInfoConfig = [
+  'name',
+  'namespace',
+  'status',
+  'image',
+  'resource',
+  'storage',
+  'backupVolume',
+  'monitor',
+  'rootPasswordSecret',
+  'mode',
+  'parameters'
+]
+
 // if there is cluster｜zone｜server whose status isn't running,the return status is operating.
 const formatClusterData = (responseData: any): API.ClusterDetail => {
   const res: any = {
@@ -45,11 +59,13 @@ const formatClusterData = (responseData: any): API.ClusterDetail => {
     if (key === 'status' && responseData[key] !== 'running') {
       status = 'operating';
     }
-    if (key !== 'topology' && key !== 'metrics') {
+    if(clusterInfoConfig.includes(key)){
       res['info'][key] = responseData[key];
-    } else if (key === 'metrics') {
+    }
+    if (key === 'metrics') {
       res[key] = responseData[key];
-    } else {
+    }
+    if(key === 'topology'){
       const servers: API.Server[] = [];
       const zones = responseData[key].map((zone: any) => {
         let temp: any = {};