Add gauges

Client/src/Pages/Infrastructure/details/index.jsx

@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import { Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
+import CustomGauge from "../../../Components/Charts/CustomGauge";
 
 const bytesToGB = (bytes) => {
 	if (typeof bytes !== "number") return 0;
@@ -43,7 +44,41 @@ const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo })
 	const theme = useTheme();
 	return (
 		<BaseBox>
-			<div></div>
+			<Stack
+				direction="column"
+				gap={theme.spacing(2)}
+				alignItems="center"
+			>
+				<CustomGauge
+					progress={value}
+					radius={100}
+					color={theme.palette.primary.main}
+				/>
+				<Typography component="h2">{heading}</Typography>
+				<Box
+					sx={{
+						width: "100%",
+						borderTop: `1px solid ${theme.palette.border.light}`,
+					}}
+				>
+					<Stack
+						justifyContent={"space-between"}
+						direction="row"
+						gap={theme.spacing(2)}
+					>
+						<Typography>{metricOne}</Typography>
+						<Typography>{valueOne}</Typography>
+					</Stack>
+					<Stack
+						justifyContent={"space-between"}
+						direction="row"
+						gap={theme.spacing(2)}
+					>
+						<Typography>{metricTwo}</Typography>
+						<Typography>{valueTwo}</Typography>
+					</Stack>
+				</Box>
+			</Stack>
 		</BaseBox>
 	);
 };
@@ -91,6 +126,40 @@ const InfrastructureDetails = () => {
 						subHeading={"Active"}
 					/>
 				</Stack>
+				<Stack
+					direction="row"
+					gap={theme.spacing(8)}
+				>
+					<GaugeBox
+						value={latestCheck.cpu.usage_percent}
+						heading={"Memory Usage"}
+						metricOne={"Used"}
+						valueOne={`${bytesToGB(latestCheck.memory.used_bytes)}GB`}
+						metricTwo={"Total"}
+						valueTwo={`${bytesToGB(latestCheck.memory.total_bytes)}GB`}
+					/>
+					<GaugeBox
+						value={latestCheck.cpu.usage_percent}
+						heading={"CPU Usage"}
+						metricOne={"Cores"}
+						valueOne={latestCheck.cpu.physical_core}
+						metricTwo={"Frequency"}
+						valueTwo={`${latestCheck.cpu.frequency} Ghz`}
+					/>
+					{latestCheck.disk.map((disk, idx) => {
+						return (
+							<GaugeBox
+								key={disk._id}
+								value={disk.usage_percent}
+								heading={`Disk${idx} usage`}
+								metricOne={"Used"}
+								valueOne={`${bytesToGB(disk.total_bytes - disk.free_bytes)}GB`}
+								metricTwo={"Total"}
+								valueTwo={`${bytesToGB(disk.total_bytes)}GB`}
+							/>
+						);
+					})}
+				</Stack>
 			</Stack>
 		</Box>
 	);