Merge pull request #1565 from flanksource/1563-canary-modal-fixes

fix: improve canary layout modal

jest.config.ts

@@ -1,16 +1,17 @@
-import nextJest from 'next/jest'
+import nextJest from "next/jest";
 // Sync object
 const createJestConfig = nextJest({
   // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
-  dir: './',
-})
+  dir: "./"
+});
 
 // Add any custom config to be passed to Jest
 const customJestConfig = {
   // Add more setup options before each test is run
-  setupFilesAfterEnv: ['@testing-library/jest-dom'], // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
-  moduleDirectories: ['node_modules', '<rootDir>/'],
-  testEnvironment: 'jest-environment-jsdom'
-}
+  setupFilesAfterEnv: ["@testing-library/jest-dom"], // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ["node_modules", "<rootDir>/"],
+  testEnvironment: "jest-environment-jsdom",
+  setupFiles: ["./jest.setup.ts"]
+};
 
-module.exports = createJestConfig(customJestConfig)
+module.exports = createJestConfig(customJestConfig);

jest.setup.ts

@@ -0,0 +1,5 @@
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn()
+}));

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
+  });
+}

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),components:check_component_relationships(components(id,name,icon)),configs:check_config_relationships(configs(id,name,type))`
+    )
+  );
+  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,8 @@
+import { SchemaResourceI } from "../schemaResources";
 import { Agent, Avatar, Timestamped } from "../traits";
+import { AgentItem } from "./common";
+import { ConfigItem } from "./configs";
+import { Topology } from "./topology";
 
 export interface HealthChecksResponse {
   duration: number;
@@ -21,7 +25,6 @@ export interface HealthCheck extends Timestamped, Avatar, Agent {
   checkStatuses: HealthCheckStatus[];
   lastRuntime: string;
   description?: string;
-  source?: string;
   spec?: any;
   icon?: string;
   endpoint?: string;
@@ -32,11 +35,20 @@ export interface HealthCheck extends Timestamped, Avatar, Agent {
   owner?: any;
   loading?: boolean;
   severity?: string;
+  next_runtime?: string;
+  agents?: AgentItem;
+  canaries?: SchemaResourceI;
+  configs: {
+    configs: Pick<ConfigItem, "id" | "name" | "type">;
+  }[];
+  components?: {
+    components: Pick<Topology, "id" | "name" | "icon">;
+  }[];
 }
 
 export type HealthCheckSummary = Pick<
   HealthCheck,
-  "id" | "name" | "icon" | "type" | "status" | "severity"
+  "id" | "name" | "icon" | "type" | "status" | "severity" | "next_runtime"
 >;
 
 export interface HealthCheckStatus {

src/components/Agents/AgentName.tsx

@@ -1,30 +1,44 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAgentByID } from "../../api/services/agents";
 import { Badge } from "../Badge";
+import { ComponentProps } from "react";
+import { AgentItem } from "../../api/types/common";
 
 type TopologyCardAgentProps = {
+  agent?: AgentItem;
   agentId?: string;
+  className?: string;
+  size?: ComponentProps<typeof Badge>["size"];
 };
 
-export default function AgentName({ agentId }: TopologyCardAgentProps) {
-  const { data: agent } = useQuery(
+export default function AgentName({
+  agent: propAgent,
+  agentId,
+  className = "bg-gray-100 text-gray-800",
+  size = "xs"
+}: TopologyCardAgentProps) {
+  const { data: dbAgent } = useQuery(
     ["db", "agent", agentId],
     () => getAgentByID(agentId!),
     {
-      enabled: !!agentId && agentId !== "00000000-0000-0000-0000-000000000000"
+      enabled: !!agentId && propAgent === undefined
     }
   );
 
+  const agent = propAgent ?? dbAgent;
+
   if (!agent) {
     return null;
   }
 
   return (
-    <Badge
-      colorClass="bg-gray-100 text-gray-800"
-      size="xs"
-      title={agent.description}
-      text={agent.name}
-    />
+    <div className="flex items-center">
+      <Badge
+        className={className}
+        size={size}
+        title={agent.description}
+        text={agent.name}
+      />
+    </div>
   );
 }

src/components/Canary/card.js → src/components/Canary/CanaryCards.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import { GetName } from "./data";
 import { Title, StatusList } from "./renderers";
+import { HealthCheck } from "../../api/types/health";
 
-export function CanaryCards(props) {
-  const { checks, onClick } = props;
+type CanaryCardProps = {
+  checks: HealthCheck[];
+  onClick: (check: HealthCheck) => void;
+};
 
+export function CanaryCards({ checks, onClick }: CanaryCardProps) {
   return (
     <ul className={`mt-1 grid grid-cols-1 gap-1 sm:gap-2 `}>
       {checks.map((check) => (