From bf150181738bf0e428a977a29293cf284e622c50 Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Thu, 15 Jan 2026 22:04:56 -0500 Subject: [PATCH] fix: various UI/UX improvements for infrastructure pages ## Changes - Fix infrastructure monitor configure page loading error by adding required dateRange parameter - Fix URL validation error when editing existing infrastructure monitors - Fix monitor update using correct 'id' property instead of '_id' - Fix gauge box labels: "Device" (capitalized) and "Mounted on" instead of "mountpoint" - Show full device path instead of truncated ".../" prefix - Implement CSS Grid layout for gauge boxes ensuring consistent widths across all rows - Gauge boxes expand to fill space only when 4+ boxes exist ## Files Modified - client/src/Pages/Infrastructure/Create/index.jsx - client/src/Pages/Infrastructure/Create/hooks/useInfrastructureSubmit.jsx - client/src/Pages/Infrastructure/Details/Components/GaugeBoxes/index.jsx - client/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx - client/src/Pages/Infrastructure/Details/Components/BaseContainer/index.jsx - client/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx - client/src/locales/en.json --- .../Create/hooks/useInfrastructureSubmit.jsx | 2 +- .../src/Pages/Infrastructure/Create/index.jsx | 9 +++++--- .../Components/BaseContainer/index.jsx | 5 +++-- .../Details/Components/GaugeBoxes/Gauge.jsx | 10 +++++++-- .../Details/Components/GaugeBoxes/index.jsx | 22 +++++++++++++------ .../Details/Hooks/useHardwareUtils.jsx | 22 ++++--------------- client/src/locales/en.json | 2 ++ 7 files changed, 39 insertions(+), 33 deletions(-) diff --git a/client/src/Pages/Infrastructure/Create/hooks/useInfrastructureSubmit.jsx b/client/src/Pages/Infrastructure/Create/hooks/useInfrastructureSubmit.jsx index c5c7aacf2..04279cac4 100644 --- a/client/src/Pages/Infrastructure/Create/hooks/useInfrastructureSubmit.jsx +++ b/client/src/Pages/Infrastructure/Create/hooks/useInfrastructureSubmit.jsx @@ -61,7 +61,7 @@ const useInfrastructureSubmit = () => { }; const finalForm = { - ...(isCreate ? {} : { _id: monitorId }), + ...(isCreate ? {} : { id: monitorId }), ...rest, description: form.name, type: "hardware", diff --git a/client/src/Pages/Infrastructure/Create/index.jsx b/client/src/Pages/Infrastructure/Create/index.jsx index b27c11cd4..e5cdbcd63 100644 --- a/client/src/Pages/Infrastructure/Create/index.jsx +++ b/client/src/Pages/Infrastructure/Create/index.jsx @@ -44,6 +44,7 @@ const CreateInfrastructureMonitor = () => { // Fetch monitor details if editing const [monitor, isLoading] = useFetchHardwareMonitorById({ monitorId, + dateRange: "day", updateTrigger, }); const [deleteMonitor, isDeleting] = useDeleteMonitor(); @@ -127,7 +128,9 @@ const CreateInfrastructureMonitor = () => { const onSubmit = async (event) => { event.preventDefault(); const form = buildForm(infrastructureMonitor, https); - const error = validateForm(form); + // When editing, exclude URL from validation since it's disabled and can't be changed + const formToValidate = isCreate ? form : { ...form, url: monitor.url }; + const error = validateForm(formToValidate); if (error) { return; } @@ -204,14 +207,14 @@ const CreateInfrastructureMonitor = () => { <> )} - {!isCreate && ( + {!isCreate && monitor && ( )} - {!isCreate && ( + {!isCreate && monitor && ( { +const BaseContainer = ({ children, sx = {}, shouldExpand = false }) => { const theme = useTheme(); const { getDimensions } = useHardwareUtils(); return ( @@ -22,7 +22,7 @@ const BaseContainer = ({ children, sx = {} }) => { sx={{ padding: `${theme.spacing(getDimensions().baseBoxPaddingVertical)} ${theme.spacing(getDimensions().baseBoxPaddingHorizontal)}`, minWidth: 200, - width: 225, + width: shouldExpand ? "100%" : 225, backgroundColor: theme.palette.primary.main, border: 1, borderStyle: "solid", @@ -38,6 +38,7 @@ const BaseContainer = ({ children, sx = {} }) => { BaseContainer.propTypes = { children: PropTypes.node.isRequired, sx: PropTypes.object, + shouldExpand: PropTypes.bool, }; export default BaseContainer; diff --git a/client/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/client/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index 58e69861c..c762eeb32 100644 --- a/client/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/client/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -17,21 +17,26 @@ const Gauge = ({ valueThree, metricFour, valueFour, + shouldExpand = false, }) => { const theme = useTheme(); const valueStyle = { borderRadius: theme.spacing(2), backgroundColor: theme.palette.tertiary.main, - width: "40%", + minWidth: "40%", + maxWidth: "60%", mb: theme.spacing(2), mt: theme.spacing(2), pr: theme.spacing(2), textAlign: "right", + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", }; return ( - + { valueTwo: formatBytes(disk.total_bytes, true), metricThree: t("device"), valueThree: formatDeviceName(disk.device), - metricFour: t("mountpoint"), + metricFour: t("mountedOn"), valueFour: formatMountpoint(disk.mountpoint), })), ]; + // Only expand gauges to fill row when there are 4 or more + const shouldExpand = gauges.length >= 4; + return ( - {gauges.map((gauge) => { return ( @@ -90,10 +97,11 @@ const Gauges = ({ isLoading = false, monitor }) => { valueThree={gauge.valueThree} metricFour={gauge.metricFour} valueFour={gauge.valueFour} + shouldExpand={shouldExpand} /> ); })} - + ); }; diff --git a/client/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx b/client/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx index 45e32e822..8938847a4 100644 --- a/client/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx +++ b/client/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx @@ -123,14 +123,7 @@ const useHardwareUtils = () => { const formatDeviceName = (device) => { const deviceStr = String(device || ""); - // Extract the last part of the path (after last '/') - const parts = deviceStr.split("/"); - const lastPart = parts[parts.length - 1]; - - // If there's more than one part, show with "..." prefix - const displayText = parts.length > 1 ? `.../${lastPart}` : deviceStr; - - // Always show tooltip with full device path + // Show full device path return ( { maxWidth: "100%", }} > - {displayText} + {deviceStr} ); @@ -181,14 +174,7 @@ const useHardwareUtils = () => { ); } - // Extract the last part of the path (after last '/') - const parts = mountpointStr.split("/"); - const lastPart = parts[parts.length - 1]; - - // If there's more than one part, show with "..." prefix - const displayText = parts.length > 1 ? `.../${lastPart}` : mountpointStr; - - // Always show tooltip with full mountpoint path + // Show full mountpoint path return ( { maxWidth: "100%", }} > - {displayText} + {mountpointStr} ); diff --git a/client/src/locales/en.json b/client/src/locales/en.json index a658d6d66..54fb6eddb 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -193,6 +193,8 @@ "total": "Total", "cores": "Cores", "frequency": "Frequency", + "device": "Device", + "mountedOn": "Mounted on", "status": "Status", "cpuPhysical": "CPU (Physical)", "cpuLogical": "CPU (Logical)",