diff --git a/Client/src/Components/MonitorTable/index.jsx b/Client/src/Components/MonitorTable/index.jsx
index 338ebb793..6904978c8 100644
--- a/Client/src/Components/MonitorTable/index.jsx
+++ b/Client/src/Components/MonitorTable/index.jsx
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
import ResponseTimeChart from "../Charts/ResponseTimeChart";
import BasicTable from "../BasicTable";
import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react";
+import { useNavigate } from "react-router-dom";
/**
* Host component.
@@ -80,6 +81,8 @@ const Status = ({ params }) => {
* @returns {React.Component} Returns a table with the monitor data.
*/
const MonitorTable = ({ monitors = [] }) => {
+ const navigate = useNavigate();
+
const headers = [
{ id: 1, name: "Host" },
{ id: 2, name: "Status" },
@@ -106,8 +109,17 @@ const MonitorTable = ({ monitors = [] }) => {
? "var(--env-var-color-17)"
: "var(--env-var-color-19)",
};
- data.push({ id: data.length + 1, data: });
- data.push({ id: data.length + 1, data: });
+ data.push({
+ id: data.length + 1,
+ data: ,
+ handleClick: () => {
+ navigate(`/monitors/${monitor._id}`);
+ },
+ });
+ data.push({
+ id: data.length + 1,
+ data: ,
+ });
data.push({
id: data.length + 1,
data: ,