From 7a358fa0ed7ca13d49ffa725e8dd1b570d7392da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=B4=E6=99=96?= <2689991790@qq.com> Date: Fri, 29 Mar 2024 20:05:17 +0800 Subject: [PATCH] feat:Statistics --- ui/config/routes.ts | 201 ++++++++------- ui/src/components/TopoComponent/index.tsx | 4 +- .../components/customModal/AddZoneModal.tsx | 4 +- .../customModal/ModifyUnitDetailModal.tsx | 3 - .../customModal/ModifyUnitModal.tsx | 3 - ui/src/components/customModal/ScaleModal.tsx | 3 - .../components/customModal/UpgradeModal.tsx | 4 +- ui/src/constants/index.ts | 8 + ui/src/hook/usePublicKey.ts | 6 +- ui/src/models/global.ts | 7 +- .../Cluster/Detail/Overview/ZoneTable.tsx | 4 - .../pages/Cluster/Detail/Overview/index.tsx | 4 +- ui/src/pages/Cluster/Detail/index.tsx | 16 +- ui/src/pages/Cluster/New/index.tsx | 5 +- ui/src/pages/Layouts/BasicLayout/index.tsx | 22 +- .../pages/Layouts/StatisticsLayout/index.tsx | 30 +++ ui/src/pages/Layouts/index.tsx | 10 +- ui/src/pages/Login/index.tsx | 35 +-- .../Detail/Backup/BackupConfiguration.tsx | 10 +- .../pages/Tenant/Detail/NewBackup/index.tsx | 6 +- ui/src/pages/Tenant/Detail/Overview/index.tsx | 5 +- ui/src/pages/Tenant/Detail/index.tsx | 14 +- ui/src/pages/Tenant/New/index.tsx | 4 +- ui/src/services/index.ts | 8 +- .../services/reportRequest/backupReportReq.ts | 29 +-- .../reportRequest/clusterReportReq.ts | 33 +-- ui/src/services/reportRequest/index.ts | 19 +- .../services/reportRequest/tenantReportReq.ts | 54 ++-- ui/src/services/typings.d.ts | 244 ++++++++++++++++-- ui/src/utils/helper.ts | 46 +++- 30 files changed, 550 insertions(+), 291 deletions(-) create mode 100644 ui/src/pages/Layouts/StatisticsLayout/index.tsx diff --git a/ui/config/routes.ts b/ui/config/routes.ts index 898ca3dbb..c7a76ae7f 100644 --- a/ui/config/routes.ts +++ b/ui/config/routes.ts @@ -5,110 +5,117 @@ export default [ routes: [ { path: '/', - component: 'Layouts/BasicLayout', + component: 'Layouts/StatisticsLayout', name: '系统布局', routes: [ - { - path: 'cluster', - component: 'Cluster', - name: '集群页', - }, - { - path:'cluster/new', - component:'Cluster/New', - name: '创建集群', - }, - { - path:'tenant', - component:'Tenant', - name:'租户页' - }, - { - path:'tenant/new', - component:'Tenant/New', - name:'创建租户' - }, - { - path: 'overview', - component: 'Overview', - name: '系统概览页', - }, { path: '/', - redirect: 'overview', - name: '系统概览页', - }, - ], - }, - { - path: 'cluster/:clusterId', - component: 'Cluster/Detail', - name: '集群详情', - routes: [ - { - path: 'overview', - component: 'Cluster/Detail/Overview', - name: '概览页', - }, - { - path: 'topo', - component: 'Cluster/Detail/Topo', - name: '集群拓扑图', - }, - { - path:'monitor', - component:'Cluster/Detail/Monitor', - name:'集群详情监控' - }, - { - path:'tenant', - component:'Cluster/Detail/Tenant', - name:'集群下的租户' - }, - { - path: '/cluster/:clusterId', - redirect: 'overview', - name: '概览页', + component: 'Layouts/BasicLayout', + name: '概览布局', + routes: [ + { + path: 'cluster', + component: 'Cluster', + name: '集群页', + }, + { + path: 'cluster/new', + component: 'Cluster/New', + name: '创建集群', + }, + { + path: 'tenant', + component: 'Tenant', + name: '租户页', + }, + { + path: 'tenant/new', + component: 'Tenant/New', + name: '创建租户', + }, + { + path: 'overview', + component: 'Overview', + name: '系统概览页', + }, + { + path: '/', + redirect: 'overview', + name: '系统概览页', + }, + ], + }, + { + path: 'cluster/:clusterId', + component: 'Cluster/Detail', + name: '集群详情', + routes: [ + { + path: 'overview', + component: 'Cluster/Detail/Overview', + name: '概览页', + }, + { + path: 'topo', + component: 'Cluster/Detail/Topo', + name: '集群拓扑图', + }, + { + path: 'monitor', + component: 'Cluster/Detail/Monitor', + name: '集群详情监控', + }, + { + path: 'tenant', + component: 'Cluster/Detail/Tenant', + name: '集群下的租户', + }, + { + path: '/cluster/:clusterId', + redirect: 'overview', + name: '概览页', + }, + ], + }, + { + path: 'tenant/:tenantId', + component: 'Tenant/Detail', + name: '租户详情', + routes: [ + { + path: 'overview', + component: 'Tenant/Detail/Overview', + name: '概览页', + }, + { + path: 'topo', + component: 'Tenant/Detail/Topo', + name: '租户拓扑图', + }, + { + path: 'backup', + component: 'Tenant/Detail/Backup', + name: '租户备份', + }, + { + path: 'backup/new', + component: 'Tenant/Detail/NewBackup', + name: '新建租户备份', + }, + { + path: 'monitor', + component: 'Tenant/Detail/Monitor', + name: '租户详情监控', + }, + { + path: '/tenant/:tenantId', + redirect: 'overview', + name: '概览页', + }, + ], }, ], }, - { - path:'tenant/:tenantId', - component:'Tenant/Detail', - name:'租户详情', - routes:[ - { - path: 'overview', - component: 'Tenant/Detail/Overview', - name: '概览页', - }, - { - path: 'topo', - component: 'Tenant/Detail/Topo', - name: '租户拓扑图', - }, - { - path: 'backup', - component: 'Tenant/Detail/Backup', - name: '租户备份', - }, - { - path: 'backup/new', - component: 'Tenant/Detail/NewBackup', - name: '新建租户备份', - }, - { - path:'monitor', - component:'Tenant/Detail/Monitor', - name:'租户详情监控' - }, - { - path: '/tenant/:tenantId', - redirect: 'overview', - name: '概览页', - }, - ] - }, { path: '/login', component: 'Login', diff --git a/ui/src/components/TopoComponent/index.tsx b/ui/src/components/TopoComponent/index.tsx index e51437efb..3dc258c3c 100644 --- a/ui/src/components/TopoComponent/index.tsx +++ b/ui/src/components/TopoComponent/index.tsx @@ -48,7 +48,6 @@ export default function TopoComponent({ refreshTenant, defaultUnitCount, }: TopoProps) { - const { appInfo } = useModel('global'); const clusterOperateList = tenantReplicas ? clusterOperateOfTenant : clusterOperate; @@ -124,7 +123,7 @@ export default function TopoComponent({ }; //delete cluster const clusterDelete = async () => { - const res = await deleteClusterReportWrap({ ns, name, version: appInfo.version }); + const res = await deleteClusterReportWrap({ ns, name }); if (res.successful) { message.success(res.message); getTopoData({ ns, name, useFor: 'topo', tenantReplicas }); @@ -136,7 +135,6 @@ export default function TopoComponent({ ns, name, zoneName: chooseZoneName.current, - version: appInfo.version }); if (res.successful) { message.success( diff --git a/ui/src/components/customModal/AddZoneModal.tsx b/ui/src/components/customModal/AddZoneModal.tsx index 7f9afdad8..e39bd5d0e 100644 --- a/ui/src/components/customModal/AddZoneModal.tsx +++ b/ui/src/components/customModal/AddZoneModal.tsx @@ -5,7 +5,6 @@ import { RULER_ZONE } from '@/constants/rules'; import { getNSName } from '@/pages/Cluster/Detail/Overview/helper'; import { addObzoneReportWrap } from '@/services/reportRequest/clusterReportReq'; import InputNumber from '../InputNumber'; -import { useModel } from '@umijs/max'; import type { CommonModalType } from '.'; import CustomModal from '.'; import NodeSelector from '../NodeSelector'; @@ -20,7 +19,6 @@ export default function AddZoneModal({ successCallback, }: CommonModalType) { const [form] = Form.useForm(); - const { appInfo } = useModel('global'); const handleSubmit = async () => { try { await form.validateFields(); @@ -34,7 +32,7 @@ export default function AddZoneModal({ } const onFinish = async (values: any) => { const [namespace, name] = getNSName(); - const res = await addObzoneReportWrap({ namespace, name, ...values, version: appInfo.version }); + const res = await addObzoneReportWrap({ namespace, name, ...values}); if (res.successful) { message.success(res.message); if(successCallback) successCallback(); diff --git a/ui/src/components/customModal/ModifyUnitDetailModal.tsx b/ui/src/components/customModal/ModifyUnitDetailModal.tsx index 25cfcb146..d2b48b3ea 100644 --- a/ui/src/components/customModal/ModifyUnitDetailModal.tsx +++ b/ui/src/components/customModal/ModifyUnitDetailModal.tsx @@ -20,7 +20,6 @@ import { formatPatchPoolData } from '@/utils/helper'; import { intl } from '@/utils/intl'; import { useEffect,useState } from 'react'; import SelectWithTooltip from '../SelectWithTooltip'; -import { useModel } from '@umijs/max'; import { Col,Form,Row,Select,message } from 'antd'; import type { CommonModalType } from '.'; @@ -84,7 +83,6 @@ export default function ModifyUnitDetailModal({ zoneName, }, }: CommonModalType & UnitConfigType) { - const { appInfo } = useModel('global'); const [form] = Form.useForm(); const [maxResource, setMaxResource] = useState({}); const [minResource, setMinResource] = useState( @@ -123,7 +121,6 @@ export default function ModifyUnitDetailModal({ ns, name, zoneName, - version:appInfo.version, ...reqData, }); if (res.successful) { diff --git a/ui/src/components/customModal/ModifyUnitModal.tsx b/ui/src/components/customModal/ModifyUnitModal.tsx index bfc878b10..3e082fd25 100644 --- a/ui/src/components/customModal/ModifyUnitModal.tsx +++ b/ui/src/components/customModal/ModifyUnitModal.tsx @@ -1,6 +1,5 @@ import { getNSName } from '@/pages/Cluster/Detail/Overview/helper'; import { modifyUnitNumReportWrap } from '@/services/reportRequest/tenantReportReq'; -import { useModel } from '@umijs/max'; import { intl } from '@/utils/intl'; import { Form,InputNumber,message } from 'antd'; import { useEffect } from 'react'; @@ -19,7 +18,6 @@ export default function ModifyUnitModal({ }, successCallback, }: CommonModalType & { params: { defaultUnitCount: number } }) { - const { appInfo } = useModel('global'); const [form] = Form.useForm(); const { defaultUnitCount } = params; const handleSubmit = async () => { @@ -36,7 +34,6 @@ export default function ModifyUnitModal({ ns: namespace, name, ...values, - version: appInfo.version }); if (res.successful) { message.success( diff --git a/ui/src/components/customModal/ScaleModal.tsx b/ui/src/components/customModal/ScaleModal.tsx index 054c0fd36..2bc90b3d6 100644 --- a/ui/src/components/customModal/ScaleModal.tsx +++ b/ui/src/components/customModal/ScaleModal.tsx @@ -4,7 +4,6 @@ import CustomModal from '.'; import { getNSName } from '@/pages/Cluster/Detail/Overview/helper'; import { scaleObserverReportWrap } from '@/services/reportRequest/clusterReportReq'; -import { useModel } from '@umijs/max'; import { useEffect } from 'react'; import type { CommonModalType } from '.'; @@ -21,7 +20,6 @@ export default function ScaleModal({ successCallback, params, }: ScaleModalProps & CommonModalType) { - const { appInfo } = useModel('global'); const zoneName = params?.zoneName; const defaultValue = params?.defaultValue; const [form] = Form.useForm(); @@ -39,7 +37,6 @@ export default function ScaleModal({ name, zoneName, replicas: val.replicas, - version: appInfo.version }); if (res.successful) { message.success(res.message); diff --git a/ui/src/components/customModal/UpgradeModal.tsx b/ui/src/components/customModal/UpgradeModal.tsx index 00b6d15e5..ef145912e 100644 --- a/ui/src/components/customModal/UpgradeModal.tsx +++ b/ui/src/components/customModal/UpgradeModal.tsx @@ -3,7 +3,6 @@ import { Form, Input, message } from 'antd'; import { getNSName } from '@/pages/Cluster/Detail/Overview/helper'; import { upgradeClusterReportWrap } from '@/services/reportRequest/clusterReportReq'; -import { useModel } from '@umijs/max'; import type { CommonModalType } from '.'; import CustomModal from '.'; @@ -16,7 +15,6 @@ export default function UpgradeModal({ successCallback, }: CommonModalType) { const [form] = Form.useForm(); - const { appInfo } = useModel('global'); const handleSubmit = async () => { try { await form.validateFields(); @@ -27,7 +25,7 @@ export default function UpgradeModal({ const handleCancel = () => setVisible(false); const onFinish = async ({ image }: any) => { const [ns, name] = getNSName(); - const res = await upgradeClusterReportWrap({ ns, name, image, version: appInfo.version }); + const res = await upgradeClusterReportWrap({ ns, name, image }); if (res.successful) { message.success(res.message); if(successCallback) successCallback(); diff --git a/ui/src/constants/index.ts b/ui/src/constants/index.ts index 63502c651..c63af7442 100644 --- a/ui/src/constants/index.ts +++ b/ui/src/constants/index.ts @@ -49,6 +49,12 @@ const REFRESH_FREQUENCY = 15; // Number of monitoring points const POINT_NUMBER = 15; +// two minutes +const CHECK_STORAGE_INTERVAL = 1000 * 120; + +// three hours +const STATISTICS_INTERVAL = 1000 * 60 * 60 * 3; + const SUFFIX_UNIT = 'GB'; const MINIMAL_CONFIG = { @@ -150,6 +156,7 @@ const MODE_MAP = new Map([ export { BACKUP_RESULT_STATUS, BADGE_IMG_MAP, + CHECK_STORAGE_INTERVAL, CLUSTER_IMG_MAP, CLUSTER_INFO_CONFIG, COLOR_MAP, @@ -163,6 +170,7 @@ export { RESOURCE_NAME_REG, RESULT_STATUS, SERVER_IMG_MAP, + STATISTICS_INTERVAL, STATUS, SUFFIX_UNIT, TOPO_INFO_CONFIG, diff --git a/ui/src/hook/usePublicKey.ts b/ui/src/hook/usePublicKey.ts index d6cd77638..4a09d4e47 100644 --- a/ui/src/hook/usePublicKey.ts +++ b/ui/src/hook/usePublicKey.ts @@ -1,13 +1,13 @@ import React, { useEffect } from 'react'; -import { infoReq } from '@/services'; +import { getAppInfoFromStorage } from '@/utils/helper'; import JSEncrypt from 'jsencrypt'; export const usePublicKey = () => { const [publicKey, setPublicKey] = React.useState(''); useEffect(() => { - infoReq().then((res) => { - setPublicKey(res.data.publicKey); + getAppInfoFromStorage().then((appInfo) => { + setPublicKey(appInfo.publicKey); }).catch((err) => { console.log(err) }); diff --git a/ui/src/models/global.ts b/ui/src/models/global.ts index 4e4ac88e5..668be4713 100644 --- a/ui/src/models/global.ts +++ b/ui/src/models/global.ts @@ -1,16 +1,15 @@ -import { useState } from 'react'; +import { useRef, useState } from 'react'; // Global shared data export default () => { const [chooseClusterName, setChooseClusterName] = useState(''); const [userName, setUsername] = useState(); - const [appInfo, setAppInfo] = useState({}); + const reportDataInterval = useRef(); return { chooseClusterName, setChooseClusterName, userName, setUsername, - appInfo, - setAppInfo, + reportDataInterval, }; }; diff --git a/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx b/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx index 9be76c650..b411ceeb7 100644 --- a/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx @@ -5,7 +5,6 @@ import type { ColumnType } from 'antd/es/table'; import showDeleteConfirm from '@/components/customModal/DeleteModal'; import { COLOR_MAP } from '@/constants'; import { deleteObzoneReportWrap } from '@/services/reportRequest/clusterReportReq'; -import { useModel } from '@umijs/max'; import { getNSName } from './helper'; interface ZoneTableProps { @@ -25,8 +24,6 @@ export default function ZoneTable({ setChooseServerNum, clusterStatus, }: ZoneTableProps) { - const { appInfo } = useModel('global'); - const getZoneColumns = (remove, clickScale) => { const columns: ColumnType = [ { @@ -141,7 +138,6 @@ export default function ZoneTable({ ns, name, zoneName, - version: appInfo.version }); if (res.successful) { message.success( diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx index 29b239233..558142596 100644 --- a/ui/src/pages/Cluster/Detail/Overview/index.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/index.tsx @@ -18,7 +18,7 @@ import { getNSName } from './helper'; //集群详情概览页 const ClusterOverview: React.FC = () => { - const { setChooseClusterName, appInfo } = useModel('global'); + const { setChooseClusterName } = useModel('global'); const [operateModalVisible, setOperateModalVisible] = useState(false); const [[ns, name]] = useState(getNSName()); @@ -44,7 +44,7 @@ const ClusterOverview: React.FC = () => { }, ); const handleDelete = async () => { - const res = await deleteClusterReportWrap({ ns, name, version: appInfo.version }); + const res = await deleteClusterReportWrap({ ns, name }); if (res.successful) { message.success( intl.formatMessage({ diff --git a/ui/src/pages/Cluster/Detail/index.tsx b/ui/src/pages/Cluster/Detail/index.tsx index d1b6aac3f..9b757b416 100644 --- a/ui/src/pages/Cluster/Detail/index.tsx +++ b/ui/src/pages/Cluster/Detail/index.tsx @@ -1,11 +1,13 @@ import logoImg from '@/assets/logo1.svg'; import { logoutReq } from '@/services'; +import { getAppInfoFromStorage } from '@/utils/helper'; import { intl } from '@/utils/intl'; import { Menu } from '@oceanbase/design'; import type { MenuItem } from '@oceanbase/design/es/BasicLayout'; import { BasicLayout, IconFont } from '@oceanbase/ui'; -import { Outlet, history, useLocation, useParams, useModel } from '@umijs/max'; +import { Outlet, history, useLocation, useModel, useParams } from '@umijs/max'; import { useRequest } from 'ahooks'; +import { useEffect, useState } from 'react'; const subSideMenus: MenuItem[] = [ { title: intl.formatMessage({ @@ -39,13 +41,15 @@ const subSideMenus: MenuItem[] = [ const ClusterDetail: React.FC = () => { const params = useParams(); const user = localStorage.getItem('user'); + const [version, setVersion] = useState(''); const location = useLocation(); - const { appInfo } = useModel('global'); + const { reportDataInterval } = useModel('global'); const { clusterId } = params; const { run: logout } = useRequest(logoutReq, { manual: true, onSuccess: (data) => { if (data.successful) { + clearInterval(reportDataInterval.current); history.push('/login'); } }, @@ -98,6 +102,12 @@ const ClusterDetail: React.FC = () => { ); + useEffect(() => { + getAppInfoFromStorage().then((appInfo) => { + setVersion(appInfo.version); + }); + }, []); + return (
{ locales: ['zh-CN', 'en-US'], appData: { shortName: 'ob dashboard', - version: appInfo?.version, + version, }, }} menus={menus} diff --git a/ui/src/pages/Cluster/New/index.tsx b/ui/src/pages/Cluster/New/index.tsx index 6ce10de4a..26041a719 100644 --- a/ui/src/pages/Cluster/New/index.tsx +++ b/ui/src/pages/Cluster/New/index.tsx @@ -2,7 +2,7 @@ import { getStorageClasses } from '@/services'; import { createClusterReportWrap } from '@/services/reportRequest/clusterReportReq'; import { intl } from '@/utils/intl'; import { PageContainer } from '@ant-design/pro-components'; -import { useNavigate, useModel } from '@umijs/max'; +import { useNavigate } from '@umijs/max'; import { useRequest } from 'ahooks'; import { Button,Form,Row,message } from 'antd'; import { useState } from 'react'; @@ -17,7 +17,6 @@ import Parameters from './Parameters'; import Topo from './Topo'; export default function New() { - const { appInfo } = useModel('global'); const navigate = useNavigate(); const [form] = Form.useForm(); const [passwordVal, setPasswordVal] = useState(''); @@ -45,7 +44,7 @@ export default function New() { values.clusterId = new Date().getTime() % 4294901759; values.rootPassword = encryptText(values.rootPassword, publicKey) as string; - const res = await createClusterReportWrap({...values, version: appInfo.version}); + const res = await createClusterReportWrap({...values}); if (res.successful) { message.success(res.message, 3); form.resetFields(); diff --git a/ui/src/pages/Layouts/BasicLayout/index.tsx b/ui/src/pages/Layouts/BasicLayout/index.tsx index ce2e980db..c078ba5c8 100644 --- a/ui/src/pages/Layouts/BasicLayout/index.tsx +++ b/ui/src/pages/Layouts/BasicLayout/index.tsx @@ -1,29 +1,35 @@ import logoImg from '@/assets/logo1.svg'; -import { infoReq, logoutReq } from '@/services'; +import { logoutReq } from '@/services'; +import { getAppInfoFromStorage } from '@/utils/helper'; import { intl } from '@/utils/intl'; import { Menu } from '@oceanbase/design'; import type { MenuItem } from '@oceanbase/design/es/BasicLayout'; import { IconFont, BasicLayout as OBLayout } from '@oceanbase/ui'; import { Outlet, history, useLocation, useModel } from '@umijs/max'; import { useRequest } from 'ahooks'; +import { useEffect, useState } from 'react'; const BasicLayout: React.FC = () => { const location = useLocation(); const user = localStorage.getItem('user'); - const { appInfo, setAppInfo } = useModel('global'); + const [version, setVersion] = useState(''); + const { reportDataInterval } = useModel('global'); const { run: logout } = useRequest(logoutReq, { manual: true, onSuccess: (data) => { if (data.successful) { history.push('/login'); + clearInterval(reportDataInterval.current); } }, }); - useRequest(infoReq, { - onSuccess: ({ data }) => { - setAppInfo(data); - }, - }); + + useEffect(() => { + getAppInfoFromStorage().then((appInfo) => { + setVersion(appInfo.version); + }); + }, []); + // const Title = () => ( // { locales: ['zh-CN', 'en-US'], appData: { shortName: 'ob dashboard', - version: appInfo?.version, + version, }, }} > diff --git a/ui/src/pages/Layouts/StatisticsLayout/index.tsx b/ui/src/pages/Layouts/StatisticsLayout/index.tsx new file mode 100644 index 000000000..de841cb99 --- /dev/null +++ b/ui/src/pages/Layouts/StatisticsLayout/index.tsx @@ -0,0 +1,30 @@ +import { Outlet } from '@umijs/max'; +import { useEffect } from 'react'; + +import { CHECK_STORAGE_INTERVAL } from '@/constants'; +import { isReportTimeExpired, reportPollData } from '@/utils/helper'; +import { useModel } from '@umijs/max'; + +export default function StatisticsLayout() { + const { reportDataInterval } = useModel('global'); + useEffect(() => { + const lastReportTimestamp = Number(localStorage.getItem('lastReportTime')); + if (!lastReportTimestamp || isReportTimeExpired(lastReportTimestamp)) { + reportPollData(); + } + + if (!reportDataInterval.current) { + reportDataInterval.current = setInterval(() => { + const reportTimestamp = Number(localStorage.getItem('lastReportTime')); + if (isReportTimeExpired(reportTimestamp)) { + reportPollData(); + } + }, CHECK_STORAGE_INTERVAL); + } + + return () => { + clearInterval(reportDataInterval.current); + }; + }, []); + return ; +} diff --git a/ui/src/pages/Layouts/index.tsx b/ui/src/pages/Layouts/index.tsx index 69962a7a6..3a59406c7 100644 --- a/ui/src/pages/Layouts/index.tsx +++ b/ui/src/pages/Layouts/index.tsx @@ -1,12 +1,13 @@ import { ConfigProvider } from '@oceanbase/design'; +import { getAppInfoFromStorage } from '@/utils/helper'; import enUS from '@oceanbase/ui/es/locale/en-US'; import zhCN from '@oceanbase/ui/es/locale/zh-CN'; import { Outlet, getLocale, useNavigate } from '@umijs/max'; import { Layout } from 'antd'; +import { useEffect } from 'react'; import styles from './index.less'; -//前置处理 const PreLayout: React.FC = () => { const navigate = useNavigate(); const locale = getLocale() || 'zh-CN'; @@ -14,6 +15,13 @@ const PreLayout: React.FC = () => { 'zh-CN': zhCN, 'en-US': enUS, }; + + useEffect(() => { + getAppInfoFromStorage().then((appInfo) => { + sessionStorage.setItem('appInfo', JSON.stringify(appInfo)); + }); + }, []); + return (
diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx index 59153ad40..ffe005ad8 100644 --- a/ui/src/pages/Login/index.tsx +++ b/ui/src/pages/Login/index.tsx @@ -1,23 +1,23 @@ -import { intl } from '@/utils/intl' -import { LockOutlined, UserOutlined } from '@ant-design/icons' -import { useNavigate } from '@umijs/max' -import { Button, Form, Input } from 'antd' -import React from 'react' +import { intl } from '@/utils/intl'; +import { LockOutlined, UserOutlined } from '@ant-design/icons'; +import { useNavigate } from '@umijs/max'; +import { Button, Form, Input } from 'antd'; +import React from 'react'; -import logoSrc from '@/assets/oceanbase_logo.svg' -import { encryptText, usePublicKey } from '@/hook/usePublicKey' -import { loginReq } from '@/services' -import styles from './index.less' +import logoSrc from '@/assets/oceanbase_logo.svg'; +import { encryptText, usePublicKey } from '@/hook/usePublicKey'; +import { loginReq } from '@/services'; +import styles from './index.less'; const Login: React.FC = () => { const navigate = useNavigate(); const publicKey = usePublicKey(); - const onFinish = async(values: API.User) => { + const onFinish = async (values: API.User) => { values.password = encryptText(values.password, publicKey) as string; const res = await loginReq(values); - - if(res.successful){ + + if (res.successful) { navigate('/overview'); localStorage.setItem('user', values.username); } @@ -38,7 +38,11 @@ const Login: React.FC = () => { name="username" rules={[{ required: true, message: 'Please input your Username!' }]} > - } placeholder="Username" /> + } + placeholder="Username" + /> { /> - -