Skip to content

Commit

Permalink
add: BAILayoutCard and apply to dashboard in draft
Browse files Browse the repository at this point in the history
  • Loading branch information
@lizable
lizable committed Aug 30, 2024
1 parent 87b39d6 commit 5fa3eaa
Show file tree
Hide file tree
Showing 4 changed files with 271 additions and 0 deletions.
16 changes: 16 additions & 0 deletions react/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import LocationStateBreadCrumb from './components/LocationStateBreadCrumb';
import MainLayout from './components/MainLayout/MainLayout';
import { useSuspendedBackendaiClient, useWebUINavigate } from './hooks';
import { useBAISettingUserState } from './hooks/useBAISetting';
import AdminDashboardPage from './pages/AdminDashboardPage';
import DashboardPage from './pages/DashboardPage';
import Page401 from './pages/Page401';
import Page404 from './pages/Page404';
import VFolderListPage from './pages/VFolderListPage';
Expand Down Expand Up @@ -142,6 +144,20 @@ const router = createBrowserRouter([
},
handle: { labelKey: 'start' },
},
{
path: '/dashboard',
Component: () => {
const { token } = theme.useToken();
return <DashboardPage />;
},
},
{
path: '/system_overview',
Component: () => {
const { token } = theme.useToken();
return <AdminDashboardPage />;
},
},
{
path: '/job',
handle: { labelKey: 'webui.menu.Sessions' },
Expand Down
25 changes: 25 additions & 0 deletions react/src/components/BAILayoutCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Flex from './Flex';
import { Card, CardProps, ConfigProvider, theme, Typography } from 'antd';

export interface BAILayoutCardProps extends CardProps {}

const BAILayoutCard: React.FC<BAILayoutCardProps> = ({ ...cardProps }) => {
const { token } = theme.useToken();

return (
<ConfigProvider
theme={{
components: {
Card: {
lineWidth: 0,
extraColor: '#00BD9B',
},
},
}}
>
<Card {...cardProps}></Card>
</ConfigProvider>
);
};

export default BAILayoutCard;
106 changes: 106 additions & 0 deletions react/src/pages/AdminDashboardPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import BAILayoutCard from '../components/BAILayoutCard';
import Flex from '../components/Flex';
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
import { Button, ConfigProvider, Typography } from 'antd';
import React from 'react';

interface AdminDashboardPageProps {}

const AdminDashboardPage: React.FC<AdminDashboardPageProps> = (props) => {
return (
<>
<ConfigProvider
theme={{
components: {
Button: {
fontSize: 24, // icon size
onlyIconSize: 20,
colorText: '#999',
},
},
}}
>
<Flex direction="column" align="start" justify="start" gap={'lg'}>
<Flex direction="row" align="center" justify="around" gap={'lg'}>
<BAILayoutCard
title={
<Flex direction="row" align="center" justify="start" gap={'xs'}>
<Typography.Title level={4} style={{ margin: 0 }}>
{'Allocated Resources & Capacity'}
</Typography.Title>
<Button type="text" icon={<QuestionCircleOutlined />} />
</Flex>
}
extra={
<Button
type="text"
icon={<SyncOutlined />}
style={{ color: 'inherit' }}
/>
}
style={{ width: 1146, height: 192 }}
></BAILayoutCard>
</Flex>
<Flex direction="column" align="center" justify="around" gap={'lg'}>
<BAILayoutCard
title={
<Flex direction="row" align="center" justify="start" gap={'xs'}>
<Typography.Title level={4} style={{ margin: 0 }}>
{'Resource Allocated Session'}
</Typography.Title>
<Button type="text" icon={<QuestionCircleOutlined />} />
</Flex>
}
extra={
<Button
type="text"
icon={<SyncOutlined />}
style={{ color: 'inherit' }}
/>
}
style={{ width: 1146, height: 329 }}
></BAILayoutCard>
<BAILayoutCard
title={
<Flex direction="row" align="center" justify="start" gap={'xs'}>
<Typography.Title level={4} style={{ margin: 0 }}>
{'Recently Created Session'}
</Typography.Title>
<Button type="text" icon={<QuestionCircleOutlined />} />
</Flex>
}
extra={
<Button
type="text"
icon={<SyncOutlined />}
style={{ color: 'inherit' }}
/>
}
style={{ width: 1146, height: 329 }}
></BAILayoutCard>
<BAILayoutCard
title={
<Flex direction="row" align="center" justify="start" gap={'xs'}>
<Typography.Title level={4} style={{ margin: 0 }}>
{'Session(s) in Error'}
</Typography.Title>
<Button type="text" icon={<QuestionCircleOutlined />} />
</Flex>
}
extra={
<Button
type="text"
icon={<SyncOutlined />}
style={{ color: 'inherit' }}
/>
}
style={{ width: 1146, height: 329 }}
></BAILayoutCard>
</Flex>
</Flex>
</ConfigProvider>
</>
);
};

export default AdminDashboardPage;
124 changes: 124 additions & 0 deletions react/src/pages/DashboardPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import BAILayoutCard from '../components/BAILayoutCard';
import Flex from '../components/Flex';
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
import { Button, ConfigProvider, Typography } from 'antd';
import React from 'react';

interface DashboardPageProps {}

const DashboardPage: React.FC<DashboardPageProps> = (props) => {
return (
<>
<ConfigProvider
theme={{
components: {
Button: {
fontSize: 24, // icon size
onlyIconSize: 20,
colorText: '#999',
},
},
}}
>
<Flex direction="column" align="start" justify="start" gap={'lg'}>
<Flex direction="row" align="center" justify="around" gap={'lg'}>
<BAILayoutCard
title={
<Flex direction="row" align="center" justify="start" gap={'xs'}>
<Typography.Title level={4} style={{ margin: 0 }}>
{'My Session'}
</Typography.Title>
<Button type="text" icon={<QuestionCircleOutlined />} />
</Flex>
}
extra={
<Button
type="text"
icon={<SyncOutlined />}
style={{ color: 'inherit' }}
/>
}
style={{ width: 444, height: 192 }}
></BAILayoutCard>
<BAILayoutCard
title={
<Flex direction="row" align="center" justify="start" gap={'xs'}>
<Typography.Title level={4} style={{ margin: 0 }}>
{'Allocated Resources'}
</Typography.Title>
<Button type="text" icon={<QuestionCircleOutlined />} />
</Flex>
}
extra={
<Button
type="text"
icon={<SyncOutlined />}
style={{ color: 'inherit' }}
/>
}
style={{ width: 678, height: 192 }}
></BAILayoutCard>
</Flex>
<Flex direction="column" align="center" justify="around" gap={'lg'}>
<BAILayoutCard
title={
<Flex direction="row" align="center" justify="start" gap={'xs'}>
<Typography.Title level={4} style={{ margin: 0 }}>
{'Recently Created Session'}
</Typography.Title>
<Button type="text" icon={<QuestionCircleOutlined />} />
</Flex>
}
extra={
<Button
type="text"
icon={<SyncOutlined />}
style={{ color: 'inherit' }}
/>
}
style={{ width: 1146, height: 329 }}
></BAILayoutCard>
<BAILayoutCard
title={
<Flex direction="row" align="center" justify="start" gap={'xs'}>
<Typography.Title level={4} style={{ margin: 0 }}>
{'Most Resource allocated Sessions'}
</Typography.Title>
<Button type="text" icon={<QuestionCircleOutlined />} />
</Flex>
}
extra={
<Button
type="text"
icon={<SyncOutlined />}
style={{ color: 'inherit' }}
/>
}
style={{ width: 1146, height: 329 }}
></BAILayoutCard>
<BAILayoutCard
title={
<Flex direction="row" align="center" justify="start" gap={'xs'}>
<Typography.Title level={4} style={{ margin: 0 }}>
{'Pipeline Status'}
</Typography.Title>
<Button type="text" icon={<QuestionCircleOutlined />} />
</Flex>
}
extra={
<Button
type="text"
icon={<SyncOutlined />}
style={{ color: 'inherit' }}
/>
}
style={{ width: 1146, height: 329 }}
></BAILayoutCard>
</Flex>
</Flex>
</ConfigProvider>
</>
);
};

export default DashboardPage;

0 comments on commit 5fa3eaa

Please sign in to comment.