Merge pull request #530 from bluewave-labs/fix/monitor-table-row-click

Fix/monitor table row click

Client/src/Components/BasicTable/index.jsx

@@ -135,7 +135,9 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
             {displayData.map((row) => {
               return (
                 <TableRow
-                  sx={{ cursor: row.handleClick ? "pointer" : "default" }}
+                  sx={{
+                    cursor: row.handleClick ? "pointer" : "default",
+                  }}
                   key={row.id}
                   onClick={row.handleClick ? row.handleClick : null}
                 >

Client/src/Components/Charts/ResponseTimeChart/index.jsx

@@ -8,7 +8,12 @@ const ResponseTimeChart = ({ checks = [] }) => {
   return (
     <div className="chart-container">
       <ResponsiveContainer width="100%" height="100%">
-        <BarChart width={150} height={40} data={normalizedChecks}>
+        <BarChart
+          width={150}
+          height={40}
+          data={normalizedChecks}
+          style={{ cursor: "pointer" }}
+        >
           <Bar maxBarSize={10} dataKey="responseTime">
             {normalizedChecks.map((check, index) => (
               <Cell

Client/src/Pages/Monitors/index.jsx

@@ -41,7 +41,14 @@ import {
 const Host = ({ params }) => {
   return (
     <Stack direction="row" alignItems="center" className="host">
-      <a href={params.url} target="_blank" rel="noreferrer">
+      <a
+        href={params.url}
+        target="_blank"
+        rel="noreferrer"
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+      >
         <OpenInNewPage />
       </a>
       <Box>
@@ -64,6 +71,7 @@ const Monitors = () => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [actions, setActions] = useState({});
   const openMenu = (event, id, url) => {
+    event.preventDefault();
     setAnchorEl(event.currentTarget);
     setActions({ id: id, url: url });
   };
@@ -141,7 +149,7 @@ const Monitors = () => {
     return {
       id: monitor._id,
       // disabled for now
-      // handleClick: () => navigate(`/monitors/${monitor._id}`),
+      handleClick: () => navigate(`/monitors/${monitor._id}`),
       data: [
         { id: idx, data: <Host params={params} /> },
         {
@@ -167,7 +175,10 @@ const Monitors = () => {
             <>
               <IconButton
                 aria-label="monitor actions"
-                onClick={(event) => openMenu(event, monitor._id, monitor.url)}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  openMenu(event, monitor._id, monitor.url);
+                }}
                 sx={{
                   "&:focus": {
                     outline: "none",
@@ -231,7 +242,9 @@ const Monitors = () => {
         onClose={closeMenu}
       >
         <MenuItem
-          onClick={() => window.open(actions.url, "_blank", "noreferrer")}
+          onClick={() => {
+            window.open(actions.url, "_blank", "noreferrer");
+          }}
         >
           Open site
         </MenuItem>