149 lines
4.6 KiB
TypeScript
149 lines
4.6 KiB
TypeScript
import CardWrapper from '@/components/card-wrapper';
|
|
import GaugeChart from '@/components/echarts/gauge';
|
|
import PageTools from '@/components/page-tools';
|
|
import BaseSelect from '@/components/seal-form/base/select';
|
|
import { queryClusterList } from '@/pages/cluster-management/apis';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Col, Row } from 'antd';
|
|
import _ from 'lodash';
|
|
import { useContext, useEffect, useMemo, useState } from 'react';
|
|
import { DashboardContext } from '../config/dashboard-context';
|
|
import ResourceUtilization from './resource-utilization';
|
|
|
|
const smallChartHeight = 190;
|
|
const largeChartHeight = 400;
|
|
const resourceChartHeight = 400;
|
|
|
|
const SystemLoad = () => {
|
|
const intl = useIntl();
|
|
const { system_load, fetchData } = useContext(DashboardContext);
|
|
const [systemLoadData, setSystemLoadData] = useState<any>(system_load || {});
|
|
const [clusterList, setClusterList] = useState<Global.BaseOption<number>[]>(
|
|
[]
|
|
);
|
|
|
|
const chartData = useMemo(() => {
|
|
const data = systemLoadData?.current || {};
|
|
return {
|
|
gpu: {
|
|
data: _.round(data.gpu || 0, 1)
|
|
},
|
|
vram: {
|
|
data: _.round(data.vram || 0, 1)
|
|
},
|
|
cpu: {
|
|
data: _.round(data.cpu || 0, 1)
|
|
},
|
|
ram: {
|
|
data: _.round(data.ram || 0, 1)
|
|
}
|
|
};
|
|
}, [systemLoadData?.current]);
|
|
|
|
useEffect(() => {
|
|
setSystemLoadData(system_load || {});
|
|
}, [system_load]);
|
|
|
|
const handleClusterChange = async (value: number) => {
|
|
try {
|
|
const res: any = await fetchData({ cluster_id: value });
|
|
setSystemLoadData(res.system_load || {});
|
|
} catch (error) {
|
|
setSystemLoadData({});
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchClusters = async () => {
|
|
try {
|
|
const res = await queryClusterList({ page: -1 });
|
|
const options = res.items.map((cluster: any) => ({
|
|
label: cluster.name,
|
|
value: cluster.id
|
|
}));
|
|
setClusterList(options);
|
|
} catch (error) {
|
|
setClusterList([]);
|
|
}
|
|
};
|
|
fetchClusters();
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<div className="system-load">
|
|
<PageTools
|
|
style={{ margin: '26px 0px' }}
|
|
left={
|
|
<span className="font-700">
|
|
{intl.formatMessage({ id: 'dashboard.systemload' })}
|
|
</span>
|
|
}
|
|
right={
|
|
<BaseSelect
|
|
allowClear
|
|
onChange={handleClusterChange}
|
|
style={{ width: 360 }}
|
|
options={clusterList}
|
|
placeholder={intl.formatMessage({
|
|
id: 'clusters.filterBy.cluster'
|
|
})}
|
|
/>
|
|
}
|
|
/>
|
|
<Row gutter={[20, 20]}>
|
|
<Col xs={24} sm={24} md={24} lg={24} xl={16}>
|
|
<CardWrapper style={{ height: resourceChartHeight }}>
|
|
<ResourceUtilization data={systemLoadData?.history} />
|
|
</CardWrapper>
|
|
</Col>
|
|
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
|
|
<CardWrapper style={{ height: largeChartHeight }}>
|
|
<Row style={{ height: largeChartHeight }}>
|
|
<Col span={12} style={{ height: smallChartHeight }}>
|
|
<GaugeChart
|
|
height={smallChartHeight}
|
|
value={chartData.gpu.data}
|
|
title={intl.formatMessage({
|
|
id: 'dashboard.gpuutilization'
|
|
})}
|
|
></GaugeChart>
|
|
</Col>
|
|
<Col span={12} style={{ height: smallChartHeight }}>
|
|
<GaugeChart
|
|
title={intl.formatMessage({
|
|
id: 'dashboard.vramutilization'
|
|
})}
|
|
height={smallChartHeight}
|
|
value={chartData.vram.data}
|
|
></GaugeChart>
|
|
</Col>
|
|
<Col span={12} style={{ height: smallChartHeight }}>
|
|
<GaugeChart
|
|
title={intl.formatMessage({
|
|
id: 'dashboard.cpuutilization'
|
|
})}
|
|
height={smallChartHeight}
|
|
value={chartData.cpu.data}
|
|
></GaugeChart>
|
|
</Col>
|
|
<Col span={12} style={{ height: smallChartHeight }}>
|
|
<GaugeChart
|
|
title={intl.formatMessage({
|
|
id: 'dashboard.memoryutilization'
|
|
})}
|
|
height={smallChartHeight}
|
|
value={chartData.ram.data}
|
|
></GaugeChart>
|
|
</Col>
|
|
</Row>
|
|
</CardWrapper>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SystemLoad;
|