diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 5acf4c3d6..e912934a0 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -3,6 +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 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 = [] }) => { @@ -10,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); }, []); @@ -41,15 +85,11 @@ const StatusPageBarChart = ({ checks = [] }) => { /* 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)", }} /> - + ) )} diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index ee0071d4f..c82f2e5be 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -64,34 +64,28 @@ 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: "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} @@ -741,7 +825,8 @@ function Sidebar() { )} {/* TODO Do we need two dividers? */} {collapsed && } - + {/* */} + {renderAccountMenuItems()} { - 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 +9,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") { @@ -64,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, @@ -77,15 +61,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 +83,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]; }; 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, diff --git a/src/Utils/NetworkService.js b/src/Utils/NetworkService.js index 73a54136d..c15a816e0 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, @@ -872,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;