fix:Optimize UI (#220)

* fix:Optimize UI * i18n
oceanbase · Mar 6, 2024 · 7777324 · 7777324
1 parent 8856aa0
commit 7777324
Show file tree

Hide file tree

Showing 25 changed files with 255 additions and 230 deletions.
diff --git a/ui/mock/tenantAPI.ts b/ui/mock/tenantAPI.ts
@@ -76,12 +76,12 @@ export default {
       bakDataPath: 'string',
       bakEncryptionSecret: 'string',
       destType: 'string',
-      jobKeepWindow: 'string',
+      jobKeepDays: 'string',
       name: 'string',
       namespace: 'string',
       ossAccessSecret: 'string',
-      pieceInterval: 'string',
-      recoveryWindow: 'string',
+      pieceIntervalDays: 'string',
+      recoveryDays: 'string',
       scheduleDates: [
         {
           backupType: 'typea',

diff --git a/ui/src/components/MonitorComp/index.tsx b/ui/src/components/MonitorComp/index.tsx
@@ -1,5 +1,4 @@
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import { ProCard } from '@ant-design/pro-components';
 import { useRequest } from 'ahooks';
 import { Card,Col,Row,Tooltip } from 'antd';
 import { useState } from 'react';
@@ -78,7 +77,7 @@ export default function MonitorComp({
       {allMetrics &&
         allMetrics.map((container: any, index: number) => (
           <Col span={24} key={index}>
-            <ProCard bodyStyle={{ padding: 0 }}>
+            <Card bodyStyle={{ padding: 0 }}>
               <div>
                 <div className={styles.monitorHeader}>
                   {type === 'OVERVIEW' ? (
@@ -148,7 +147,7 @@ export default function MonitorComp({
                   )}
                 </div>
               </div>
-            </ProCard>
+            </Card>
           </Col>
         ))}
       {/* <LineGraphModal

diff --git a/ui/src/components/MonitorDetail/DataFilter.tsx b/ui/src/components/MonitorDetail/DataFilter.tsx
@@ -1,20 +1,19 @@
-import { POINT_NUMBER,REFRESH_FREQUENCY } from '@/constants';
+import { POINT_NUMBER, REFRESH_FREQUENCY } from '@/constants';
 import { intl } from '@/utils/intl';
-import { ProCard } from '@ant-design/pro-components';
 import { useUpdateEffect } from 'ahooks';
-import { Col,DatePicker,Row,Select,Switch } from 'antd';
+import { Col, DatePicker, Row, Select, Switch, Card } from 'antd';
 import type { RangePickerProps } from 'antd/es/date-picker';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import moment from 'moment';
-import { useEffect,useState } from 'react';
+import { useEffect, useState } from 'react';
 import { caculateStep } from './helper';
 import type {
-FilterDataType,
-Label,
-LabelType,
-OptionType,
-QueryRangeType,
+  FilterDataType,
+  Label,
+  LabelType,
+  OptionType,
+  QueryRangeType,
 } from './index';
 import styles from './index.less';
 
@@ -205,14 +204,16 @@ export default function DataFilter({
     setSelectServer(undefined);
     setFilterLabel(handleLabel(val));
     //clear
-    if(filterData.serverList){
+    if (filterData.serverList) {
       if (typeof val === 'undefined') {
         setServerOption(filterData.serverList);
         return;
       }
-      const filterServers = filterData.serverList.filter((server: OptionType) => {
-        return server.zone === val;
-      });
+      const filterServers = filterData.serverList.filter(
+        (server: OptionType) => {
+          return server.zone === val;
+        },
+      );
       setServerOption(filterServers);
     }
   };
@@ -309,9 +310,8 @@ export default function DataFilter({
   }, [dateValue]);
 
   return (
-    <ProCard
+    <Card
       style={{ marginTop: 12 }}
-      headerBordered
       title={intl.formatMessage({
         id: 'OBDashboard.Detail.Monitor.DataFilter.DataFiltering',
         defaultMessage: '数据筛选',
@@ -387,6 +387,6 @@ export default function DataFilter({
           </div>
         </Col>
       </Row>
-    </ProCard>
+    </Card>
   );
 }
diff --git a/ui/src/components/TopoComponent/index.tsx b/ui/src/components/TopoComponent/index.tsx
@@ -285,7 +285,7 @@ export default function TopoComponent({
         ? header
         : originTopoData && (
             <BasicInfo
-              style={{ backgroundColor: '#f5f8fe' }}
+              style={{ backgroundColor: '#f5f8fe', border:'none' }}
               {...(originTopoData.basicInfo as API.ClusterInfo)}
             />
           )}

diff --git a/ui/src/i18n/strings/en-US.json b/ui/src/i18n/strings/en-US.json
@@ -555,5 +555,12 @@
   "Dashboard.Cluster.New.Monitor.Image": "Image",
   "Dashboard.Cluster.New.Monitor.ImageList": "(Image list)",
   "Dashboard.Cluster.New.Observer.Image": "Image",
-  "Dashboard.Cluster.New.Observer.ImageList": "(Image list)"
+  "Dashboard.Cluster.New.Observer.ImageList": "(Image list)",
+  "Dashboard.Detail.Backup.JobTable.TaskName": "Task name",
+  "Dashboard.Detail.Backup.JobTable.Deadline": "Deadline",
+  "Dashboard.Detail.Backup.JobTable.EndTime": "End time",
+  "Dashboard.Detail.Backup.JobTable.Path": "Path",
+  "Dashboard.Detail.Backup.JobTable.ResourceStatus": "Resource status",
+  "Dashboard.Detail.Backup.JobTable.TaskStatus": "Task Status",
+  "Dashboard.Tenant.Detail.PerformanceMonitoring": "Performance monitoring"
 }
diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json
@@ -555,5 +555,12 @@
   "Dashboard.Cluster.New.Monitor.Image": "镜像",
   "Dashboard.Cluster.New.Monitor.ImageList": "（镜像列表）",
   "Dashboard.Cluster.New.Observer.Image": "镜像",
-  "Dashboard.Cluster.New.Observer.ImageList": "（镜像列表）"
+  "Dashboard.Cluster.New.Observer.ImageList": "（镜像列表）",
+  "Dashboard.Detail.Backup.JobTable.TaskName": "任务名称",
+  "Dashboard.Detail.Backup.JobTable.Deadline": "截止时间",
+  "Dashboard.Detail.Backup.JobTable.EndTime": "结束时间",
+  "Dashboard.Detail.Backup.JobTable.Path": "路径",
+  "Dashboard.Detail.Backup.JobTable.ResourceStatus": "资源状态",
+  "Dashboard.Detail.Backup.JobTable.TaskStatus": "任务状态",
+  "Dashboard.Tenant.Detail.PerformanceMonitoring": "性能监控"
 }
diff --git a/ui/src/pages/Cluster/ClusterList.tsx b/ui/src/pages/Cluster/ClusterList.tsx
@@ -1,8 +1,7 @@
 import { intl } from '@/utils/intl';
-import { ProCard } from '@ant-design/pro-components';
 import { Pie } from '@antv/g2plot';
 import { Link } from '@umijs/max';
-import { Button, Col, Table, Tag } from 'antd';
+import { Button, Col, Table, Tag, Card } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 
 import { COLOR_MAP } from '@/constants';
@@ -167,7 +166,7 @@ export default function ClusterList({
 }: ClusterListProps) {
   return (
     <Col span={24}>
-      <ProCard>
+      <Card>
         <div className={styles.clusterHeader}>
           <h2>
             {intl.formatMessage({
@@ -191,7 +190,7 @@ export default function ClusterList({
           bordered
           sticky
         />
-      </ProCard>
+      </Card>
     </Col>
   );
 }
diff --git a/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx b/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx
@@ -1,7 +1,6 @@
 import { COLOR_MAP } from '@/constants';
 import { intl } from '@/utils/intl';
-import { ProCard } from '@ant-design/pro-components';
-import { Col, Descriptions, Tag } from 'antd';
+import { Col, Descriptions, Tag, Card } from 'antd';
 
 interface BasicInfoProps {
   name: string;
@@ -20,7 +19,7 @@ export default function BasicInfo({
 }: BasicInfoProps) {
   return (
     <Col span={24}>
-      <ProCard style={style}>
+      <Card style={style}>
         <Descriptions
           column={5}
           title={intl.formatMessage({
@@ -62,7 +61,7 @@ export default function BasicInfo({
             <Tag color={COLOR_MAP.get(status)}>{status}</Tag>
           </Descriptions.Item>
         </Descriptions>
-      </ProCard>
+      </Card>
     </Col>
   );
 }
diff --git a/ui/src/pages/Cluster/Detail/Overview/ServerTable.tsx b/ui/src/pages/Cluster/Detail/Overview/ServerTable.tsx
@@ -1,6 +1,5 @@
 import { intl } from '@/utils/intl';
-import { ProCard } from '@ant-design/pro-components';
-import { Col, Table, Tag } from 'antd';
+import { Col, Table, Tag, Card } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 
 import { COLOR_MAP } from '@/constants';
@@ -97,15 +96,15 @@ const getServerColums = () => {
 export default function ServerTable({ servers }: { servers: API.Server[] }) {
   return (
     <Col span={24}>
-      <ProCard>
+      <Card>
         <Table
           columns={getServerColums()}
           rowKey="name"
           dataSource={servers}
           pagination={{simple:true}}
           sticky
         />
-      </ProCard>
+      </Card>
     </Col>
   );
 }
diff --git a/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx b/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx
@@ -1,6 +1,5 @@
 import { intl } from '@/utils/intl'; //@ts-nocheck
-import { ProCard } from '@ant-design/pro-components';
-import { Col, Table, Tag, message } from 'antd';
+import { Col, Table, Tag, message, Card } from 'antd';
 import type { ColumnType } from 'antd/es/table';
 
 import showDeleteConfirm from '@/components/customModal/DeleteModal';
@@ -141,14 +140,14 @@ export default function ZoneTable({
   };
   return (
     <Col span={24}>
-      <ProCard>
+      <Card>
         <Table
           rowKey="name"
           pagination={{simple:true}}
           columns={getZoneColumns(handleDelete, clickScale)}
           dataSource={zones}
         />
-      </ProCard>
+      </Card>
     </Col>
   );
 }
diff --git a/ui/src/pages/Cluster/Detail/Tenant/index.tsx b/ui/src/pages/Cluster/Detail/Tenant/index.tsx
@@ -6,7 +6,7 @@ import { getAllTenants } from '@/services/tenant';
 import { PageContainer } from '@ant-design/pro-components';
 import { useNavigate } from '@umijs/max';
 import { useRequest } from 'ahooks';
-import { Row } from 'antd';
+import { Col,Row } from 'antd';
 import BasicInfo from '../Overview/BasicInfo';
 import { getNSName } from '../Overview/helper';
 
@@ -47,14 +47,16 @@ export default function Tenant() {
         )}
         <EventsTable objectType="OBTENANT" />
         {tenantsList && (
-          <MonitorComp
-            queryRange={defaultQueryRange}
-            type="OVERVIEW"
-            queryScope="OBTENANT"
-            groupLabels={['tenant_name']}
-            useFor='tenant'
-            filterLabel={[{ key: 'ob_cluster_name', value: clusterName }]}
-          />
+          <Col span={24}>
+            <MonitorComp
+              queryRange={defaultQueryRange}
+              type="OVERVIEW"
+              queryScope="OBTENANT"
+              groupLabels={['tenant_name']}
+              useFor="tenant"
+              filterLabel={[{ key: 'ob_cluster_name', value: clusterName }]}
+            />
+          </Col>
         )}
       </Row>
     </PageContainer>

diff --git a/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx b/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx
@@ -94,15 +94,15 @@ export default function BackupConfiguration({
     };
   }
   const DATE_CONFIG = {
-    jobKeepWindow: intl.formatMessage({
+    jobKeepDays: intl.formatMessage({
       id: 'Dashboard.Detail.Backup.BackupConfiguration.BackupTaskRetention',
       defaultMessage: '备份任务保留',
     }),
-    recoveryWindow: intl.formatMessage({
+    recoveryDays: intl.formatMessage({
       id: 'Dashboard.Detail.Backup.BackupConfiguration.DataRecoveryWindow',
       defaultMessage: '数据恢复窗口',
     }),
-    pieceInterval: intl.formatMessage({
+    pieceIntervalDays: intl.formatMessage({
       id: 'Dashboard.Detail.Backup.BackupConfiguration.ArchiveSliceInterval',
       defaultMessage: '归档切片间隔',
     }),

diff --git a/ui/src/pages/Tenant/Detail/Backup/BackupJobs.tsx b/ui/src/pages/Tenant/Detail/Backup/BackupJobs.tsx
@@ -28,32 +28,32 @@ export default function BackupJobs() {
         id: 'Dashboard.Detail.Backup.BackupJobs.FullBackup',
         defaultMessage: '全量备份',
       }),
-      children: <JobTable dataSource={backupJobs} />,
+      children: <JobTable curSelect={curSelect} dataSource={backupJobs} />,
     },
     {
       key: 'INCR',
       label: intl.formatMessage({
         id: 'Dashboard.Detail.Backup.BackupJobs.IncrementalBackup',
         defaultMessage: '增量备份',
       }),
-      children: <JobTable dataSource={backupJobs} />,
+      children: <JobTable curSelect={curSelect} dataSource={backupJobs} />,
     },
     {
       key: 'ARCHIVE',
       label: intl.formatMessage({
         id: 'Dashboard.Detail.Backup.BackupJobs.LogArchiving',
         defaultMessage: '日志归档',
       }),
-      children: <JobTable dataSource={backupJobs} />,
+      children: <JobTable curSelect={curSelect} dataSource={backupJobs} />,
     },
     {
       key: 'CLEAN',
       label: intl.formatMessage({
         id: 'Dashboard.Detail.Backup.BackupJobs.DataCleansing',
         defaultMessage: '数据清理',
       }),
-      children: <JobTable dataSource={backupJobs} />,
-    },
+      children: <JobTable curSelect={curSelect} dataSource={backupJobs} />,
+    }, 
   ];
 
   return (