106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
import CardWrapper from '@/components/card-wrapper';
|
|
import LiquidChart from '@/components/charts/liquid';
|
|
import PageTools from '@/components/page-tools';
|
|
import breakpoints from '@/config/breakpoints';
|
|
import useWindowResize from '@/hooks/use-window-resize';
|
|
import { Col, DatePicker, Row } from 'antd';
|
|
import { useEffect, useState } from 'react';
|
|
import ResourceUtilization from './resource-utilization';
|
|
|
|
const SystemLoad = () => {
|
|
const colors = [
|
|
'linear-gradient(90deg, rgba(84, 204, 152,.8) 0%, rgba(84, 204, 152,0.5) 50%, rgba(84, 204, 152,.8) 100%)',
|
|
'linear-gradient(90deg, rgba(255, 214, 102,.8) 0%, rgba(255, 214, 102,0.5) 50%, rgba(255, 214, 102,.8) 100%)',
|
|
'linear-gradient(90deg, rgba(255, 120, 117,.8) 0%, rgba(255, 120, 117,0.5) 50%, rgba(255, 120, 117,.8) 100%)'
|
|
];
|
|
|
|
const { size } = useWindowResize();
|
|
const [paddingRight, setPaddingRight] = useState<string>('20px');
|
|
const [smallChartHeight, setSmallChartHeight] = useState<number>(190);
|
|
const [largeChartHeight, setLargeChartHeight] = useState<number>(400);
|
|
const thresholds = [0.5, 0.7, 1];
|
|
const height = 400;
|
|
|
|
const handleSelectDate = (date: string) => {};
|
|
|
|
useEffect(() => {
|
|
if (size.width < breakpoints.xl) {
|
|
setPaddingRight('0');
|
|
} else {
|
|
setPaddingRight('20px');
|
|
}
|
|
}, [size.width]);
|
|
|
|
return (
|
|
<div>
|
|
<div className="system-load">
|
|
<PageTools
|
|
style={{ margin: '32px 8px' }}
|
|
left={
|
|
<span style={{ fontSize: 'var(--font-size-large)' }}>
|
|
System Load
|
|
</span>
|
|
}
|
|
right={
|
|
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
|
|
}
|
|
/>
|
|
<Row style={{ width: '100%' }} gutter={[0, 20]}>
|
|
<Col
|
|
xs={24}
|
|
sm={24}
|
|
md={24}
|
|
lg={24}
|
|
xl={16}
|
|
style={{ paddingRight: paddingRight }}
|
|
>
|
|
<CardWrapper style={{ height: height, width: '100%' }}>
|
|
<ResourceUtilization />
|
|
</CardWrapper>
|
|
</Col>
|
|
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
|
|
<CardWrapper style={{ height: largeChartHeight, width: '100%' }}>
|
|
<Row style={{ height: largeChartHeight, width: '100%' }}>
|
|
<Col span={12} style={{ height: smallChartHeight }}>
|
|
<LiquidChart
|
|
title="GPU Compute Utilization"
|
|
percent={0.2}
|
|
thresholds={thresholds}
|
|
rangColor={colors}
|
|
></LiquidChart>
|
|
</Col>
|
|
<Col span={12} style={{ height: smallChartHeight }}>
|
|
<LiquidChart
|
|
title="GPU Memory Utilization"
|
|
percent={0.3}
|
|
thresholds={thresholds}
|
|
rangColor={colors}
|
|
></LiquidChart>
|
|
</Col>
|
|
<Col span={12} style={{ height: smallChartHeight }}>
|
|
<LiquidChart
|
|
title="CPU Compute Utilization"
|
|
percent={0.8}
|
|
thresholds={thresholds}
|
|
rangColor={colors}
|
|
></LiquidChart>
|
|
</Col>
|
|
<Col span={12} style={{ height: smallChartHeight }}>
|
|
<LiquidChart
|
|
title="CPU Memory Utilization"
|
|
percent={0.7}
|
|
thresholds={thresholds}
|
|
rangColor={colors}
|
|
></LiquidChart>
|
|
</Col>
|
|
</Row>
|
|
</CardWrapper>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SystemLoad;
|