minecluster/src/components/overview/Overview.jsx

import { useState, useEffect } from "react";
import { useSystemAvailable } from "@mcl/queries";
import Box from "@mui/material/Box";
import OverviewVisual from "./OverviewVisual.jsx";
export default function Overview(props) {
  const [memory, setMemory] = useState(100);
  const [cpu, setCpu] = useState(100);
  const { isLoading: systemLoading, data: systemAvailable } =
    useSystemAvailable();

  useEffect(() => {
    if (systemLoading || !props.clusterMetrics) return;
    setCpu((props.clusterMetrics.cpu / systemAvailable.cpu) * 100);
    setMemory((props.clusterMetrics.memory / systemAvailable.memory) * 100);
  }, [systemAvailable, props.clusterMetrics]);

  return (
    <Box className="overview-toolbar">
      <OverviewVisual value={cpu} color="warning" label="CPU" />
      <OverviewVisual value={memory} color="success" label="MEMORY" />
    </Box>
  );
}