incident links

client/src/components/monitors/HeaderControls.tsx

@@ -57,7 +57,7 @@ export const HeaderControls = ({
           <Button
             startIcon={<Bug size={20} strokeWidth={1.5} />}
             onClick={() => {
-              navigate(`/incidents/${monitor._id}`);
+              navigate(`/incidents?monitorId=${monitor._id}`);
             }}
           >
             {t("menu.incidents")}

client/src/pages/incidents/IncidentsPage.tsx

@@ -6,7 +6,7 @@ import { IncidentTable } from "@/pages/incidents/IncidentTable";
 import { HeaderRange } from "@/components/common/HeaderRange";
 
 import { useTheme } from "@mui/material/styles";
-import { useParams } from "react-router";
+import { useSearchParams } from "react-router";
 import { useState, useEffect } from "react";
 import { useGet } from "@/hooks/UseApi";
 import type { ApiResponse } from "@/hooks/UseApi";
@@ -17,7 +17,7 @@ import type { IMonitor } from "@/types/monitor";
 const IncidentsPage = () => {
   const theme = useTheme();
   const [selectedMonitorId, setSelectedMonitorId] = useState<string>("all");
-  const { id } = useParams<{ id: string }>();
+  const [searchParams] = useSearchParams();
 
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
@@ -51,10 +51,11 @@ const IncidentsPage = () => {
   const monitors: IMonitor[] = monitorResponse?.data || [];
 
   useEffect(() => {
-    if (id) {
-      setSelectedMonitorId(id);
+    const monitorId = searchParams.get("monitorId");
+    if (monitorId) {
+      setSelectedMonitorId(monitorId);
     }
-  }, [id]);
+  }, [searchParams]);
 
   return (
     <BasePage>

client/src/pages/infrastructure/InfraMonitorsTable.tsx

@@ -101,7 +101,7 @@ export const InfraMonitorsTable = ({
         id: 3,
         label: "Incidents",
         action: () => {
-          navigate(`/incidents/${monitor._id}`);
+          navigate(`/incidents?monitorId=${monitor._id}`);
         },
       },
       {

client/src/pages/pagespeed/PageSpeedMonitorTable.tsx

@@ -102,7 +102,7 @@ export const PageSpeedMonitorTable = ({
         id: 3,
         label: "Incidents",
         action: () => {
-          navigate(`/incidents/${monitor._id}`);
+          navigate(`/incidents?monitorId=${monitor._id}`);
         },
       },
       {

client/src/pages/uptime/MonitorTable.tsx

@@ -102,7 +102,7 @@ export const MonitorTable = ({
         id: 3,
         label: "Incidents",
         action: () => {
-          navigate(`/incidents/${monitor._id}`);
+          navigate(`/incidents?monitorId=${monitor._id}`);
         },
       },
       {