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/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>
);
};