diff --git a/src/Pages/Maintenance/CreateMaintenance/index.jsx b/src/Pages/Maintenance/CreateMaintenance/index.jsx index abc31361a..33e17a300 100644 --- a/src/Pages/Maintenance/CreateMaintenance/index.jsx +++ b/src/Pages/Maintenance/CreateMaintenance/index.jsx @@ -28,6 +28,7 @@ import { } from "../../../Utils/timeUtils"; import { useNavigate, useParams } from "react-router-dom"; import { buildErrors, hasValidationErrors } from "../../../Validation/error"; +import { useTranslation } from "react-i18next"; const getDurationAndUnit = (durationInMs) => { if (durationInMs % MS_PER_DAY === 0) { @@ -113,6 +114,7 @@ const CreateMaintenance = () => { const { maintenanceWindowId } = useParams(); const navigate = useNavigate(); const theme = useTheme(); + const { t } = useTranslation(); const { user } = useSelector((state) => state.auth); const [monitors, setMonitors] = useState([]); const [search, setSearch] = useState(""); @@ -293,7 +295,7 @@ const CreateMaintenance = () => { component="span" fontSize="inherit" > - {`${maintenanceWindowId === undefined ? "Create a" : "Edit"}`}{" "} + {`${maintenanceWindowId === undefined ? t("createA") : t("edit")}`}{" "} { fontSize="inherit" fontWeight="inherit" > - maintenance{" "} + {t("maintenance")}{" "} - window + {t("window")} { variant="body2" fontSize={14} > - Your pings won't be sent during this time frame + {t("maintenanceWindowDescription")} @@ -324,14 +326,14 @@ const CreateMaintenance = () => { component="h2" variant="h2" > - General Settings + {t("settingsGeneralSettings")} { handleFormChange("name", event.target.value); @@ -342,7 +344,7 @@ const CreateMaintenance = () => { handleChange(event, "interval")} @@ -429,7 +430,7 @@ const PageSpeedConfigure = () => { onClick={handleSave} sx={{ px: theme.spacing(12) }} > - Save + {t("settingsSave")} @@ -438,8 +439,8 @@ const PageSpeedConfigure = () => { setIsOpen(false)} confirmationButtonLabel={"Delete"} onConfirm={handleRemove} diff --git a/src/Pages/PageSpeed/Create/index.jsx b/src/Pages/PageSpeed/Create/index.jsx index 3e32ffea2..75e60eb79 100644 --- a/src/Pages/PageSpeed/Create/index.jsx +++ b/src/Pages/PageSpeed/Create/index.jsx @@ -10,6 +10,7 @@ import { checkEndpointResolution, } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice"; import { parseDomainName } from "../../../Utils/monitorUtils"; +import { useTranslation } from "react-i18next"; // MUI import { useTheme } from "@emotion/react"; @@ -173,6 +174,8 @@ const CreatePageSpeed = () => { } }; + const { t } = useTranslation(); + return ( { component="span" fontSize="inherit" > - Create your{" "} + {t("createYour")}{" "} { fontWeight="inherit" color={theme.palette.primary.contrastTextSecondary} > - PageSpeed monitor + {t("pageSpeedMonitor")} - General settings + {t("settingsGeneralSettings")} - Here you can select the URL of the host, together with the type of monitor. + {t("distributedUptimeCreateSelectURL")} @@ -248,9 +251,9 @@ const CreatePageSpeed = () => { - Checks to perform + {t("distributedUptimeCreateChecks")} - You can always add or remove checks after adding your site. + {t("distributedUptimeCreateChecksDescription")} @@ -269,14 +272,14 @@ const CreatePageSpeed = () => { filled={https.toString()} onClick={() => setHttps(true)} > - HTTPS + {t("https")} @@ -297,13 +300,13 @@ const CreatePageSpeed = () => { - Incident notifications + {t("distributedUptimeCreateIncidentNotification")} - When there is an incident, notify users. + {t("distributedUptimeCreateIncidentDescription")} - When there is a new incident, + {t("whenNewIncident")} { - Advanced settings + {t("distributedUptimeCreateAdvancedSettings")} - Appearance + {t("settingsAppearance")} - Define the default look and feel of your public status page. + {t("statusPageCreateAppearanceDescription")} diff --git a/src/Pages/StatusPage/Create/index.jsx b/src/Pages/StatusPage/Create/index.jsx index 22bdaa3e2..1fa65d38f 100644 --- a/src/Pages/StatusPage/Create/index.jsx +++ b/src/Pages/StatusPage/Create/index.jsx @@ -14,7 +14,7 @@ import { createToast } from "../../../Utils/toastUtils"; import { useNavigate } from "react-router-dom"; import { useStatusPageFetch } from "../Status/Hooks/useStatusPageFetch"; import { useParams } from "react-router-dom"; - +import { useTranslation } from "react-i18next"; //Constants const TAB_LIST = ["General settings", "Contents"]; @@ -54,6 +54,7 @@ const CreateStatusPage = () => { const [createStatusPage, createStatusIsLoading, createStatusPageNetworkError] = useCreateStatusPage(isCreate); const navigate = useNavigate(); + const { t } = useTranslation(); const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] = useStatusPageFetch(isCreate, url); @@ -205,9 +206,9 @@ const CreateStatusPage = () => { marginY={theme.spacing(4)} color={theme.palette.primary.contrastTextTertiary} > - Network error + {t("networkError")} - Please check your connection + {t("checkConnection")} ); } @@ -241,7 +242,7 @@ const CreateStatusPage = () => { color="accent" onClick={handleSubmit} > - Save + {t("settingsSave")} diff --git a/src/Pages/StatusPage/Status/Components/AdminLink/index.jsx b/src/Pages/StatusPage/Status/Components/AdminLink/index.jsx index 5f5941fe7..816fbd375 100644 --- a/src/Pages/StatusPage/Status/Components/AdminLink/index.jsx +++ b/src/Pages/StatusPage/Status/Components/AdminLink/index.jsx @@ -4,9 +4,11 @@ import { Box, Typography } from "@mui/material"; // Utils import { useTheme } from "@mui/material/styles"; import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; const AdminLink = () => { const theme = useTheme(); + const { t } = useTranslation(); const navigate = useNavigate(); return ( @@ -16,7 +18,7 @@ const AdminLink = () => { display="inline-block" color={theme.palette.primary.contrastText} > - Administrator? + {t("administrator")} { sx={{ cursor: "pointer" }} onClick={() => navigate("/login")} > - Login here + {t("loginHere")} ); diff --git a/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx b/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx index f534e73b3..a9872e99f 100644 --- a/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx +++ b/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx @@ -8,9 +8,11 @@ import { useTheme } from "@mui/material/styles"; import { useNavigate } from "react-router-dom"; import { useLocation } from "react-router-dom"; import PropTypes from "prop-types"; +import { useTranslation } from "react-i18next"; const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, url, type }) => { const theme = useTheme(); + const { t } = useTranslation(); const location = useLocation(); const currentPath = location.pathname; const navigate = useNavigate(); @@ -35,7 +37,7 @@ const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, url, type }) => { onClick={() => setIsDeleteOpen(!isDeleteOpen)} loading={isDeleting} > - Delete + {t("delete")} @@ -59,7 +61,7 @@ const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, url, type }) => { }, }} > - Configure + {t("configure")} diff --git a/src/Pages/StatusPage/Status/index.jsx b/src/Pages/StatusPage/Status/index.jsx index a47e9d33e..05c42a90c 100644 --- a/src/Pages/StatusPage/Status/index.jsx +++ b/src/Pages/StatusPage/Status/index.jsx @@ -17,6 +17,7 @@ import { useStatusPageDelete } from "./Hooks/useStatusPageDelete"; import { useState } from "react"; import { useParams } from "react-router-dom"; import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; const PublicStatus = () => { const { url } = useParams(); @@ -24,6 +25,7 @@ const PublicStatus = () => { const [isDeleteOpen, setIsDeleteOpen] = useState(false); // Utils const theme = useTheme(); + const { t } = useTranslation(); const location = useLocation(); const navigate = useNavigate(); @@ -59,9 +61,9 @@ const PublicStatus = () => { marginY={theme.spacing(4)} color={theme.palette.primary.contrastTextTertiary} > - Network error + {t("networkError")} - Please check your connection + {t("checkConnection")} ); } @@ -76,9 +78,9 @@ const PublicStatus = () => { marginY={theme.spacing(4)} color={theme.palette.primary.contrastTextTertiary} > - A public status page is not set up. + {t("statusPageStatus")} - Please contact to your administrator + {t("statusPageStatusContactAdmin")} ); @@ -94,9 +96,9 @@ const PublicStatus = () => { marginY={theme.spacing(4)} color={theme.palette.primary.contrastTextTertiary} > - This status page is not public. + {t("statusPageStatusNotPublic")} - Please contact to your administrator + {t("statusPageStatusContactAdmin")} ); @@ -111,9 +113,9 @@ const PublicStatus = () => { marginY={theme.spacing(4)} color={theme.palette.primary.contrastTextTertiary} > - There's no status page here. + {t("statusPageStatusNoPage")} - Please contact to your administrator + {t("statusPageStatusContactAdmin")} ); } @@ -131,12 +133,12 @@ const PublicStatus = () => { setIsDeleteOpen={setIsDeleteOpen} url={url} /> - Service status + {t("statusPageStatusServiceStatus")} {link} { deleteStatusPage(); setIsDeleteOpen(false); @@ -146,8 +148,8 @@ const PublicStatus = () => { setIsDeleteOpen(false); }} open={isDeleteOpen} - confirmationButtonLabel="Yes, delete status page" - description="Once deleted, your status page cannot be retrieved." + confirmationButtonLabel={t("deleteStatusPageConfirm")} + description={t("deleteStatusPageDescription")} isLoading={isDeleting || isLoading} /> diff --git a/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx b/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx index 6772dcdb7..20226d6d3 100644 --- a/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx +++ b/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx @@ -4,20 +4,22 @@ import { useNavigate } from "react-router-dom"; import { StatusLabel } from "../../../../../Components/Label"; import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward"; import { Stack, Typography } from "@mui/material"; +import { useTranslation } from "react-i18next"; const StatusPagesTable = ({ data }) => { const theme = useTheme(); + const { t } = useTranslation(); const navigate = useNavigate(); const headers = [ { id: "name", - content: "Status page name", + content: t("statusPageName"), render: (row) => { return row.companyName; }, }, { id: "url", - content: "Public URL", + content: t("publicURL"), onClick: (e, row) => { if (row.isPublished) { e.stopPropagation(); @@ -57,14 +59,14 @@ const StatusPagesTable = ({ data }) => { }, { id: "type", - content: "Type", + content: t("type"), render: (row) => { return row.type; }, }, { id: "status", - content: "Status", + content: t("status"), render: (row) => { const status = row.isPublished ? "published" : "unpublished"; return ( diff --git a/src/Pages/StatusPage/StatusPages/index.jsx b/src/Pages/StatusPage/StatusPages/index.jsx index 54a41f850..6654be38c 100644 --- a/src/Pages/StatusPage/StatusPages/index.jsx +++ b/src/Pages/StatusPage/StatusPages/index.jsx @@ -8,6 +8,7 @@ import StatusPagesTable from "./Components/StatusPagesTable"; import SkeletonLayout from "../../../Components/Skeletons/FullPage"; // Utils import { useTheme } from "@emotion/react"; +import { useTranslation } from "react-i18next"; import { useStatusPagesFetch } from "./Hooks/useStatusPagesFetch"; import { useIsAdmin } from "../../../Hooks/useIsAdmin"; const BREADCRUMBS = [{ name: `Status Pages`, path: "" }]; @@ -15,6 +16,7 @@ const BREADCRUMBS = [{ name: `Status Pages`, path: "" }]; const StatusPages = () => { // Utils const theme = useTheme(); + const { t } = useTranslation(); const isAdmin = useIsAdmin(); const [isLoading, networkError, statusPages] = useStatusPagesFetch(); @@ -30,9 +32,9 @@ const StatusPages = () => { marginY={theme.spacing(4)} color={theme.palette.primary.contrastTextTertiary} > - Network error + {t("networkError")} - Please check your connection + {t("checkConnection")} ); } diff --git a/src/Pages/Uptime/Configure/index.jsx b/src/Pages/Uptime/Configure/index.jsx index 4a119bd0f..735a087e4 100644 --- a/src/Pages/Uptime/Configure/index.jsx +++ b/src/Pages/Uptime/Configure/index.jsx @@ -6,6 +6,7 @@ import { Box, Stack, Tooltip, Typography, Button } from "@mui/material"; import { monitorValidation } from "../../../Validation/validation"; import { createToast } from "../../../Utils/toastUtils"; import { logger } from "../../../Utils/Logger"; +import { useTranslation } from "react-i18next"; import ConfigBox from "../../../Components/ConfigBox"; import { updateUptimeMonitor, @@ -207,6 +208,8 @@ const Configure = () => { undefined: "Pending...", }; + const { t } = useTranslation(); + return ( { }, }} > - Editing... + {t("editing")} @@ -326,12 +329,12 @@ const Configure = () => { {monitor?.isActive ? ( <> - Pause + {t("pause")} ) : ( <> - Resume + {t("resume")} )} @@ -342,16 +345,15 @@ const Configure = () => { sx={{ px: theme.spacing(8) }} onClick={() => setIsOpen(true)} > - Remove + {t("remove")} - General settings + {t("settingsGeneralSettings")} - Here you can select the URL of the host, together with the type of - monitor. + {t("distributedUptimeCreateSelectURL")} @@ -364,7 +366,7 @@ const Configure = () => { ) } id="monitor-url" - label="URL to monitor" + label={t("urlMonitor")} placeholder="google.com" value={parsedUrl?.host || monitor?.url || ""} disabled={true} @@ -372,7 +374,7 @@ const Configure = () => { { - Incident notifications + {t("distributedUptimeCreateIncidentNotification")} - When there is an incident, notify users. + {t("distributedUptimeCreateIncidentDescription")} - When there is a new incident, + {t("whenNewIncident")} {/* {Leaving components commented for future funtionality implimentation} */} {/* { - Advanced settings + {t("distributedUptimeCreateAdvancedSettings")} handleChange(event, "matchMethod")} items={matchMethodOptions} @@ -464,7 +466,7 @@ const Configure = () => { { color={theme.palette.primary.contrastTextTertiary} opacity={0.8} > - The expected value is used to match against response result, and - the match determines the status. + {t("uptimeCreate")} @@ -500,9 +501,7 @@ const Configure = () => { color={theme.palette.primary.contrastTextTertiary} opacity={0.8} > - This expression will be evaluated against the reponse JSON data - and the result will be used to match against the expected value. - See  + {t("uptimeCreateJsonPath")}  { > jmespath.org -  for query language documentation. +  {t("uptimeCreateJsonPathQuery")} @@ -530,7 +529,7 @@ const Configure = () => { sx={{ px: theme.spacing(12) }} onClick={handleSubmit} > - Save + {t("settingsSave")} diff --git a/src/Pages/Uptime/Create/index.jsx b/src/Pages/Uptime/Create/index.jsx index 3b295f586..4338bb76e 100644 --- a/src/Pages/Uptime/Create/index.jsx +++ b/src/Pages/Uptime/Create/index.jsx @@ -10,7 +10,7 @@ import { checkEndpointResolution } from "../../../Features/UptimeMonitors/uptime import { monitorValidation } from "../../../Validation/validation"; import { getUptimeMonitorById } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice"; import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice"; - +import { useTranslation } from "react-i18next"; // MUI import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material"; @@ -240,6 +240,8 @@ const CreateMonitor = () => { fetchMonitor(); }, [monitorId, dispatch, navigate]); + const { t } = useTranslation(); + return ( @@ -257,7 +259,7 @@ const CreateMonitor = () => { component="span" fontSize="inherit" > - Create your{" "} + {t("createYour")}{" "} { fontSize="inherit" fontWeight="inherit" > - monitor + {t("monitor")} - Checks to perform + {t("distributedUptimeCreateChecks")} - You can always add or remove checks after adding your site. + {t("distributedUptimeCreateChecksDescription")} { filled={https.toString()} onClick={() => setHttps(true)} > - HTTPS + {t("https")} ) : ( @@ -309,8 +311,8 @@ const CreateMonitor = () => { { /> { /> { - General settings + {t("settingsGeneralSettings")} - Here you can select the URL of the host, together with the type of monitor. + {t("distributedUptimeCreateSelectURL")} @@ -374,7 +376,7 @@ const CreateMonitor = () => { handleChange(event, "port")} @@ -385,7 +387,7 @@ const CreateMonitor = () => { { - Incident notifications + {t("distributedUptimeCreateIncidentNotification")} - When there is an incident, notify users. + {t("distributedUptimeCreateIncidentDescription")} @@ -427,7 +429,7 @@ const CreateMonitor = () => { - Advanced settings + {t("distributedUptimeCreateAdvancedSettings")}