diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index 0b959a392..a1ead3cf9 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -73,9 +73,12 @@ const CustomToolTip = ({ active, payload, label, dateRange }) => { component="span" sx={{ opacity: 0.8 }} > - Response Time - {" "} - + Response time: + + {Math.floor(responseTime)} { ? payload[0]?.payload?.originalAvgResponseTime : (payload[0]?.payload?.avgResponseTime ?? 0); return ( - } - header="Response Times" - sx={{ padding: 0 }} + - - + + + - {formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)} - - - - + Response time + + + {Math.floor(responseTime)} - Response Time - {" "} - - {Math.floor(responseTime)} - - {" "} - ms - + {" "} + ms - - - {/* Display original value */} + + - + {/* Display original value */} + ); } return null; @@ -143,75 +140,81 @@ const DistributedUptimeResponseChart = ({ checks }) => { if (checks.length === 0) return null; return ( - } + header="Response Times" + sx={{ padding: 0 }} > - setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} + minWidth={25} + height={220} > - - - - - - - - } - minTickGap={0} - axisLine={false} - tickLine={false} - height={20} - /> - } - wrapperStyle={{ pointerEvents: "none" }} - /> - - - + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + + + + + + + + } + minTickGap={0} + axisLine={false} + tickLine={false} + height={20} + /> + } + wrapperStyle={{ pointerEvents: "none" }} + /> + + + + ); }; diff --git a/Client/src/Pages/DistributedUptime/Details/Components/Skeleton/index.jsx b/Client/src/Pages/DistributedUptime/Details/Components/Skeleton/index.jsx new file mode 100644 index 000000000..233fc3c06 --- /dev/null +++ b/Client/src/Pages/DistributedUptime/Details/Components/Skeleton/index.jsx @@ -0,0 +1,14 @@ +import { Stack, Skeleton } from "@mui/material"; + +export const SkeletonLayout = () => { + return ( + + + + ); +}; + +export default SkeletonLayout; diff --git a/Client/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/Client/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx index 787281865..30c5d3ed6 100644 --- a/Client/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx +++ b/Client/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx @@ -68,6 +68,9 @@ const useSubscribeToDetails = ({ monitorId, dateRange }) => { dateRange: dateRange, normalize: true, onUpdate: (data) => { + if (isLoading === true) { + setIsLoading(false); + } if (networkError === true) { setNetworkError(false); } @@ -87,6 +90,7 @@ const useSubscribeToDetails = ({ monitorId, dateRange }) => { setRetryCount(0); // Reset retry count on successful connection }, onError: () => { + setIsLoading(false); setNetworkError(true); setConnectionStatus("down"); }, @@ -94,8 +98,6 @@ const useSubscribeToDetails = ({ monitorId, dateRange }) => { return cleanup; } catch (error) { setNetworkError(true); - } finally { - setIsLoading(false); } }, [ authToken, @@ -105,6 +107,7 @@ const useSubscribeToDetails = ({ monitorId, dateRange }) => { setConnectionStatus, networkError, devices, + isLoading, ]); useEffect(() => { diff --git a/Client/src/Pages/DistributedUptime/Details/index.jsx b/Client/src/Pages/DistributedUptime/Details/index.jsx index a8fc0c309..27a596af4 100644 --- a/Client/src/Pages/DistributedUptime/Details/index.jsx +++ b/Client/src/Pages/DistributedUptime/Details/index.jsx @@ -11,7 +11,7 @@ import MonitorHeader from "./Components/MonitorHeader"; import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader"; import GenericFallback from "../../../Components/GenericFallback"; import MonitorCreateHeader from "../../../Components/MonitorCreateHeader"; - +import SkeletonLayout from "./Components/Skeleton"; //Utils import { useTheme } from "@mui/material/styles"; import { useState } from "react"; @@ -35,6 +35,10 @@ const DistributedUptimeDetails = () => { { name: "Details", path: `/distributed-uptime/${monitorId}` }, ]; + if (isLoading) { + return ; + } + if (networkError) { return ( diff --git a/Client/src/Pages/DistributedUptime/Monitors/Components/Skeleton/index.jsx b/Client/src/Pages/DistributedUptime/Monitors/Components/Skeleton/index.jsx new file mode 100644 index 000000000..233fc3c06 --- /dev/null +++ b/Client/src/Pages/DistributedUptime/Monitors/Components/Skeleton/index.jsx @@ -0,0 +1,14 @@ +import { Stack, Skeleton } from "@mui/material"; + +export const SkeletonLayout = () => { + return ( + + + + ); +}; + +export default SkeletonLayout; diff --git a/Client/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx b/Client/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx index 1a1db1453..428791a3e 100644 --- a/Client/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx +++ b/Client/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx @@ -32,6 +32,10 @@ const useSubscribeToMonitors = () => { field: null, order: null, onUpdate: (data) => { + if (isLoading === true) { + setIsLoading(false); + } + const res = data.monitors; const { monitors, filteredMonitors, summary } = res; const mappedMonitors = filteredMonitors.map((monitor) => @@ -41,6 +45,9 @@ const useSubscribeToMonitors = () => { setMonitorsSummary(summary); setFilteredMonitors(mappedMonitors); }, + onError: () => { + setIsLoading(false); + }, }); return cleanup; @@ -49,8 +56,6 @@ const useSubscribeToMonitors = () => { body: error.message, }); setNetworkError(true); - } finally { - setIsLoading(false); } }, [authToken, user, getMonitorWithPercentage, theme]); return [isLoading, networkError, monitors, monitorsSummary, filteredMonitors]; diff --git a/Client/src/Pages/DistributedUptime/Monitors/index.jsx b/Client/src/Pages/DistributedUptime/Monitors/index.jsx index a3466b845..159d265a0 100644 --- a/Client/src/Pages/DistributedUptime/Monitors/index.jsx +++ b/Client/src/Pages/DistributedUptime/Monitors/index.jsx @@ -10,6 +10,7 @@ import GenericFallback from "../../../Components/GenericFallback"; import { useTheme } from "@mui/material/styles"; import { useIsAdmin } from "../../../Hooks/useIsAdmin"; import { useSubscribeToMonitors } from "./Hooks/useSubscribeToMonitors"; +import SkeletonLayout from "./Components/Skeleton"; // Constants const BREADCRUMBS = [{ name: `Distributed Uptime`, path: "/distributed-uptime" }]; @@ -21,6 +22,10 @@ const DistributedUptimeMonitors = () => { const [isLoading, networkError, monitors, monitorsSummary, filteredMonitors] = useSubscribeToMonitors(); + if (isLoading) { + return ; + } + if (networkError) { return ( diff --git a/Client/src/Pages/DistributedUptime/Status/Components/Skeleton/index.jsx b/Client/src/Pages/DistributedUptime/Status/Components/Skeleton/index.jsx new file mode 100644 index 000000000..233fc3c06 --- /dev/null +++ b/Client/src/Pages/DistributedUptime/Status/Components/Skeleton/index.jsx @@ -0,0 +1,14 @@ +import { Stack, Skeleton } from "@mui/material"; + +export const SkeletonLayout = () => { + return ( + + + + ); +}; + +export default SkeletonLayout; diff --git a/Client/src/Pages/DistributedUptime/Status/index.jsx b/Client/src/Pages/DistributedUptime/Status/index.jsx index de71b51e3..7297d83e2 100644 --- a/Client/src/Pages/DistributedUptime/Status/index.jsx +++ b/Client/src/Pages/DistributedUptime/Status/index.jsx @@ -11,6 +11,7 @@ import ControlsHeader from "../../StatusPage/Status/Components/ControlsHeader"; import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader"; import GenericFallback from "../../../Components/GenericFallback"; import Dialog from "../../../Components/Dialog"; +import SkeletonLayout from "./Components/Skeleton"; //Utils import { useTheme } from "@mui/material/styles"; import { useState } from "react"; @@ -46,6 +47,7 @@ const DistributedUptimeStatus = () => { // Constants const BREADCRUMBS = [ { name: "Distributed Uptime", path: "/distributed-uptime" }, + { name: "details", path: `/distributed-uptime/${monitorId}` }, { name: "status", path: `` }, ]; @@ -59,7 +61,11 @@ const DistributedUptimeStatus = () => { }; } - if (networkError) { + if (isLoading || statusPageIsLoading) { + return ; + } + + if (networkError || statusPageNetworkError) { return ( { ); } - if (typeof monitor === "undefined" || monitor.totalChecks === 0) { + if ( + typeof statusPage === "undefined" || + typeof monitor === "undefined" || + monitor.totalChecks === 0 + ) { return ( @@ -93,6 +103,7 @@ const DistributedUptimeStatus = () => { > {!isPublic && }