diff --git a/client/src/Pages/Incidents/Components/IncidentTable.tsx b/client/src/Pages/Incidents/Components/IncidentTable.tsx index df82764d9..46352c6f7 100644 --- a/client/src/Pages/Incidents/Components/IncidentTable.tsx +++ b/client/src/Pages/Incidents/Components/IncidentTable.tsx @@ -18,7 +18,6 @@ import { useTheme } from "@mui/material/styles"; import Box from "@mui/material/Box"; interface IncidentsTableProps { - title?: string; incidents?: Incident[]; monitors?: Monitor[]; incidentsCount: number; @@ -103,7 +102,11 @@ export const IncidentsTable = ({ return ( ); }, @@ -112,11 +115,7 @@ export const IncidentsTable = ({ id: "startTime", content: t("pages.incidents.table.headers.startTime"), render: (row) => { - return formatDateWithTz( - row.createdAt, - "YYYY-MM-DD HH:mm:ss A", - uiTimezone - ); + return formatDateWithTz(row.createdAt, "YYYY-MM-DD HH:mm:ss A", uiTimezone); }, }, { @@ -124,11 +123,7 @@ export const IncidentsTable = ({ content: t("pages.incidents.table.headers.endTime"), render: (row) => { if (row.endTime) { - return formatDateWithTz( - row.endTime, - "YYYY-MM-DD HH:mm:ss A", - uiTimezone - ); + return formatDateWithTz(row.endTime, "YYYY-MM-DD HH:mm:ss A", uiTimezone); } return "-"; }, @@ -165,7 +160,12 @@ export const IncidentsTable = ({ let value: ValueType = "neutral"; if (code < 300) value = "positive"; else if (code >= 400) value = "negative"; - return ; + return ( + + ); }, }, { @@ -202,14 +202,6 @@ export const IncidentsTable = ({ return ( - {title && ( - - {title} - - )} { const incidentsUrl = useMemo(() => { const params = new URLSearchParams(); if (selectedMonitor !== "0") params.append("monitorId", selectedMonitor); - if (filter === "active") params.append("status", "true"); - else if (filter === "resolved") params.append("status", "false"); - else if (filter === "manual" || filter === "automatic") + // Always show only resolved incidents (active ones are in the separate table above) + params.append("status", "false"); + if (filter === "manual" || filter === "automatic") params.append("resolutionType", filter); params.append("sortOrder", "desc"); if (dateRange !== "all") params.append("dateRange", dateRange); @@ -89,14 +91,12 @@ const IncidentsPage = () => { }, [selectedMonitor, activeIncidentsPage, activeIncidentsRowsPerPage]); // Fetch active incidents - const { - data: activeIncidentsData, - refetch: refetchActiveIncidents, - } = useGet( - activeIncidentsUrl, - {}, - { keepPreviousData: true, refreshInterval: 10000 } - ); + const { data: activeIncidentsData, refetch: refetchActiveIncidents } = + useGet( + activeIncidentsUrl, + {}, + { keepPreviousData: true, refreshInterval: 10000 } + ); // Fetch incident summary const { @@ -129,7 +129,10 @@ const IncidentsPage = () => { void networkError; const handleOpenDetails = (incidentId: string) => { - const incident = incidents.find((i) => i.id === incidentId) ?? activeIncidents.find((i) => i.id === incidentId) ?? null; + const incident = + incidents.find((i) => i.id === incidentId) ?? + activeIncidents.find((i) => i.id === incidentId) ?? + null; const monitor = monitorsData?.find((m) => m.id === incident?.monitorId) ?? null; setIsDetailsDialogOpen(true); setSelectedIncident(incident); @@ -173,27 +176,42 @@ const IncidentsPage = () => { + + {t("pages.incidents.table.activeIncidents")} + + + {activeIncidentsCount > 0 && ( + <> + + + + )} + + + {t("pages.incidents.table.resolvedIncidents")} + - {activeIncidentsCount > 0 && ( - - )}