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

build: css files dir

Browse Source
This commit is contained in:
jialin
2024-06-18 11:28:17 +08:00
parent 246d203e36
commit d3f3baa93e
9 changed files with 211 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/system-load.tsx
+56 -53
View File
@@ -1,5 +1,6 @@
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';
@@ -9,59 +10,61 @@ const SystemLoad = () => {
};
return (
<div className="system-load">
<PageTools
marginBottom={10}
marginTop={0}
left={false}
right={
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
<ResourceUtilization />
<Row style={{ width: '100%' }}>
<Col span={6}>
<GaugeChart
title="GPU Compute Utilization"
total={100}
target={20}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
<Col span={6}>
<GaugeChart
title="GPU Memory Utilization"
total={100}
target={30}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
<Col span={6}>
<GaugeChart
title="CPU Compute Utilization"
total={100}
target={40}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
<Col span={6}>
<GaugeChart
title="CPU Memory Utilization"
total={100}
target={70}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
</Row>
</div>
<PageContainer ghost title="System Load">
<div className="system-load">
<PageTools
marginBottom={10}
marginTop={0}
left={false}
right={
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
<ResourceUtilization />
<Row style={{ width: '100%' }}>
<Col span={6}>
<GaugeChart
title="GPU Compute Utilization"
total={100}
target={20}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
<Col span={6}>
<GaugeChart
title="GPU Memory Utilization"
total={100}
target={30}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
<Col span={6}>
<GaugeChart
title="CPU Compute Utilization"
total={100}
target={40}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
<Col span={6}>
<GaugeChart
title="CPU Memory Utilization"
total={100}
target={70}
// height={320}
thresholds={[50, 70, 100]}
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
</Row>
</div>
</PageContainer>
);
};