Merge branch 'develop' into fix/fe/monitors-rename

Client/src/Components/Inputs/Search/index.jsx

@@ -93,6 +93,9 @@ const Search = ({
 								{
 									borderColor: theme.palette.border.light,
 								},
+							"& .MuiOutlinedInput-root": {
+								paddingY: 0,
+							},
 						}}
 					/>
 					{error && (

Client/src/Components/Label/index.jsx

@@ -141,9 +141,9 @@ const StatusLabel = ({ status, text, customStyles }) => {
 			borderColor: theme.palette.warning.light,
 		},
 		pending: {
-			dotColor: theme.palette.warning.main,
-			bgColor: theme.palette.warning.dark,
-			borderColor: theme.palette.warning.light,
+			dotColor: theme.palette.text.secondary,
+			bgColor: theme.palette.background.main,
+			borderColor: theme.palette.border.dark,
 		},
 		"cannot resolve": {
 			dotColor: theme.palette.unresolved.main,

Client/src/Pages/Auth/Register/StepThree/index.jsx

@@ -31,7 +31,6 @@ function StepThree({ onSubmit, onBack }) {
 	}, []);
 
 	const { handleChange, feedbacks, form, errors } = useValidatePassword();
-	console.log(errors);
 	return (
 		<>
 			<Stack

Client/src/Pages/Infrastructure/CreateMonitor/index.jsx

@@ -303,7 +303,6 @@ const CreateInfrastructureMonitor = () => {
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>
-						<Typography component="p">When there is a new incident,</Typography>
 						<Checkbox
 							id="notify-email-default"
 							label={`Notify via email (to ${user.email})`}

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

@@ -283,7 +283,7 @@ const InfrastructureDetails = () => {
 			{
 				type: "memory",
 				value: decimalToPercentage(memoryUsagePercent),
-				heading: "Memory Usage",
+				heading: "Memory usage",
 				metricOne: "Used",
 				valueOne: formatBytes(memoryUsedBytes),
 				metricTwo: "Total",
@@ -292,7 +292,7 @@ const InfrastructureDetails = () => {
 			{
 				type: "cpu",
 				value: decimalToPercentage(cpuUsagePercent),
-				heading: "CPU Usage",
+				heading: "CPU usage",
 				metricOne: "Cores",
 				valueOne: cpuPhysicalCores ?? 0,
 				metricTwo: "Frequency",
@@ -364,7 +364,7 @@ const InfrastructureDetails = () => {
 				heading: "Memory usage",
 				strokeColor: theme.palette.primary.main,
 				gradientStartColor: theme.palette.primary.main,
-				yLabel: "Memory Usage",
+				yLabel: "Memory usage",
 				yDomain: [0, 1],
 				yTick: <PercentTick />,
 				xTick: <TzTick />,
@@ -372,7 +372,7 @@ const InfrastructureDetails = () => {
 					<InfrastructureTooltip
 						dotColor={theme.palette.primary.main}
 						yKey={"memory.usage_percent"}
-						yLabel={"Memory Usage"}
+						yLabel={"Memory usage"}
 					/>
 				),
 			},
@@ -383,7 +383,7 @@ const InfrastructureDetails = () => {
 				heading: "CPU usage",
 				strokeColor: theme.palette.success.main,
 				gradientStartColor: theme.palette.success.main,
-				yLabel: "CPU Usage",
+				yLabel: "CPU usage",
 				yDomain: [0, 1],
 				yTick: <PercentTick />,
 				xTick: <TzTick />,
@@ -391,7 +391,7 @@ const InfrastructureDetails = () => {
 					<InfrastructureTooltip
 						dotColor={theme.palette.success.main}
 						yKey={"cpu.usage_percent"}
-						yLabel={"CPU Usage"}
+						yLabel={"CPU usage"}
 					/>
 				),
 			},

Client/src/Pages/Infrastructure/index.jsx

@@ -191,31 +191,26 @@ function Infrastructure() {
 				<SkeletonLayout />
 			) : monitorState.monitors?.length !== 0 ? (
 				<Stack gap={theme.spacing(8)}>
-					<Breadcrumbs list={BREADCRUMBS} />
-					<Stack
-						direction="row"
-						sx={{
-							justifyContent: "end",
-							alignItems: "center",
-							gap: "1rem",
-							flexWrap: "wrap",
-							marginBottom: "2rem",
-						}}
-					>
-						{/* 
-				This will be removed from here, but keeping the commented code to remind me to add a max width to the greeting component
-				<Box style={{ maxWidth: "65ch" }}>
-					<Greeting type="uptime" />
-				</Box> */}
-						<Button
-							variant="contained"
-							color="primary"
-							onClick={navigateToCreate}
-							sx={{ fontWeight: 500 }}
+					<Box>
+						<Breadcrumbs list={BREADCRUMBS} />
+						<Stack
+							direction="row"
+							justifyContent="end"
+							alignItems="center"
+							mt={theme.spacing(5)}
 						>
-							Create infrastructure monitor
-						</Button>
-					</Stack>
+							{isAdmin && (
+								<Button
+									variant="contained"
+									color="primary"
+									onClick={navigateToCreate}
+									sx={{ fontWeight: 500, whiteSpace: "nowrap" }}
+								>
+									Create new
+								</Button>
+							)}
+						</Stack>
+					</Box>
 					<Stack
 						sx={{
 							gap: "1rem",

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

@@ -301,14 +301,6 @@ const CreatePageSpeed = () => {
 					</Box>
 					<Stack gap={theme.spacing(6)}>
 						<Typography component="p">When there is a new incident,</Typography>
-						<Checkbox
-							id="notify-sms"
-							label="Notify via SMS (coming soon)"
-							isChecked={false}
-							value=""
-							onChange={() => logger.warn("disabled")}
-							isDisabled={true}
-						/>
 						<Checkbox
 							id="notify-email-default"
 							label={`Notify via email (to ${user.email})`}
@@ -318,14 +310,6 @@ const CreatePageSpeed = () => {
 							value={user?.email}
 							onChange={(event) => handleChange(event)}
 						/>
-						<Checkbox
-							id="notify-email"
-							label="Also notify via email to multiple addresses (coming soon)"
-							isChecked={false}
-							value=""
-							onChange={() => logger.warn("disabled")}
-							isDisabled={true}
-						/>
 						{monitor.notifications.some(
 							(notification) => notification.type === "emails"
 						) ? (

Client/src/Pages/PageSpeed/index.jsx

@@ -11,7 +11,7 @@ import Breadcrumbs from "../../Components/Breadcrumbs";
 import SkeletonLayout from "./skeleton";
 import Card from "./card";
 import { networkService } from "../../main";
-
+import { Heading } from "../../Components/Heading";
 const PageSpeed = ({ isAdmin }) => {
 	const theme = useTheme();
 	const dispatch = useDispatch();
@@ -20,6 +20,7 @@ const PageSpeed = ({ isAdmin }) => {
 	const { user, authToken } = useSelector((state) => state.auth);
 	const [isLoading, setIsLoading] = useState(true);
 	const [monitors, setMonitors] = useState([]);
+	const [monitorCount, setMonitorCount] = useState(0);
 	useEffect(() => {
 		dispatch(getPageSpeedByTeamId(authToken));
 	}, [authToken, dispatch]);
@@ -44,6 +45,7 @@ const PageSpeed = ({ isAdmin }) => {
 				});
 				if (res?.data?.data?.monitors) {
 					setMonitors(res.data.data.monitors);
+					setMonitorCount(res.data.data.monitorCount);
 				}
 			} catch (error) {
 				console.log(error);
@@ -53,7 +55,7 @@ const PageSpeed = ({ isAdmin }) => {
 		};
 
 		fetchMonitors();
-	}, []);
+	}, [authToken, user.teamId]);
 
 	// will show skeletons only on initial load
 	// since monitor state is being added to redux persist, there's no reason to display skeletons on every render
@@ -76,8 +78,8 @@ const PageSpeed = ({ isAdmin }) => {
 			{isActuallyLoading ? (
 				<SkeletonLayout />
 			) : monitors?.length !== 0 ? (
-				<Box>
-					<Box mb={theme.spacing(12)}>
+				<Stack gap={theme.spacing(8)}>
+					<Box>
 						<Breadcrumbs list={[{ name: `pagespeed`, path: "/pagespeed" }]} />
 						<Stack
 							direction="row"
@@ -90,13 +92,34 @@ const PageSpeed = ({ isAdmin }) => {
 									variant="contained"
 									color="primary"
 									onClick={() => navigate("/pagespeed/create")}
-									sx={{ whiteSpace: "nowrap" }}
+									sx={{ fontWeight: 500, whiteSpace: "nowrap" }}
 								>
 									Create new
 								</Button>
 							)}
 						</Stack>
 					</Box>
+					<Stack
+						direction="row"
+						sx={{
+							alignItems: "center",
+							gap: ".25rem",
+							flexWrap: "wrap",
+						}}
+					>
+						<Heading component="h2">PageSpeed monitors</Heading>
+						{/* TODO Correct the class current-monitors-counter, there are some unnecessary things there	 */}
+						<Box
+							component="span"
+							className="current-monitors-counter"
+							color={theme.palette.text.primary}
+							border={1}
+							borderColor={theme.palette.border.light}
+							backgroundColor={theme.palette.background.accent}
+						>
+							{monitorCount}
+						</Box>
+					</Stack>
 					<Grid
 						container
 						spacing={theme.spacing(12)}
@@ -108,7 +131,7 @@ const PageSpeed = ({ isAdmin }) => {
 							/>
 						))}
 					</Grid>
-				</Box>
+				</Stack>
 			) : (
 				<Fallback
 					title="pagespeed monitor"

Client/src/Pages/Uptime/Configure/index.jsx

@@ -282,7 +282,7 @@ const Configure = () => {
 											},
 										}}
 									>
-										Editting...
+										Editing...
 									</Typography>
 								</Stack>
 							</Box>

Client/src/Pages/Uptime/CreateUptime/index.jsx

@@ -345,8 +345,6 @@ const CreateMonitor = () => {
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>
-						<Typography component="p">When there is a new incident,</Typography>
-
 						<Checkbox
 							id="notify-email-default"
 							label={`Notify via email (to ${user.email})`}

Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx

@@ -7,7 +7,7 @@ import useDebounce from "../../../../Utils/debounce";
 import PropTypes from "prop-types";
 import { Heading } from "../../../../Components/Heading";
 
-const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => {
+const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) => {
 	const theme = useTheme();
 	const [search, setSearch] = useState("");
 	const [isSearching, setIsSearching] = useState(false);
@@ -55,12 +55,14 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => {
 				filter={debouncedFilter}
 				setIsSearching={setIsSearching}
 				isSearching={isSearching}
+				handlePause={handlePause}
 			/>
 		</Box>
 	);
 };
 
 CurrentMonitoring.propTypes = {
+	handlePause: PropTypes.func,
 	totalMonitors: PropTypes.number,
 	monitors: PropTypes.array,
 	isAdmin: PropTypes.bool,

Client/src/Pages/Uptime/Home/UptimeTable/index.jsx

@@ -32,7 +32,7 @@ import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
 
 import { Pagination } from "../../../Infrastructure/components/TablePagination";
 
-const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
+const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePause }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
 	const dispatch = useDispatch();
@@ -48,7 +48,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
 	const [sort, setSort] = useState({});
 	const prevFilter = useRef(filter);
 
-	const handleActionMenuDelete = () => {
+	const handleRowUpdate = () => {
 		setUpdateTrigger((prev) => !prev);
 	};
 
@@ -297,7 +297,8 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
 											<ActionsMenu
 												monitor={monitor}
 												isAdmin={isAdmin}
-												updateCallback={handleActionMenuDelete}
+												updateRowCallback={handleRowUpdate}
+												pauseCallback={handlePause}
 											/>
 										</TableCell>
 									</TableRow>
@@ -325,6 +326,7 @@ MonitorTable.propTypes = {
 	filter: PropTypes.string,
 	setIsSearching: PropTypes.func,
 	isSearching: PropTypes.bool,
+	setMonitorUpdateTrigger: PropTypes.func,
 };
 
 const MemoizedMonitorTable = memo(MonitorTable);

Client/src/Pages/Uptime/Home/actionsMenu.jsx

@@ -14,7 +14,7 @@ import Settings from "../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import Dialog from "../../../Components/Dialog";
 
-const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
+const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) => {
 	const [anchorEl, setAnchorEl] = useState(null);
 	const [actions, setActions] = useState({});
 	const [isOpen, setIsOpen] = useState(false);
@@ -47,9 +47,9 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
 				pauseUptimeMonitor({ authToken, monitorId: monitor._id })
 			);
 			if (pauseUptimeMonitor.fulfilled.match(action)) {
-				updateCallback();
 				const state = action?.payload?.data.isActive === false ? "paused" : "resumed";
 				createToast({ body: `Monitor ${state} successfully.` });
+				pauseCallback();
 			} else {
 				throw new Error(action?.error?.message ?? "Failed to pause monitor.");
 			}
@@ -219,7 +219,8 @@ ActionsMenu.propTypes = {
 		isActive: PropTypes.bool,
 	}).isRequired,
 	isAdmin: PropTypes.bool,
-	updateCallback: PropTypes.func,
+	updateRowCallback: PropTypes.func,
+	pauseCallback: PropTypes.func,
 };
 
 export default ActionsMenu;

Client/src/Pages/Uptime/Home/index.jsx

@@ -1,5 +1,5 @@
 import "./index.css";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { getUptimeMonitorsByTeamId } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate } from "react-router-dom";
@@ -21,10 +21,15 @@ const UptimeMonitors = ({ isAdmin }) => {
 	const uptimeMonitorsState = useSelector((state) => state.uptimeMonitors);
 	const authState = useSelector((state) => state.auth);
 	const dispatch = useDispatch({});
+	const [monitorUpdateTrigger, setMonitorUpdateTrigger] = useState(false);
+
+	const handlePause = () => {
+		setMonitorUpdateTrigger((prev) => !prev);
+	};
 
 	useEffect(() => {
 		dispatch(getUptimeMonitorsByTeamId(authState.authToken));
-	}, [authState.authToken, dispatch]);
+	}, [authState.authToken, dispatch, monitorUpdateTrigger]);
 
 	//TODO bring fetching to this component, like on pageSpeed
 
@@ -57,7 +62,7 @@ const UptimeMonitors = ({ isAdmin }) => {
 							onClick={() => {
 								navigate("/uptime/create");
 							}}
-							sx={{ fontWeight: 500 }}
+							sx={{ fontWeight: 500, whiteSpace: "nowrap" }}
 						>
 							Create new
 						</Button>
@@ -94,6 +99,7 @@ const UptimeMonitors = ({ isAdmin }) => {
 								isAdmin={isAdmin}
 								monitors={uptimeMonitorsState.monitorsSummary.monitors}
 								totalMonitors={totalMonitors}
+								handlePause={handlePause}
 							/>
 						</>
 					)}