From b12bdfcc2243ea1188082f86393d55ecdf2d80e5 Mon Sep 17 00:00:00 2001 From: karenvicent Date: Mon, 22 Dec 2025 12:36:29 -0500 Subject: [PATCH] fix traslator error and add format --- .../Create/Components/DiskSelection.jsx | 139 +++++++++--------- .../Pages/v1/Infrastructure/Create/index.jsx | 8 +- .../Details/Components/GaugeBoxes/Gauge.jsx | 14 +- .../Details/Components/GaugeBoxes/index.jsx | 3 +- .../Details/Hooks/useHardwareUtils.jsx | 98 ++++++------ client/src/Validation/validation.js | 76 +++++----- client/src/locales/en.json | 7 +- client/vite.config.ts | 4 +- 8 files changed, 187 insertions(+), 162 deletions(-) diff --git a/client/src/Pages/v1/Infrastructure/Create/Components/DiskSelection.jsx b/client/src/Pages/v1/Infrastructure/Create/Components/DiskSelection.jsx index 88b56f966..50c4ed980 100644 --- a/client/src/Pages/v1/Infrastructure/Create/Components/DiskSelection.jsx +++ b/client/src/Pages/v1/Infrastructure/Create/Components/DiskSelection.jsx @@ -7,81 +7,84 @@ import { useTranslation } from "react-i18next"; import PropTypes from "prop-types"; const DiskSelection = ({ availableDisks, selectedDisks, onChange }) => { - const theme = useTheme(); - const { t } = useTranslation(); + const theme = useTheme(); + const { t } = useTranslation(); - const handleDiskChange = (event, mountpoint) => { - const isChecked = event.target.checked; - let newSelectedDisks = []; + const handleDiskChange = (event, mountpoint) => { + const isChecked = event.target.checked; + let newSelectedDisks = []; - if (isChecked) { - newSelectedDisks = [...selectedDisks, mountpoint]; - } else { - newSelectedDisks = selectedDisks.filter((disk) => disk !== mountpoint); - } + if (isChecked) { + newSelectedDisks = [...selectedDisks, mountpoint]; + } else { + newSelectedDisks = selectedDisks.filter((disk) => disk !== mountpoint); + } - onChange(newSelectedDisks); - }; + onChange(newSelectedDisks); + }; - return ( - - - - {t("v1.infrastructure.disk_selection_title")} - - - {t("v1.infrastructure.disk_selection_description")} - - + return ( + + + + {t("v1.infrastructure.disk_selection_title")} + + + {t("v1.infrastructure.disk_selection_description")} + + - - {(!availableDisks || availableDisks.length === 0) ? ( - - {t("v1.infrastructure.disk_selection_info")} - - ) : ( - availableDisks.map((disk) => { - const identifier = disk.mountpoint || disk.device; - return ( - - - handleDiskChange(e, identifier)} - /> - - - ) - }) - )} - - - ); + + {!availableDisks || availableDisks.length === 0 ? ( + + {t("v1.infrastructure.disk_selection_info")} + + ) : ( + availableDisks.map((disk) => { + const identifier = disk.mountpoint || disk.device; + return ( + + + handleDiskChange(e, identifier)} + /> + + + ); + }) + )} + + + ); }; DiskSelection.propTypes = { - availableDisks: PropTypes.arrayOf( - PropTypes.shape({ - mountpoint: PropTypes.string.isRequired, - }) - ), - selectedDisks: PropTypes.arrayOf(PropTypes.string).isRequired, - onChange: PropTypes.func.isRequired, + availableDisks: PropTypes.arrayOf( + PropTypes.shape({ + mountpoint: PropTypes.string.isRequired, + }) + ), + selectedDisks: PropTypes.arrayOf(PropTypes.string).isRequired, + onChange: PropTypes.func.isRequired, }; -export default DiskSelection; \ No newline at end of file +export default DiskSelection; diff --git a/client/src/Pages/v1/Infrastructure/Create/index.jsx b/client/src/Pages/v1/Infrastructure/Create/index.jsx index b02cd36cc..c74d49816 100644 --- a/client/src/Pages/v1/Infrastructure/Create/index.jsx +++ b/client/src/Pages/v1/Infrastructure/Create/index.jsx @@ -75,9 +75,9 @@ const CreateInfrastructureMonitor = () => { ...(isCreate ? [{ name: "Create", path: "/infrastructure/create" }] : [ - { name: "Details", path: `/infrastructure/${monitorId}` }, - { name: "Configure", path: `/infrastructure/configure/${monitorId}` }, - ]), + { name: "Details", path: `/infrastructure/${monitorId}` }, + { name: "Configure", path: `/infrastructure/configure/${monitorId}` }, + ]), ]; // Populate form fields if editing useEffect(() => { @@ -161,8 +161,6 @@ const CreateInfrastructureMonitor = () => { isPausing || notificationsAreLoading; - - return ( 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 1759af2a8..58e69861c 100644 --- a/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -6,8 +6,18 @@ 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, metricFour, valueFour }) => { +const Gauge = ({ + value, + heading, + metricOne, + valueOne, + metricTwo, + valueTwo, + metricThree, + valueThree, + metricFour, + valueFour, +}) => { const theme = useTheme(); const valueStyle = { 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 91bb9e2f0..1131167ce 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,8 @@ import { useTheme } from "@emotion/react"; import { useTranslation } from "react-i18next"; const Gauges = ({ isLoading = false, monitor }) => { - const { decimalToPercentage, formatBytes, formatDeviceName, formatMountpoint } = useHardwareUtils(); + const { decimalToPercentage, formatBytes, formatDeviceName, formatMountpoint } = + useHardwareUtils(); const theme = useTheme(); const { t } = useTranslation(); diff --git a/client/src/Pages/v1/Infrastructure/Details/Hooks/useHardwareUtils.jsx b/client/src/Pages/v1/Infrastructure/Details/Hooks/useHardwareUtils.jsx index 80efb21b9..45e32e822 100644 --- a/client/src/Pages/v1/Infrastructure/Details/Hooks/useHardwareUtils.jsx +++ b/client/src/Pages/v1/Infrastructure/Details/Hooks/useHardwareUtils.jsx @@ -121,28 +121,32 @@ const useHardwareUtils = () => { }; const formatDeviceName = (device) => { - const deviceStr = String(device || ''); - + const deviceStr = String(device || ""); + // Extract the last part of the path (after last '/') - const parts = deviceStr.split('/'); + 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 return ( - - + {displayText} @@ -152,19 +156,23 @@ const useHardwareUtils = () => { }; const formatMountpoint = (mountpoint) => { - const mountpointStr = String(mountpoint || ''); - + const mountpointStr = String(mountpoint || ""); + if (!mountpointStr) { return ( - - + N/A @@ -172,34 +180,38 @@ const useHardwareUtils = () => { ); } - + // Extract the last part of the path (after last '/') - const parts = mountpointStr.split('/'); + 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 return ( - - + {displayText} ); - } + }; /** * Converts a decimal value to a percentage diff --git a/client/src/Validation/validation.js b/client/src/Validation/validation.js index dfd5639ce..112bbb349 100644 --- a/client/src/Validation/validation.js +++ b/client/src/Validation/validation.js @@ -144,44 +144,44 @@ const monitorValidation = joi.object({ // Regex from https://gist.github.com/dperini/729294 var urlRegex = new RegExp( "^" + - // protocol identifier (optional) - // short syntax // still required - "(?:(?:https?|ftp):\\/\\/)?" + - // user:pass BasicAuth (optional) - "(?:" + - // IP address dotted notation octets - // excludes loopback network 0.0.0.0 - // excludes reserved space >= 224.0.0.0 - // excludes network & broadcast addresses - // (first & last IP address of each class) - "(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])" + - "(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}" + - "(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))" + - "|" + - // host & domain names, may end with dot - // can be replaced by a shortest alternative - // (?![-_])(?:[-\\w\\u00a1-\\uffff]{0,63}[^-_]\\.)+ - "(?:" + - // Single hostname without dots (like localhost) - "[a-z0-9\\u00a1-\\uffff][a-z0-9\\u00a1-\\uffff_-]{0,62}" + - "|" + - // Domain with dots - "(?:" + - "(?:" + - "[a-z0-9\\u00a1-\\uffff]" + - "[a-z0-9\\u00a1-\\uffff_-]{0,62}" + - ")?" + - "[a-z0-9\\u00a1-\\uffff]\\." + - ")+" + - // TLD identifier name, may end with dot - "(?:[a-z\\u00a1-\\uffff]{2,}\\.?)" + - ")" + - ")" + - // port number (optional) - "(?::\\d{2,5})?" + - // resource path (optional) - "(?:[/?#]\\S*)?" + - "$", + // protocol identifier (optional) + // short syntax // still required + "(?:(?:https?|ftp):\\/\\/)?" + + // user:pass BasicAuth (optional) + "(?:" + + // IP address dotted notation octets + // excludes loopback network 0.0.0.0 + // excludes reserved space >= 224.0.0.0 + // excludes network & broadcast addresses + // (first & last IP address of each class) + "(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])" + + "(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}" + + "(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))" + + "|" + + // host & domain names, may end with dot + // can be replaced by a shortest alternative + // (?![-_])(?:[-\\w\\u00a1-\\uffff]{0,63}[^-_]\\.)+ + "(?:" + + // Single hostname without dots (like localhost) + "[a-z0-9\\u00a1-\\uffff][a-z0-9\\u00a1-\\uffff_-]{0,62}" + + "|" + + // Domain with dots + "(?:" + + "(?:" + + "[a-z0-9\\u00a1-\\uffff]" + + "[a-z0-9\\u00a1-\\uffff_-]{0,62}" + + ")?" + + "[a-z0-9\\u00a1-\\uffff]\\." + + ")+" + + // TLD identifier name, may end with dot + "(?:[a-z\\u00a1-\\uffff]{2,}\\.?)" + + ")" + + ")" + + // port number (optional) + "(?::\\d{2,5})?" + + // resource path (optional) + "(?:[/?#]\\S*)?" + + "$", "i" ); if (!urlRegex.test(value)) { diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 9568671c2..ed07fd8d2 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -1144,10 +1144,11 @@ "selectInterface": "Select Interface", "v1": { "infrastructure": { - "disk_selection_title": "Disk Selection", - "disk_selection_info": "No disk detected for the moment.", - "disk_selection_description": "Select the specific disks you want to monitor." + "disk_selection_title": "Disk Selection", + "disk_selection_info": "No disk detected for the moment.", + "disk_selection_description": "Select the specific disks you want to monitor." } + }, "incidentsPage": { "title": "Incidents", "description": "Manage incidents for your monitors. You can resolve incidents here.", diff --git a/client/vite.config.ts b/client/vite.config.ts index 65a07ad5c..3d8d66335 100644 --- a/client/vite.config.ts +++ b/client/vite.config.ts @@ -12,8 +12,8 @@ export default defineConfig(({}) => { return { base: "/", plugins: [svgr(), react()], - server: { - host: true, + server: { + host: true, }, resolve: { alias: {