added failed assertion checks endpoint and minor update to incident text

Author: TeisNP

apps/dashboard/src/api/endpoints/monitors/checks.ts

@@ -56,6 +56,35 @@ export async function getMonitorChecks(
   return response?.data;
 }
 
+/*
+  Get Failed Monitor Checks
+*/
+
+export interface GetFailedMonitorChecksResponse {
+  checks: Check[];
+}
+
+export async function getFailedMonitorChecks(
+  teamId: number,
+  monitorId: number,
+  assertionId: number,
+  offset?: number,
+  limit?: number,
+): Promise<GetFailedMonitorChecksResponse> {
+  const response = await client.get(
+    `/v1/teams/${teamId}/monitors/${monitorId}/checks/failed/${assertionId}`,
+    {
+      params: {
+        offset,
+        limit,
+      },
+    },
+  );
+
+  return response?.data;
+}
+
+
 export interface GetMonitorsIncidentsResponse {
   monitors: MonitorsWithIncidents[];
 }

apps/dashboard/src/hooks/monitors.query.ts

@@ -121,6 +121,36 @@ export const useMonitorChecks = (monitorId?: number, offset = 0, limit = 5) => {
   );
 };
 
+export const useFailedMonitorChecks = (monitorId: number, assertionId: number, offset = 0, limit = 5) => {
+  const teamId = useAuthenticationStore((state) => state.currentTeamId);
+
+  return useQuery(
+    [
+      "teams",
+      teamId,
+      "monitors",
+      monitorId,
+      "checks",
+      "assertion",
+      assertionId,
+      {
+        offset,
+        limit,
+      },
+    ],
+    () => {
+      if (!teamId || !monitorId) {
+        return Promise.resolve(null);
+      }
+
+      return MonitorsAPI.getFailedMonitorChecks(teamId, monitorId, assertionId, offset, limit);
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+};
+
 export const useMonitorsIncidents = () => {
   const teamId = useAuthenticationStore((state) => state.currentTeamId);
 

apps/dashboard/src/pages/Dashboard/Incidents/Detail/index.tsx

@@ -1,13 +1,16 @@
 import { FunctionComponent } from "react";
 import { useMonitorIncidents } from "../../../../hooks/incidents.query";
 import { Helmet } from "react-helmet";
-import { Link, NavLink, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { useMonitor } from "../../../../hooks/monitors.query";
 interface IncidentsWindowDetailViewProps {}
 import Container from "../../../../components/Container";
-import { Button, Skeleton } from "@mui/material";
+import { Skeleton , Stack, Typography } from "@mui/material";
 import Placeholder from "../../../../components/Placeholder";
 import IncidentsList from "../components/IncidentsList";
+import Conditional from "../../../../components/Conditional";
+import { stripProtocolAndPath } from "../../../../utilities/url";
+
 
 const IncidentsWindowDetailView: FunctionComponent<
   IncidentsWindowDetailViewProps
@@ -39,9 +42,26 @@ const IncidentsWindowDetailView: FunctionComponent<
           ),
         ]}
       >
+        <Stack direction="row" spacing={2} alignItems={"center"}>
+          <Stack>
+            <Typography color="primary" fontSize={24}>
+              {stripProtocolAndPath(data?.settings.url)}
+            </Typography>
+            <Typography color="secondary">
+
+              <Conditional value={!incidentsAreLoading && monitorIncidents != undefined && monitorIncidents?.incidents.length > 0}>
+                {monitorIncidents?.incidents.length} active incidents monitor
+               
+              </Conditional>
+
+              <Conditional value={monitorIncidents?.incidents.length == 0}>No Incidents!! :D</Conditional>
+            </Typography>
+          </Stack>
+        </Stack>
         {incidentsAreLoading ? (
           <Placeholder />
         ) : (
+            
           <IncidentsList incidents={monitorIncidents?.incidents} />
         )}
       </Container>

apps/dashboard/src/pages/Dashboard/Incidents/components/IncidentsList.tsx

@@ -65,7 +65,7 @@ const IncidentsListItem: FunctionComponent<IncidentsListItemProps> = (
           >
             <Grid item>
               <Stack spacing={1}>
-                <Typography variant="body2">ERROR: {incident.title} {incident.operator} {incident.target}</Typography>
+                <Typography variant="body2">Assertion failed: {incident.title} {incident.operator} {incident.target}</Typography>
 
                 <Stack direction="row" spacing={1}>
                   <Chip size="small" label="api" color="info" />