24 lines
872 B
React
24 lines
872 B
React
|
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>
|
||
|
|
);
|
||
|
|
}
|