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)",