root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: page styles

Browse Source
This commit is contained in:
jialin
2024-06-26 10:39:03 +08:00
parent 2e30eb7012
commit 1fc415b6e6
24 changed files with 294 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/active-table.tsx
+6 -6
View File
@@ -1,4 +1,4 @@
import ContentWrapper from '@/components/content-wrapper';
// import div from '@/components/content-wrapper';
import PageTools from '@/components/page-tools';
import { Col, Row, Table } from 'antd';
@@ -131,7 +131,7 @@ const projectData = [
];
const ActiveTable = () => {
return (
<Row>
<Row gutter={[20, 0]}>
<Col span={12}>
<PageTools
style={{ margin: '32px 40px' }}
@@ -144,14 +144,14 @@ const ActiveTable = () => {
}
right={false}
/>
<ContentWrapper contentStyle={{ paddingRight: 0 }} title={false}>
<div>
<Table
columns={modelColumns}
dataSource={modelData}
pagination={false}
rowKey="id"
/>
</ContentWrapper>
</div>
</Col>
<Col span={12}>
<PageTools
@@ -165,14 +165,14 @@ const ActiveTable = () => {
}
right={false}
/>
<ContentWrapper title={false}>
<div>
<Table
columns={projectColumns}
dataSource={projectData}
pagination={false}
rowKey="id"
/>
</ContentWrapper>
</div>
</Col>
</Row>
);
src/pages/dashboard/components/over-view.less
+2
View File
@@ -3,6 +3,8 @@
height: 110px;
display: flex;
justify-content: space-around;
box-shadow: var(--box-shadow-base);
border-radius: var(--ant-border-radius-lg);
}
}
src/pages/dashboard/components/over-view.tsx
+2 -3
View File
@@ -1,4 +1,3 @@
import ContentWrapper from '@/components/content-wrapper';
import { Card, Col, Row, Space } from 'antd';
import React from 'react';
import { overviewConfigs } from '../config';
@@ -63,7 +62,7 @@ const Overview: React.FC = (props) => {
);
};
return (
<ContentWrapper contentStyle={{ paddingBlockStart: '32px' }} title={false}>
<div>
<Row gutter={[24, 20]} className={styles.row}>
{overviewConfigs.map((config, index) => (
<Col span={5} key={config.key}>
@@ -75,7 +74,7 @@ const Overview: React.FC = (props) => {
</Col>
))}
</Row>
</ContentWrapper>
</div>
);
};
src/pages/dashboard/components/resource-utilization.tsx
+1
View File
@@ -52,6 +52,7 @@ const UtilizationOvertime: React.FC = () => {
data.push({
time: timeList[i],
type: typeList[j],
color: 'red',
value: _.get(mockData, typeList[j])[i]
});
}
src/pages/dashboard/components/system-load.tsx
+57 -43
View File
@@ -1,20 +1,24 @@
import CardWrapper from '@/components/card-wrapper';
import GaugeChart from '@/components/charts/gauge';
import PageTools from '@/components/page-tools';
import { PageContainer } from '@ant-design/pro-components';
import { Col, DatePicker, Row } from 'antd';
import ResourceUtilization from './resource-utilization';
const SystemLoad = () => {
const colors = [
'rgba(84, 204, 152,.8)',
'rgba(255, 214, 102,.8)',
'rgba(255, 120, 117,.8)'
];
const handleSelectDate = (date: string) => {
console.log('dateString============', date);
};
return (
<PageContainer ghost title={false}>
<div>
<div className="system-load">
<PageTools
marginBottom={10}
marginTop={0}
style={{ margin: '32px 40px' }}
left={
<span style={{ fontSize: 'var(--font-size-large)' }}>
System Load
@@ -24,51 +28,61 @@ const SystemLoad = () => {
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
<ResourceUtilization />
<Row style={{ width: '100%', marginTop: '32px' }}>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<GaugeChart
title="GPU Compute Utilization"
total={100}
target={20}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
<CardWrapper>
<ResourceUtilization />
</CardWrapper>
<Row style={{ width: '100%', marginTop: '40px' }} gutter={[20, 20]}>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CardWrapper>
<GaugeChart
title="GPU Compute Utilization"
total={100}
target={20}
// height={320}
thresholds={[50, 70, 100]}
rangColor={colors}
></GaugeChart>
</CardWrapper>
</Col>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<GaugeChart
title="GPU Memory Utilization"
total={100}
target={30}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CardWrapper>
<GaugeChart
title="GPU Memory Utilization"
total={100}
target={30}
// height={320}
thresholds={[50, 70, 100]}
rangColor={colors}
></GaugeChart>
</CardWrapper>
</Col>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<GaugeChart
title="CPU Compute Utilization"
total={100}
target={40}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CardWrapper>
<GaugeChart
title="CPU Compute Utilization"
total={100}
target={40}
// height={320}
thresholds={[50, 70, 100]}
rangColor={colors}
></GaugeChart>
</CardWrapper>
</Col>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<GaugeChart
title="CPU Memory Utilization"
total={100}
target={70}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CardWrapper>
<GaugeChart
title="CPU Memory Utilization"
total={100}
target={70}
// height={320}
thresholds={[50, 70, 100]}
rangColor={colors}
></GaugeChart>
</CardWrapper>
</Col>
</Row>
</div>
</PageContainer>
</div>
);
};
src/pages/dashboard/components/usage.tsx
+20 -15
View File
@@ -1,6 +1,6 @@
import CardWrapper from '@/components/card-wrapper';
import ColumnBar from '@/components/charts/column-bar';
import HBar from '@/components/charts/h-bar';
import ContentWrapper from '@/components/content-wrapper';
import PageTools from '@/components/page-tools';
import { generateRandomArray } from '@/utils';
import { Col, DatePicker, Row } from 'antd';
@@ -86,9 +86,11 @@ const tokenUsage = TokensData.map((val, i) => {
});
const Usage = () => {
const bgColor = '#fff';
const handleSelectDate = (dateString: string) => {
console.log('dateString============', dateString);
};
return (
<>
<PageTools
@@ -98,9 +100,9 @@ const Usage = () => {
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
<Row style={{ width: '100%' }} gutter={[20, 0]}>
<Col span={12}>
<ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
<Row style={{ width: '100%' }} gutter={[0, 20]}>
<Col span={12} style={{ paddingRight: '20px' }}>
<CardWrapper>
<ColumnBar
title="API Request"
data={dataList}
@@ -108,10 +110,10 @@ const Usage = () => {
yField="value"
height={360}
></ColumnBar>
</ContentWrapper>
</CardWrapper>
</Col>
<Col span={12}>
<ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
<CardWrapper>
<ColumnBar
title="Tokens"
data={tokenUsage}
@@ -119,31 +121,34 @@ const Usage = () => {
yField="value"
height={360}
></ColumnBar>
</ContentWrapper>
</CardWrapper>
</Col>
</Row>
<Row style={{ width: '100%' }} gutter={[20, 0]}>
<Col span={12}>
<ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
<Row style={{ width: '100%', marginTop: '20px' }} gutter={[0, 20]}>
<Col span={12} style={{ paddingRight: '20px' }}>
<CardWrapper>
<HBar
title="Top Users"
data={userDataList}
xField="time"
yField="value"
height={400}
></HBar>
</ContentWrapper>
</CardWrapper>
</Col>
<Col span={12}>
<ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
<CardWrapper
style={{
background: bgColor,
borderRadius: 'var(--border-radius-base)'
}}
>
<HBar
title="Top Projects"
data={projectDataList}
xField="time"
yField="value"
height={400}
></HBar>
</ContentWrapper>
</CardWrapper>
</Col>
</Row>
</>
src/pages/dashboard/config/index.ts
+10 -10
View File
@@ -2,31 +2,31 @@ export const overviewConfigs = [
{
key: 'workers',
label: 'Workers',
backgroundColor:
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
backgroundColor: 'var(--color-white-1)'
},
{
key: 'gpus',
label: 'Total GPUs',
backgroundColor:
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
},
{
key: 'allocatedGpus',
label: 'Allocated GPUs',
backgroundColor:
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
},
{
key: 'models',
label: 'Models',
backgroundColor:
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
},
{
key: 'instances',
label: 'Instances',
backgroundColor:
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
}
];
src/pages/dashboard/index.tsx
+3 -4
View File
@@ -1,4 +1,3 @@
import DividerLine from '@/components/divider-line';
import ActiveTable from './components/active-table';
import Overview from './components/over-view';
import SystemLoad from './components/system-load';
@@ -8,11 +7,11 @@ const Dashboard: React.FC = () => {
return (
<>
<Overview></Overview>
<DividerLine></DividerLine>
{/* <DividerLine></DividerLine> */}
<SystemLoad></SystemLoad>
<DividerLine></DividerLine>
{/* <DividerLine></DividerLine> */}
<Usage></Usage>
<DividerLine></DividerLine>
{/* <DividerLine></DividerLine> */}
<ActiveTable></ActiveTable>
</>
);