Merge remote-tracking branch 'upstream/develop' into feat/60-min-chart

Client/src/Pages/Account/index.jsx

@@ -29,7 +29,7 @@ const Account = ({ open = "profile" }) => {
   if (!user.role.includes("admin")) tabList = ["Profile", "Password"];
 
   return (
-    <Box className="account">
+    <Box className="account" pt={theme.gap.xl}>
       <TabContext value={tab}>
         <Box
           sx={{

Client/src/Pages/Incidents/index.jsx

@@ -78,7 +78,7 @@ const Incidents = () => {
   };
 
   return (
-    <Stack className="incidents" gap={theme.gap.large}>
+    <Stack className="incidents" pt={theme.gap.xl} gap={theme.gap.large}>
       {loading ? (
         <SkeletonLayout />
       ) : (

Client/src/Pages/Integrations/index.jsx

@@ -108,7 +108,7 @@ const Integrations = () => {
   ];
 
   return (
-    <Stack className="integrations" gap={theme.gap.xs}>
+    <Stack className="integrations" pt={theme.gap.xl} gap={theme.gap.xs}>
       <Typography component="h1">Integrations</Typography>
       <Typography mb={theme.gap.large}>
         Connect BlueWave Uptime to your favorite service.

Client/src/Pages/Monitors/Configure/index.css

@@ -75,7 +75,7 @@
 .configure-monitor-form {
   display: flex;
   flex-direction: column;
-  gap: var(--env-var-spacing-4);
+  gap: var(--env-var-spacing-2);
 }
 
 body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root,

Client/src/Pages/Monitors/CreateMonitor/index.css

@@ -59,7 +59,7 @@
 .create-monitor-form {
   display: flex;
   flex-direction: column;
-  gap: var(--env-var-spacing-4);
+  gap: var(--env-var-spacing-2);
 }
 
 .create-monitor .MuiStack-root .MuiButtonGroup-root button {

Client/src/Pages/Monitors/index.jsx

@@ -120,12 +120,11 @@ const Monitors = () => {
   };
   const closeMenu = () => {
     setAnchorEl(null);
-    setActions({});
   };
 
   const [isOpen, setIsOpen] = useState(false);
   const openRemove = () => {
-    setAnchorEl(null);
+    closeMenu();
     setIsOpen(true);
   };
   const handleRemove = async (event) => {
@@ -220,7 +219,11 @@ const Monitors = () => {
                 aria-label="monitor actions"
                 onClick={(event) => {
                   event.stopPropagation();
-                  openMenu(event, monitor._id, monitor.url);
+                  openMenu(
+                    event,
+                    monitor._id,
+                    monitor.type === "ping" ? null : monitor.url
+                  );
                 }}
                 sx={{
                   "&:focus": {
@@ -240,7 +243,7 @@ const Monitors = () => {
   let loading = monitorState.isLoading && monitorState.monitors.length === 0;
 
   return (
-    <Stack className="monitors" gap={theme.gap.large}>
+    <Stack className="monitors" pt={theme.gap.xl} gap={theme.gap.large}>
       {loading ? (
         <SkeletonLayout />
       ) : (
@@ -250,7 +253,10 @@ const Monitors = () => {
             justifyContent="space-between"
             alignItems="center"
           >
-            <Typography component="h1">
+            <Typography
+              component="h1"
+              sx={{ lineHeight: 1, alignSelf: "flex-end" }}
+            >
               Hello, {authState.user.firstName}
             </Typography>
             {monitorState.monitors?.length !== 0 && (
@@ -299,7 +305,8 @@ const Monitors = () => {
               </Stack>
               <Stack
                 gap={theme.gap.large}
-                p={theme.gap.xl}
+                p={theme.gap.lgplus}
+                flex={1}
                 border={1}
                 borderColor={theme.palette.otherColors.graishWhite}
                 backgroundColor={theme.palette.otherColors.white}
@@ -326,13 +333,17 @@ const Monitors = () => {
         open={Boolean(anchorEl)}
         onClose={closeMenu}
       >
-        <MenuItem
-          onClick={() => {
-            window.open(actions.url, "_blank", "noreferrer");
-          }}
-        >
-          Open site
-        </MenuItem>
+        {actions.url !== null ? (
+          <MenuItem
+            onClick={() => {
+              window.open(actions.url, "_blank", "noreferrer");
+            }}
+          >
+            Open site
+          </MenuItem>
+        ) : (
+          ""
+        )}
         <MenuItem onClick={() => navigate(`/monitors/${actions.id}`)}>
           Details
         </MenuItem>

Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx

@@ -106,7 +106,7 @@ const CreatePageSpeed = () => {
         onClick={() => navigate("/pagespeed")}
         sx={{
           backgroundColor: theme.palette.otherColors.fillGray,
-          mb: theme.gap.large,
+          mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
             mr: theme.gap.small,
@@ -122,8 +122,6 @@ const CreatePageSpeed = () => {
           display: "flex",
           flexDirection: "column",
           gap: theme.gap.large,
-          // TODO
-          maxWidth: "1000px",
         }}
       >
         <Typography component="h1">Create a page speed monitor</Typography>

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -299,7 +299,7 @@ const PageSpeedDetails = () => {
   const [expand, setExpand] = useState(false);
 
   let loading = Object.keys(monitor).length === 0;
-
+  const data = monitor?.checks ? [...monitor.checks].reverse() : [];
   return (
     <Stack className="page-speed-details" gap={theme.gap.large}>
       {loading ? (
@@ -363,7 +363,7 @@ const PageSpeedDetails = () => {
           <Stack
             direction="row"
             justifyContent="space-between"
-            gap={theme.gap.xl}
+            gap={theme.gap.large}
             flexWrap="wrap"
           >
             <StatBox
@@ -406,10 +406,10 @@ const PageSpeedDetails = () => {
           </Stack>
           <Typography component="h2">Score history</Typography>
           <Box height="300px">
-            <PageSpeedLineChart pageSpeedChecks={monitor?.checks?.reverse()} />
+            <PageSpeedLineChart pageSpeedChecks={data} />
           </Box>
           <Typography component="h2">Performance report</Typography>
-          <Stack direction="row" alignItems="center" overflow="hidden">
+          <Stack direction="row" alignItems="center" overflow="hidden" flex={1}>
             <Stack
               alignItems="center"
               textAlign="center"

Client/src/Pages/PageSpeed/index.jsx

@@ -136,7 +136,7 @@ const PageSpeed = () => {
   let isActuallyLoading = isLoading && monitors.length === 0;
 
   return (
-    <Box className="page-speed">
+    <Box className="page-speed" pt={theme.gap.xl}>
       {isActuallyLoading ? (
         <SkeletonLayout />
       ) : monitors?.length !== 0 ? (