Add mountpoint as fourth metric

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

@@ -6,7 +6,8 @@ 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, metricThree, valueThree }) => {
+const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo, 
+				metricThree, valueThree, metricFour, valueFour }) => {
 	const theme = useTheme();
 
 	const valueStyle = {
@@ -19,8 +20,6 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo, metri
 		textAlign: "right",
 	};
 
-	const isThirdMetric = metricThree !== undefined && valueThree !== undefined;
-
 	return (
 		<BaseContainer>
 			<Stack
@@ -81,6 +80,15 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo, metri
 						<Typography>{metricThree}</Typography>
 						<Typography sx={valueStyle}>{valueThree}</Typography>
 					</Stack>
+					<Stack
+						justifyContent={"space-between"}
+						direction="row"
+						alignItems="center"
+						gap={theme.spacing(2)}
+					>
+						<Typography>{metricFour}</Typography>
+						<Typography sx={valueStyle}>{valueFour}</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, formatDeviceName } = useHardwareUtils();
+	const { decimalToPercentage, formatBytes, formatDeviceName, formatMountpoint } = useHardwareUtils();
 	const theme = useTheme();
 	const { t } = useTranslation();
 
@@ -57,6 +57,8 @@ const Gauges = ({ isLoading = false, monitor }) => {
 			valueTwo: formatBytes(disk.total_bytes, true),
 			metricThree: t("device"),
 			valueThree: formatDeviceName(disk.device),
+			metricFour: t("mountpoint"),
+			valueFour: formatMountPoint(disk.mountpoint),
 		})),
 	];
 

client/src/Pages/v1/Infrastructure/Details/Hooks/useHardwareUtils.jsx

@@ -128,6 +128,14 @@ const useHardwareUtils = () => {
 		);
 	};
 
+	const formatMountpoint = (mountpoint) => {
+		return (
+			<>
+				{String(mountpoint)}
+			</>
+		)
+	}
+
 	/**
 	 * Converts a decimal value to a percentage
 	 *
@@ -187,6 +195,7 @@ const useHardwareUtils = () => {
 	return {
 		formatBytes,
 		formatDeviceName,
+		formatMountpoint,
 		decimalToPercentage,
 		buildTemps,
 		getDimensions,