owncast/web/pages/hardware-info.tsx

/* 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: "#FF7700",
    data: hardwareStatus.cpu,
  },
  {
    name: "Memory",
    color: "#004777",
    data: hardwareStatus.memory,
  },
  {
    name: "Disk",
    color: "#A9E190",
    data: hardwareStatus.disk,
  },
];
  
    return (
      <div>
        <div>
          <h2>Hardware Info</h2>
          <Row gutter={[16, 16]}>
            <StatisticItem
              title="CPU"
              value={`${currentCPUUsage}`}
              prefix={<LaptopOutlined style={{color: '#FF7700' }}/>}
              color="#FF7700"
              progress
            />
            <StatisticItem
              title="RAM"
              value={`${currentRamUsage}`}
              prefix={<BulbOutlined style={{color: '#004777' }} />}
              color="#004777"
              progress
            />
            <StatisticItem
              title="Disk"
              value={`${currentDiskUsage}`}
              prefix={<SaveOutlined  style={{color: '#A9E190' }} />}
              color="#A9E190"
              progress
            />
          </Row>

          <div className="chart-container">
            <Chart dataCollections={series} color="#FF7700" unit="%" />
          </div>
        </div>
        <p>cpu:[], disk: [], memory: []; value = %age.</p>
        <p>the times should be the same for each, though milliseconds differ</p>
        <div
          style={{
            border: "1px solid blue",
            height: "300px",
            width: "100%",
            overflow: "auto",
          }}
        >
          {JSON.stringify(hardwareStatus)}
        </div>
      </div>
    );
}