107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
/* eslint-disable no-array-constructor */
|
|
import { BulbOutlined, LaptopOutlined, SaveOutlined } from "@ant-design/icons";
|
|
import { Row } from "antd";
|
|
import React, { useEffect, useState } from 'react';
|
|
import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../utils/apis';
|
|
import Chart from './components/chart';
|
|
import StatisticItem from "./components/statistic";
|
|
|
|
interface TimedValue {
|
|
time: Date,
|
|
value: Number
|
|
}
|
|
|
|
export default function HardwareInfo() {
|
|
const [hardwareStatus, setHardwareStatus] = useState({
|
|
cpu: Array<TimedValue>(),
|
|
memory: Array<TimedValue>(),
|
|
disk: Array<TimedValue>(),
|
|
message: "",
|
|
});
|
|
|
|
const getHardwareStatus = async () => {
|
|
try {
|
|
const result = await fetchData(HARDWARE_STATS);
|
|
setHardwareStatus({ ...result });
|
|
|
|
} catch (error) {
|
|
setHardwareStatus({ ...hardwareStatus, message: error.message });
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
let getStatusIntervalId = null;
|
|
|
|
getHardwareStatus();
|
|
getStatusIntervalId = setInterval(getHardwareStatus, FETCH_INTERVAL); // runs every 1 min.
|
|
|
|
// returned function will be called on component unmount
|
|
return () => {
|
|
clearInterval(getStatusIntervalId);
|
|
}
|
|
}, []);
|
|
|
|
|
|
if (!hardwareStatus.cpu) {
|
|
return null;
|
|
}
|
|
|
|
const currentCPUUsage = hardwareStatus.cpu[hardwareStatus.cpu.length - 1]?.value;
|
|
const currentRamUsage =
|
|
hardwareStatus.memory[hardwareStatus.memory.length - 1]?.value;
|
|
const currentDiskUsage =
|
|
hardwareStatus.disk[hardwareStatus.disk.length - 1]?.value;
|
|
|
|
const series = [
|
|
{
|
|
name: "CPU",
|
|
color: "#B63FFF",
|
|
data: hardwareStatus.cpu,
|
|
},
|
|
{
|
|
name: "Memory",
|
|
color: "#2087E2",
|
|
data: hardwareStatus.memory,
|
|
},
|
|
{
|
|
name: "Disk",
|
|
color: "#FF7700",
|
|
data: hardwareStatus.disk,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<div>
|
|
<h2>Hardware Info</h2>
|
|
<Row gutter={[16, 16]}>
|
|
<StatisticItem
|
|
title={series[0].name}
|
|
value={`${currentCPUUsage}`}
|
|
prefix={<LaptopOutlined style={{color: series[0].color }}/>}
|
|
color={series[0].color}
|
|
progress
|
|
/>
|
|
<StatisticItem
|
|
title={series[1].name}
|
|
value={`${currentRamUsage}`}
|
|
prefix={<BulbOutlined style={{color: series[1].color }} />}
|
|
color={series[1].color}
|
|
progress
|
|
/>
|
|
<StatisticItem
|
|
title={series[2].name}
|
|
value={`${currentDiskUsage}`}
|
|
prefix={<SaveOutlined style={{color: series[2].color }} />}
|
|
color={series[2].color}
|
|
progress
|
|
/>
|
|
</Row>
|
|
|
|
<div className="chart-container">
|
|
<Chart dataCollections={series} color="#FF7700" unit="%" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |