Merge branch 'develop' into feat/search-infra-moniters

client/src/Pages/Infrastructure/Create/index.jsx

@@ -1,20 +1,17 @@
 // React, Redux, Router
 import { useTheme } from "@emotion/react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 
 // Utility and Network
 import { infrastructureMonitorValidation } from "../../../Validation/validation";
-import {
-	createInfrastructureMonitor,
-	updateInfrastructureMonitor,
-} from "../../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
-import { useHardwareMonitorsFetch } from "../Details/Hooks/useHardwareMonitorsFetch";
+import { useFetchHardwareMonitorById } from "../../../Hooks/monitorHooks";
 import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
 import { useTranslation } from "react-i18next";
 import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications";
 import NotificationsConfig from "../../../Components/NotificationConfig";
+import { useUpdateMonitor, useCreateMonitor } from "../../../Hooks/monitorHooks";
 
 // MUI
 import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
@@ -55,9 +52,6 @@ const getAlertError = (errors) => {
 const CreateInfrastructureMonitor = () => {
 	const theme = useTheme();
 	const { user } = useSelector((state) => state.auth);
-	const monitorState = useSelector((state) => state.infrastructureMonitor);
-	const dispatch = useDispatch();
-	const navigate = useNavigate();
 	const { monitorId } = useParams();
 	const { t } = useTranslation();
 
@@ -65,9 +59,11 @@ const CreateInfrastructureMonitor = () => {
 	const isCreate = typeof monitorId === "undefined";
 
 	// Fetch monitor details if editing
-	const { monitor, isLoading, networkError } = useHardwareMonitorsFetch({ monitorId });
+	const [monitor, isLoading, networkError] = useFetchHardwareMonitorById({ monitorId });
 	const [notifications, notificationsAreLoading, notificationsError] =
 		useGetNotificationsByTeamId();
+	const [updateMonitor, isUpdating] = useUpdateMonitor();
+	const [createMonitor, isCreating] = useCreateMonitor();
 
 	// State
 	const [errors, setErrors] = useState({});
@@ -187,29 +183,18 @@ const CreateInfrastructureMonitor = () => {
 		};
 
 		form = {
+			...(isCreate ? {} : { _id: monitorId }),
 			...rest,
 			description: form.name,
-			teamId: user.teamId,
-			userId: user._id,
 			type: "hardware",
 			notifications: infrastructureMonitor.notifications,
 			thresholds,
 		};
 
 		// Handle create or update
-		const action = isCreate
-			? await dispatch(createInfrastructureMonitor({ monitor: form }))
-			: await dispatch(updateInfrastructureMonitor({ monitorId, monitor: form }));
-		if (action.meta.requestStatus === "fulfilled") {
-			createToast({
-				body: isCreate
-					? t("infrastructureMonitorCreated")
-					: t("infrastructureMonitorUpdated"),
-			});
-			navigate("/infrastructure");
-		} else {
-			createToast({ body: "Failed to save monitor." });
-		}
+		isCreate
+			? await createMonitor({ monitor: form, redirect: "/infrastructure" })
+			: await updateMonitor({ monitor: form, redirect: "/infrastructure" });
 	};
 
 	const onChange = (event) => {
@@ -448,7 +433,7 @@ const CreateInfrastructureMonitor = () => {
 						type="submit"
 						variant="contained"
 						color="accent"
-						loading={monitorState?.isLoading}
+						loading={isLoading || isUpdating || isCreating || notificationsAreLoading}
 					>
 						{t(isCreate ? "infrastructureCreateMonitor" : "infrastructureEditMonitor")}
 					</Button>

client/src/Pages/Infrastructure/Details/Components/StatusBoxes/index.jsx

@@ -4,14 +4,14 @@ import StatusBoxes from "../../../../../Components/StatusBoxes";
 import StatBox from "../../../../../Components/StatBox";
 
 //Utils
-import useUtils from "../../../../../Pages/Uptime/Monitors/Hooks/useUtils";
+import { useMonitorUtils } from "../../../../../Hooks/useMonitorUtils";
 import { useHardwareUtils } from "../../Hooks/useHardwareUtils";
 import { useTranslation } from "react-i18next";
 
 const InfraStatBoxes = ({ shouldRender, monitor }) => {
 	// Utils
 	const { formatBytes } = useHardwareUtils();
-	const { determineState } = useUtils();
+	const { determineState } = useMonitorUtils();
 	const { t } = useTranslation();
 
 	const { stats } = monitor ?? {};

client/src/Pages/Infrastructure/Details/Hooks/useHardwareMonitorsFetch.jsx

@@ -1,38 +0,0 @@
-import { useEffect, useState } from "react";
-import { networkService } from "../../../../main";
-
-const useHardwareMonitorsFetch = ({ monitorId, dateRange }) => {
-	// Abort early if creating monitor
-
-	const [isLoading, setIsLoading] = useState(true);
-	const [networkError, setNetworkError] = useState(false);
-	const [monitor, setMonitor] = useState(undefined);
-
-	useEffect(() => {
-		const fetchData = async () => {
-			try {
-				if (!monitorId) {
-					return { monitor: undefined, isLoading: false, networkError: undefined };
-				}
-				const response = await networkService.getHardwareDetailsByMonitorId({
-					monitorId: monitorId,
-					dateRange: dateRange,
-				});
-				setMonitor(response.data.data);
-			} catch (error) {
-				setNetworkError(true);
-			} finally {
-				setIsLoading(false);
-			}
-		};
-		fetchData();
-	}, [monitorId, dateRange]);
-
-	return {
-		isLoading,
-		networkError,
-		monitor,
-	};
-};
-
-export { useHardwareMonitorsFetch };

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

@@ -11,7 +11,7 @@ import GenericFallback from "../../../Components/GenericFallback";
 // Utils
 import { useTheme } from "@emotion/react";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
-import { useHardwareMonitorsFetch } from "./Hooks/useHardwareMonitorsFetch";
+import { useFetchHardwareMonitorById } from "../../../Hooks/monitorHooks";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
@@ -33,7 +33,7 @@ const InfrastructureDetails = () => {
 	const { t } = useTranslation();
 	const isAdmin = useIsAdmin();
 
-	const { isLoading, networkError, monitor } = useHardwareMonitorsFetch({
+	const [monitor, isLoading, networkError] = useFetchHardwareMonitorById({
 		monitorId,
 		dateRange,
 	});

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable/index.jsx

@@ -12,7 +12,7 @@ import CustomGauge from "../../../../../Components/Charts/CustomGauge";
 
 // Utils
 import { useTheme } from "@emotion/react";
-import useUtils from "../../../../Uptime/Monitors/Hooks/useUtils";
+import { useMonitorUtils } from "../../../../../Hooks/useMonitorUtils";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
@@ -27,7 +27,7 @@ const MonitorsTable = ({
 	// Utils
 	const theme = useTheme();
 	const { t } = useTranslation();
-	const { determineState } = useUtils();
+	const { determineState } = useMonitorUtils();
 	const navigate = useNavigate();
 
 	// Handlers
@@ -94,6 +94,7 @@ const MonitorsTable = ({
 					monitor={row}
 					isAdmin={isAdmin}
 					updateCallback={handleActionMenuDelete}
+					isLoading={isLoading}
 				/>
 			),
 		},
@@ -151,7 +152,7 @@ const MonitorsTable = ({
 };
 
 MonitorsTable.propTypes = {
-	shouldRender: PropTypes.bool,
+	isLoading: PropTypes.bool,
 	monitors: PropTypes.array,
 	isAdmin: PropTypes.bool,
 	handleActionMenuDelete: PropTypes.func,

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTableMenu/index.jsx

@@ -1,7 +1,6 @@
 /* TODO I basically copied and pasted this component from the actionsMenu. Check how we can make it reusable */
 
 import { useRef, useState } from "react";
-import { useSelector } from "react-redux";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { createToast } from "../../../../../Utils/toastUtils";
@@ -30,7 +29,6 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const theme = useTheme();
-	const { isLoading } = useSelector((state) => state.uptimeMonitors);
 
 	const openMenu = (e) => {
 		e.stopPropagation();
@@ -117,7 +115,6 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 				onCancel={cancelRemove}
 				confirmationButtonLabel="Delete"
 				onConfirm={handleRemove}
-				isLoading={isLoading}
 				modelTitle="modal-delete-monitor"
 				modelDescription="delete-monitor-confirmation"
 			/>

client/src/Pages/Infrastructure/Monitors/Hooks/useMonitorFetch.jsx

@@ -1,46 +0,0 @@
-import { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
-import { networkService } from "../../../../main";
-import { createToast } from "../../../../Utils/toastUtils";
-
-const useMonitorFetch = ({ page, field, filter, rowsPerPage, updateTrigger }) => {
-	// Redux state
-	const { user } = useSelector((state) => state.auth);
-
-	// Local state
-	const [isLoading, setIsLoading] = useState(true);
-	const [networkError, setNetworkError] = useState(false);
-	const [monitors, setMonitors] = useState(undefined);
-	const [summary, setSummary] = useState(undefined);
-
-	useEffect(() => {
-		const fetchMonitors = async () => {
-			try {
-				const response = await networkService.getMonitorsByTeamId({
-					teamId: user.teamId,
-					limit: 1,
-					field: field,
-					filter: filter,
-					types: ["hardware"],
-					page: page,
-					rowsPerPage: rowsPerPage,
-				});
-				setMonitors(response?.data?.data?.filteredMonitors ?? []);
-				setSummary(response?.data?.data?.summary ?? {});
-			} catch (error) {
-				setNetworkError(true);
-				createToast({
-					body: error.message,
-				});
-			} finally {
-				setIsLoading(false);
-			}
-		};
-
-		fetchMonitors();
-	}, [page, field, filter, rowsPerPage, user.teamId, updateTrigger]);
-
-	return { monitors, summary, isLoading, networkError };
-};
-
-export { useMonitorFetch };

client/src/Pages/Infrastructure/Monitors/index.jsx

@@ -11,15 +11,18 @@ import Filter from "./Components/Filters";
 import SearchComponent from "../../Uptime/Monitors/Components/SearchComponent";
 // Utils
 import { useTheme } from "@emotion/react";
-import { useMonitorFetch } from "./Hooks/useMonitorFetch";
 import { useState } from "react";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useTranslation } from "react-i18next";
+import { useFetchMonitorsByTeamId } from "../../../Hooks/monitorHooks";
 // Constants
+const TYPES = ["hardware"];
 const BREADCRUMBS = [{ name: `infrastructure`, path: "/infrastructure" }];
 
 const InfrastructureMonitors = () => {
 	// Redux state
+
+	// Local state
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(5);
 	const [updateTrigger, setUpdateTrigger] = useState(false);
@@ -53,7 +56,9 @@ const InfrastructureMonitors = () => {
 
 	const field = toFilterStatus !== undefined ? "status" : undefined;
 
-	const { monitors, summary, isLoading, networkError } = useMonitorFetch({
+	const [monitors, summary, isLoading, networkError] = useFetchMonitorsByTeamId({
+		limit: 1,
+		types: TYPES,
 		page,
 		field: field,
 		filter: toFilterStatus ?? search,
@@ -119,7 +124,7 @@ const InfrastructureMonitors = () => {
 			</Stack>
 
 			<MonitorsTable
-				shouldRender={!isLoading}
+				isLoading={isLoading}
 				monitors={monitors}
 				isAdmin={isAdmin}
 				handleActionMenuDelete={handleActionMenuDelete}