@oneuptime/common 13.0.4 → 13.0.5

package/Tests/App/Dashboard/InfrastructureGraph.test.tsx

@@ -1,20 +1,25 @@
 import "@testing-library/jest-dom";
 import { afterEach, describe, expect, jest, test } from "@jest/globals";
-import {
-  cleanup,
-  fireEvent,
-  render,
-  screen,
-  within,
-} from "@testing-library/react";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { Edge, Node } from "reactflow";
 import InventoryItem from "../../../Models/DatabaseModels/InventoryItem";
 import InventoryItemRelationship from "../../../Models/DatabaseModels/InventoryItemRelationship";
 import EntityType from "../../../Types/Telemetry/EntityType";
 import EntityRelationshipType from "../../../Types/Telemetry/EntityRelationshipType";
+import EntitySource from "../../../Types/Telemetry/EntitySource";
 import getJestMockFunction, { MockFunction } from "../../MockType";
-import InfrastructureGraph from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/InfrastructureGraph";
+import InfrastructureGraph, {
+  InfrastructureMapLayout,
+  MAX_MAP_CARDS,
+  cardForNode,
+  layoutInfrastructureMap,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/InfrastructureGraph";
+import {
+  InfrastructureTopologyModel,
+  buildInfrastructureTopologyModel,
+  collectMapCards,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/InfrastructureTopologyModel";
 
 jest.mock("react-i18next", () => {
   return {
@@ -29,9 +34,10 @@ jest.mock("react-i18next", () => {
 });
 
 /*
- * Inspect the actual nodes and connections handed to the canvas. Layout and
- * nesting run normally; React Flow's browser measurement is the only boundary
- * replaced, so an edge silently filtered before rendering fails these tests.
+ * The infrastructure map draws one level of the tree: cards for the
+ * workloads and machines in scope, a column of the services running on them,
+ * and an arrow per placement. React Flow's rendering is the only boundary
+ * replaced; layout runs for real.
  */
 jest.mock("reactflow", () => {
   return {
@@ -43,37 +49,21 @@ jest.mock("reactflow", () => {
     }): React.ReactElement => {
       return (
         <div data-testid="infrastructure-canvas">
-          <div>
-            {props.nodes.map((node: Node): React.ReactElement => {
-              return (
-                <button
-                  type="button"
-                  key={node.id}
-                  data-testid={`node-${node.id}`}
-                  data-parent={node.parentNode || ""}
-                  onClick={(event: React.MouseEvent): void => {
-                    props.onNodeClick(event, node);
-                  }}
-                >
-                  {node.data.title}
-                </button>
-              );
-            })}
-          </div>
-          <ul aria-label="Visible infrastructure connections">
-            {props.edges.map((edge: Edge): React.ReactElement => {
-              return (
-                <li
-                  key={edge.id}
-                  data-source={edge.source}
-                  data-target={edge.target}
-                  data-relationship={edge.data?.relationshipType}
-                >
-                  {edge.source} → {edge.target}
-                </li>
-              );
-            })}
-          </ul>
+          {props.nodes.map((node: Node): React.ReactElement => {
+            return (
+              <button
+                type="button"
+                key={node.id}
+                data-testid={`node-${node.id}`}
+                onClick={(event: React.MouseEvent): void => {
+                  props.onNodeClick(event, node);
+                }}
+              >
+                {node.data.title}
+              </button>
+            );
+          })}
+          <span data-testid="edge-count">{props.edges.length}</span>
         </div>
       );
     },
@@ -88,21 +78,30 @@ jest.mock("reactflow", () => {
     },
     BackgroundVariant: { Dots: "dots" },
     MarkerType: { ArrowClosed: "arrowclosed" },
-    Position: { Top: "top", Bottom: "bottom" },
+    Position: { Left: "left", Right: "right" },
   };
 });
 
-function entity(key: string, type: EntityType): InventoryItem {
+const NOW: Date = new Date("2026-09-07T10:00:00Z");
+
+function entity(
+  key: string,
+  type: EntityType,
+  name: string = key,
+  lastSeenAt: Date = NOW,
+): InventoryItem {
   const item: InventoryItem = new InventoryItem();
   item.entityKey = key;
-  item.displayName = key;
+  item.displayName = name;
   item.entityType = type;
+  item.lastSeenAt = lastSeenAt;
+  item.source = EntitySource.Discovered;
   return item;
 }
 function edge(
   from: string,
   to: string,
-  type: EntityRelationshipType = EntityRelationshipType.HostedOn,
+  type: EntityRelationshipType,
 ): InventoryItemRelationship {
   const item: InventoryItemRelationship = new InventoryItemRelationship();
   item.fromEntityKey = from;
@@ -110,123 +109,292 @@ function edge(
   item.relationshipType = type;
   return item;
 }
-function connections(): Array<HTMLElement> {
-  return within(
-    screen.getByRole("list", { name: "Visible infrastructure connections" }),
-  ).queryAllByRole("listitem");
+
+function kubernetesModel(): InfrastructureTopologyModel {
+  return buildInfrastructureTopologyModel(
+    [
+      entity("api", EntityType.Service),
+      entity("worker", EntityType.Service),
+      entity("cluster", EntityType.KubernetesCluster, "prod"),
+      entity("ns", EntityType.KubernetesNamespace, "shop"),
+      entity("node-a", EntityType.KubernetesNode, "node-a"),
+      entity("checkout", EntityType.KubernetesDeployment, "checkout"),
+      entity("jobs", EntityType.KubernetesDeployment, "jobs"),
+      entity("pod-1", EntityType.KubernetesPod, "checkout-6d4f8b9c7d-x2k9p"),
+      entity("pod-2", EntityType.KubernetesPod, "checkout-6d4f8b9c7d-q8zwm"),
+      entity("pod-3", EntityType.KubernetesPod, "jobs-7b9d6c5f48-zz2wm"),
+    ],
+    [
+      edge("ns", "cluster", EntityRelationshipType.MemberOf),
+      edge("node-a", "cluster", EntityRelationshipType.MemberOf),
+      edge("checkout", "ns", EntityRelationshipType.MemberOf),
+      edge("jobs", "ns", EntityRelationshipType.MemberOf),
+      edge("pod-1", "checkout", EntityRelationshipType.PartOf),
+      edge("pod-2", "checkout", EntityRelationshipType.PartOf),
+      edge("pod-3", "jobs", EntityRelationshipType.PartOf),
+      edge("api", "pod-1", EntityRelationshipType.RunsOn),
+      edge("api", "pod-2", EntityRelationshipType.RunsOn),
+      edge("worker", "pod-3", EntityRelationshipType.RunsOn),
+    ],
+    { rangeStart: new Date("2026-09-06T10:00:00Z") },
+  );
 }
 
 afterEach(() => {
   cleanup();
 });
 
-describe("Infrastructure canvas connection fidelity", () => {
-  test("keeps a shared host's other service connection after nesting it under its primary service", () => {
-    render(
-      <InfrastructureGraph
-        entities={[
-          entity("api", EntityType.Service),
-          entity("web", EntityType.Service),
-          entity("shared-host", EntityType.Host),
-        ]}
-        relationships={[edge("web", "shared-host"), edge("api", "shared-host")]}
-      />,
+describe("layoutInfrastructureMap", () => {
+  test("draws cards plus a service column with one arrow per placement", () => {
+    const model: InfrastructureTopologyModel = kubernetesModel();
+    const layout: InfrastructureMapLayout = layoutInfrastructureMap({
+      model,
+      nodeIds: collectMapCards(model, null),
+      now: NOW,
+    });
+    const ids: Array<string> = layout.nodes.map((node: Node) => {
+      return node.id;
+    });
+    expect(ids).toEqual([
+      "service:api",
+      "service:worker",
+      "checkout",
+      "jobs",
+      "node-a",
+    ]);
+    expect(
+      layout.edges.map((item: Edge) => {
+        return `${item.source}->${item.target}`;
+      }),
+    ).toEqual(["service:api->checkout", "service:worker->jobs"]);
+    const x: (id: string) => number = (id: string): number => {
+      return layout.nodes.find((node: Node) => {
+        return node.id === id;
+      })!.position.x;
+    };
+    expect(x("service:api")).toBeLessThan(x("checkout"));
+  });
+
+  test("cards that run something come first", () => {
+    const model: InfrastructureTopologyModel = kubernetesModel();
+    const layout: InfrastructureMapLayout = layoutInfrastructureMap({
+      model,
+      nodeIds: ["node-a", "jobs", "checkout"],
+      now: NOW,
+    });
+    expect(
+      layout.nodes
+        .filter((node: Node) => {
+          return !node.id.startsWith("service:");
+        })
+        .map((node: Node) => {
+          return node.id;
+        }),
+    ).toEqual(["jobs", "checkout", "node-a"]);
+  });
+
+  test("with no services there is no service column", () => {
+    const model: InfrastructureTopologyModel = buildInfrastructureTopologyModel(
+      [entity("a", EntityType.Host), entity("b", EntityType.Host)],
+      [],
     );
-    expect(screen.getByTestId("node-shared-host")).toHaveAttribute(
-      "data-parent",
-      "api",
+    const layout: InfrastructureMapLayout = layoutInfrastructureMap({
+      model,
+      nodeIds: ["a", "b"],
+      now: NOW,
+    });
+    expect(layout.edges).toEqual([]);
+    expect(layout.nodes[0]!.position.x).toBe(0);
+  });
+
+  test("a huge scope is capped with an overflow card", () => {
+    const hosts: Array<InventoryItem> = Array.from(
+      { length: MAX_MAP_CARDS + 10 },
+      (_value: unknown, index: number) => {
+        return entity(`h${index}`, EntityType.Host, `server-${index}x`);
+      },
     );
-    expect(connections()).toHaveLength(1);
-    expect(connections()[0]).toHaveAttribute("data-source", "web");
-    expect(connections()[0]).toHaveAttribute("data-target", "shared-host");
-    expect(connections()[0]).toHaveAttribute(
-      "data-relationship",
-      EntityRelationshipType.HostedOn,
+    const model: InfrastructureTopologyModel = buildInfrastructureTopologyModel(
+      hosts,
+      [],
     );
-    // api → host is already represented by nesting; web → host is not.
-    expect(screen.queryByText("api → shared-host")).not.toBeInTheDocument();
+    const layout: InfrastructureMapLayout = layoutInfrastructureMap({
+      model,
+      nodeIds: hosts.map((host: InventoryItem) => {
+        return host.entityKey!;
+      }),
+      now: NOW,
+    });
+    expect(layout.nodes).toHaveLength(MAX_MAP_CARDS);
+    const overflow: Node | undefined = layout.nodes.find((node: Node) => {
+      return node.id === "__more__";
+    });
+    expect(overflow?.data.title).toBe("11 more");
   });
 
-  test("hides only the relationship actually consumed by nesting when the same pair has another relationship", () => {
-    render(
-      <InfrastructureGraph
-        entities={[
-          entity("api", EntityType.Service),
-          entity("host", EntityType.Host),
-        ]}
-        relationships={[
-          edge("api", "host"),
-          edge("api", "host", EntityRelationshipType.RunsOn),
-        ]}
-      />,
+  test("cards never overlap", () => {
+    const model: InfrastructureTopologyModel = kubernetesModel();
+    const layout: InfrastructureMapLayout = layoutInfrastructureMap({
+      model,
+      nodeIds: ["checkout", "jobs", "node-a", "ns", "cluster"],
+      now: NOW,
+    });
+    const seen: Set<string> = new Set<string>();
+    for (const node of layout.nodes) {
+      const key: string = `${node.position.x},${node.position.y}`;
+      expect(seen.has(key)).toBe(false);
+      seen.add(key);
+    }
+  });
+
+  test("cards that run a service sit in the column next to the services", () => {
+    const model: InfrastructureTopologyModel = kubernetesModel();
+    const layout: InfrastructureMapLayout = layoutInfrastructureMap({
+      model,
+      nodeIds: collectMapCards(model, null),
+      now: NOW,
+    });
+    const x: (id: string) => number = (id: string): number => {
+      return layout.nodes.find((node: Node) => {
+        return node.id === id;
+      })!.position.x;
+    };
+    // No arrow has to cross another card: both targets share one column...
+    expect(x("checkout")).toBe(x("jobs"));
+    // ...and the machine nothing runs on starts the next one.
+    expect(x("node-a")).toBeGreaterThan(x("checkout"));
+  });
+
+  test("a long column of running cards wraps instead of shrinking the map", () => {
+    const hosts: Array<InventoryItem> = Array.from(
+      { length: 12 },
+      (_value: unknown, index: number) => {
+        return entity(`h${index}`, EntityType.Host, `machine-${index}x`);
+      },
     );
-    expect(screen.getByTestId("node-host")).toHaveAttribute(
-      "data-parent",
-      "api",
+    const model: InfrastructureTopologyModel = buildInfrastructureTopologyModel(
+      [entity("svc", EntityType.Service), ...hosts],
+      hosts.map((host: InventoryItem) => {
+        return edge("svc", host.entityKey!, EntityRelationshipType.HostedOn);
+      }),
     );
-    expect(connections()).toHaveLength(1);
-    expect(connections()[0]).toHaveAttribute("data-source", "api");
-    expect(connections()[0]).toHaveAttribute(
-      "data-relationship",
-      EntityRelationshipType.RunsOn,
+    const layout: InfrastructureMapLayout = layoutInfrastructureMap({
+      model,
+      nodeIds: hosts.map((host: InventoryItem) => {
+        return host.entityKey!;
+      }),
+      now: NOW,
+    });
+    const columns: Set<number> = new Set<number>(
+      layout.nodes
+        .filter((node: Node) => {
+          return !node.id.startsWith("service:");
+        })
+        .map((node: Node) => {
+          return node.position.x;
+        }),
     );
+    expect(columns.size).toBe(2);
   });
+});
 
-  test("preserves workload connections while structural pod and node relationships remain represented by their boxes", () => {
-    render(
-      <InfrastructureGraph
-        entities={[
-          entity("cluster", EntityType.KubernetesCluster),
-          entity("node", EntityType.KubernetesNode),
-          entity("pod", EntityType.KubernetesPod),
-          entity("api", EntityType.Service),
-        ]}
-        relationships={[
-          edge("node", "cluster", EntityRelationshipType.MemberOf),
-          edge("pod", "node", EntityRelationshipType.RunsOn),
-          edge("api", "pod", EntityRelationshipType.RunsOn),
-        ]}
-      />,
+describe("cardForNode", () => {
+  test("a workload card says where it lives, what it holds and what it runs", () => {
+    const model: InfrastructureTopologyModel = kubernetesModel();
+    const card: ReturnType<typeof cardForNode> = cardForNode(
+      model,
+      model.nodes.get("checkout")!,
+      NOW,
     );
-    expect(screen.getByTestId("node-node")).toHaveAttribute(
-      "data-parent",
-      "cluster",
+    expect(card.title).toBe("checkout");
+    expect(card.subtitle).toBe("K8s Deployment · shop");
+    expect(card.statusLabel).toBe("Active · 2 pods");
+    expect(card.stats).toEqual([]);
+    expect(card.footer).toBe("Runs api");
+  });
+
+  test("a replica group is drawn as a stack", () => {
+    const model: InfrastructureTopologyModel = buildInfrastructureTopologyModel(
+      [
+        entity("h1", EntityType.Host, "web-01"),
+        entity("h2", EntityType.Host, "web-02"),
+      ],
+      [],
+    );
+    const groupId: string = model.nodes.get("h1")!.parentId!;
+    const card: ReturnType<typeof cardForNode> = cardForNode(
+      model,
+      model.nodes.get(groupId)!,
+      NOW,
+    );
+    expect(card.stacked).toBe(true);
+    expect(card.subtitle).toBe("Host replicas");
+    expect(card.statusLabel).toBe("Active · 2 hosts");
+  });
+
+  test("an inactive machine is dimmed and says when it was last seen", () => {
+    const model: InfrastructureTopologyModel = buildInfrastructureTopologyModel(
+      [entity("old", EntityType.Host, "old", new Date("2026-09-04T10:00:00Z"))],
+      [],
+      { rangeStart: new Date("2026-09-06T10:00:00Z"), includeInactive: true },
     );
-    expect(screen.getByTestId("node-pod")).toHaveAttribute(
-      "data-parent",
-      "node",
+    const card: ReturnType<typeof cardForNode> = cardForNode(
+      model,
+      model.nodes.get("old")!,
+      NOW,
     );
-    expect(connections()).toHaveLength(1);
-    expect(connections()[0]).toHaveAttribute("data-source", "api");
-    expect(connections()[0]).toHaveAttribute("data-target", "pod");
+    expect(card.dimmed).toBe(true);
+    expect(card.statusLabel).toBe("Inactive · seen 3 days ago");
   });
+});
 
-  test("keeps unresolved connection endpoints selectable by their actual identity", () => {
-    const onSelectResource: MockFunction = getJestMockFunction();
+describe("InfrastructureGraph", () => {
+  test("opens cards, services and the overflow through their own callbacks", () => {
+    const hosts: Array<InventoryItem> = Array.from(
+      { length: MAX_MAP_CARDS + 1 },
+      (_value: unknown, index: number) => {
+        return entity(`h${index}`, EntityType.Host, `server-${index}x`);
+      },
+    );
+    const model: InfrastructureTopologyModel = buildInfrastructureTopologyModel(
+      [entity("svc", EntityType.Service), ...hosts],
+      [edge("svc", "h0", EntityRelationshipType.HostedOn)],
+    );
+    const onOpenNode: MockFunction = getJestMockFunction();
+    const onOpenService: MockFunction = getJestMockFunction();
+    const onShowAll: MockFunction = getJestMockFunction();
     render(
       <InfrastructureGraph
-        entities={[entity("host", EntityType.Host)]}
-        relationships={[
-          edge("host", "missing-resource", EntityRelationshipType.MemberOf),
-        ]}
-        onSelectResource={onSelectResource}
+        model={model}
+        nodeIds={hosts.map((host: InventoryItem) => {
+          return host.entityKey!;
+        })}
+        onOpenNode={onOpenNode}
+        onOpenService={onOpenService}
+        onShowAll={onShowAll}
+        now={NOW}
       />,
     );
-    expect(screen.getByTestId("node-missing-resource")).toHaveTextContent(
-      "Undiscovered resource · missing-resource",
-    );
-    expect(connections()).toHaveLength(1);
-    fireEvent.click(screen.getByTestId("node-missing-resource"));
-    expect(onSelectResource).toHaveBeenCalledWith("missing-resource");
+    fireEvent.click(screen.getByTestId("node-h0"));
+    expect(onOpenNode).toHaveBeenCalledWith("h0");
+    fireEvent.click(screen.getByTestId("node-service:svc"));
+    expect(onOpenService).toHaveBeenCalledWith("svc");
+    fireEvent.click(screen.getByTestId("node-__more__"));
+    expect(onShowAll).toHaveBeenCalled();
+    expect(onOpenNode).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId("edge-count")).toHaveTextContent("1");
   });
 
-  test("explains an empty scoped canvas", () => {
-    render(<InfrastructureGraph entities={[]} relationships={[]} />);
+  test("explains an empty scope", () => {
+    render(
+      <InfrastructureGraph
+        model={buildInfrastructureTopologyModel([], [])}
+        nodeIds={[]}
+        onOpenNode={() => {}}
+      />,
+    );
     expect(screen.getByRole("status")).toHaveTextContent(
-      "No resources in this map",
+      "Nothing to draw here",
     );
-    expect(
-      screen.queryByTestId("infrastructure-canvas"),
-    ).not.toBeInTheDocument();
   });
 });