Merge pull request #2230 from bluewave-labs/fix/untranslated-menu-uptime

Fix/untranslated sidebar and uptime page

client/src/Pages/Uptime/Monitors/Components/Filter/index.jsx

@@ -27,22 +27,14 @@ import { useTranslation } from "react-i18next";
  * @returns {JSX.Element} The rendered Filter component.
  */
 
-const typeOptions = [
+const getTypeOptions = () => [
 	{ value: "http", label: "HTTP(S)" },
 	{ value: "ping", label: "Ping" },
 	{ value: "docker", label: "Docker" },
 	{ value: "port", label: "Port" },
 ];
 
-const statusOptions = [
-	{ value: "Up", label: "Up" },
-	{ value: "Down", label: "Down" },
-];
-
-const stateOptions = [
-	{ value: "Active", label: "Active" },
-	{ value: "Paused", label: "Paused" },
-];
+// These functions were moved inline to ensure translations are applied correctly
 
 const Filter = ({
 	selectedTypes,
@@ -58,6 +50,18 @@ const Filter = ({
 	const theme = useTheme();
 	const { t } = useTranslation();
 
+	const typeOptions = getTypeOptions();
+	// Create status options with translations
+	const statusOptions = [
+		{ value: "Up", label: t("monitorStatus.up") },
+		{ value: "Down", label: t("monitorStatus.down") },
+	];
+	// Create state options with translations
+	const stateOptions = [
+		{ value: "Active", label: t("monitorState.active") },
+		{ value: "Paused", label: t("monitorState.paused") },
+	];
+
 	const handleTypeChange = (event) => {
 		const selectedValues = event.target.value;
 		setSelectedTypes(selectedValues.length > 0 ? selectedValues : undefined);

client/src/Pages/Uptime/Monitors/Components/StatusBoxes/index.jsx

@@ -2,10 +2,12 @@ import PropTypes from "prop-types";
 import { Stack } from "@mui/material";
 import StatusBox from "./statusBox";
 import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
 import SkeletonLayout from "./skeleton";
 
 const StatusBoxes = ({ shouldRender, monitorsSummary }) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	if (!shouldRender) return <SkeletonLayout shouldRender={shouldRender} />;
 	return (
 		<Stack
@@ -14,15 +16,15 @@ const StatusBoxes = ({ shouldRender, monitorsSummary }) => {
 			justifyContent="space-between"
 		>
 			<StatusBox
-				title="up"
+				title={t("monitorStatus.up").toUpperCase()}
 				value={monitorsSummary?.upMonitors ?? 0}
 			/>
 			<StatusBox
-				title="down"
+				title={t("monitorStatus.down").toUpperCase()}
 				value={monitorsSummary?.downMonitors ?? 0}
 			/>
 			<StatusBox
-				title="paused"
+				title={t("monitorStatus.paused").toUpperCase()}
 				value={monitorsSummary?.pausedMonitors ?? 0}
 			/>
 		</Stack>
@@ -31,6 +33,7 @@ const StatusBoxes = ({ shouldRender, monitorsSummary }) => {
 
 StatusBoxes.propTypes = {
 	monitorsSummary: PropTypes.object,
+	shouldRender: PropTypes.bool,
 };
 
 export default StatusBoxes;

client/src/Pages/Uptime/Monitors/index.jsx

@@ -31,11 +31,11 @@ import PropTypes from "prop-types";
 import useFetchMonitorsWithSummary from "../../../Hooks/useFetchMonitorsWithSummary";
 import useFetchMonitorsWithChecks from "../../../Hooks/useFetchMonitorsWithChecks";
 import { useTranslation } from "react-i18next";
-const BREADCRUMBS = [{ name: `Uptime`, path: "/uptime" }];
 const TYPES = ["http", "ping", "docker", "port"];
 const CreateMonitorButton = ({ shouldRender }) => {
 	// Utils
 	const navigate = useNavigate();
+	const { t } = useTranslation();
 	if (shouldRender === false) {
 		return;
 	}
@@ -49,7 +49,7 @@ const CreateMonitorButton = ({ shouldRender }) => {
 					navigate("/uptime/create");
 				}}
 			>
-				Create new
+				{t("createNew")}
 			</Button>
 		</Box>
 	);
@@ -78,10 +78,13 @@ const UptimeMonitors = () => {
 
 	// Utils
 	const theme = useTheme();
+	const navigate = useNavigate();
 	const isAdmin = useIsAdmin();
 	const dispatch = useDispatch();
 	const { t } = useTranslation();
 
+	const BREADCRUMBS = [{ name: t("menu.uptime"), path: "/uptime" }];
+
 	// Handlers
 	const handleChangePage = (event, newPage) => {
 		setPage(newPage);