details

client/src/pages/incidents/IncidentDetails.tsx

@@ -0,0 +1,120 @@
+import { BasePage, StatBox } from "@/components/design-elements";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useParams } from "react-router";
+import { useGet } from "@/hooks/UseApi";
+import type { ApiResponse } from "@/hooks/UseApi";
+import type { IIncident } from "@/types/incident";
+import { formatDateWithTz } from "@/utils/TimeUtils";
+import { useAppSelector } from "@/hooks/AppHooks";
+import prettyMilliseconds from "pretty-ms";
+
+const IncidentDetailsPage = () => {
+  const theme = useTheme();
+  const { id } = useParams<{ id: string }>();
+  const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
+
+  const { response } = useGet<ApiResponse<IIncident>>(`/incidents/${id}`);
+  const incident = response?.data || null;
+
+  if (!incident) {
+    return null;
+  }
+
+  const startMs = new Date(incident.startedAt).getTime();
+  const endMs = incident.endedAt
+    ? new Date(incident.endedAt).getTime()
+    : Date.now();
+  const duration = Math.max(0, endMs - startMs);
+
+  return (
+    <BasePage>
+      <Stack spacing={theme.spacing(8)}>
+        <Typography variant="h4" color="textPrimary">
+          Incident Details
+        </Typography>
+
+        <Stack direction={{ xs: "column", md: "row" }} gap={theme.spacing(8)}>
+          <StatBox
+            title="Monitor"
+            subtitle={incident.monitorId?.name || "N/A"}
+          />
+          <StatBox
+            title="Start"
+            subtitle={formatDateWithTz(
+              incident.startedAt,
+              "ddd, MMMM D, YYYY, HH:mm A",
+              uiTimezone
+            )}
+          />
+          <StatBox
+            title="End"
+            subtitle={
+              incident.endedAt
+                ? formatDateWithTz(
+                    incident.endedAt,
+                    "ddd, MMMM D, YYYY, HH:mm A",
+                    uiTimezone
+                  )
+                : "Ongoing"
+            }
+          />
+        </Stack>
+
+        <Stack spacing={theme.spacing(4)}>
+          <Typography variant="h6" color="textPrimary">
+            Resolution
+          </Typography>
+          <Stack
+            direction={"column"}
+            spacing={theme.spacing(4)}
+            sx={{
+              p: theme.spacing(4),
+              borderRadius: 2,
+              bgcolor: incident.resolved
+                ? (theme.palette.success.lowContrast as any)
+                : (theme.palette.error.lowContrast as any),
+            }}
+          >
+            <Typography variant="body2" color="textPrimary">
+              Status: {incident.resolved ? "Resolved" : "Unresolved"}
+            </Typography>
+            {incident.resolved && (
+              <>
+                <Typography variant="body2" color="textPrimary">
+                  Type: {incident.resolutionType || "N/A"}
+                </Typography>
+                <Typography variant="body2" color="textPrimary">
+                  By: {incident.resolvedBy?.email || "N/A"}
+                </Typography>
+              </>
+            )}
+            <Typography variant="body2" color="textPrimary">
+              {incident.resolved && incident.endedAt
+                ? `Resolved at: ${formatDateWithTz(
+                    incident.endedAt,
+                    "ddd, MMMM D, YYYY, HH:mm A",
+                    uiTimezone
+                  )}`
+                : `Ongoing since: ${formatDateWithTz(
+                    incident.startedAt,
+                    "ddd, MMMM D, YYYY, HH:mm A",
+                    uiTimezone
+                  )}`}
+            </Typography>
+          </Stack>
+          <Typography variant="body2" color="textSecondary">
+            Duration:{" "}
+            {prettyMilliseconds(duration, { secondsDecimalDigits: 0 })}
+          </Typography>
+          <Typography variant="body2" color="textSecondary">
+            Note: {incident.resolutionNote || "N/A"}
+          </Typography>
+        </Stack>
+      </Stack>
+    </BasePage>
+  );
+};
+
+export default IncidentDetailsPage;

client/src/pages/incidents/IncidentTable.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next";
 import { formatDateWithTz } from "@/utils/TimeUtils";
 import { useAppSelector } from "@/hooks/AppHooks";
 import type { IIncident } from "@/types/incident";
+import { useNavigate } from "react-router";
 
 export const IncidentTable = ({
   incidents,
@@ -30,6 +31,7 @@ export const IncidentTable = ({
   const { patch, loading: isPatching } = usePatch();
   const { t } = useTranslation();
   const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
+  const navigate = useNavigate();
 
   const getHeaders = (t: Function, uiTimezone: string) => {
     const headers: Header<IIncident>[] = [
@@ -150,7 +152,7 @@ export const IncidentTable = ({
         headers={headers}
         data={incidents}
         onRowClick={(row) => {
-          alert(JSON.stringify(row, null, 2));
+          navigate(`/incidents/${row._id}`);
         }}
       />
       <Pagination

client/src/routes/Router.tsx

@@ -19,6 +19,7 @@ import NotificationChannelsPage from "@/pages/notification-channels/Notification
 import NotificationChannelsCreatePage from "@/pages/notification-channels/NotificationChannelsCreate";
 import NotificationChannelsConfigPage from "@/pages/notification-channels/NotificationChannelsConfig";
 import IncidentsPage from "@/pages/incidents/IncidentsPage";
+import IncidentDetailsPage from "@/pages/incidents/IncidentDetails";
 import PageSpeedMonitorsPage from "@/pages/pagespeed/PageSpeedMonitors";
 import PageSpeedDetailsPage from "@/pages/pagespeed/PageSpeedDetails";
 import PageSpeedConfigurePage from "@/pages/pagespeed/PageSpeedConfig";
@@ -110,7 +111,7 @@ const Router = () => {
           element={<NotificationChannelsPage />}
         />
         <Route path="incidents" element={<IncidentsPage />} />
-        <Route path="incidents/:id" element={<IncidentsPage />} />
+        <Route path="incidents/:id" element={<IncidentDetailsPage />} />
         <Route path="pagespeed/create" element={<PageSpeedCreatePage />} />
         <Route
           path="pagespeed/:id/configure"