Add disk device as third metric value

client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx

@@ -6,7 +6,7 @@ import { Stack, Typography, Box } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
-const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => {
+const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo, metricThree, valueThree }) => {
 	const theme = useTheme();
 
 	const valueStyle = {
@@ -19,6 +19,8 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) =>
 		textAlign: "right",
 	};
 
+	const isThirdMetric = metricThree !== undefined && valueThree !== undefined;
+
 	return (
 		<BaseContainer>
 			<Stack
@@ -70,6 +72,15 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) =>
 						<Typography>{metricTwo}</Typography>
 						<Typography sx={valueStyle}>{valueTwo}</Typography>
 					</Stack>
+					<Stack
+						justifyContent={"space-between"}
+						direction="row"
+						alignItems="center"
+						gap={theme.spacing(2)}
+					>
+						<Typography>{metricThree}</Typography>
+						<Typography sx={valueStyle}>{valueThree}</Typography>
+					</Stack>
 				</Box>
 			</Stack>
 		</BaseContainer>

client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/index.jsx

@@ -10,7 +10,7 @@ import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 
 const Gauges = ({ isLoading = false, monitor }) => {
-	const { decimalToPercentage, formatBytes } = useHardwareUtils();
+	const { decimalToPercentage, formatBytes, formatDeviceName } = useHardwareUtils();
 	const theme = useTheme();
 	const { t } = useTranslation();
 
@@ -55,6 +55,8 @@ const Gauges = ({ isLoading = false, monitor }) => {
 			valueOne: formatBytes(disk.total_bytes - disk.free_bytes, true),
 			metricTwo: t("total"),
 			valueTwo: formatBytes(disk.total_bytes, true),
+			metricThree: t("device"),
+			valueThree: formatDeviceName(disk.device),
 		})),
 	];
 
@@ -74,6 +76,8 @@ const Gauges = ({ isLoading = false, monitor }) => {
 						valueOne={gauge.valueOne}
 						metricTwo={gauge.metricTwo}
 						valueTwo={gauge.valueTwo}
+						metricThree={gauge.metricThree}
+						valueThree={gauge.valueThree}
 					/>
 				);
 			})}