From 81ebf94d03692696f7b8b37e740871ce729f89dd Mon Sep 17 00:00:00 2001
From: yangon <2689991790@qq.com>
Date: Thu, 14 Mar 2024 14:40:42 +0800
Subject: [PATCH] fix:UI bugfix and add fields for cluster info (#243)

* fix:UI bugfix and add fields for cluster info

* delete console
---
 ui/src/i18n/strings/en-US.json                |  45 +++-
 ui/src/i18n/strings/zh-CN.json                |  43 +++-
 .../Cluster/Detail/Overview/BasicInfo.tsx     | 206 ++++++++++++++++--
 .../pages/Cluster/Detail/Overview/helper.ts   |  22 +-
 .../pages/Cluster/Detail/Overview/index.less  |   8 +
 .../pages/Cluster/Detail/Overview/index.tsx   |  18 +-
 .../Detail/Backup/BackupConfiguration.tsx     |  59 +++--
 .../Detail/NewBackup/BakMethodsList.tsx       |   5 +-
 .../pages/Tenant/Detail/NewBackup/index.tsx   |  26 +--
 .../pages/Tenant/Detail/Overview/Backups.tsx  | 167 ++++++++++----
 .../Tenant/Detail/Overview/BasicInfo.tsx      |   4 +-
 .../pages/Tenant/Detail/Overview/Replicas.tsx |  60 ++++-
 ui/src/pages/Tenant/Detail/Overview/index.tsx |  43 ++--
 ui/src/pages/Tenant/helper.ts                 |  11 +
 ui/src/services/typings.d.ts                  |  43 +++-
 15 files changed, 621 insertions(+), 139 deletions(-)

diff --git a/ui/src/i18n/strings/en-US.json b/ui/src/i18n/strings/en-US.json
index 311b5050a..f860871b8 100644
--- 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
index a5e1c6cd6..ee4144555 100644
--- 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
index 551491407..c6d9b208b 100644
--- 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
index af2ad8a8f..cd3b07d16 100644
--- 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 = {};
diff --git a/ui/src/pages/Cluster/Detail/Overview/index.less b/ui/src/pages/Cluster/Detail/Overview/index.less
index 5d7d591a9..0a19b9804 100644
--- a/ui/src/pages/Cluster/Detail/Overview/index.less
+++ b/ui/src/pages/Cluster/Detail/Overview/index.less
@@ -7,4 +7,12 @@
     .resourceContent{
         flex: 5;
     }
+}
+.detailConfig{
+    :global{
+        .ant-descriptions-title{
+            font-size: 14px;
+            font-weight: 500;
+        }
+    }
 }
\ No newline at end of file
diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx
index 527d80e24..591370103 100644
--- a/ui/src/pages/Cluster/Detail/Overview/index.tsx
+++ b/ui/src/pages/Cluster/Detail/Overview/index.tsx
@@ -35,8 +35,8 @@ const ClusterOverview: React.FC = () => {
           timerRef.current = setTimeout(() => {
             getClusterDetail({ ns, name });
           }, REFRESH_CLUSTER_TIME);
-        }else if(timerRef.current){
-          clearTimeout(timerRef.current)
+        } else if (timerRef.current) {
+          clearTimeout(timerRef.current);
         }
       },
     },
@@ -51,7 +51,7 @@ const ClusterOverview: React.FC = () => {
           defaultMessage: '删除成功',
         }),
       );
-      history.push('/cluster')
+      history.push('/cluster');
     }
   };
 
