feat: show linked catalogs and components for check

Closes #1505

tests: add tests for relationships

refactor: rename to CheckLinkedTo

src/api/services/topology.ts

@@ -231,7 +231,7 @@ export const getHealthCheckSummary = async (id: string) => {
 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)`
+      `/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];

src/api/types/health.ts

@@ -1,6 +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;
@@ -36,6 +38,12 @@ export interface HealthCheck extends Timestamped, Avatar, Agent {
   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<

src/components/Canary/CanaryPopup/CheckDetails.tsx

@@ -19,6 +19,7 @@ import { StatusHistory } from "./StatusHistory/StatusHistory";
 import { calculateDefaultTimeRangeValue } from "./Utils/calculateDefaultTimeRangeValue";
 import { PopupTabs } from "./tabs";
 import { getUptimePercentage } from "./utils";
+import CheckLinkedTo from "./CheckLinkedTo";
 
 const CanaryStatusChart = React.lazy(() =>
   import("../CanaryStatusChart").then(({ CanaryStatusChart }) => ({
@@ -183,6 +184,11 @@ export function CheckDetails({ check, ...rest }: CheckDetailsProps) {
               label: "Spec",
               content: <CanaryCheckDetailsSpecTab check={check} />,
               class: `flex-1 flex flex-col overflow-y-auto  border border-gray-300 ${mixins.appleScrollbar}`
+            },
+            related: {
+              label: "Linked to",
+              content: <CheckLinkedTo check={check} />,
+              class: `flex-1 flex flex-col overflow-y-auto  border border-gray-300 ${mixins.appleScrollbar}`
             }
           }}
         />

src/components/Canary/CanaryPopup/CheckLinkedTo.tsx

@@ -0,0 +1,107 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { HealthCheck } from "../../../api/types/health";
+import { DataTable } from "../../DataTable";
+import { Icon } from "../../Icon";
+
+type CheckRelationshipsComponent = {
+  relationship: "component";
+  name: string;
+  id: string;
+  icon?: string;
+};
+
+type CheckRelationshipsConfig = {
+  relationship: "config";
+  name: string;
+  id: string;
+  type?: string;
+};
+
+type CheckRelationshipsRow =
+  | CheckRelationshipsComponent
+  | CheckRelationshipsConfig;
+
+const columns: ColumnDef<CheckRelationshipsRow>[] = [
+  {
+    id: "Name",
+    header: "Name",
+    cell: ({ row }) => {
+      const { name } = row.original;
+      const icon =
+        row.original.relationship === "component"
+          ? row.original.icon
+          : row.original.type;
+
+      return (
+        <div className="flex items-center">
+          {icon && (
+            <Icon name={icon} className="mr-2 h-5 w-5 " secondary={name} />
+          )}
+          {name}
+        </div>
+      );
+    }
+  },
+  {
+    id: "Type",
+    header: "Type",
+    cell: ({ row }) => {
+      const { relationship } = row.original;
+      return relationship === "config" ? "Config" : "Component";
+    }
+  }
+];
+
+type CheckRelationshipsProps = {
+  check: Partial<HealthCheck>;
+};
+
+export default function CheckLinkedTo({ check }: CheckRelationshipsProps) {
+  const navigate = useNavigate();
+
+  const items = useMemo(() => {
+    const combined: CheckRelationshipsRow[] = [
+      ...(check.components
+        ? check.components?.map((component) => ({
+            relationship: "component" as const,
+            name: component.components.name,
+            id: component.components.id,
+            icon: component.components.icon
+          }))
+        : []),
+      ...(check.configs
+        ? check.configs?.map((config) => ({
+            relationship: "config" as const,
+            name: config.configs.name,
+            id: config.configs.id,
+            type: config.configs.type
+          }))
+        : [])
+    ];
+    return combined;
+  }, [check.components, check.configs]);
+
+  const handleRowClick = (row: CheckRelationshipsRow) => {
+    if (row.relationship === "component") {
+      navigate(`/topology/${row.id}`);
+    } else {
+      navigate(`/configs/${row.id}`);
+    }
+  };
+
+  if (!check || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col">
+      <DataTable
+        handleRowClick={(row) => handleRowClick(row.original)}
+        columns={columns}
+        data={items}
+      />
+    </div>
+  );
+}

src/components/Canary/CanaryPopup/__tests__/CheckLinkedTo.unit.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import CheckLinkedTo from "../CheckLinkedTo";
+
+describe("CheckLinkedTo", () => {
+  const mockCheck = {
+    components: [
+      { components: { name: "Component 1", id: "1", icon: "icon1" } },
+      { components: { name: "Component 2", id: "2", icon: "icon2" } }
+    ],
+    configs: [
+      { configs: { name: "Config 1", id: "3", type: "type1" } },
+      { configs: { name: "Config 2", id: "4", type: "type2" } }
+    ]
+  };
+
+  it("renders correctly", () => {
+    render(
+      <MemoryRouter>
+        <CheckLinkedTo check={mockCheck} />
+      </MemoryRouter>
+    );
+
+    expect(
+      screen.getByRole("cell", {
+        name: "Component 1"
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("cell", { name: /Component 2/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: /Config 1/i })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: /Config 2/i })).toBeInTheDocument();
+  });
+});