owncast/web/pages/hardware-info.tsx

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>
          <Row gutter={[16, 16]} justify="space-around">
            <StatisticItem
              title={series[0].name}
              value={`${currentCPUUsage}`}
              prefix={<LaptopOutlined style={{color: series[0].color }}/>}
              color={series[0].color}
              progress
              centered
            />
            <StatisticItem
              title={series[1].name}
              value={`${currentRamUsage}`}
              prefix={<BulbOutlined style={{color: series[1].color }} />}
              color={series[1].color}
              progress
              centered
            />
            <StatisticItem
              title={series[2].name}
              value={`${currentDiskUsage}`}
              prefix={<SaveOutlined  style={{color: series[2].color }} />}
              color={series[2].color}
              progress
              centered
            />
          </Row>

          <Chart title="% used" dataCollections={series} color="#FF7700" unit="%" />
        </div>
      </div>
    );
}