@@ -72,8 +72,8 @@ const ClusterOverview: React.FC = () => {
   const header = () => {
     return {
       title: intl.formatMessage({
-        id: 'dashboard.Detail.Overview.Overview',
-        defaultMessage: '概览',
+        id: 'Dashboard.Detail.Overview.ClusterOverview',
+        defaultMessage: '集群概览',
       }),
       extra: [
         <Button onClick={handleAddZone} disabled={isOperating} key="1">
@@ -115,11 +115,11 @@ const ClusterOverview: React.FC = () => {
   useEffect(() => {
     getClusterDetail({ ns, name });
 
-    return ()=>{
-      if(timerRef.current){
-        clearTimeout(timerRef.current)
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
       }
-    }
+    };
   }, []);
 
   return (
diff --git a/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx b/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx
index 154799b88..0bd7dcd3c 100644
--- a/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx
+++ b/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx
@@ -2,29 +2,30 @@ import { BACKUP_RESULT_STATUS } from '@/constants';
 import { usePublicKey } from '@/hook/usePublicKey';
 import { getNSName } from '@/pages/Cluster/Detail/Overview/helper';
 import {
-deletePolicyOfTenant,
-updateBackupPolicyOfTenant,
+  deletePolicyOfTenant,
+  updateBackupPolicyOfTenant,
 } from '@/services/tenant';
 import { intl } from '@/utils/intl';
 import { useRequest } from 'ahooks';
 import {
-Button,
-Card,
-Col,
-Descriptions,
-Form,
-InputNumber,
-Row,
-Select,
-Space,
-message,
+  Button,
+  Card,
+  Col,
+  Descriptions,
+  Form,
+  InputNumber,
+  Row,
+  Select,
+  Space,
+  message,
 } from 'antd';
 import dayjs from 'dayjs';
-import { useEffect,useRef,useState } from 'react';
+import { useRef, useState } from 'react';
 import {
-checkIsSame,
-formatBackupForm,
-formatBackupPolicyData,
+  checkIsSame,
+  checkScheduleDatesHaveFull,
+  formatBackupForm,
+  formatBackupPolicyData,
 } from '../../helper';
 import BakMethodsList from '../NewBackup/BakMethodsList';
 import SchduleSelectFormItem from '../NewBackup/SchduleSelectFormItem';
@@ -34,13 +35,14 @@ interface BackupConfigurationProps {
   setBackupPolicy: React.Dispatch<
     React.SetStateAction<API.BackupPolicy | undefined>
   >;
+
   backupPolicyRefresh: () => void;
 }
 
 export default function BackupConfiguration({
   backupPolicy,
   setBackupPolicy,
-  backupPolicyRefresh
+  backupPolicyRefresh,
 }: BackupConfigurationProps) {
   const [form] = Form.useForm();
   const scheduleValue = Form.useWatch(['scheduleDates'], form);
@@ -70,8 +72,8 @@ export default function BackupConfiguration({
     },
     destType: {
       label: intl.formatMessage({
-        id: 'Dashboard.Detail.Backup.BackupConfiguration.BackupType',
-        defaultMessage: '备份类型',
+        id: 'Dashboard.Detail.Backup.BackupConfiguration.BackupMediaType',
+        defaultMessage: '备份介质类型',
       }),
       editRender: (
         <Select
@@ -136,7 +138,7 @@ export default function BackupConfiguration({
     const { successful, data } = await updateBackupPolicyOfTenant(param);
     if (successful) {
       if (data.status === backupPolicy.status) {
-        backupPolicyRefresh()
+        backupPolicyRefresh();
       } else {
         message.success(
           intl.formatMessage({
@@ -174,6 +176,15 @@ export default function BackupConfiguration({
   };
 
   const updateBackupPolicyConfig = async (values) => {
+    if (!checkScheduleDatesHaveFull(values.scheduleDates)) {
+      message.warning(
+        intl.formatMessage({
+          id: 'Dashboard.Detail.Backup.BackupConfiguration.ConfigureAtLeastOneFull',
+          defaultMessage: '请至少配置 1 个全量备份',
+        }),
+      );
+      return;
+    }
     const { successful, data } = await updateBackupPolicyOfTenant({
       ns,
       name,
@@ -305,7 +316,13 @@ export default function BackupConfiguration({
             Object.keys(DATE_CONFIG).map((key, index) => (
               <Col span={8} key={index}>
                 <Form.Item label={DATE_CONFIG[key]} name={key}>
-                  <InputNumber addonAfter={'天'} min={0} />
+                  <InputNumber
+                    addonAfter={intl.formatMessage({
+                      id: 'Dashboard.Detail.Backup.BackupConfiguration.Days',
+                      defaultMessage: '天',
+                    })}
+                    min={0}
+                  />
                 </Form.Item>
               </Col>
             ))
diff --git a/ui/src/pages/Tenant/Detail/NewBackup/BakMethodsList.tsx b/ui/src/pages/Tenant/Detail/NewBackup/BakMethodsList.tsx
index 1294a873f..0daa85fc1 100644
--- a/ui/src/pages/Tenant/Detail/NewBackup/BakMethodsList.tsx
+++ b/ui/src/pages/Tenant/Detail/NewBackup/BakMethodsList.tsx
@@ -20,7 +20,7 @@ export default function BakMethodsList({
   const dataSource = scheduleValue || form?.getFieldValue('scheduleDates');
 
   return (
-    <Space direction="vertical">
+    <Space direction="vertical" style={{marginBottom:24}}>
       <h3>
         {intl.formatMessage({
           id: 'Dashboard.Detail.NewBackup.BakMethodsList.BackupData',
@@ -30,7 +30,7 @@ export default function BakMethodsList({
       <p>
         {intl.formatMessage({
           id: 'Dashboard.Detail.NewBackup.BakMethodsList.WeRecommendThatYouConfigure',
-          defaultMessage: '建议至少配置 1 个全量备份',
+          defaultMessage: '至少配置 1 个全量备份',
         })}
       </p>
       {dataSource?.days
@@ -41,6 +41,7 @@ export default function BakMethodsList({
             label={
               dataSource?.mode === 'Monthly' ? day : WEEK_TEXT_MAP.get(day)
             }
+            style={{marginBottom:0}}
             key={index}
           >
             <Radio.Group disabled={disable} defaultValue="Full">
diff --git a/ui/src/pages/Tenant/Detail/NewBackup/index.tsx b/ui/src/pages/Tenant/Detail/NewBackup/index.tsx
index 9a809cc62..21517dda6 100644
--- a/ui/src/pages/Tenant/Detail/NewBackup/index.tsx
+++ b/ui/src/pages/Tenant/Detail/NewBackup/index.tsx
@@ -1,21 +1,12 @@
 import { usePublicKey } from '@/hook/usePublicKey';
 import { getNSName } from '@/pages/Cluster/Detail/Overview/helper';
-import { createBackupPolicyOfTenant,getTenant } from '@/services/tenant';
+import { createBackupPolicyOfTenant, getTenant } from '@/services/tenant';
 import { intl } from '@/utils/intl';
 import { PageContainer } from '@ant-design/pro-components';
 import { useNavigate } from '@umijs/max';
 import { useRequest } from 'ahooks';
-import {
-Button,
-Card,
-Col,
-Form,
-Input,
-Row,
-Select,
-message
-} from 'antd';
-import { formatBackupForm } from '../../helper';
+import { Button, Card, Col, Form, Input, Row, Select, message } from 'antd';
+import { checkScheduleDatesHaveFull, formatBackupForm } from '../../helper';
 import BasicInfo from '../Overview/BasicInfo';
 import AdvancedConfiguration from './AdvancedConfiguration';
 import BakMethodsList from './BakMethodsList';
@@ -35,6 +26,14 @@ export default function NewBackup() {
   ];
 
   const handleSubmit = async (values: any) => {
+    if (!checkScheduleDatesHaveFull(values)) {
+      message.warning(
+        intl.formatMessage({
+          id: 'Dashboard.Detail.NewBackup.ConfigureAtLeastOneFull',
+          defaultMessage: '请至少配置 1 个全量备份',
+        }),
+      );
+    }
     const res = await createBackupPolicyOfTenant({
       ns,
       name,
@@ -85,7 +84,7 @@ export default function NewBackup() {
             defaultMessage: '取消',
           })}
         </Button>,
-        <Button key="submit" type='primary' onClick={() => form.submit()}>
+        <Button key="submit" type="primary" onClick={() => form.submit()}>
           {intl.formatMessage({
             id: 'Dashboard.Detail.NewBackup.Submit',
             defaultMessage: '提交',
@@ -97,6 +96,7 @@ export default function NewBackup() {
         {tenantDetail && (
           <BasicInfo info={tenantDetail.info} source={tenantDetail.source} />
         )}
+
         <Card style={{ marginTop: 24, marginBottom: 24 }}>
           <Row>
             <Col span={24}>
diff --git a/ui/src/pages/Tenant/Detail/Overview/Backups.tsx b/ui/src/pages/Tenant/Detail/Overview/Backups.tsx
index b7701c78e..c74d4f3e7 100644
--- a/ui/src/pages/Tenant/Detail/Overview/Backups.tsx
+++ b/ui/src/pages/Tenant/Detail/Overview/Backups.tsx
@@ -1,38 +1,122 @@
+import CollapsibleCard from '@/components/CollapsibleCard';
 import { intl } from '@/utils/intl';
-import { Col,Descriptions,Table,Tooltip } from 'antd';
+import { Col, Descriptions, Table, Tooltip, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import CollapsibleCard from '@/components/CollapsibleCard';
 
 interface BackupsProps {
   backupPolicy?: API.BackupPolicy;
   backupJobs?: API.BackupJob[];
 }
 
+const { Text } = Typography;
+
 export default function Backups({ backupPolicy, backupJobs }: BackupsProps) {
   const PolicyConfig = {
-    destType: 'destType',
-    archivePath: intl.formatMessage({
-      id: 'Dashboard.Detail.Overview.Backups.FilePath',
-      defaultMessage: '档案路径',
-    }),
-    bakDataPath: 'bakDataPath',
-    scheduleType: intl.formatMessage({
-      id: 'Dashboard.Detail.Overview.Backups.PlanType',
-      defaultMessage: '计划类型',
-    }),
-    scheduleDates: intl.formatMessage({
-      id: 'Dashboard.Detail.Overview.Backups.PlannedDate',
-      defaultMessage: '计划日期',
-    }),
-    scheduleTime: intl.formatMessage({
-      id: 'Dashboard.Detail.Overview.Backups.ScheduledTime',
-      defaultMessage: '计划时间',
-    }),
+    destType: {
+      text: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.Backups.BackupMediaType',
+        defaultMessage: '备份介质类型',
+      }),
+    },
+    archivePath: {
+      text: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.Backups.FilePath',
+        defaultMessage: '日志归档路径',
+      }),
+      render: (value: string) => (
+        <Text style={{ width: 300 }} ellipsis={{ tooltip: value }}>
+          {value}
+        </Text>
+      ),
+    },
+    bakDataPath: {
+      text: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.Backups.DataBackupPath',
+        defaultMessage: '数据备份路径',
+      }),
+      render: (value: string) => (
+        <Text style={{ width: 300 }} ellipsis={{ tooltip: value }}>
+          {value}
+        </Text>
+      ),
+    },
+    scheduleType: {
+      text: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.Backups.PlanType',
+        defaultMessage: '计划类型',
+      }),
+      render: (value: string) => (
+        <span>
+          {value === 'Monthly'
+            ? intl.formatMessage({
+                id: 'Dashboard.Detail.Overview.Backups.MonthlyCycle',
+                defaultMessage: '按月为周期',
+              })
+            : intl.formatMessage({
+                id: 'Dashboard.Detail.Overview.Backups.CycleByWeek',
+                defaultMessage: '按周为周期',
+              })}
+        </span>
+      ),
+    },
+    scheduleDates: {
+      text: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.Backups.PlannedDate',
+        defaultMessage: '计划日期',
+      }),
+      render: (value: API.ScheduleDatesType) => {
+        const fullArr = value.filter((item) => item.backupType === 'Full');
+        const incrementalArr = value.filter(
+          (item) => item.backupType === 'Incremental',
+        );
+        return (
+          <div>
+            {fullArr.length && (
+              <p>
+                {intl.formatMessage({
+                  id: 'Dashboard.Detail.Overview.Backups.FullBackupTheFirstOf',
+                  defaultMessage: '全量备份：每个月第',
+                })}
+                {fullArr.map((item) => item.day).join(',')}
+                {intl.formatMessage({
+                  id: 'Dashboard.Detail.Overview.Backups.Days',
+                  defaultMessage: '天',
+                })}
+              </p>
+            )}
+
+            {incrementalArr.length && (
+              <p>
+                {intl.formatMessage({
+                  id: 'Dashboard.Detail.Overview.Backups.IncrementalBackupTheFirstOf',
+                  defaultMessage: '增量备份：每个月第',
+                })}
+
+                {incrementalArr.map((item) => item.day).join(',')}
+                {intl.formatMessage({
+                  id: 'Dashboard.Detail.Overview.Backups.Days',
+                  defaultMessage: '天',
+                })}
+              </p>
+            )}
+          </div>
+        );
+      },
+    },
+    scheduleTime: {
+      text: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.Backups.ScheduledTime',
+        defaultMessage: '计划时间',
+      }),
+    },
   };
 
   const columns: ColumnsType<API.BackupJob> = [
     {
-      title: 'name',
+      title: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.Backups.Name',
+        defaultMessage: '名称',
+      }),
       dataIndex: 'name',
       key: 'name',
     },
@@ -61,7 +145,10 @@ export default function Backups({ backupPolicy, backupJobs }: BackupsProps) {
       key: 'string',
     },
     {
-      title: 'path',
+      title: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.Backups.Path',
+        defaultMessage: '路径',
+      }),
       dataIndex: 'path',
       key: 'path',
       ellipsis: true,
@@ -72,7 +159,10 @@ export default function Backups({ backupPolicy, backupJobs }: BackupsProps) {
       ),
     },
     {
-      title: 'encryptionSecret',
+      title: intl.formatMessage({
+        id: 'Dashboard.Detail.Overview.Backups.EncryptionKeySecret',
+        defaultMessage: '加密密钥 Secret',
+      }),
       dataIndex: 'encryptionSecret',
       key: 'encryptionSecret',
     },
@@ -98,7 +188,7 @@ export default function Backups({ backupPolicy, backupJobs }: BackupsProps) {
     <Col span={24}>
       <CollapsibleCard
         title={
-          <h2>
+          <h2 style={{ marginBottom: 0 }}>
             {intl.formatMessage({
               id: 'Dashboard.Detail.Overview.Backups.Backup',
               defaultMessage: '备份',
@@ -110,28 +200,23 @@ export default function Backups({ backupPolicy, backupJobs }: BackupsProps) {
       >
         {backupPolicy && (
           <Descriptions
-            column={5}
+            column={3}
             title={intl.formatMessage({
               id: 'Dashboard.Detail.Overview.Backups.BackupPolicy',
               defaultMessage: '备份策略',
             })}
           >
-            {Object.keys(PolicyConfig).map((key, index) => (
-              <Descriptions.Item label={PolicyConfig[key]} key={index}>
-                {key !== 'scheduleDates' ? (
-                  <span>{backupPolicy[key]}</span>
-                ) : (
-                  <div>
-                    {backupPolicy[key].map((item, index) => (
-                      <span key={index}>
-                        {item.backupType},{item.day}
-                        {index !== backupPolicy[key].length}{' '}
-                      </span>
-                    ))}
-                  </div>
-                )}
-              </Descriptions.Item>
-            ))}
+            {Object.keys(PolicyConfig).map((key, index) => {
+              return (
+                <Descriptions.Item label={PolicyConfig[key].text} key={index}>
+                  {PolicyConfig[key].render ? (
+                    PolicyConfig[key]?.render(backupPolicy[key])
+                  ) : (
+                    <span>{backupPolicy[key]}</span>
+                  )}
+                </Descriptions.Item>
+              );
+            })}
           </Descriptions>
         )}
 
diff --git a/ui/src/pages/Tenant/Detail/Overview/BasicInfo.tsx b/ui/src/pages/Tenant/Detail/Overview/BasicInfo.tsx
index 0f4b40d03..31b0d82b6 100644
--- a/ui/src/pages/Tenant/Detail/Overview/BasicInfo.tsx
+++ b/ui/src/pages/Tenant/Detail/Overview/BasicInfo.tsx
@@ -78,8 +78,8 @@ export default function BasicInfo({
         title={
           <h2 style={{ marginBottom: 0 }}>
             {intl.formatMessage({
-              id: 'Dashboard.Detail.Overview.BasicInfo.BasicInformation',
-              defaultMessage: '基本信息',
+              id: 'Dashboard.Detail.Overview.BasicInfo.TenantBasicInformation',
+              defaultMessage: '租户基本信息',
             })}
           </h2>
         }
diff --git a/ui/src/pages/Tenant/Detail/Overview/Replicas.tsx b/ui/src/pages/Tenant/Detail/Overview/Replicas.tsx
index 5bbe10ca6..9948f9d02 100644
--- a/ui/src/pages/Tenant/Detail/Overview/Replicas.tsx
+++ b/ui/src/pages/Tenant/Detail/Overview/Replicas.tsx
@@ -1,4 +1,5 @@
 import CollapsibleCard from '@/components/CollapsibleCard';
+import { intl } from '@/utils/intl';
 import { Col,Descriptions } from 'antd';
 
 export default function Replicas({
@@ -6,17 +7,68 @@ export default function Replicas({
 }: {
   replicaList: API.ReplicaDetailType[];
 }) {
+  const LABEL_TEXT_MAP = {
+    priority: intl.formatMessage({
+      id: 'Dashboard.Detail.Overview.Replicas.Priority',
+      defaultMessage: '优先级',
+    }),
+    type: intl.formatMessage({
+      id: 'Dashboard.Detail.Overview.Replicas.ReplicaType',
+      defaultMessage: '副本类型',
+    }),
+    maxCPU: intl.formatMessage({
+      id: 'Dashboard.Detail.Overview.Replicas.MaximumAvailableCpu',
+      defaultMessage: '最大可用 CPU',
+    }),
+    memorySize: intl.formatMessage({
+      id: 'Dashboard.Detail.Overview.Replicas.MemorySize',
+      defaultMessage: '内存大小',
+    }),
+    minCPU: intl.formatMessage({
+      id: 'Dashboard.Detail.Overview.Replicas.MinimumAvailableCpu',
+      defaultMessage: '最小可用 CPU',
+    }),
+    logDiskSize: intl.formatMessage({
+      id: 'Dashboard.Detail.Overview.Replicas.ClogDiskSize',
+      defaultMessage: 'Clog 盘大小',
+    }),
+  };
+  const sortKeys = (keys: string[]) => {
+    const minCpuIdx = keys.findIndex((key) => key === 'minCPU');
+    const memorySizeIdx = keys.findIndex((key) => key === 'memorySize');
+    const temp = keys[minCpuIdx];
+    keys[minCpuIdx] = keys[memorySizeIdx];
+    keys[memorySizeIdx] = temp;
+    return keys;
+  };
   return (
     <Col span={24}>
       <CollapsibleCard
-        title={<h2 style={{ marginBottom: 0 }}>replicas</h2>}
+        title={
+          <h2 style={{ marginBottom: 0 }}>
+            {intl.formatMessage({
+              id: 'Dashboard.Detail.Overview.Replicas.ResourcePool',
+              defaultMessage: '资源池',
+            })}
+          </h2>
+        }
         collapsible={true}
         defaultExpand={true}
       >
         {replicaList.map((replica, index) => (
-          <Descriptions key={index} column={5} title={`replica ${index + 1}`}>
-            {Object.keys(replica).map((key, idx) => (
-              <Descriptions.Item label={key} key={idx}>
+          <Descriptions
+            key={index}
+            column={5}
+            title={intl.formatMessage(
+              {
+                id: 'Dashboard.Detail.Overview.Replicas.ResourcePoolReplicazone',
+                defaultMessage: '资源池 - {{replicaZone}}',
+              },
+              { replicaZone: replica.zone },
+            )}
+          >
+            {sortKeys(Object.keys(replica)).map((key, idx) => (
+              <Descriptions.Item label={LABEL_TEXT_MAP[key] || key} key={idx}>
                 {replica[key]}
               </Descriptions.Item>
             ))}
diff --git a/ui/src/pages/Tenant/Detail/Overview/index.tsx b/ui/src/pages/Tenant/Detail/Overview/index.tsx
index e79bec530..52f323395 100644
--- a/ui/src/pages/Tenant/Detail/Overview/index.tsx
+++ b/ui/src/pages/Tenant/Detail/Overview/index.tsx
@@ -1,22 +1,25 @@
 import EventsTable from '@/components/EventsTable';
 import showDeleteConfirm from '@/components/customModal/DeleteModal';
 import OperateModal from '@/components/customModal/OperateModal';
-import { REFRESH_TENANT_TIME,RESULT_STATUS } from '@/constants';
+import { REFRESH_TENANT_TIME, RESULT_STATUS } from '@/constants';
 import { getNSName } from '@/pages/Cluster/Detail/Overview/helper';
-import { getEssentialParameters as getEssentialParametersReq,getSimpleClusterList } from '@/services';
 import {
-deleteTenent,
-getBackupJobs,
-getBackupPolicy,
-getTenant,
+  getEssentialParameters as getEssentialParametersReq,
+  getSimpleClusterList,
+} from '@/services';
+import {
+  deleteTenent,
+  getBackupJobs,
+  getBackupPolicy,
+  getTenant,
 } from '@/services/tenant';
 import { intl } from '@/utils/intl';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { history } from '@umijs/max';
 import { useRequest } from 'ahooks';
-import { Button,Row,Tooltip,message } from 'antd';
-import { useEffect,useRef,useState } from 'react';
+import { Button, Row, Tooltip, message } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 import Backups from './Backups';
 import BasicInfo from './BasicInfo';
 import Replicas from './Replicas';
@@ -42,21 +45,19 @@ export default function TenantOverview() {
   useRequest(getSimpleClusterList, {
     onSuccess: ({ successful, data }) => {
       if (successful) {
-        data.forEach((cluster)=>{
-          cluster.topology.forEach((zone)=>{
+        data.forEach((cluster) => {
+          cluster.topology.forEach((zone) => {
             zone.checked = false;
-          })
-        })
+          });
+        });
         setClusterList(data);
       }
     },
   });
-  const { data: essentialParameterRes,run: getEssentialParameters} = useRequest(
-    getEssentialParametersReq,
-    {
+  const { data: essentialParameterRes, run: getEssentialParameters } =
+    useRequest(getEssentialParametersReq, {
       manual: true,
-    },
-  );
+    });
 
   const openOperateModal = (type: API.ModalType) => {
     modalType.current = type;
@@ -106,6 +107,7 @@ export default function TenantOverview() {
   });
 
   const tenantDetail = tenantDetailResponse?.data;
+
   const backupPolicy = backupPolicyResponse?.data;
   const backupJobs = backupJobsResponse?.data;
   const essentialParameter = essentialParameterRes?.data;
@@ -204,8 +206,8 @@ export default function TenantOverview() {
     let container = document.getElementById('tenant-detail-container');
     return {
       title: intl.formatMessage({
-        id: 'Dashboard.Detail.Overview.Overview',
-        defaultMessage: '概览',
+        id: 'Dashboard.Detail.Overview.TenantOverview',
+        defaultMessage: '租户概览',
       }),
       extra: [
         ...operateListConfig
@@ -288,6 +290,7 @@ export default function TenantOverview() {
             objectType="OBTENANT"
             collapsible={true}
           />
+
           <Backups backupJobs={backupJobs} backupPolicy={backupPolicy} />
         </Row>
 
@@ -298,7 +301,7 @@ export default function TenantOverview() {
           successCallback={operateSuccess}
           defaultValue={defaultUnitCount}
           defaultValueForUnitDetail={{
-            clusterList:formatClustersTopology(clusterList,tenantDetail),
+            clusterList: formatClustersTopology(clusterList, tenantDetail),
             essentialParameter,
             clusterResourceName:tenantDetail?.info.clusterResourceName,
             setClusterList,
diff --git a/ui/src/pages/Tenant/helper.ts b/ui/src/pages/Tenant/helper.ts
index e87cd551e..ed98dbce9 100644
--- a/ui/src/pages/Tenant/helper.ts
+++ b/ui/src/pages/Tenant/helper.ts
@@ -208,4 +208,15 @@ export const getNewClusterList = (
     }
   }
   return _clusterList;
+};
+
+export const checkScheduleDatesHaveFull = (scheduleDates): boolean => {
+  for (let key of Object.keys(scheduleDates)) {
+    if (!isNaN(key)) {
+      if (scheduleDates[key] === 'Full') {
+        return true;
+      }
+    }
+  }
+  return false;
 };
\ No newline at end of file
diff --git a/ui/src/services/typings.d.ts b/ui/src/services/typings.d.ts
index 2916898c9..b5bf2c247 100644
--- a/ui/src/services/typings.d.ts
+++ b/ui/src/services/typings.d.ts
@@ -18,16 +18,47 @@ declare namespace API {
     value: string;
   };
 
+  type Storage = {
+    size:number;
+    storageClass:string;
+  }
+
   type ClusterInfo = {
     name: string;
     namespace: string;
     status: string;
-    statusDetail: string;
     image: string;
-    createTime: string;
-    metrics: Metrics;
-    clusterId: number;
-    clusterName: string;
+    resource:{
+      cpu: number;
+      memory: number;
+    };
+    storage: {
+      dataStorage: Storage;
+      redoLogStorage: Storage;
+      sysLogStorage: Storage;
+    };
+    backupVolume: {
+      address: string;
+      path: string;
+    };
+    monitor: {
+      image: string;
+      resource: {
+        cpu: number;
+        memory: number;
+      };
+    };
+    rootPasswordSecret: string;
+    mode: ClusterMode;
+    parameters: {
+      key: string;
+      value: string;
+    }[];
+    // statusDetail: string;
+    // createTime: string;
+    // metrics: Metrics;
+    // clusterId: number;
+    // clusterName: string;
   };
 
   type Zone = {
@@ -126,6 +157,8 @@ declare namespace API {
     useFor: MonitorUseFor;
   };
 
+  type ClusterMode = 'NORMAL' | 'STANDALONE' | 'SERVICE'
+
   type MonitorUseFor = 'cluster' | 'tenant';
 
   type EventType = 'NORMAL' | 'WARNING';