Merge latest changes

Client/src/Pages/Incidents/index.jsx

@@ -25,17 +25,20 @@ const Incidents = () => {
   useEffect(() => {
     const fetchMonitors = async () => {
       setLoading(true);
-      const res = await networkService.getMonitorsByTeamId(
-        authState.authToken,
-        authState.user.teamId,
-        -1,
-        null,
-        null,
-        null,
-        null,
-        null,
-        null
-      );
+      const res = await networkService.getMonitorsByTeamId({
+        authToken: authState.authToken,
+        teamId: authState.user.teamId,
+        limit: -1,
+        types: null,
+        status: null,
+        checkOrder: null,
+        normalize: null,
+        page: null,
+        rowsPerPage: null,
+        filter: null,
+        field: null,
+        order: null,
+      });
       // Reduce to a lookup object for 0(1) lookup
       if (res?.data?.data?.monitors?.length > 0) {
         const monitorLookup = res.data.data.monitors.reduce((acc, monitor) => {

Client/src/Pages/Monitors/Details/styled.jsx

@@ -40,8 +40,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
     fill: theme.palette.text.tertiary,
   },
   "& path": {
-    transition: "fill 300ms ease",
-    transition: "stroke-width 400ms ease",
+    transition: "fill 300ms ease, stroke-width 400ms ease",
   },
 }));
 

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -14,6 +14,7 @@ import {
   Button,
 } from "@mui/material";
 import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
 
 import { setRowsPerPage } from "../../../../Features/UI/uiSlice";
 import { useState, useEffect } from "react";
@@ -48,6 +49,7 @@ import useUtils from "../../utils";
  */
 const TablePaginationActions = (props) => {
   const { count, page, rowsPerPage, onPageChange } = props;
+
   const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
   };
@@ -118,6 +120,7 @@ const MonitorTable = ({ isAdmin }) => {
   const [monitorCount, setMonitorCount] = useState(0);
   const authState = useSelector((state) => state.auth);
   const [updateTrigger, setUpdateTrigger] = useState(false);
+  const [sort, setSort] = useState({});
 
   const handleActionMenuDelete = () => {
     setUpdateTrigger((prev) => !prev);
@@ -142,17 +145,20 @@ const MonitorTable = ({ isAdmin }) => {
       try {
         const { authToken } = authState;
         const user = jwtDecode(authToken);
-        const res = await networkService.getMonitorsByTeamId(
+        const res = await networkService.getMonitorsByTeamId({
           authToken,
-          user.teamId,
-          25,
-          ["http", "ping"],
-          null,
-          "desc",
-          true,
-          page,
-          rowsPerPage
-        );
+          teamId: user.teamId,
+          limit: 25,
+          types: ["http", "ping"],
+          status: null,
+          checkOrder: "desc",
+          normalize: true,
+          page: page,
+          rowsPerPage: rowsPerPage,
+          filter: null,
+          field: sort.field,
+          order: sort.order,
+        });
         setMonitors(res?.data?.data?.monitors ?? []);
         setMonitorCount(res?.data?.data?.monitorCount ?? 0);
       } catch (error) {
@@ -172,19 +178,80 @@ const MonitorTable = ({ isAdmin }) => {
     return `${start} - ${end}`;
   };
 
+  const handleSort = async (field) => {
+    let order = "";
+    if (sort.field !== field) {
+      order = "desc";
+    } else {
+      order = sort.order === "asc" ? "desc" : "asc";
+    }
+    setSort({ field, order });
+
+    const { authToken } = authState;
+    const user = jwtDecode(authToken);
+
+    const res = await networkService.getMonitorsByTeamId({
+      authToken,
+      teamId: user.teamId,
+      limit: 25,
+      types: ["http", "ping"],
+      status: null,
+      checkOrder: "desc",
+      normalize: true,
+      page: page,
+      rowsPerPage: rowsPerPage,
+      filter: null,
+      field: field,
+      order: order,
+    });
+    setMonitors(res?.data?.data?.monitors ?? []);
+    setMonitorCount(res?.data?.data?.monitorCount ?? 0);
+  };
+
   return (
     <>
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
             <TableRow>
-              <TableCell>Host</TableCell>
-              <TableCell>
+              <TableCell
+                sx={{ cursor: "pointer" }}
+                onClick={() => handleSort("name")}
+              >
+                <Box>
+                  Host
+                  <span
+                    style={{
+                      visibility: sort.field === "name" ? "visible" : "hidden",
+                    }}
+                  >
+                    {sort.order === "asc" ? (
+                      <ArrowUpwardRoundedIcon />
+                    ) : (
+                      <ArrowDownwardRoundedIcon />
+                    )}
+                  </span>
+                </Box>
+              </TableCell>
+              <TableCell
+                sx={{ cursor: "pointer" }}
+                onClick={() => handleSort("status")}
+              >
                 {" "}
                 <Box width="max-content">
+                  {" "}
                   Status
-                  <span>
-                    <ArrowDownwardRoundedIcon />
+                  <span
+                    style={{
+                      visibility:
+                        sort.field === "status" ? "visible" : "hidden",
+                    }}
+                  >
+                    {sort.order === "asc" ? (
+                      <ArrowUpwardRoundedIcon />
+                    ) : (
+                      <ArrowDownwardRoundedIcon />
+                    )}
                   </span>
                 </Box>
               </TableCell>

Client/src/Pages/PageSpeed/index.jsx

@@ -29,17 +29,20 @@ const PageSpeed = ({ isAdmin }) => {
     const fetchMonitors = async () => {
       try {
         setIsLoading(true);
-        const res = await networkService.getMonitorsByTeamId(
-          authToken,
-          user.teamId,
-          10,
-          ["pagespeed"],
-          null,
-          "desc",
-          true,
-          null,
-          null
-        );
+        const res = await networkService.getMonitorsByTeamId({
+          authToken: authToken,
+          teamId: user.teamId,
+          limit: 10,
+          types: ["pagespeed"],
+          status: null,
+          checkOrder: "desc",
+          normalize: true,
+          page: null,
+          rowsPerPage: null,
+          filter: null,
+          field: null,
+          order: null,
+        });
         if (res?.data?.data?.monitors) {
           setMonitors(res.data.data.monitors);
         }

Client/src/Utils/NetworkService.js

@@ -83,26 +83,37 @@ class NetworkService {
    * ************************************
    *
    * @async
-   * @param {string} authToken - The authorization token to be used in the request header.
-   * @param {string} userId - The ID of the user whose monitors are to be retrieved.
-   * @param {number} [limit] - The maximum number of monitors to retrieve.
-   * @param {Array<string>} [types] - The types of monitors to retrieve.
-   * @param {string} [status] - The status of the monitors to retrieve.
-   * @param {string} [sortOrder] - The order in which to sort the retrieved monitors.
-   * @param {boolean} [normalize] - Whether to normalize the retrieved monitors.
+   * @param {Object} config - The configuration object.
+   * @param {string} config.authToken - The authorization token to be used in the request header.
+   * @param {string} config.teamId - The ID of the team whose monitors are to be retrieved.
+   * @param {number} [config.limit] - The maximum number of monitors to retrieve.
+   * @param {Array<string>} [config.types] - The types of monitors to retrieve.
+   * @param {string} [config.status] - The status of the monitors to retrieve.
+   * @param {string} [config.checkOrder] - The order in which to sort the retrieved monitors.
+   * @param {boolean} [config.normalize] - Whether to normalize the retrieved monitors.
+   * @param {number} [config.page] - The page number for pagination.
+   * @param {number} [config.rowsPerPage] - The number of rows per page for pagination.
+   * @param {string} [config.filter] - The filter to apply to the monitors.
+   * @param {string} [config.field] - The field to sort by.
+   * @param {string} [config.order] - The order in which to sort the field.
    * @returns {Promise<AxiosResponse>} The response from the axios GET request.
    */
-  async getMonitorsByTeamId(
-    authToken,
-    teamId,
-    limit,
-    types,
-    status,
-    sortOrder,
-    normalize,
-    page,
-    rowsPerPage
-  ) {
+  async getMonitorsByTeamId(config) {
+    const {
+      authToken,
+      teamId,
+      limit,
+      types,
+      status,
+      checkOrder,
+      normalize,
+      page,
+      rowsPerPage,
+      filter,
+      field,
+      order,
+    } = config;
+
     const params = new URLSearchParams();
 
     if (limit) params.append("limit", limit);
@@ -112,10 +123,13 @@ class NetworkService {
       });
     }
     if (status) params.append("status", status);
-    if (sortOrder) params.append("sortOrder", sortOrder);
+    if (checkOrder) params.append("checkOrder", checkOrder);
     if (normalize) params.append("normalize", normalize);
     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);
 
     return this.axiosInstance.get(
       `/monitors/team/${teamId}?${params.toString()}`,