diff --git a/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index 8ef24a9b6..617f33ede 100644 --- a/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/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 ( {metricThree} {valueThree} + + {metricFour} + {valueFour} + diff --git a/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/index.jsx b/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/index.jsx index d3e866bb1..7ff274a09 100644 --- a/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/index.jsx +++ b/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), })), ]; diff --git a/client/src/Pages/v1/Infrastructure/Details/Hooks/useHardwareUtils.jsx b/client/src/Pages/v1/Infrastructure/Details/Hooks/useHardwareUtils.jsx index 31eed8637..f2220bd75 100644 --- a/client/src/Pages/v1/Infrastructure/Details/Hooks/useHardwareUtils.jsx +++ b/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,