From 947f5ff773310ae76ba694f08d543a08c2822d09 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 08:10:16 +0530 Subject: [PATCH 01/13] Added a new HOC in status bar in order to make sure it works on both the resolution, high and low. --- .../Charts/StatusPageBarChart/index.jsx | 35 +++++++++++-------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 5acf4c3d6..46e8ae2a1 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -24,6 +24,21 @@ const StatusPageBarChart = ({ checks = [] }) => { checks = [...checks, ...placeholders]; } + const BarBox = ({ width, height, backgroundColor, borderRadius, children }) => ( + + {children} + + ); + return ( { /* TODO what is the purpose of this box? */ // CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars // even if there are less than 25 checks - ) : ( { }, }} > - { transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)", }} /> - + ) )} From 4f6c29cd9af842f32b018284d64fb4dfbfe792ad Mon Sep 17 00:00:00 2001 From: Aditya Date: Sun, 2 Mar 2025 09:13:30 +0530 Subject: [PATCH 02/13] feat(sidebar): Improve sidebar menu UI --- src/Components/Sidebar/index.jsx | 155 ++++++++++++++++++++++++------- 1 file changed, 120 insertions(+), 35 deletions(-) diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index ee0071d4f..bc915b371 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -63,35 +63,29 @@ const menu = [ { name: "Status pages", path: "status", icon: }, { name: "Maintenance", path: "maintenance", icon: }, - // { name: "Integrations", path: "integrations", icon: }, - { - name: "Account", - icon: , - nested: [ - { name: "Profile", path: "account/profile", icon: }, - { name: "Password", path: "account/password", icon: }, - { name: "Team", path: "account/team", icon: }, - ], - }, + { name: "Integrations", path: "integrations", icon: }, { name: "Settings", icon: , path: "settings", }, +]; + +const otherMenuItems = [ + { name: "Support", path: "support", icon: }, { - name: "Other", - icon: , - nested: [ - { name: "Support", path: "support", icon: }, - { - name: "Discussions", - path: "discussions", - icon: , - }, - { name: "Docs", path: "docs", icon: }, - { name: "Changelog", path: "changelog", icon: }, - ], + name: "Discussions", + path: "discussions", + icon: , }, + { name: "Docs", path: "docs", icon: }, + { name: "Changelog", path: "changelog", icon: }, +]; + +const accountMenuItems = [ + { name: "Profile", path: "account/profile", icon: }, + { name: "Password", path: "account/password", icon: }, + { name: "Team", path: "account/team", icon: }, ]; /* TODO this could be a key in nested Path would be the link */ @@ -133,12 +127,38 @@ function Sidebar() { (state) => state.ui.distributedUptimeEnabled ); - const accountMenuItem = menu.find((item) => item.name === "Account"); - if (user.role?.includes("demo") && accountMenuItem) { - accountMenuItem.nested = accountMenuItem.nested.filter((item) => { - return item.name !== "Password"; - }); - } + const renderAccountMenuItems = () => { + let filteredAccountMenuItems = [...accountMenuItems]; + + // If the user is in demo mode, remove the "Password" option + if (user.role?.includes("demo")) { + filteredAccountMenuItems = filteredAccountMenuItems.filter( + (item) => item.name !== "Password" + ); + } + + // If the user is NOT a superadmin, remove the "Team" option + if (user.role && !user.role.includes("superadmin")) { + filteredAccountMenuItems = filteredAccountMenuItems.filter( + (item) => item.name !== "Team" + ); + } + + return filteredAccountMenuItems.map((item) => ( + navigate(item.path)} + sx={{ + gap: theme.spacing(2), + borderRadius: theme.shape.borderRadius, + pl: theme.spacing(4), + }} + > + {item.icon} + {item.name} + + )); + }; const openPopup = (event, id) => { setAnchorEl(event.currentTarget); @@ -260,7 +280,6 @@ function Sidebar() { > {collapsed ? : } - {/* TODO Alignment done using padding. Use single source of truth to that*/} - + + {otherMenuItems.map((item) => { + return item.path ? ( + + { + const url = URL_MAP[item.path]; + if (url) { + window.open(url, "_blank", "noreferrer"); + } else { + navigate(`/${item.path}`); + } + }} + sx={{ + height: "37px", + gap: theme.spacing(4), + borderRadius: theme.shape.borderRadius, + px: theme.spacing(4), + }} + > + {item.icon} + {item.name} {" "} + + + ) : null; + })} + + {collapsed && ( - + {authState.user?.firstName} {authState.user?.lastName} - + {authState.user?.role} @@ -742,6 +826,7 @@ function Sidebar() { {/* TODO Do we need two dividers? */} {collapsed && } + {renderAccountMenuItems()} Date: Mon, 3 Mar 2025 14:51:03 +0530 Subject: [PATCH 03/13] fix(sidebar): Address PR feedback --- src/Components/Sidebar/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index bc915b371..432fc673b 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -635,7 +635,7 @@ function Sidebar() { > { const url = URL_MAP[item.path]; @@ -785,11 +785,11 @@ function Sidebar() { }} > {collapsed && ( - + Date: Mon, 3 Mar 2025 23:12:17 +0530 Subject: [PATCH 04/13] FIX-1725 minor UI changes. --- src/Components/Charts/Bar/index.jsx | 47 +++++++++++++++++++ .../Charts/StatusPageBarChart/index.jsx | 26 +++------- 2 files changed, 53 insertions(+), 20 deletions(-) create mode 100644 src/Components/Charts/Bar/index.jsx diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx new file mode 100644 index 000000000..5826788a6 --- /dev/null +++ b/src/Components/Charts/Bar/index.jsx @@ -0,0 +1,47 @@ +import { Box } from "@mui/material"; +import { useTheme } from "@emotion/react"; +import PropTypes from "prop-types"; + +/** + * A customizable Bar component that renders a colored bar with optional children. + * + * @component + * + * @param {string} width The width of the bar (e.g., "100px"). + * @param {string} height The height of the bar (e.g., "50px"). + * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733"). + * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px"). + * @param {node} children The content to be rendered inside the bar. + * + * @returns {JSX.Element} The Bar component. + */ + +const Bar = ({ width, height, backgroundColor, borderRadius, children }) => { + const theme = useTheme(); + + return ( + + {children} + + ); +}; + +Bar.propTypes = { + width: PropTypes.string.isRequired, + height: PropTypes.string.isRequired, + backgroundColor: PropTypes.string.isRequired, + borderRadius: PropTypes.string, + children: PropTypes.node, +}; + +export default Bar; diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 46e8ae2a1..84015da4a 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -3,6 +3,7 @@ import { Box, Stack, Tooltip, Typography } from "@mui/material"; import { formatDateWithTz } from "../../../Utils/timeUtils"; import { useEffect, useState } from "react"; import { useSelector } from "react-redux"; +import Bar from "../Bar"; /* TODO add prop validation and jsdocs */ const StatusPageBarChart = ({ checks = [] }) => { @@ -24,21 +25,6 @@ const StatusPageBarChart = ({ checks = [] }) => { checks = [...checks, ...placeholders]; } - const BarBox = ({ width, height, backgroundColor, borderRadius, children }) => ( - - {children} - - ); - return ( { /* TODO what is the purpose of this box? */ // CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars // even if there are less than 25 checks - @@ -151,8 +137,8 @@ const StatusPageBarChart = ({ checks = [] }) => { }, }} > - @@ -171,7 +157,7 @@ const StatusPageBarChart = ({ checks = [] }) => { transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)", }} /> - + ) )} From 8dc353ce90df6b3a3cdf37c39c3a6aab97ec35ea Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Mon, 3 Mar 2025 23:14:21 +0530 Subject: [PATCH 05/13] Removed the constant values. --- src/Components/Charts/Bar/index.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx index 5826788a6..e6d5fbea3 100644 --- a/src/Components/Charts/Bar/index.jsx +++ b/src/Components/Charts/Bar/index.jsx @@ -27,8 +27,6 @@ const Bar = ({ width, height, backgroundColor, borderRadius, children }) => { backgroundColor={backgroundColor} sx={{ borderRadius: borderRadius || theme.spacing(1.5), - gap: "2px", - display: "flex", }} > {children} From f3537131efbfb598c1ca30d25d1dcca3e82f4c2d Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Tue, 4 Mar 2025 06:09:54 +0530 Subject: [PATCH 06/13] made the component to come outside of the main function. --- src/Components/Charts/Bar/index.jsx | 45 ------------------- .../Charts/StatusPageBarChart/index.jsx | 44 ++++++++++++++++-- 2 files changed, 41 insertions(+), 48 deletions(-) delete mode 100644 src/Components/Charts/Bar/index.jsx diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx deleted file mode 100644 index e6d5fbea3..000000000 --- a/src/Components/Charts/Bar/index.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Box } from "@mui/material"; -import { useTheme } from "@emotion/react"; -import PropTypes from "prop-types"; - -/** - * A customizable Bar component that renders a colored bar with optional children. - * - * @component - * - * @param {string} width The width of the bar (e.g., "100px"). - * @param {string} height The height of the bar (e.g., "50px"). - * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733"). - * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px"). - * @param {node} children The content to be rendered inside the bar. - * - * @returns {JSX.Element} The Bar component. - */ - -const Bar = ({ width, height, backgroundColor, borderRadius, children }) => { - const theme = useTheme(); - - return ( - - {children} - - ); -}; - -Bar.propTypes = { - width: PropTypes.string.isRequired, - height: PropTypes.string.isRequired, - backgroundColor: PropTypes.string.isRequired, - borderRadius: PropTypes.string, - children: PropTypes.node, -}; - -export default Bar; diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 84015da4a..29a52b053 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -3,7 +3,45 @@ import { Box, Stack, Tooltip, Typography } from "@mui/material"; import { formatDateWithTz } from "../../../Utils/timeUtils"; import { useEffect, useState } from "react"; import { useSelector } from "react-redux"; -import Bar from "../Bar"; +import PropTypes from "prop-types"; + +/** + * A customizable Bar component that renders a colored bar with optional children. + * @component + * + * @param {string} width The width of the bar (e.g., "100px"). + * @param {string} height The height of the bar (e.g., "50px"). + * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733"). + * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px"). + * @param {node} children The content to be rendered inside the bar. + * @returns {JSX.Element} The Bar component. + */ + +const Bar = ({ width, height, backgroundColor, borderRadius, children }) => { + const theme = useTheme(); + + return ( + + {children} + + ); +}; + +Bar.propTypes = { + width: PropTypes.string.isRequired, + height: PropTypes.string.isRequired, + backgroundColor: PropTypes.string.isRequired, + borderRadius: PropTypes.string, + children: PropTypes.node, +}; /* TODO add prop validation and jsdocs */ const StatusPageBarChart = ({ checks = [] }) => { @@ -44,7 +82,7 @@ const StatusPageBarChart = ({ checks = [] }) => { // even if there are less than 25 checks @@ -138,7 +176,7 @@ const StatusPageBarChart = ({ checks = [] }) => { }} > From c5326e5d6a19777b38792c2b35af4f348b636ab0 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Tue, 4 Mar 2025 15:53:40 +0530 Subject: [PATCH 07/13] Added a constant and utilised a responsive-values in MUI. --- src/Components/Charts/StatusPageBarChart/index.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 29a52b053..e912934a0 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -49,6 +49,11 @@ const StatusPageBarChart = ({ checks = [] }) => { const [animate, setAnimate] = useState(false); const uiTimezone = useSelector((state) => state.ui.timezone); + const barWidth = { + xs: "calc(60% / 25)", + xl: "calc(40% / 25)", + }; + useEffect(() => { setAnimate(true); }, []); @@ -82,7 +87,7 @@ const StatusPageBarChart = ({ checks = [] }) => { // even if there are less than 25 checks @@ -176,7 +181,7 @@ const StatusPageBarChart = ({ checks = [] }) => { }} > From 740887e61ab30752821a6ae6926ccbaf602ea1af Mon Sep 17 00:00:00 2001 From: Aditya Date: Tue, 4 Mar 2025 22:31:20 +0530 Subject: [PATCH 08/13] fix(sidebar): Implement PR review feedback --- src/Components/Sidebar/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index 432fc673b..3b78d9f51 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -781,7 +781,7 @@ function Sidebar() { }, }} sx={{ - ml: theme.spacing(8), + ml: theme.spacing(4), }} > {collapsed && ( @@ -825,7 +825,7 @@ function Sidebar() { )} {/* TODO Do we need two dividers? */} {collapsed && } - + {/* */} {renderAccountMenuItems()} Date: Tue, 4 Mar 2025 10:18:24 -0800 Subject: [PATCH 09/13] Add --- src/Utils/NetworkService.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/Utils/NetworkService.js b/src/Utils/NetworkService.js index 73a54136d..1f6a36726 100644 --- a/src/Utils/NetworkService.js +++ b/src/Utils/NetworkService.js @@ -807,6 +807,31 @@ class NetworkService { ); } + getDistributedUptimeMonitors(config) { + const { teamId, limit, types, page, rowsPerPage, filter, field, order } = config; + + const params = new URLSearchParams(); + + if (limit) params.append("limit", limit); + if (types) { + types.forEach((type) => { + params.append("type", type); + }); + } + if (page) params.append("page", page); + if (rowsPerPage) params.append("rowsPerPage", rowsPerPage); + if (filter) params.append("filter", filter); + if (field) params.append("field", field); + if (order) params.append("order", order); + + if (this.eventSource) { + this.eventSource.close(); + } + + const url = `${this.axiosInstance.defaults.baseURL}/distributed-uptime/monitors/${teamId}/initial?${params.toString()}`; + return this.axiosInstance.get(url); + } + subscribeToDistributedUptimeMonitors(config) { const { teamId, From a0830f0f34ad1f1906255686aacae5cc3ba8a060 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 4 Mar 2025 10:18:36 -0800 Subject: [PATCH 10/13] add initial data fetch --- .../Monitors/Hooks/useSubscribeToMonitors.jsx | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx index 6855c44c5..ffca50cd7 100644 --- a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx +++ b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx @@ -20,6 +20,43 @@ const useSubscribeToMonitors = (page, rowsPerPage) => { const { getMonitorWithPercentage } = useMonitorUtils(); useEffect(() => { + const fetchInitialData = async () => { + try { + const initialDataRes = await networkService.getDistributedUptimeMonitors({ + teamId: user.teamId, + limit: 25, + types: [ + typeof import.meta.env.VITE_DEPIN_TESTING === "undefined" + ? "distributed_http" + : "distributed_test", + ], + page, + rowsPerPage, + }); + const responseData = initialDataRes?.data?.data; + if (typeof responseData === "undefined") throw new Error("No data"); + + const { monitors, filteredMonitors, summary } = responseData; + + const mappedMonitors = filteredMonitors?.map((monitor) => + getMonitorWithPercentage(monitor, theme) + ); + + setMonitors(monitors); + setMonitorsSummary(summary); + setFilteredMonitors(mappedMonitors); + } catch (error) { + setNetworkError(true); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + + fetchInitialData(); + try { const cleanup = networkService.subscribeToDistributedUptimeMonitors({ teamId: user.teamId, From f490e13b2e0a90ec12699c50e8109f7a2ebbc0bf Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 4 Mar 2025 11:19:21 -0800 Subject: [PATCH 11/13] remove devices --- src/Components/Sidebar/index.jsx | 2 +- .../Details/Hooks/useSubscribeToDetails.jsx | 68 +------------------ 2 files changed, 3 insertions(+), 67 deletions(-) diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index 3b78d9f51..c82f2e5be 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -63,7 +63,7 @@ const menu = [ { name: "Status pages", path: "status", icon: }, { name: "Maintenance", path: "maintenance", icon: }, - { name: "Integrations", path: "integrations", icon: }, + // { name: "Integrations", path: "integrations", icon: }, { name: "Settings", icon: , diff --git a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx index 684ae587b..7febdc478 100644 --- a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx +++ b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx @@ -1,49 +1,6 @@ -import { useState, useEffect, useRef } from "react"; +import { useState, useEffect } from "react"; import { networkService } from "../../../../main"; -const getRandomDevice = () => { - const manufacturers = { - Apple: ["iPhone 15 Pro Max", "iPhone 15", "iPhone 14 Pro", "iPhone 14", "iPhone 13"], - Samsung: [ - "Galaxy S23 Ultra", - "Galaxy S23+", - "Galaxy S23", - "Galaxy Z Fold5", - "Galaxy Z Flip5", - ], - Google: ["Pixel 8 Pro", "Pixel 8", "Pixel 7a", "Pixel 7", "Pixel 6a"], - OnePlus: [ - "OnePlus 11", - "OnePlus 10T", - "OnePlus Nord 3", - "OnePlus 10 Pro", - "OnePlus Nord 2T", - ], - Xiaomi: ["13 Pro", "13", "Redmi Note 12", "POCO F5", "Redmi 12"], - Huawei: ["P60 Pro", "Mate X3", "Nova 11", "P50 Pro", "Mate 50"], - Sony: ["Xperia 1 V", "Xperia 5 V", "Xperia 10 V", "Xperia Pro-I", "Xperia 1 IV"], - Motorola: ["Edge 40 Pro", "Edge 40", "G84", "G54", "Razr 40 Ultra"], - ASUS: [ - "ROG Phone 7", - "Zenfone 10", - "ROG Phone 6", - "Zenfone 9", - "ROG Phone 7 Ultimate", - ], - }; - - const manufacturerNames = Object.keys(manufacturers); - const randomManufacturer = - manufacturerNames[Math.floor(Math.random() * manufacturerNames.length)]; - - const models = manufacturers[randomManufacturer]; - const randomModel = models[Math.floor(Math.random() * models.length)]; - - return { - manufacturer: randomManufacturer, - model: randomModel, - }; -}; const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) => { const [isLoading, setIsLoading] = useState(true); const [connectionStatus, setConnectionStatus] = useState(undefined); @@ -51,9 +8,6 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) const [networkError, setNetworkError] = useState(false); const [monitor, setMonitor] = useState(undefined); const [lastUpdateTrigger, setLastUpdateTrigger] = useState(0); - const [devices, setDevices] = useState(Array.from({ length: 5 }, getRandomDevice)); - - const prevDateRangeRef = useRef(dateRange); useEffect(() => { if (typeof monitorId === "undefined") { @@ -77,15 +31,7 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) setNetworkError(false); } setLastUpdateTrigger(Date.now()); - const latestChecksWithDevice = data?.monitor?.latestChecks.map((check, idx) => { - check.device = devices[idx]; - return check; - }); - const monitorWithDevice = { - ...data.monitor, - latestChecks: latestChecksWithDevice, - }; - setMonitor(monitorWithDevice); + setMonitor(data.monitor); }, onOpen: () => { setConnectionStatus("up"); @@ -107,21 +53,11 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) retryCount, setConnectionStatus, networkError, - devices, isLoading, isPublic, isPublished, ]); - useEffect(() => { - const hasDateRangeChanged = prevDateRangeRef.current !== dateRange; - prevDateRangeRef.current = dateRange; // Update the ref to the current dateRange - - if (!hasDateRangeChanged) { - setDevices(Array.from({ length: 5 }, getRandomDevice)); - } - }, [dateRange]); - return [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger]; }; From a2c35c903bff01edffae7401a936c5aa0d4f3edd Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 4 Mar 2025 11:52:50 -0800 Subject: [PATCH 12/13] add getDistributedUptimeDetails --- src/Utils/NetworkService.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/Utils/NetworkService.js b/src/Utils/NetworkService.js index 1f6a36726..c15a816e0 100644 --- a/src/Utils/NetworkService.js +++ b/src/Utils/NetworkService.js @@ -897,6 +897,15 @@ class NetworkService { }; } + getDistributedUptimeDetails(config) { + const params = new URLSearchParams(); + const { monitorId, onUpdate, onOpen, onError, dateRange, normalize } = config; + if (dateRange) params.append("dateRange", dateRange); + if (normalize) params.append("normalize", normalize); + const url = `${this.axiosInstance.defaults.baseURL}/distributed-uptime/monitors/details/${monitorId}/initial?${params.toString()}`; + return this.axiosInstance.get(url); + } + subscribeToDistributedUptimeDetails(config) { const params = new URLSearchParams(); const { monitorId, onUpdate, onOpen, onError, dateRange, normalize } = config; From ceedf231bda3cd7b53ebf644b5d286c07fbf57ca Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 4 Mar 2025 11:53:04 -0800 Subject: [PATCH 13/13] fetch initial data --- .../Details/Hooks/useSubscribeToDetails.jsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx index 7febdc478..99e048e26 100644 --- a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx +++ b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx @@ -1,5 +1,6 @@ import { useState, useEffect } from "react"; import { networkService } from "../../../../main"; +import { createToast } from "../../../../Utils/toastUtils"; const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) => { const [isLoading, setIsLoading] = useState(true); @@ -18,6 +19,35 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) return; } + // Get initial data + + const fetchInitialData = async () => { + try { + const res = await networkService.getDistributedUptimeDetails({ + monitorId, + dateRange: dateRange, + normalize: true, + }); + const responseData = res?.data?.data; + + if (typeof responseData === "undefined") { + throw new Error("No data"); + } + + setLastUpdateTrigger(Date.now()); + setMonitor(responseData); + } catch (error) { + setNetworkError(true); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + + fetchInitialData(); + try { const cleanup = networkService.subscribeToDistributedUptimeDetails({ monitorId,