From 4ccc36acc28aae741b2e9eab8103cf6182407f5d Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Sat, 1 Mar 2025 10:21:39 +0530 Subject: [PATCH 01/30] Fix: Infrastructure Details Page Design --- src/Components/Charts/CustomGauge/index.jsx | 8 ++-- src/Components/StatBox/index.jsx | 7 ++-- .../Details/Components/GaugeBoxes/Gauge.jsx | 38 +++++++++++++++---- .../Details/Hooks/useHardwareUtils.jsx | 1 + src/Pages/Infrastructure/Details/index.jsx | 2 +- src/Utils/Theme/constants.js | 9 +++++ 6 files changed, 50 insertions(+), 15 deletions(-) diff --git a/src/Components/Charts/CustomGauge/index.jsx b/src/Components/Charts/CustomGauge/index.jsx index d29663004..5c8481898 100644 --- a/src/Components/Charts/CustomGauge/index.jsx +++ b/src/Components/Charts/CustomGauge/index.jsx @@ -62,6 +62,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = className="radial-chart" width={radius} height={radius} + sx={{ backgroundColor: theme.palette.accent.baseBackground, borderRadius: "50%" }} > {`${progressWithinRange.toFixed(1)}%`} diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx index 3c91e1aae..71e01b4da 100644 --- a/src/Components/StatBox/index.jsx +++ b/src/Components/StatBox/index.jsx @@ -3,6 +3,7 @@ import Image from "../Image"; import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils"; +import { lighten } from "@mui/material/styles"; /** * StatBox Component @@ -50,7 +51,7 @@ const StatBox = ({ borderColor: theme.palette[themeColor].lowContrast, } : { - background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`, + background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`, borderColor: theme.palette.primary.lowContrast, }; @@ -62,7 +63,7 @@ const StatBox = ({ color: theme.palette.primary.contrastTextSecondary, }; - const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15 }; + const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15, fontWeight: 600}; const detailTextStyles = gradient ? { color: theme.palette[themeColor].contrastText, @@ -120,7 +121,7 @@ const StatBox = ({ )} {heading} - {subHeading} + {subHeading} ); diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index b1202682d..3adf0066b 100644 --- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -9,6 +9,17 @@ import PropTypes from "prop-types"; const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => { const theme = useTheme(); + const boxStyle = { + borderRadius: 2, + backgroundColor: theme.palette.tertiary.main, + width: "40%", + mb: 2, + mt: 2, + pr: 4, + textAlign: 'right', + fontWeight: 600 + } + return ( gap={theme.spacing(2)} alignItems="center" > - - {heading} + + + {heading} + {metricOne} - {valueOne} + {valueOne} {metricTwo} - {valueTwo} + {valueTwo} diff --git a/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx b/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx index bc540dfe3..1752533d0 100644 --- a/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx +++ b/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx @@ -64,6 +64,7 @@ const useHardwareUtils = () => { return ( <> {Number(MB.toFixed(0))} + {space ? " " : ""} MB ); diff --git a/src/Pages/Infrastructure/Details/index.jsx b/src/Pages/Infrastructure/Details/index.jsx index f686fa9ff..fc704b444 100644 --- a/src/Pages/Infrastructure/Details/index.jsx +++ b/src/Pages/Infrastructure/Details/index.jsx @@ -62,7 +62,7 @@ const InfrastructureDetails = () => { monitor={monitor} /> - No check history for htis monitor yet. + No check history for this monitor yet. ); diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 36ab0a0f4..7397e6f5a 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -94,6 +94,7 @@ const newColors = { blueGray600: "#344054", blueGray800: "#1C2130", blueBlueWave: "#1570EF", + lightBlueWave: "#CDE2FF", /* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */ green100: "#67cd78", green200: "#4B9B77", @@ -138,6 +139,14 @@ const newSemanticColors = { light: newColors.offWhite, dark: newColors.offWhite, }, + base: { + light: newColors.lightBlueWave, + dark: newColors.lightBlueWave, + }, + baseBackground: { + light: paletteColors.white, + dark: newColors.offBlack, + } }, primary: { main: { From 3632e1d1824477c0afc47cd3ce9ea91d3ad8656f Mon Sep 17 00:00:00 2001 From: Aryaman Sharma Date: Sat, 1 Mar 2025 10:30:51 +0530 Subject: [PATCH 02/30] Fix: Infrastructure Details Page Design --- src/Components/StatBox/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx index 71e01b4da..ab0411a68 100644 --- a/src/Components/StatBox/index.jsx +++ b/src/Components/StatBox/index.jsx @@ -3,7 +3,6 @@ import Image from "../Image"; import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils"; -import { lighten } from "@mui/material/styles"; /** * StatBox Component From 4820c1ee8a4fd1a92ac5847a8d8bc5ec6238405b Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 21:56:21 +0530 Subject: [PATCH 03/30] FIX-1848 made changes in the contents tab in the status page. --- .../Create/Components/Tabs/Content.jsx | 31 ++++++++----------- .../Create/Components/Tabs/SectionStack.jsx | 22 +++++++++++++ 2 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx diff --git a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx index 8eda4fe0a..6adf3cca9 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx @@ -1,13 +1,13 @@ // Components -import { Stack, Typography, Button } from "@mui/material"; +import { Stack, Typography } from "@mui/material"; import { TabPanel } from "@mui/lab"; -import ConfigBox from "../../../../../Components/ConfigBox"; import MonitorList from "../MonitorList"; import Search from "../../../../../Components/Inputs/Search"; import Checkbox from "../../../../../Components/Inputs/Checkbox"; // Utils import { useState } from "react"; import { useTheme } from "@emotion/react"; +import SectionStack from "./SectionStack"; const Content = ({ tabValue, form, @@ -34,14 +34,10 @@ const Content = ({ return ( - - - Status page servers - - You can add any number of servers that you monitor to your status page. You - can also reorder them for the best viewing experience. - - + - {" "} - - - Features - Show more details on the status page - - + + + - + diff --git a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx new file mode 100644 index 000000000..2eacf5ea5 --- /dev/null +++ b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx @@ -0,0 +1,22 @@ +import { Stack, Typography } from "@mui/material"; +import ConfigBox from "../../../../../Components/ConfigBox"; +import PropTypes from "prop-types"; + +// This can be used to add any extra/additional section/stacks on top of existing sections on the tab +const SectionStack = ({ title, description, children }) => ( + + + {title} + {description} + + {children} + +); + +SectionStack.propTypes = { + title: PropTypes.string.isRequired, // Title must be a string and is required + description: PropTypes.string.isRequired, // Description must be a string and is required + children: PropTypes.node.isRequired, +}; + +export default SectionStack; From b6726fba542256d6569a134f90f6a1ae75ef1979 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 22:34:33 +0530 Subject: [PATCH 04/30] FIX-1848 removed the unwanted box element as it does not serve any purpose. --- src/Pages/StatusPage/Create/Components/Tabs/Content.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx index 6adf3cca9..3a95a07b0 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx @@ -91,7 +91,6 @@ const Content = ({ - ); }; From d123bed87518c144c7eac0bc72ceb8034fcd3cef Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 22:43:35 +0530 Subject: [PATCH 05/30] FIX-1848 minor theme fixes. --- .../Create/Components/Tabs/SectionStack.jsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx index 2eacf5ea5..9708d8a85 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx @@ -1,17 +1,21 @@ import { Stack, Typography } from "@mui/material"; import ConfigBox from "../../../../../Components/ConfigBox"; import PropTypes from "prop-types"; +import { useTheme } from "@emotion/react"; // This can be used to add any extra/additional section/stacks on top of existing sections on the tab -const SectionStack = ({ title, description, children }) => ( - - - {title} - {description} - - {children} - -); +const SectionStack = ({ title, description, children }) => { + const theme = useTheme(); + return ( + + + {title} + {description} + + {children} + + ); +}; SectionStack.propTypes = { title: PropTypes.string.isRequired, // Title must be a string and is required From 4f6c29cd9af842f32b018284d64fb4dfbfe792ad Mon Sep 17 00:00:00 2001 From: Aditya Date: Sun, 2 Mar 2025 09:13:30 +0530 Subject: [PATCH 06/30] 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: Sun, 2 Mar 2025 12:51:36 +0530 Subject: [PATCH 07/30] FIX-1847 implemented the logic. --- src/Components/Inputs/Select/index.jsx | 15 +++++- .../Components/OptionsHeader/index.jsx | 49 ++++++++++++------- src/Utils/Input/utils.jsx | 27 ++++++++++ 3 files changed, 72 insertions(+), 19 deletions(-) create mode 100644 src/Utils/Input/utils.jsx diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx index f0a1d11c0..4be84b6e0 100644 --- a/src/Components/Inputs/Select/index.jsx +++ b/src/Components/Inputs/Select/index.jsx @@ -2,7 +2,7 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; - +import { renderTruncatedValue } from "../../../Utils/Input/utils"; import "./index.css"; /** @@ -50,8 +50,14 @@ const Select = ({ sx, name = "", labelControlSpacing = 2, + truncate = false, + maxTruncateLength = 15, }) => { const theme = useTheme(); + + const selectedItem = items.find((item) => item._id === value); + const displayName = selectedItem ? selectedItem.name : ""; + const itemStyles = { fontSize: "var(--env-var-font-size-medium)", color: theme.palette.primary.contrastTextTertiary, @@ -59,6 +65,10 @@ const Select = ({ margin: theme.spacing(2), }; + const renderShortValue = () => { + return renderTruncatedValue(displayName, truncate, maxTruncateLength, placeholder); + }; + return ( {placeholder && ( ; return ( @@ -27,17 +35,13 @@ const OptionsHeader = ({ direction="row" justifyContent="space-between" > - + - Incidents for + Incidents for: - + - + { + // If no value or the value is '0', return the placeholder + if (!displayName || displayName === "0") return placeholder; + + // Function to truncate the text with a dotted end + const truncateTextWithDottedEnds = (text, maxLength) => { + if (!text || text.length <= maxLength) return text; + return `${text.substring(0, maxLength)}...`; + }; + + // If truncation is enabled, return the truncated text with a title for full value + return truncate ? ( + {truncateTextWithDottedEnds(displayName, maxLength)} + ) : ( + displayName + ); +}; From 649b5ad2a4de368142f0fccaae75e2ce1949e50b Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sun, 2 Mar 2025 21:23:15 +0530 Subject: [PATCH 08/30] FIX-1848 removed the border and background colour. --- src/Pages/Account/index.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx index 00d805f34..48b0984f5 100644 --- a/src/Pages/Account/index.jsx +++ b/src/Pages/Account/index.jsx @@ -57,10 +57,6 @@ const Account = ({ open = "profile" }) => { className="account" px={theme.spacing(20)} py={theme.spacing(12)} - backgroundColor={theme.palette.primary.main} - border={1} - borderColor={theme.palette.primary.lowContrast} - borderRadius={theme.shape.borderRadius} > Date: Sun, 2 Mar 2025 22:59:00 +0530 Subject: [PATCH 09/30] FIX-1848 added theme for alerts specfic. --- src/Components/Alert/index.jsx | 4 ++-- src/Utils/Theme/constants.js | 10 ++++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/Components/Alert/index.jsx b/src/Components/Alert/index.jsx index a52761ca4..54fba31b8 100644 --- a/src/Components/Alert/index.jsx +++ b/src/Components/Alert/index.jsx @@ -36,8 +36,8 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { */ const text = theme.palette.secondary.contrastText; - const bg = theme.palette.secondary.main; - const border = theme.palette.secondary.contrastText; + const border = theme.palette.alert.border; + const bg = theme.palette.alert.background; const icon = icons[variant]; return ( diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index cd2b2e316..37c98274e 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -290,6 +290,16 @@ const newSemanticColors = { dark: "#C084FC", }, }, + alert: { + background: { + light: newColors.gray200, + dark: "#1c1c1c", + }, + border: { + light: newColors.blueGray600, + dark: "#515151", + }, + }, }; export { typographyLevels, semanticColors as colors, newSemanticColors }; From 641aeff08c30e0a0bc1f6c9ec2d1dd47b6f2ac7b Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sun, 2 Mar 2025 23:13:32 +0530 Subject: [PATCH 10/30] FIX-1484 added in new colors for extensibility and maintainability. --- src/Utils/Theme/constants.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 37c98274e..b0124c645 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -40,7 +40,6 @@ const paletteColors = { blueGray150: "#667085", blueGray200: "#475467", blueGray400: "#344054", - blueGray900: "#1c2130", blueBlueWave: "#1570EF", blue700: "#4E5BA6", purple300: "#664EFF", @@ -89,10 +88,12 @@ const newColors = { gray100: "#F3F3F3", gray200: "#EFEFEF", gray500: "#A2A3A3", + gray900: "#1c1c1c", blueGray50: "#E8F0FE", blueGray500: "#475467", blueGray600: "#344054", blueGray800: "#1C2130", + blueGray900: "#515151", blueBlueWave: "#1570EF", /* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */ green100: "#67cd78", @@ -293,11 +294,11 @@ const newSemanticColors = { alert: { background: { light: newColors.gray200, - dark: "#1c1c1c", + dark: newColors.gray900, }, border: { light: newColors.blueGray600, - dark: "#515151", + dark: newColors.blueGray900, }, }, }; From 16e51e570707527488dc9e3e7ff02a192a1cc981 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Sun, 2 Mar 2025 12:34:23 -0800 Subject: [PATCH 11/30] remove unused import --- .../DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx index ad36c91f9..684ae587b 100644 --- a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx +++ b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx @@ -1,6 +1,5 @@ import { useState, useEffect, useRef } from "react"; import { networkService } from "../../../../main"; -import { useSelector } from "react-redux"; const getRandomDevice = () => { const manufacturers = { From 89d2226fb82d6b849f9b3dc3027c41c862e4393a Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Sun, 2 Mar 2025 12:34:51 -0800 Subject: [PATCH 12/30] add env var check --- .../Monitors/Components/MonitorTable/index.jsx | 1 - .../Monitors/Hooks/useSubscribeToMonitors.jsx | 6 +++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Pages/DistributedUptime/Monitors/Components/MonitorTable/index.jsx b/src/Pages/DistributedUptime/Monitors/Components/MonitorTable/index.jsx index ebe0fb94a..fa8593cf1 100644 --- a/src/Pages/DistributedUptime/Monitors/Components/MonitorTable/index.jsx +++ b/src/Pages/DistributedUptime/Monitors/Components/MonitorTable/index.jsx @@ -20,7 +20,6 @@ const MonitorTable = ({ isLoading, monitors }) => { const theme = useTheme(); const navigate = useNavigate(); const { determineState } = useMonitorUtils(); - const headers = [ { id: "name", diff --git a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx index 7c498d753..6855c44c5 100644 --- a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx +++ b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx @@ -24,7 +24,11 @@ const useSubscribeToMonitors = (page, rowsPerPage) => { const cleanup = networkService.subscribeToDistributedUptimeMonitors({ teamId: user.teamId, limit: 25, - types: ["distributed_http"], + types: [ + typeof import.meta.env.VITE_DEPIN_TESTING === "undefined" + ? "distributed_http" + : "distributed_test", + ], page, rowsPerPage, filter: null, From 8b8b8d5ae86fc696b45a0461bb12069df1c7ee0f Mon Sep 17 00:00:00 2001 From: Mend Renovate Date: Mon, 3 Mar 2025 02:51:49 +0000 Subject: [PATCH 13/30] chore(deps): update dependency prettier to v3.5.3 --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 29e06bd5d..8c2d6e851 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15642,9 +15642,9 @@ } }, "node_modules/prettier": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.2.tgz", - "integrity": "sha512-lc6npv5PH7hVqozBR7lkBNOGXV9vMwROAPlumdBkX0wTbbzPu/U1hk5yL8p2pt4Xoc+2mkT8t/sow2YrV/M5qg==", + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", + "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", "dev": true, "license": "MIT", "bin": { From 8f9c38895328d75de9d4229684029419acea9219 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Mon, 3 Mar 2025 09:16:25 +0530 Subject: [PATCH 14/30] FIX-1848 addressed the comments in order to modify the theme implementation. --- src/Components/Alert/index.jsx | 4 ++-- .../Tabs/{SectionStack.jsx => ConfigStack.jsx} | 6 +++--- .../StatusPage/Create/Components/Tabs/Content.jsx | 10 +++++----- src/Utils/Theme/constants.js | 4 ++-- 4 files changed, 12 insertions(+), 12 deletions(-) rename src/Pages/StatusPage/Create/Components/Tabs/{SectionStack.jsx => ConfigStack.jsx} (86%) diff --git a/src/Components/Alert/index.jsx b/src/Components/Alert/index.jsx index 54fba31b8..0b32fe2b1 100644 --- a/src/Components/Alert/index.jsx +++ b/src/Components/Alert/index.jsx @@ -36,8 +36,8 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { */ const text = theme.palette.secondary.contrastText; - const border = theme.palette.alert.border; - const bg = theme.palette.alert.background; + const border = theme.palette.alert.contrastText; + const bg = theme.palette.alert.main; const icon = icons[variant]; return ( diff --git a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx b/src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx similarity index 86% rename from src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx rename to src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx index 9708d8a85..6eb64a519 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx @@ -4,7 +4,7 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; // This can be used to add any extra/additional section/stacks on top of existing sections on the tab -const SectionStack = ({ title, description, children }) => { +const ConfigStack = ({ title, description, children }) => { const theme = useTheme(); return ( @@ -17,10 +17,10 @@ const SectionStack = ({ title, description, children }) => { ); }; -SectionStack.propTypes = { +ConfigStack.propTypes = { title: PropTypes.string.isRequired, // Title must be a string and is required description: PropTypes.string.isRequired, // Description must be a string and is required children: PropTypes.node.isRequired, }; -export default SectionStack; +export default ConfigStack; diff --git a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx index 3a95a07b0..f6945ab5b 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx @@ -7,7 +7,7 @@ import Checkbox from "../../../../../Components/Inputs/Checkbox"; // Utils import { useState } from "react"; import { useTheme } from "@emotion/react"; -import SectionStack from "./SectionStack"; +import ConfigStack from "./ConfigStack"; const Content = ({ tabValue, form, @@ -34,7 +34,7 @@ const Content = ({ return ( - @@ -68,8 +68,8 @@ const Content = ({ setSelectedMonitors={handleMonitorsChange} /> - - + @@ -89,7 +89,7 @@ const Content = ({ onChange={handleFormChange} /> - + ); diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index b0124c645..a02827c7f 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -292,11 +292,11 @@ const newSemanticColors = { }, }, alert: { - background: { + main: { light: newColors.gray200, dark: newColors.gray900, }, - border: { + contrastText: { light: newColors.blueGray600, dark: newColors.blueGray900, }, From 696fb88c11213dc4fd06b51786a46b909fe42d34 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Mon, 3 Mar 2025 10:51:52 +0530 Subject: [PATCH 15/30] Fix: Infrastructure Details Page Design --- src/Components/Charts/CustomGauge/index.jsx | 5 ++--- src/Components/StatBox/index.jsx | 2 +- .../Details/Components/GaugeBoxes/Gauge.jsx | 5 ++--- src/Utils/Theme/constants.js | 12 ++++-------- 4 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/Components/Charts/CustomGauge/index.jsx b/src/Components/Charts/CustomGauge/index.jsx index 5c8481898..3c7e13610 100644 --- a/src/Components/Charts/CustomGauge/index.jsx +++ b/src/Components/Charts/CustomGauge/index.jsx @@ -62,7 +62,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = className="radial-chart" width={radius} height={radius} - sx={{ backgroundColor: theme.palette.accent.baseBackground, borderRadius: "50%" }} + sx={{ backgroundColor: theme.palette.primary.main, borderRadius: "50%" }} > {`${progressWithinRange.toFixed(1)}%`} diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx index ab0411a68..54a4af5ca 100644 --- a/src/Components/StatBox/index.jsx +++ b/src/Components/StatBox/index.jsx @@ -120,7 +120,7 @@ const StatBox = ({ )} {heading} - {subHeading} + {subHeading} ); diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index 3adf0066b..ee2ab5963 100644 --- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -15,9 +15,8 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => width: "40%", mb: 2, mt: 2, - pr: 4, - textAlign: 'right', - fontWeight: 600 + pr: 2, + textAlign: 'right' } return ( diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 7397e6f5a..81d83ecd7 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -139,14 +139,6 @@ const newSemanticColors = { light: newColors.offWhite, dark: newColors.offWhite, }, - base: { - light: newColors.lightBlueWave, - dark: newColors.lightBlueWave, - }, - baseBackground: { - light: paletteColors.white, - dark: newColors.offBlack, - } }, primary: { main: { @@ -180,6 +172,10 @@ const newSemanticColors = { light: newColors.gray200, dark: "#313131" /* newColors.blueGray600 */, }, + light: { + light: newColors.lightBlueWave, + dark: newColors.lightBlueWave, + }, contrastText: { light: newColors.blueGray600, dark: newColors.gray200, From b04fc145a220840d1f662d5155087e14f5fa9d91 Mon Sep 17 00:00:00 2001 From: Aditya Date: Mon, 3 Mar 2025 14:51:03 +0530 Subject: [PATCH 16/30] 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 15:43:42 +0000 Subject: [PATCH 17/30] fix(deps): update dependency maplibre-gl to v5.2.0 --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 29e06bd5d..f07fe329b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,7 +33,7 @@ "immutability-helper": "^3.1.1", "joi": "17.13.3", "jwt-decode": "^4.0.0", - "maplibre-gl": "5.1.1", + "maplibre-gl": "5.2.0", "mui-color-input": "^5.0.1", "react": "18.3.1", "react-dnd": "^16.0.1", @@ -14113,9 +14113,9 @@ } }, "node_modules/maplibre-gl": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.1.1.tgz", - "integrity": "sha512-0Z6ODzyFu/grwT6K1eIBpv6MZE4xnJD1AV+Yq1hPzOh/YCY36r9BlSaU7d7n2/HJOaoKOy0b2YF8cS4dD+iEVQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.2.0.tgz", + "integrity": "sha512-9zZKD0M80qtDsqBet+EDuAhoCeA/cnAuZAA0p3hcGKGbyjM/SH+R6wQvnBEgvJz9UhDynnkoKdUwhI+fUkHoXQ==", "license": "BSD-3-Clause", "dependencies": { "@mapbox/geojson-rewind": "^0.5.2", diff --git a/package.json b/package.json index 9684ff111..86d69c015 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "i18next": "^24.2.2", "immutability-helper": "^3.1.1", "joi": "17.13.3", - "maplibre-gl": "5.1.1", + "maplibre-gl": "5.2.0", "mui-color-input": "^5.0.1", "react": "18.3.1", "react-dnd": "^16.0.1", From e9ae301af7af6be45713f3a560eed8ccc2bed439 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Tue, 4 Mar 2025 00:58:59 +0530 Subject: [PATCH 18/30] Fix: Infrastructure Details Page Design --- .../Details/Components/GaugeBoxes/Gauge.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index ee2ab5963..916d3e8e9 100644 --- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -9,13 +9,13 @@ import PropTypes from "prop-types"; const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => { const theme = useTheme(); - const boxStyle = { + const valueStyle = { borderRadius: 2, backgroundColor: theme.palette.tertiary.main, width: "40%", - mb: 2, - mt: 2, - pr: 2, + mb: theme.spacing(2), + mt: theme.spacing(2), + pr: theme.spacing(2), textAlign: 'right' } @@ -54,7 +54,7 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => gap={theme.spacing(2)} > {metricOne} - {valueOne} + {valueOne} gap={theme.spacing(2)} > {metricTwo} - {valueTwo} + {valueTwo} From 76682cc1d94f563331bee17e3995977105d8fe7c Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 3 Mar 2025 11:29:43 -0800 Subject: [PATCH 19/30] group depin settings items --- src/Pages/Settings/index.jsx | 67 +++++++++++++++++++----------------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/src/Pages/Settings/index.jsx b/src/Pages/Settings/index.jsx index c33042772..4bbe2fbf9 100644 --- a/src/Pages/Settings/index.jsx +++ b/src/Pages/Settings/index.jsx @@ -219,7 +219,8 @@ const Settings = () => { {t("settingsGeneralSettings")} - {t("settingsDisplayTimezone")}- {t("settingsDisplayTimezoneDescription")} + {t("settingsDisplayTimezone")}-{" "} + {t("settingsDisplayTimezoneDescription")} @@ -242,17 +243,17 @@ const Settings = () => { - { + dispatch(setMode(e.target.value)); + }} + items={[ + { _id: "light", name: "Light" }, + { _id: "dark", name: "Dark" }, + ]} >