@oneuptime/common 12.0.34 → 13.0.0

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

@@ -0,0 +1,320 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import React, { ReactElement } from "react";
+import { MemoryRouter } from "react-router-dom";
+import NetworkTopologyLiveView from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/NetworkTopologyLiveView";
+import { ComponentProps as GraphProps } from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/NetworkDeviceGraph";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+const postMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/API/API", () => {
+  return {
+    __esModule: true,
+    default: {
+      post: (...args: Array<unknown>) => {
+        return postMock(...args);
+      },
+      getFriendlyMessage: (error: Error) => {
+        return error.message;
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getCommonHeaders: () => {
+        return {};
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/PermissionGate", () => {
+  return {
+    __esModule: true,
+    default: {
+      check: () => {
+        return { isAllowed: false };
+      },
+    },
+    ModelAction: { Create: "create" },
+  };
+});
+
+jest.mock("../../../UI/Utils/Project", () => {
+  return {
+    __esModule: true,
+    default: {
+      getCurrentProjectId: () => {
+        return "10000000-0000-4000-8000-000000000001";
+      },
+    },
+  };
+});
+
+jest.mock("../../../Models/DatabaseModels/NetworkDevice", () => {
+  return { __esModule: true, default: class NetworkDevice {} };
+});
+
+jest.mock("../../../Models/DatabaseModels/NetworkTopologySuppression", () => {
+  return { __esModule: true, default: class NetworkTopologySuppression {} };
+});
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Topology/NetworkDeviceDetailPanel",
+  () => {
+    return {
+      __esModule: true,
+      default: () => {
+        return null;
+      },
+    };
+  },
+);
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Topology/NetworkLinkDetailPanel",
+  () => {
+    return {
+      __esModule: true,
+      default: () => {
+        return null;
+      },
+    };
+  },
+);
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Topology/AddNeighborToMonitoringModal",
+  () => {
+    return {
+      __esModule: true,
+      default: () => {
+        return null;
+      },
+    };
+  },
+);
+
+/*
+ * Keep the live view, controls and state real; the canvas is represented by
+ * its inputs so these tests do not need a browser graphics implementation.
+ */
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Topology/NetworkDeviceGraph",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: GraphProps): ReactElement => {
+        return (
+          <div
+            data-testid="live-network-graph"
+            data-search={props.searchText}
+            data-layout={props.layoutMode}
+            data-health={props.healthFilterMode}
+            data-kinds={Array.from(props.visibleKinds || [])
+              .sort()
+              .join(",")}
+            data-node-count={props.topology.nodes.length}
+          >
+            Network canvas
+          </div>
+        );
+      },
+    };
+  },
+);
+
+const PAYLOAD: Record<string, unknown> = {
+  data: {
+    nodes: [
+      {
+        id: "router-1",
+        name: "Branch router",
+        kind: "device",
+        isManaged: true,
+        status: "down",
+      },
+      {
+        id: "switch-1",
+        name: "Access switch",
+        kind: "device",
+        isManaged: true,
+        status: "up",
+      },
+      {
+        id: "peer-1",
+        name: "Discovered phone",
+        kind: "unmanaged",
+        isManaged: false,
+        status: "unknown",
+      },
+      {
+        id: "endpoint-1",
+        name: "Workstation",
+        kind: "endpoint",
+        isManaged: false,
+        status: "up",
+        vlanId: 20,
+      },
+    ],
+    edges: [],
+  },
+};
+
+async function renderMap(): Promise<void> {
+  render(
+    <MemoryRouter>
+      <NetworkTopologyLiveView siteId="branch-1" layoutMode="tiered" />
+    </MemoryRouter>,
+  );
+  await screen.findByTestId("live-network-graph");
+}
+
+describe("network topology live view integration", () => {
+  beforeEach(() => {
+    postMock.mockReset();
+    postMock.mockResolvedValue(PAYLOAD);
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.useRealTimers();
+  });
+
+  test("fetches only the requested site and preserves its initial layout", async () => {
+    await renderMap();
+    expect(postMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: {
+          projectId: "10000000-0000-4000-8000-000000000001",
+          siteId: "branch-1",
+        },
+      }),
+    );
+    expect(screen.getByTestId("live-network-graph")).toHaveAttribute(
+      "data-layout",
+      "tiered",
+    );
+    expect(screen.getByText(/Updated \d/)).toBeVisible();
+  });
+
+  test("clear filters restores the map while preserving the chosen arrangement", async () => {
+    await renderMap();
+    fireEvent.click(screen.getByRole("button", { name: /Map options/ }));
+    fireEvent.click(screen.getByRole("button", { name: "Hub and spoke" }));
+    fireEvent.click(screen.getByRole("button", { name: "Endpoints" }));
+    fireEvent.click(screen.getByRole("button", { name: /Needs attention/ }));
+    fireEvent.change(
+      screen.getByRole("textbox", { name: "Find a network device" }),
+      { target: { value: "router" } },
+    );
+    const graph: HTMLElement = screen.getByTestId("live-network-graph");
+    expect(graph).toHaveAttribute("data-health", "attention");
+    expect(graph).toHaveAttribute("data-search", "router");
+    expect(graph).toHaveAttribute("data-kinds", "device,unmanaged");
+    fireEvent.click(screen.getByRole("button", { name: "Clear filters" }));
+    expect(graph).toHaveAttribute("data-health", "all");
+    expect(graph).toHaveAttribute("data-search", "");
+    expect(graph).toHaveAttribute("data-kinds", "device,endpoint,unmanaged");
+    expect(graph).toHaveAttribute("data-layout", "star");
+    expect(
+      screen.queryByRole("button", { name: "Clear filters" }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("closing and reopening options keeps the selected filters", async () => {
+    await renderMap();
+    fireEvent.click(screen.getByRole("button", { name: /Map options/ }));
+    fireEvent.click(
+      screen.getByRole("button", { name: "Discovered neighbors" }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Map options/ }));
+    expect(
+      screen.getByRole("button", { name: /Map options/ }),
+    ).toHaveTextContent("1");
+    expect(screen.getByTestId("live-network-graph")).toHaveAttribute(
+      "data-kinds",
+      "device,endpoint",
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Map options/ }));
+    expect(
+      screen.getByRole("button", { name: "Discovered neighbors" }),
+    ).toHaveAttribute("aria-pressed", "false");
+  });
+
+  test("an initial failure offers a working retry", async () => {
+    postMock.mockRejectedValueOnce(new Error("Network unavailable"));
+    render(
+      <MemoryRouter>
+        <NetworkTopologyLiveView />
+      </MemoryRouter>,
+    );
+    await screen.findByText("Network unavailable");
+    expect(screen.queryByTestId("live-network-graph")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+    await screen.findByTestId("live-network-graph");
+    expect(postMock).toHaveBeenCalledTimes(2);
+  });
+
+  test("a manual refresh failure preserves the visible map and its filters", async () => {
+    await renderMap();
+    fireEvent.change(
+      screen.getByRole("textbox", { name: "Find a network device" }),
+      { target: { value: "switch" } },
+    );
+    postMock.mockRejectedValueOnce(new Error("Refresh unavailable"));
+    fireEvent.click(screen.getByRole("button", { name: "Refresh" }));
+    await screen.findByTestId("network-topology-refresh-error");
+    expect(screen.getByTestId("live-network-graph")).toHaveAttribute(
+      "data-search",
+      "switch",
+    );
+    expect(screen.getByText("Refresh failed")).toBeVisible();
+    fireEvent.click(screen.getByRole("button", { name: "Refresh" }));
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("network-topology-refresh-error"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test("an automatic refresh failure is visible and recovers on the next successful poll", async () => {
+    jest.useFakeTimers();
+    await renderMap();
+    postMock.mockRejectedValueOnce(new Error("Polling unavailable"));
+    await act(async () => {
+      jest.advanceTimersByTime(60000);
+    });
+    expect(
+      screen.getByTestId("network-topology-refresh-error"),
+    ).toHaveTextContent("Polling unavailable");
+    expect(screen.getByTestId("live-network-graph")).toBeVisible();
+    await act(async () => {
+      jest.advanceTimersByTime(60000);
+    });
+    expect(
+      screen.queryByTestId("network-topology-refresh-error"),
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,275 @@
+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 React from "react";
+import NetworkTopologyToolbar, {
+  ComponentProps,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/NetworkTopologyToolbar";
+import { ALL_NODE_KINDS } from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/NetworkTopologyViewModel";
+import {
+  buildHealthFilterOptions,
+  TopologyHealthSummary,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/TopologyHealthFilter";
+
+const HEALTH: TopologyHealthSummary = {
+  total: 12,
+  healthy: 8,
+  down: 2,
+  degraded: 1,
+  unknown: 1,
+  attention: 3,
+};
+
+function toolbarProps(overrides: Partial<ComponentProps> = {}): ComponentProps {
+  return {
+    searchText: "",
+    onSearchChange: jest.fn(),
+    layoutMode: "force",
+    onLayoutChange: jest.fn(),
+    availableKinds: ALL_NODE_KINDS,
+    visibleKinds: ALL_NODE_KINDS,
+    onKindToggle: jest.fn(),
+    vlanOptions: [
+      { label: "All VLANs", value: "all" },
+      { label: "VLAN 20", value: "20" },
+    ],
+    selectedVlan: "all",
+    onVlanChange: jest.fn(),
+    healthSummary: HEALTH,
+    healthFilterMode: "all",
+    healthChipOptions: buildHealthFilterOptions(HEALTH),
+    healthFilterMatchCount: 12,
+    onHealthChange: jest.fn(),
+    onResetFilters: jest.fn(),
+    ...overrides,
+  };
+}
+
+function openOptions(): void {
+  fireEvent.click(screen.getByRole("button", { name: /Map options/ }));
+}
+
+describe("network map controls", () => {
+  afterEach(cleanup);
+
+  test("starts with search and health filters while advanced options are closed", () => {
+    render(<NetworkTopologyToolbar {...toolbarProps()} />);
+    expect(
+      screen.getByRole("textbox", { name: "Find a network device" }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("group", { name: "Filter by device health" }),
+    ).toBeVisible();
+    expect(screen.getByRole("button", { name: /Map options/ })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    expect(
+      screen.queryByRole("group", { name: "Topology layout" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Clear filters" }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("the disclosure is accessible and can be closed again", () => {
+    render(<NetworkTopologyToolbar {...toolbarProps()} />);
+    openOptions();
+    const toggle: HTMLElement = screen.getByRole("button", {
+      name: /Map options/,
+    });
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByTestId("network-topology-options")).toHaveAttribute(
+      "id",
+      toggle.getAttribute("aria-controls"),
+    );
+    expect(
+      screen.getByRole("group", { name: "Topology layout" }),
+    ).toBeVisible();
+    fireEvent.click(toggle);
+    expect(
+      screen.queryByTestId("network-topology-options"),
+    ).not.toBeInTheDocument();
+  });
+
+  test.each([
+    ["Automatic", "force"],
+    ["By network layer", "tiered"],
+    ["Concentric", "radial"],
+    ["Hub and spoke", "star"],
+    ["Parent and child", "parentChild"],
+  ])("keeps the %s arrangement available", (label: string, mode: string) => {
+    const props: ComponentProps = toolbarProps();
+    render(<NetworkTopologyToolbar {...props} />);
+    openOptions();
+    fireEvent.click(screen.getByRole("button", { name: label }));
+    expect(props.onLayoutChange).toHaveBeenCalledWith(mode);
+  });
+
+  test("explains the selected layout and reports it as selected", () => {
+    render(
+      <NetworkTopologyToolbar {...toolbarProps({ layoutMode: "tiered" })} />,
+    );
+    openOptions();
+    expect(
+      screen.getByRole("button", { name: "By network layer" }),
+    ).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Automatic" })).toHaveAttribute(
+      "aria-pressed",
+      "false",
+    );
+    expect(
+      screen.getByText(/Places core, distribution and access devices in rows/),
+    ).toBeVisible();
+  });
+
+  test("only offers node kinds present in this network", () => {
+    render(
+      <NetworkTopologyToolbar
+        {...toolbarProps({ availableKinds: new Set(["device"]) })}
+      />,
+    );
+    openOptions();
+    const kinds: HTMLElement = screen.getByRole("group", {
+      name: "Node types",
+    });
+    expect(
+      within(kinds).getByRole("button", { name: "Monitored devices" }),
+    ).toBeVisible();
+    expect(
+      within(kinds).queryByRole("button", { name: "Endpoints" }),
+    ).not.toBeInTheDocument();
+    expect(
+      within(kinds).queryByRole("button", { name: "Discovered neighbors" }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("can hide and restore discovered neighbors", () => {
+    const props: ComponentProps = toolbarProps({
+      visibleKinds: new Set(["device", "endpoint"]),
+    });
+    render(<NetworkTopologyToolbar {...props} />);
+    openOptions();
+    const neighbors: HTMLElement = screen.getByRole("button", {
+      name: "Discovered neighbors",
+    });
+    expect(neighbors).toHaveAttribute("aria-pressed", "false");
+    fireEvent.click(neighbors);
+    expect(props.onKindToggle).toHaveBeenCalledWith("unmanaged");
+  });
+
+  test("indicates hidden filters even while Map options is closed", () => {
+    render(
+      <NetworkTopologyToolbar
+        {...toolbarProps({
+          visibleKinds: new Set(["device"]),
+          selectedVlan: "20",
+        })}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: /Map options/ }),
+    ).toHaveTextContent("2");
+    expect(screen.getByRole("button", { name: "Clear filters" })).toBeVisible();
+    expect(
+      screen.queryByTestId("network-topology-options"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("does not claim a type filter is active for a kind absent from the payload", () => {
+    render(
+      <NetworkTopologyToolbar
+        {...toolbarProps({
+          availableKinds: new Set(["device"]),
+          visibleKinds: new Set(["device"]),
+        })}
+      />,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Clear filters" }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("does not offer a VLAN selector when none were discovered", () => {
+    render(
+      <NetworkTopologyToolbar
+        {...toolbarProps({
+          vlanOptions: [{ label: "All VLANs", value: "all" }],
+        })}
+      />,
+    );
+    openOptions();
+    expect(
+      screen.queryByTestId("network-topology-vlan-filter"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("explains the endpoint-only scope of the VLAN selector", () => {
+    render(<NetworkTopologyToolbar {...toolbarProps()} />);
+    openOptions();
+    expect(screen.getByTestId("network-topology-vlan-filter")).toBeVisible();
+    expect(
+      screen.getByText(
+        "Filters endpoints. Network devices stay visible for context.",
+      ),
+    ).toBeVisible();
+  });
+
+  test("search reports input to the live map", () => {
+    const props: ComponentProps = toolbarProps();
+    render(<NetworkTopologyToolbar {...props} />);
+    fireEvent.change(
+      screen.getByRole("textbox", { name: "Find a network device" }),
+      { target: { value: "branch router" } },
+    );
+    expect(props.onSearchChange).toHaveBeenCalledWith("branch router");
+  });
+
+  test("selecting a health filter reports the intended mode", () => {
+    const props: ComponentProps = toolbarProps();
+    render(<NetworkTopologyToolbar {...props} />);
+    fireEvent.click(screen.getByRole("button", { name: /Needs attention/ }));
+    expect(props.onHealthChange).toHaveBeenCalledWith("attention");
+  });
+
+  test("announces exact health matches without mislabeling degraded devices as down", () => {
+    render(
+      <NetworkTopologyToolbar
+        {...toolbarProps({
+          healthFilterMode: "down",
+          healthFilterMatchCount: 2,
+        })}
+      />,
+    );
+    const hint: HTMLElement = screen.getByTestId(
+      "network-topology-health-filter-hint",
+    );
+    expect(hint).toHaveAttribute("role", "status");
+    expect(hint).toHaveTextContent("2 of 12 match this health filter.");
+    expect(hint).toHaveTextContent(
+      "Connected neighbors stay dimmed for context.",
+    );
+  });
+
+  test.each([
+    { searchText: "router" },
+    { selectedVlan: "20" },
+    { healthFilterMode: "down" as const },
+    { visibleKinds: new Set<"device">(["device"]) },
+  ])(
+    "offers a single reset for any active filter",
+    (overrides: Partial<ComponentProps>) => {
+      const props: ComponentProps = toolbarProps(overrides);
+      render(<NetworkTopologyToolbar {...props} />);
+      fireEvent.click(screen.getByRole("button", { name: "Clear filters" }));
+      expect(props.onResetFilters).toHaveBeenCalledTimes(1);
+      expect(props.onLayoutChange).not.toHaveBeenCalled();
+    },
+  );
+});