fix: improve canary layout modal

Closes #1563

fix: change page title on open modal

refactor: extract the calculations to own file

fix: fix title issues

fix: fix issues with canary modal and refactor

fix: fix missing namepace

src/api/query-hooks/health.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
-import { HealthCheck } from "../types/health";
 import { getStartValue } from "../../utils/common";
-import { getCanaryGraph } from "../services/topology";
+import { getCanaryGraph, getHealthCheckDetails } from "../services/topology";
+import { HealthCheck } from "../types/health";
 
 export function useCanaryGraphQuery(
   timeRange: string,
@@ -17,3 +17,14 @@ export function useCanaryGraphQuery(
     return res.data ?? undefined;
   });
 }
+
+export function useGetCheckDetails(checkId?: string) {
+  return useQuery({
+    queryKey: ["check", "details", checkId],
+    queryFn: async () => {
+      const res = await getHealthCheckDetails(checkId!);
+      return res;
+    },
+    enabled: checkId !== undefined
+  });
+}

src/api/services/topology.ts

@@ -8,15 +8,19 @@ import {
   Snapshot
 } from "../axios";
 import { resolve } from "../resolve";
+import { SchemaResourceI } from "../schemaResources";
 import { PaginationInfo } from "../types/common";
 import {
   HealthCheck,
   HealthCheckStatus,
   HealthCheckSummary
 } from "../types/health";
-import { ComponentHealthCheckView, Topology } from "../types/topology";
-import { ComponentTeamItem } from "../types/topology";
-import { ComponentTemplateItem } from "../types/topology";
+import {
+  ComponentHealthCheckView,
+  ComponentTeamItem,
+  ComponentTemplateItem,
+  Topology
+} from "../types/topology";
 
 interface IParam {
   id?: string;
@@ -224,8 +228,17 @@ export const getHealthCheckSummary = async (id: string) => {
   return null;
 };
 
+export const getHealthCheckDetails = async (id: string) => {
+  const res = await resolve<Omit<HealthCheck, "source">[] | null>(
+    IncidentCommander.get(
+      `/checks?id=eq.${id}&select=*,canaries(id,name,source),agents(id, name)`
+    )
+  );
+  return res.data?.[0];
+};
+
 export const getHealthCheckItem = async (id: string) => {
-  const res = await IncidentCommander.get<HealthCheck[] | null>(
+  const res = await IncidentCommander.get<SchemaResourceI[] | null>(
     `/canaries?id=eq.${id}`
   );
   return res.data?.[0];

src/api/types/health.ts

@@ -1,4 +1,6 @@
+import { SchemaResourceI } from "../schemaResources";
 import { Agent, Avatar, Timestamped } from "../traits";
+import { AgentItem } from "./common";
 
 export interface HealthChecksResponse {
   duration: number;
@@ -21,7 +23,6 @@ export interface HealthCheck extends Timestamped, Avatar, Agent {
   checkStatuses: HealthCheckStatus[];
   lastRuntime: string;
   description?: string;
-  source?: string;
   spec?: any;
   icon?: string;
   endpoint?: string;
@@ -32,11 +33,14 @@ export interface HealthCheck extends Timestamped, Avatar, Agent {
   owner?: any;
   loading?: boolean;
   severity?: string;
+  next_runtime?: string;
+  agents?: AgentItem;
+  canaries?: SchemaResourceI;
 }
 
 export type HealthCheckSummary = Pick<
   HealthCheck,
-  "id" | "name" | "icon" | "type" | "status" | "severity"
+  "id" | "name" | "icon" | "type" | "status" | "severity" | "next_runtime"
 >;
 
 export interface HealthCheckStatus {