diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 22252c301..b267220e8 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -13,7 +13,11 @@ Mention the issue number(s) this PR addresses (e.g., #123). - [ ] (Do not skip this or your PR will be closed) I deployed the application locally. - [ ] (Do not skip this or your PR will be closed) I have performed a self-review and testing of my code. - [ ] I have included the issue # in the PR. -- [ ] I have labelled the PR correctly. +- [ ] I have added i18n support to visible strings (instead of `
Add
`, use): +```Javascript +const { t } = useTranslation(); +
{t('add')}
+``` - [ ] The issue I am working on is assigned to me. - [ ] I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application). - [ ] I made sure font sizes, color choices etc are all referenced from the theme. I have no hardcoded dimensions. diff --git a/.github/scripts/download-translations.js b/.github/scripts/download-translations.js index 62f63a6a0..918be97d3 100644 --- a/.github/scripts/download-translations.js +++ b/.github/scripts/download-translations.js @@ -57,11 +57,12 @@ async function downloadTranslations() { }); } - // Save file - const outputPath = path.join(process.cwd(), 'temp', `${language}.json`); + // Determine the output filename based on language + const filename = language === 'en' ? 'gb.json' : `${language}.json`; + const outputPath = path.join(process.cwd(), 'temp', filename); await fs.writeJson(outputPath, formattedTranslations, { spaces: 2 }); - console.log(`Translations for ${language} language successfully downloaded and saved: ${outputPath}`); + console.log(`Translations for ${language} language successfully downloaded and saved as: ${filename}`); } console.log('All translations successfully downloaded!'); diff --git a/.github/workflows/poeditor-sync.yml b/.github/workflows/poeditor-sync.yml index 1f1194e3e..711d9825d 100644 --- a/.github/workflows/poeditor-sync.yml +++ b/.github/workflows/poeditor-sync.yml @@ -17,15 +17,24 @@ on: schedule: - cron: "0 0 * * *" +permissions: + contents: write + pull-requests: write + jobs: sync-translations: runs-on: ubuntu-latest + permissions: + contents: write + issues: write + pull-requests: write steps: - name: Checkout code uses: actions/checkout@v3 with: token: ${{ secrets.GITHUB_TOKEN }} + fetch-depth: 0 - name: Setup Node.js uses: actions/setup-node@v3 @@ -83,10 +92,27 @@ jobs: cp -r temp/* src/locales/ echo "Translation files copied to src/locales/" - - name: Commit changes - run: | - git config --local user.email "github-actions[bot]@users.noreply.github.com" - git config --local user.name "github-actions[bot]" - git add src/locales/*.json - git diff --staged --quiet || git commit -m "Translations updated from POEditor" - git push + - name: Get current date + id: date + run: echo "date=$(date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_OUTPUT + + - name: Create Pull Request + uses: peter-evans/create-pull-request@v7 + with: + token: ${{ secrets.GITHUB_TOKEN }} + commit-message: "feat: translations updated from POEditor" + title: "🌐 Updated Translations from POEditor" + body: | + This PR contains the latest translations from POEditor. + + 📅 Update Date: ${{ steps.date.outputs.date }} + 🔄 Updated Languages: ${{ github.event.inputs.languages || 'tr,en' }} + + ⚠️ Please review the translations and approve the PR if everything looks correct. + branch: translation-update-${{ github.run_number }} + delete-branch: true + base: develop + add-paths: | + src/locales/*.json + committer: GitHub Action + author: GitHub Action diff --git a/.github/workflows/upload-poeditor.yml b/.github/workflows/upload-poeditor.yml index bdd2b8fbf..988463d4b 100644 --- a/.github/workflows/upload-poeditor.yml +++ b/.github/workflows/upload-poeditor.yml @@ -51,14 +51,26 @@ jobs: id: changed-files if: github.event_name == 'pull_request' run: | - # Get list of changed files in src/locales directory - CHANGED_FILES=$(git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.event.pull_request.head.sha }} -- src/locales/*.json) - echo "Changed files: $CHANGED_FILES" + # Get base and head commits + BASE_SHA=${{ github.event.pull_request.base.sha }} + HEAD_SHA=${{ github.event.pull_request.head.sha }} - # Create a JSON array of changed files with language codes - echo "CHANGED_FILES<> $GITHUB_ENV - echo "$CHANGED_FILES" >> $GITHUB_ENV - echo "EOF" >> $GITHUB_ENV + echo "Base SHA: $BASE_SHA" + echo "Head SHA: $HEAD_SHA" + + # Get list of changed files in src/locales directory + CHANGED_FILES=$(git diff --name-only $BASE_SHA..$HEAD_SHA -- 'src/locales/*.json' || git ls-files 'src/locales/*.json') + + if [ -z "$CHANGED_FILES" ]; then + echo "No changes detected in locale files" + echo "CHANGED_FILES=" >> $GITHUB_ENV + else + echo "Changed files:" + echo "$CHANGED_FILES" + echo "CHANGED_FILES<> $GITHUB_ENV + echo "$CHANGED_FILES" >> $GITHUB_ENV + echo "EOF" >> $GITHUB_ENV + fi - name: Upload changed translations to POEditor if: env.CHANGED_FILES != '' diff --git a/README.md b/README.md index 5505f72fe..6d197cc08 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,6 @@ If you have any questions, suggestions or comments, please use our [Discord chan - Status pages (**in progress**) https://github.com/bluewave-labs/Checkmate/issues/1131 - Translations (i18n) (**in progress**) - Better notification options (Webhooks, Discord, Telegram, Slack) (**in progress**) https://github.com/bluewave-labs/Checkmate/issues/1545 -- Command line interface (CLI) (**in progress**) https://github.com/bluewave-labs/Checkmate/issues/1558 - JSON query monitoring https://github.com/bluewave-labs/Checkmate/issues/1573 - Tagging/grouping monitors https://github.com/bluewave-labs/Checkmate/issues/1546 - More configuration options @@ -107,7 +106,9 @@ If you have any questions, suggestions or comments, please use our [Discord chan ## 🤝 Contributing -We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 4.4K+ stars and attracted 50+ contributors from around the globe. +We are [@ajhollid](http://github.com/ajhollid) (team lead), [@vishnusn77](http://github.com/vishnusn77), [@mohicody](http://github.com/mohicody), [@gorkem-bwl](http://github.com/gorkem-bwl/) and [@Owaiseimdad](http://github.com/Owaiseimdad), helping individuals and businesses monitor their infra and servers. + +We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 4.6K+ stars and attracted 60 contributors from around the globe. Our repo is starred by employees from **Google, Microsoft, Intel, Cisco, Tencent, Electronic Arts, ByteDance, JP Morgan Chase, Deloitte, Accenture, Foxconn, Broadcom, China Telecom, Barclays, Capgemini, Wipro, Cloudflare, Dassault Systèmes and NEC**, so don’t hold back — jump in, contribute and learn with us! diff --git a/package-lock.json b/package-lock.json index 5120f576b..b918b9b04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1973,9 +1973,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.26.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.7.tgz", - "integrity": "sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==", + "version": "7.26.10", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.10.tgz", + "integrity": "sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==", "license": "MIT", "dependencies": { "regenerator-runtime": "^0.14.0" @@ -9189,9 +9189,9 @@ } }, "node_modules/axios": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.2.tgz", - "integrity": "sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==", + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.3.tgz", + "integrity": "sha512-iP4DebzoNlP/YN2dpwCgb8zoCmhtkajzS48JvwmkSkXvPI3DHc7m+XYL5tGnSlJtR6nImXZmdCuN5aP8dh1d8A==", "license": "MIT", "dependencies": { "follow-redirects": "^1.15.6", @@ -12525,9 +12525,9 @@ } }, "node_modules/i18next": { - "version": "24.2.2", - "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.2.tgz", - "integrity": "sha512-NE6i86lBCKRYZa5TaUDkU5S4HFgLIEJRLr3Whf2psgaxBleQ2LC1YW1Vc+SCgkAW7VEzndT6al6+CzegSUHcTQ==", + "version": "24.2.3", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.3.tgz", + "integrity": "sha512-lfbf80OzkocvX7nmZtu7nSTNbrTYR52sLWxPtlXX1zAhVw8WEnFk4puUkCR4B1dNQwbSpEHHHemcZu//7EcB7A==", "funding": [ { "type": "individual", @@ -12542,8 +12542,9 @@ "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" } ], + "license": "MIT", "dependencies": { - "@babel/runtime": "^7.23.2" + "@babel/runtime": "^7.26.10" }, "peerDependencies": { "typescript": "^5" diff --git a/src/Components/Charts/BarChart/index.jsx b/src/Components/Charts/BarChart/index.jsx index 101afe648..375773b94 100644 --- a/src/Components/Charts/BarChart/index.jsx +++ b/src/Components/Charts/BarChart/index.jsx @@ -58,7 +58,7 @@ const BarChart = ({ checks = [] }) => { <> {formatDateWithTz( - check.createdAt, + check.updatedAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone )} diff --git a/src/Components/Table/TablePagination/index.jsx b/src/Components/Table/TablePagination/index.jsx index 8427f4270..44b127d45 100644 --- a/src/Components/Table/TablePagination/index.jsx +++ b/src/Components/Table/TablePagination/index.jsx @@ -15,6 +15,14 @@ Pagination.propTypes = { const ROWS_PER_PAGE_OPTIONS = [5, 10, 15, 25]; +// Determine whether pagination buttons should be shown +const shouldShowPaginationButtons = (itemCount, rowsPerPage) => { + return Math.ceil(itemCount / rowsPerPage) > 1; +}; + +// Empty action component for pagination (no-op component) +const EmptyPaginationActions = () =>
; + /** * Pagination component for table navigation with customized styling and behavior. * @@ -41,6 +49,8 @@ function Pagination({ const end = Math.min(page * rowsPerPage + rowsPerPage, itemCount); const range = `${start} - ${end}`; + const showPaginationButtons = shouldShowPaginationButtons(itemCount, rowsPerPage); + return ( `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}` diff --git a/src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx b/src/Hooks/useFetchDepinStatusPage.js similarity index 80% rename from src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx rename to src/Hooks/useFetchDepinStatusPage.js index b1b0542a4..cb436d6d6 100644 --- a/src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx +++ b/src/Hooks/useFetchDepinStatusPage.js @@ -1,11 +1,11 @@ import { useState, useEffect } from "react"; -import { networkService } from "../../../../main"; -import { createToast } from "../../../../Utils/toastUtils"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; import { useSelector } from "react-redux"; import { useTheme } from "@emotion/react"; -import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils"; +import { useMonitorUtils } from "./useMonitorUtils"; -const useDUStatusPageFetchByUrl = ({ url, timeFrame, isCreate = false }) => { +const useFetchDepinStatusPage = ({ url, timeFrame, isCreate = false }) => { const [isLoading, setIsLoading] = useState(true); const [networkError, setNetworkError] = useState(false); const [statusPage, setStatusPage] = useState(undefined); @@ -50,9 +50,9 @@ const useDUStatusPageFetchByUrl = ({ url, timeFrame, isCreate = false }) => { } }; fetchStatusPageByUrl(); - }, [authToken, url, getMonitorWithPercentage, theme, timeFrame]); + }, [authToken, url, getMonitorWithPercentage, theme, timeFrame, isCreate]); return [isLoading, networkError, statusPage, monitorId, isPublished]; }; -export { useDUStatusPageFetchByUrl }; +export { useFetchDepinStatusPage }; diff --git a/src/Hooks/useFetchMonitorsWithChecks.js b/src/Hooks/useFetchMonitorsWithChecks.js new file mode 100644 index 000000000..f318c4b69 --- /dev/null +++ b/src/Hooks/useFetchMonitorsWithChecks.js @@ -0,0 +1,70 @@ +import { useEffect, useState } from "react"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; +import { useTheme } from "@emotion/react"; +import { useMonitorUtils } from "./useMonitorUtils"; + +export const useFetchMonitorsWithChecks = ({ + teamId, + types, + limit, + page, + rowsPerPage, + filter, + field, + order, +}) => { + const [isLoading, setIsLoading] = useState(false); + const [count, setCount] = useState(undefined); + const [monitors, setMonitors] = useState(undefined); + const [networkError, setNetworkError] = useState(false); + + const theme = useTheme(); + const { getMonitorWithPercentage } = useMonitorUtils(); + useEffect(() => { + const fetchMonitors = async () => { + try { + setIsLoading(true); + const res = await networkService.getMonitorsWithChecksByTeamId({ + teamId, + limit, + types, + page, + rowsPerPage, + filter, + field, + order, + }); + const { count, monitors } = res?.data?.data ?? {}; + const mappedMonitors = monitors.map((monitor) => + getMonitorWithPercentage(monitor, theme) + ); + setMonitors(mappedMonitors); + setCount(count?.monitorsCount ?? 0); + } catch (error) { + console.error(error); + setNetworkError(true); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + fetchMonitors(); + }, [ + field, + filter, + getMonitorWithPercentage, + limit, + order, + page, + rowsPerPage, + teamId, + theme, + types, + ]); + return [monitors, count, isLoading, networkError]; +}; + +export default useFetchMonitorsWithChecks; diff --git a/src/Hooks/useFetchMonitorsWithSummary.js b/src/Hooks/useFetchMonitorsWithSummary.js new file mode 100644 index 000000000..7d1b6ec78 --- /dev/null +++ b/src/Hooks/useFetchMonitorsWithSummary.js @@ -0,0 +1,37 @@ +import { useEffect, useState } from "react"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; + +export const useFetchMonitorsWithSummary = ({ teamId, types }) => { + const [isLoading, setIsLoading] = useState(false); + const [monitors, setMonitors] = useState(undefined); + const [monitorsSummary, setMonitorsSummary] = useState(undefined); + const [networkError, setNetworkError] = useState(false); + + useEffect(() => { + const fetchMonitors = async () => { + try { + setIsLoading(true); + const res = await networkService.getMonitorsWithSummaryByTeamId({ + teamId, + types, + }); + const { monitors, summary } = res?.data?.data ?? {}; + setMonitors(monitors); + setMonitorsSummary(summary); + } catch (error) { + console.error(error); + setNetworkError(true); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + fetchMonitors(); + }, [teamId, types]); + return [monitors, monitorsSummary, isLoading, networkError]; +}; + +export default useFetchMonitorsWithSummary; diff --git a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/src/Hooks/useSubscribeToDepinDetails.js similarity index 90% rename from src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx rename to src/Hooks/useSubscribeToDepinDetails.js index e8a49e886..67b7c898f 100644 --- a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx +++ b/src/Hooks/useSubscribeToDepinDetails.js @@ -1,8 +1,8 @@ import { useState, useEffect } from "react"; -import { networkService } from "../../../../main"; -import { createToast } from "../../../../Utils/toastUtils"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; -const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) => { +const useSubscribeToDepinDetails = ({ monitorId, isPublic, isPublished, dateRange }) => { const [isLoading, setIsLoading] = useState(true); const [connectionStatus, setConnectionStatus] = useState(undefined); const [retryCount, setRetryCount] = useState(0); @@ -92,4 +92,4 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) return [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger]; }; -export { useSubscribeToDetails }; +export { useSubscribeToDepinDetails }; diff --git a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx b/src/Hooks/useSubscribeToDepinMonitors.js similarity index 65% rename from src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx rename to src/Hooks/useSubscribeToDepinMonitors.js index 3b6c262ba..3bc098afa 100644 --- a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx +++ b/src/Hooks/useSubscribeToDepinMonitors.js @@ -1,20 +1,19 @@ import { useEffect, useState } from "react"; -import { networkService } from "../../../../main"; +import { networkService } from "../main"; import { useSelector } from "react-redux"; import { useTheme } from "@emotion/react"; -import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils"; -import { createToast } from "../../../../Utils/toastUtils"; +import { useMonitorUtils } from "./useMonitorUtils"; +import { createToast } from "../Utils/toastUtils"; -const useSubscribeToMonitors = (page, rowsPerPage) => { +const useSubscribeToDepinMonitors = (page, rowsPerPage) => { // Redux const { user } = useSelector((state) => state.auth); // Local state const [isLoading, setIsLoading] = useState(true); const [networkError, setNetworkError] = useState(false); + const [count, setCount] = useState(undefined); const [monitors, setMonitors] = useState(undefined); - const [monitorsSummary, setMonitorsSummary] = useState(undefined); - const [filteredMonitors, setFilteredMonitors] = useState(undefined); const theme = useTheme(); const { getMonitorWithPercentage } = useMonitorUtils(); @@ -29,18 +28,17 @@ const useSubscribeToMonitors = (page, rowsPerPage) => { page, rowsPerPage, }); + + const { count, monitors } = initialDataRes?.data?.data ?? {}; const responseData = initialDataRes?.data?.data; if (typeof responseData === "undefined") throw new Error("No data"); - const { monitors, filteredMonitors, summary } = responseData; - - const mappedMonitors = filteredMonitors?.map((monitor) => + const mappedMonitors = monitors?.map((monitor) => getMonitorWithPercentage(monitor, theme) ); - setMonitors(monitors); - setMonitorsSummary(summary); - setFilteredMonitors(mappedMonitors); + setMonitors(mappedMonitors); + setCount(count?.monitorsCount ?? 0); } catch (error) { setNetworkError(true); createToast({ @@ -71,15 +69,12 @@ const useSubscribeToMonitors = (page, rowsPerPage) => { if (isLoading === true) { setIsLoading(false); } - - const res = data.monitors; - const { monitors, filteredMonitors, summary } = res; - const mappedMonitors = filteredMonitors.map((monitor) => + const { count, monitors } = data; + const mappedMonitors = monitors.map((monitor) => getMonitorWithPercentage(monitor, theme) ); - setMonitors(monitors); - setMonitorsSummary(summary); - setFilteredMonitors(mappedMonitors); + setMonitors(mappedMonitors); + setCount(count?.monitorsCount ?? 0); }, onError: () => { setIsLoading(false); @@ -94,6 +89,6 @@ const useSubscribeToMonitors = (page, rowsPerPage) => { setNetworkError(true); } }, [user, getMonitorWithPercentage, theme, isLoading, page, rowsPerPage]); - return [isLoading, networkError, monitors, monitorsSummary, filteredMonitors]; + return [monitors, count, isLoading, networkError]; }; -export { useSubscribeToMonitors }; +export { useSubscribeToDepinMonitors }; diff --git a/src/Pages/Auth/Login/Login.jsx b/src/Pages/Auth/Login/Login.jsx index 60aaed6ba..c13218018 100644 --- a/src/Pages/Auth/Login/Login.jsx +++ b/src/Pages/Auth/Login/Login.jsx @@ -142,7 +142,7 @@ const Login = () => { overflow="hidden" sx={{ "& h1": { - color: theme.palette.primary.main, + color: theme.palette.primary.contrastText, fontWeight: 600, fontSize: 28, }, diff --git a/src/Pages/Auth/Register/Register.jsx b/src/Pages/Auth/Register/Register.jsx index 021cda18a..afb05435c 100644 --- a/src/Pages/Auth/Register/Register.jsx +++ b/src/Pages/Auth/Register/Register.jsx @@ -35,7 +35,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { textAlign="center" > - {t("signUP")} + {t("signUp")} {isSuperAdmin ? t("authRegisterCreateSuperAdminAccount") @@ -83,9 +83,9 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { }, }} > - Terms of Service + {t("authRegisterTerms")} {" "} - and{" "} + {t("and")}{" "} { @@ -101,7 +101,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { }, }} > - Privacy Policy. + {t("authRegisterPrivacy")} @@ -283,7 +283,7 @@ const Register = ({ isSuperAdmin }) => { overflow="hidden" sx={{ "& h1": { - color: theme.palette.primary.main, + color: theme.palette.primary.contrastText, fontWeight: 600, fontSize: 28, }, @@ -370,7 +370,7 @@ const Register = ({ isSuperAdmin }) => { p={theme.spacing(12)} > - {t("authRegisterAlreadyHaveAccount")} - + {t("authRegisterAlreadyHaveAccount")} { onClick={() => { navigate("/login"); }} - sx={{ userSelect: "none", color: theme.palette.primary.main }} + sx={{ userSelect: "none", color: theme.palette.accent.main }} > {t("authLoginTitle")} diff --git a/src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx b/src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx index 8d73e55a9..a26de2a5e 100644 --- a/src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx +++ b/src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx @@ -1,4 +1,3 @@ -import { useSelector } from "react-redux"; import { useState } from "react"; import { networkService } from "../../../../main"; import { createToast } from "../../../../Utils/toastUtils"; diff --git a/src/Pages/DistributedUptime/Details/index.jsx b/src/Pages/DistributedUptime/Details/index.jsx index d2011709e..27b39b600 100644 --- a/src/Pages/DistributedUptime/Details/index.jsx +++ b/src/Pages/DistributedUptime/Details/index.jsx @@ -19,7 +19,7 @@ import { useTheme } from "@mui/material/styles"; import { useState } from "react"; import { useParams } from "react-router-dom"; import { useIsAdmin } from "../../../Hooks/useIsAdmin"; -import { useSubscribeToDetails } from "./Hooks/useSubscribeToDetails"; +import { useSubscribeToDepinDetails } from "../../../Hooks/useSubscribeToDepinDetails"; import { useDeleteMonitor } from "./Hooks/useDeleteMonitor"; import { useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; @@ -36,7 +36,7 @@ const DistributedUptimeDetails = () => { const { t } = useTranslation(); const navigate = useNavigate(); const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] = - useSubscribeToDetails({ monitorId, dateRange }); + useSubscribeToDepinDetails({ monitorId, dateRange }); const [deleteMonitor, isDeleting] = useDeleteMonitor({ monitorId }); // Constants diff --git a/src/Pages/DistributedUptime/Monitors/index.jsx b/src/Pages/DistributedUptime/Monitors/index.jsx index 097f0128c..d2cea7432 100644 --- a/src/Pages/DistributedUptime/Monitors/index.jsx +++ b/src/Pages/DistributedUptime/Monitors/index.jsx @@ -11,7 +11,7 @@ import GenericFallback from "../../../Components/GenericFallback"; import { useState } from "react"; import { useTheme } from "@mui/material/styles"; import { useIsAdmin } from "../../../Hooks/useIsAdmin"; -import { useSubscribeToMonitors } from "./Hooks/useSubscribeToMonitors"; +import { useSubscribeToDepinMonitors } from "../../../Hooks/useSubscribeToDepinMonitors"; import SkeletonLayout from "./Components/Skeleton"; import { useTranslation } from "react-i18next"; // Constants @@ -26,8 +26,10 @@ const DistributedUptimeMonitors = () => { const theme = useTheme(); const isAdmin = useIsAdmin(); const { t } = useTranslation(); - const [isLoading, networkError, monitors, monitorsSummary, filteredMonitors] = - useSubscribeToMonitors(page, rowsPerPage); + const [monitors, count, isLoading, networkError] = useSubscribeToDepinMonitors( + page, + rowsPerPage + ); // Handlers const handleChangePage = (event, newPage) => { setPage(newPage); @@ -57,7 +59,7 @@ const DistributedUptimeMonitors = () => { ); } - if (typeof monitorsSummary === "undefined" || monitorsSummary.totalMonitors === 0) { + if (count === 0) { return ( { /> { const theme = useTheme(); const { monitorId, url } = useParams(); const navigate = useNavigate(); + const { t } = useTranslation(); const isCreate = typeof url === "undefined"; const [createStatusPage, isLoading, networkError] = useCreateStatusPage(isCreate); const [statusPageIsLoading, statusPageNetworkError, statusPage, _, isPublished] = - useDUStatusPageFetchByUrl({ + useFetchDepinStatusPage({ url, timeFrame: 30, isCreate, @@ -176,7 +177,9 @@ const CreateStatus = () => { component="span" fontSize="inherit" > - {isCreate ? "Create your" : "Edit your"}{" "} + {isCreate + ? t("distributedUptimeStatusCreateYour") + : t("distributedUptimeStatusEditYour")}{" "} { fontSize="inherit" fontWeight="inherit" > - status page + {t("distributedUptimeStatusCreateStatusPage")} - Access + + {t("distributedUptimeStatusCreateStatusPageAccess")} + - If your status page is ready, you can mark it as published. + {t("distributedUptimeStatusCreateStatusPageReady")} @@ -206,9 +211,11 @@ const CreateStatus = () => { - Basic Information + + {t("distributedUptimeStatusBasicInfoHeader")} + - Define company name and the subdomain that your status page points to. + {t("distributedUptimeStatusBasicInfoDescription")} @@ -216,7 +223,7 @@ const CreateStatus = () => { id="companyName" name="companyName" type="text" - label="Company name" + label={t("distributedUptimeStatusCompanyNameLabel")} placeholder="Company name" value={form.companyName} onChange={handleFormChange} @@ -227,7 +234,7 @@ const CreateStatus = () => { id="url" name="url" type="url" - label="Your status page address" + label={t("distributedUptimeStatusPageAddressLabel")} disabled={!isCreate} value={form.url} onChange={handleFormChange} @@ -238,8 +245,10 @@ const CreateStatus = () => { - Logo - Upload a logo for your status page + {t("distributedUptimeStatusLogoHeader")} + + {t("distributedUptimeStatusLogoDescription")}{" "} + { color="accent" tabIndex={-1} > - Upload logo + {t("distributedUptimeStatusLogoUploadButton")} @@ -270,9 +279,11 @@ const CreateStatus = () => { - Standard Monitors + + {t("distributedUptimeStatusStandardMonitorsHeader")} + - Attach standard monitors to your status page. + {t("distributedUptimeStatusStandardMonitorsDescription")} @@ -301,7 +312,7 @@ const CreateStatus = () => { color="accent" onClick={handleSubmit} > - Save + {t("settingsSave")} diff --git a/src/Pages/DistributedUptimeStatus/Status/Components/TimeframeHeader/index.jsx b/src/Pages/DistributedUptimeStatus/Status/Components/TimeframeHeader/index.jsx index 5ec509376..7ee4ff292 100644 --- a/src/Pages/DistributedUptimeStatus/Status/Components/TimeframeHeader/index.jsx +++ b/src/Pages/DistributedUptimeStatus/Status/Components/TimeframeHeader/index.jsx @@ -1,8 +1,10 @@ import { Stack, Button, ButtonGroup } from "@mui/material"; import { useTheme } from "@emotion/react"; +import { useTranslation } from "react-i18next"; const TimeFrameHeader = ({ timeFrame, setTimeFrame, sx, ...props }) => { const theme = useTheme(); + const { t } = useTranslation(); return ( { filled={(timeFrame === 30).toString()} onClick={() => setTimeFrame(30)} > - 30 days + {t("distributedUptimeStatus30Days")} diff --git a/src/Pages/DistributedUptimeStatus/Status/index.jsx b/src/Pages/DistributedUptimeStatus/Status/index.jsx index 515bd9be5..117a297e5 100644 --- a/src/Pages/DistributedUptimeStatus/Status/index.jsx +++ b/src/Pages/DistributedUptimeStatus/Status/index.jsx @@ -23,8 +23,8 @@ import { RowContainer } from "../../../Components/StandardContainer"; import { useTheme } from "@mui/material/styles"; import { useState, useEffect, useRef } from "react"; import { useParams } from "react-router-dom"; -import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails"; -import { useDUStatusPageFetchByUrl } from "./Hooks/useDUStatusPageFetchByUrl"; +import { useFetchDepinStatusPage } from "../../../Hooks/useFetchDepinStatusPage"; +import { useSubscribeToDepinDetails } from "../../../Hooks/useSubscribeToDepinDetails"; import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete"; import TimeFrameHeader from "./Components/TimeframeHeader"; import SubHeader from "../../../Components/Subheader"; @@ -64,13 +64,13 @@ const DistributedUptimeStatus = () => { statusPage, monitorId, isPublished, - ] = useDUStatusPageFetchByUrl({ + ] = useFetchDepinStatusPage({ url, timeFrame, }); const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] = - useSubscribeToDetails({ monitorId, dateRange, isPublic, isPublished }); + useSubscribeToDepinDetails({ monitorId, dateRange, isPublic, isPublished }); const [deleteStatusPage, isDeleting] = useStatusPageDelete(() => { navigate("/distributed-uptime"); @@ -124,9 +124,9 @@ const DistributedUptimeStatus = () => { marginY={theme.spacing(4)} color={theme.palette.primary.contrastTextTertiary} > - A status page is not set up. + {t("distributedUptimeStatusPageNotSetUp")} - Please contact your administrator + {t("distributedUptimeStatusContactAdmin")} ); @@ -137,7 +137,7 @@ const DistributedUptimeStatus = () => { return ( - This status page is not public. + {t("distributedUptimeStatusPageNotPublic")} ); @@ -155,9 +155,9 @@ const DistributedUptimeStatus = () => { marginY={theme.spacing(4)} color={theme.palette.primary.contrastTextTertiary} > - Network error + {t("networkError")} - Please check your connection + {t("checkConnection")} ); } @@ -171,7 +171,7 @@ const DistributedUptimeStatus = () => { - There is no check history for this monitor yet. + {t("distributedUptimeDetailsNoMonitorHistory")} ); @@ -246,17 +246,21 @@ const DistributedUptimeStatus = () => { gap={theme.spacing(8)} > @@ -295,7 +299,7 @@ const DistributedUptimeStatus = () => {