Merge pull request #303 from bluewave-labs/feat/monitor-details-route

Update route to pass monitor ID to details component, #120

Client/src/App.jsx

@@ -21,7 +21,6 @@ import ProtectedRoute from "./Components/ProtectedRoute";
 import Details from "./Pages/Details";
 import Maintenance from "./Pages/Maintenance";
 
-
 function App() {
   return (
     <>
@@ -40,14 +39,15 @@ function App() {
             path="/monitors/create"
             element={<ProtectedRoute Component={CreateNewMonitor} />}
           />
+          <Route
+            path="/monitors/:monitorId/"
+            element={<ProtectedRoute Component={Details} />}
+          />
           <Route
             path="incidents"
             element={<ProtectedRoute Component={Incidents} />}
           />
-          <Route
-            path="details"
-            element={<ProtectedRoute Component={Details} />}
-          />
+
           <Route
             path="status"
             element={<ProtectedRoute Component={Status} />}

Client/src/Components/MonitorTable/index.jsx

@@ -17,6 +17,7 @@ import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
+import { useNavigate } from "react-router-dom";
 
 /**
  * Host component.
@@ -94,6 +95,7 @@ const Status = ({ params }) => {
  * @returns {React.Component} Returns a table with the monitor data.
  */
 const MonitorTable = ({ monitors = [] }) => {
+  const navigate = useNavigate();
   const [page, setPage] = useState(0);
   const rowsPerPage = 5;
 
@@ -124,7 +126,13 @@ const MonitorTable = ({ monitors = [] }) => {
       };
 
       return (
-        <TableRow key={monitor._id}>
+        <TableRow
+          sx={{ cursor: "pointer" }}
+          key={monitor._id}
+          onClick={() => {
+            navigate(`/monitors/${monitor._id}`);
+          }}
+        >
           <TableCell>
             <Host params={params} />
           </TableCell>