diff --git a/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx b/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx index 8f188c970..22a56bd7e 100644 --- a/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx +++ b/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx @@ -30,7 +30,6 @@ const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => { }; let bgColor = COLOR_MAP[connectionStatus]; - return ( { backgroundColor={theme.palette.successSecondary.lowContrast} color={theme.palette.success.lowContrast} > - {t("distributedUptimeDetailsStatusHeaderUptime")} {(monitor.totalUptime * 100).toFixed(2)}% + {t("distributedUptimeDetailsStatusHeaderUptime")}{" "} + {(monitor.uptimePercentage * 100).toFixed(2)}% { const [isDeleteOpen, setIsDeleteOpen] = useState(false); // Utils const theme = useTheme(); - const isAdmin = useIsAdmin(); const location = useLocation(); const navigate = useNavigate(); @@ -33,7 +32,6 @@ const PublicStatus = () => { const [deleteStatusPage, isDeleting] = useStatusPageDelete(fetchStatusPage, url); // Setup - const currentPath = location.pathname; let sx = { paddingLeft: theme.spacing(20), paddingRight: theme.spacing(20) }; let link = undefined; const isPublic = location.pathname.startsWith("/status/uptime/public"); diff --git a/src/Pages/Uptime/Details/Hooks/useChecksFetch.jsx b/src/Pages/Uptime/Details/Hooks/useChecksFetch.jsx index 51da1a20b..23c66b084 100644 --- a/src/Pages/Uptime/Details/Hooks/useChecksFetch.jsx +++ b/src/Pages/Uptime/Details/Hooks/useChecksFetch.jsx @@ -2,18 +2,30 @@ import { useState } from "react"; import { useEffect } from "react"; import { networkService } from "../../../../main"; import { createToast } from "../../../../Utils/toastUtils"; -export const useChecksFetch = ({ monitorId, dateRange, page, rowsPerPage }) => { +export const useChecksFetch = ({ + monitorId, + monitorType, + dateRange, + page, + rowsPerPage, +}) => { const [checks, setChecks] = useState(undefined); const [checksCount, setChecksCount] = useState(undefined); const [isLoading, setIsLoading] = useState(false); const [networkError, setNetworkError] = useState(false); useEffect(() => { + if (!monitorType) { + console.warn("Monitor Type is not provided. Fetching checks will not proceed."); + return; + } + const fetchChecks = async () => { try { setIsLoading(true); const res = await networkService.getChecksByMonitor({ monitorId: monitorId, + type: monitorType, sortOrder: "desc", limit: null, dateRange: dateRange, @@ -31,7 +43,7 @@ export const useChecksFetch = ({ monitorId, dateRange, page, rowsPerPage }) => { } }; fetchChecks(); - }, [monitorId, dateRange, page, rowsPerPage]); + }, [monitorId, monitorType, dateRange, page, rowsPerPage]); return [checks, checksCount, isLoading, networkError]; }; diff --git a/src/Pages/Uptime/Details/index.jsx b/src/Pages/Uptime/Details/index.jsx index d170f7b18..672640d67 100644 --- a/src/Pages/Uptime/Details/index.jsx +++ b/src/Pages/Uptime/Details/index.jsx @@ -59,8 +59,11 @@ const UptimeDetails = () => { uiTimezone, }); + const monitorType = monitor?.type; + const [checks, checksCount, checksAreLoading, checksNetworkError] = useChecksFetch({ monitorId, + monitorType, dateRange, page, rowsPerPage,