@openshift-migration-advisor/shared-components 0.27.0 → 0.28.0-09381b4d22e5

package/src/report/__tests__/ClustersOverview.test.tsx

@@ -0,0 +1,241 @@
+import "@testing-library/jest-dom";
+import {
+  chart_color_blue_300,
+  chart_color_purple_100,
+  chart_color_purple_300,
+  chart_color_teal_200,
+  chart_color_yellow_400,
+} from "@patternfly/react-tokens";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import {
+  ClustersOverview,
+  type InventoryDataLike,
+} from "../ClustersOverview.js";
+
+const donutProps = vi.hoisted(() => ({
+  current: null as MigrationDonutChartProps | null,
+}));
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: (props: MigrationDonutChartProps): JSX.Element => {
+    donutProps.current = props;
+    return (
+      <div data-testid="clusters-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected a clusters donut to render");
+  }
+  return props;
+};
+
+const selectView = async (name: string): Promise<void> => {
+  const user = userEvent.setup();
+  await user.click(
+    screen.getByRole("button", { name: "VM distribution by cluster" }),
+  );
+  await user.click(screen.getByRole("menuitem", { name }));
+};
+
+describe("ClustersOverview", () => {
+  it("shows the cluster empty state when no clusters were collected", () => {
+    render(<ClustersOverview />);
+
+    expect(screen.getByText("Clusters")).toBeInTheDocument();
+    expect(screen.getByText("Top 5 clusters")).toBeInTheDocument();
+    expect(screen.getByText("Cluster data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("clusters-donut")).not.toBeInTheDocument();
+  });
+
+  it("keeps the top 4 clusters and rolls the rest into one slice", () => {
+    render(
+      <ClustersOverview
+        clusters={{
+          a: { vms: { total: 10 } },
+          b: { vms: { total: 8 } },
+          c: { vms: { total: 6 } },
+          d: { vms: { total: 4 } },
+          e: { vms: { total: 3 } },
+          f: {},
+          g: { vms: { total: Number.NaN } },
+          h: { vms: { total: -2 } },
+        }}
+      />,
+    );
+
+    expect(screen.getByTestId("clusters-donut")).toHaveTextContent("31 VMs");
+
+    const props = renderedDonut();
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["Cluster 1", 10],
+      ["Cluster 2", 8],
+      ["Cluster 3", 6],
+      ["Cluster 4", 4],
+      ["Rest of clusters", 3],
+    ]);
+    expect(props.data[0]?.countDisplay).toBe("10 VMs");
+    expect(props.legend).toEqual({
+      "Cluster 1": chart_color_blue_300.value,
+      "Cluster 2": chart_color_purple_300.value,
+      "Cluster 3": chart_color_purple_100.value,
+      "Cluster 4": chart_color_teal_200.value,
+      "Rest of clusters": chart_color_yellow_400.value,
+    });
+    expect(props.legendVariant).toBe("html");
+    expect(props.height).toBe(300);
+    expect(props.width).toBe(420);
+    expect(props.donutThickness).toBe(18);
+    expect(props.titleFontSize).toBe(34);
+    expect(props.subTitleColor).toBe(
+      "var(--pf-t--global--text--color--subtle)",
+    );
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "Cluster 1",
+          y: 10,
+          countDisplay: "10 VMs",
+          legendCategory: "Cluster 1",
+        },
+        percent: 32.258,
+        total: 31,
+      }),
+    ).toBe("10 VMs\n32.3%");
+  });
+
+  it("passes the chart legend variant through", () => {
+    render(
+      <ClustersOverview
+        legendVariant="chart"
+        clusters={{ a: { vms: { total: 2 } } }}
+      />,
+    );
+
+    expect(renderedDonut().legendVariant).toBe("chart");
+  });
+
+  it("plots cluster counts per data center and ignores non-numeric entries", async () => {
+    render(
+      <ClustersOverview
+        clustersPerDatacenter={
+          [1, 5, Number.NaN, 2, 4, 3, -1, "3"] as unknown as number[]
+        }
+        clusters={{ a: { vms: { total: 1 } } }}
+      />,
+    );
+
+    await selectView("Cluster distribution by data center");
+
+    expect(screen.getByText("Top 5 datacenters")).toBeInTheDocument();
+    expect(screen.getByTestId("clusters-donut")).toHaveTextContent(
+      "15 Clusters",
+    );
+
+    const props = renderedDonut();
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["Data center 1", 5],
+      ["Data center 2", 4],
+      ["Data center 3", 3],
+      ["Data center 4", 2],
+      ["Rest of datacenters", 1],
+    ]);
+    expect(props.data[4]?.countDisplay).toBe("1 clusters");
+    expect(props.subTitle).toBe("Clusters");
+  });
+
+  it("shows the cluster empty state when datacenter counts are unusable", async () => {
+    render(
+      <ClustersOverview
+        clustersPerDatacenter={"nope" as unknown as number[]}
+        clusters={{ a: { vms: { total: 1 } } }}
+      />,
+    );
+
+    await selectView("Cluster distribution by data center");
+
+    expect(screen.getByText("Cluster data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("clusters-donut")).not.toBeInTheDocument();
+  });
+
+  it("renders the top 5 CPU overcommitment ratios as boxes and a legend", async () => {
+    render(
+      <ClustersOverview
+        clusters={{
+          low: { infra: { cpuOverCommitment: 0.5 } },
+          high: { infra: { cpuOverCommitment: 8 } },
+          ratio: { infra: { cpuOverCommitment: "  1 : 4.25  " } },
+          numericString: { infra: { cpuOverCommitment: "3.5" } },
+          integer: { infra: { cpuOverCommitment: 2 } },
+          sixth: { infra: { cpuOverCommitment: 1 } },
+        }}
+      />,
+    );
+
+    await selectView("Cluster CPU over commitment");
+
+    expect(screen.queryByTestId("clusters-donut")).not.toBeInTheDocument();
+    expect(screen.getByText("8")).toHaveStyle({
+      background: chart_color_blue_300.value,
+    });
+    expect(screen.getByText("4.25")).toHaveStyle({
+      background: chart_color_purple_300.value,
+    });
+    expect(screen.getByText("3.5")).toHaveStyle({
+      background: chart_color_purple_100.value,
+    });
+    expect(screen.getByText("2")).toHaveStyle({
+      background: chart_color_teal_200.value,
+    });
+    expect(screen.getByText("1")).toHaveStyle({
+      background: chart_color_yellow_400.value,
+    });
+    expect(screen.queryByText("0.5")).not.toBeInTheDocument();
+    expect(screen.getByText("Cluster 1 (8)")).toBeInTheDocument();
+    expect(screen.getByText("Cluster 5 (1)")).toBeInTheDocument();
+    expect(screen.queryByText("Cluster 6 (0.5)")).not.toBeInTheDocument();
+  });
+
+  it("does not crash when cpuOverCommitment is missing or an unexpected shape", async () => {
+    const clusters: Record<string, InventoryDataLike> = {
+      missing: {},
+      blank: { infra: { cpuOverCommitment: "   " } },
+      garbage: { infra: { cpuOverCommitment: "lots" } },
+      negative: { infra: { cpuOverCommitment: -2 } },
+      objectRatio: { infra: { cpuOverCommitment: { ratio: 4 } } },
+      nonObject: "cluster" as unknown as InventoryDataLike,
+    };
+
+    render(
+      <ClustersOverview
+        clusters={{
+          ...clusters,
+          stringInfra: {
+            infra: "nope" as unknown as InventoryDataLike["infra"],
+          },
+          arrayClusters: ["1:4"] as unknown as InventoryDataLike,
+        }}
+      />,
+    );
+
+    await selectView("Cluster CPU over commitment");
+
+    expect(
+      screen.getByText("CPU overcommitment data not collected"),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("clusters-donut")).not.toBeInTheDocument();
+  });
+});

package/src/report/__tests__/CpuAndMemoryOverview.test.tsx

@@ -0,0 +1,200 @@
+import "@testing-library/jest-dom";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import { CpuAndMemoryOverview } from "../CpuAndMemoryOverview.js";
+
+const donutProps = vi.hoisted(() => ({
+  current: null as MigrationDonutChartProps | null,
+}));
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: (props: MigrationDonutChartProps): JSX.Element => {
+    donutProps.current = props;
+    return (
+      <div data-testid="cpu-memory-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected a CPU and memory donut to render");
+  }
+  return props;
+};
+
+describe("CpuAndMemoryOverview", () => {
+  it("shows the memory empty state when no memory tiers were collected", () => {
+    render(<CpuAndMemoryOverview />);
+
+    expect(screen.getByText("CPU & memory")).toBeInTheDocument();
+    expect(screen.getByText("Memory size tiers")).toBeInTheDocument();
+    expect(screen.getByText("Memory data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("cpu-memory-donut")).not.toBeInTheDocument();
+  });
+
+  it("plots memory tiers from a plain count map and appends GB", () => {
+    render(
+      <CpuAndMemoryOverview
+        memoryTierDistribution={{
+          "129-256": 1,
+          "0-4": 2,
+          "256+": 3,
+          "5-16 GB": 4,
+          "17–32": 5,
+          unused: 0,
+        }}
+        memoryTotalGB={1024}
+      />,
+    );
+
+    const props = renderedDonut();
+    expect(props.title).toBe("15 VMs");
+    expect(props.subTitle).toBe(`${(1024).toLocaleString()} GB`);
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["0-4 GB", 2],
+      ["5-16 GB", 4],
+      ["17–32 GB", 5],
+      ["129-256 GB", 1],
+      ["256+ GB", 3],
+    ]);
+    expect(props.data.map((slice) => slice.legendCategory)).toEqual([
+      "0-4",
+      "5-16 GB",
+      "17–32",
+      "129-256",
+      "256+",
+    ]);
+    expect(props.legend).toEqual({
+      "0-4": "#0066cc",
+      "5-16 GB": "#5e40be",
+      "17–32": "#b6a6e9",
+      "129-256": "#73c5c5",
+      "256+": "#b98412",
+    });
+    expect(props.legendVariant).toBe("html");
+    expect(props.marginLeft).toBeUndefined();
+    expect(props.onItemClick).toBeUndefined();
+    expect(props.onTitleClick).toBeUndefined();
+    expect(
+      props.legendLabelFormatter?.({ x: "0-4 GB", countDisplay: "2 VMs" }),
+    ).toBe("0-4 GB (2 VMs)");
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "0-4 GB",
+          y: 2,
+          countDisplay: "2 VMs",
+          legendCategory: "0-4",
+        },
+        percent: 13.333,
+        total: 15,
+      }),
+    ).toBe("2 VMs\n13.3%");
+  });
+
+  it("calls onTierSelect with the memory distribution key", () => {
+    const onTierSelect = vi.fn();
+    const onTitleClick = vi.fn();
+    render(
+      <CpuAndMemoryOverview
+        memoryTierDistribution={{ "0-4": 2 }}
+        onTierSelect={onTierSelect}
+        onTitleClick={onTitleClick}
+      />,
+    );
+
+    renderedDonut().onItemClick?.({
+      name: "0-4 GB",
+      count: 2,
+      legendCategory: "0-4",
+    });
+    renderedDonut().onTitleClick?.();
+
+    expect(onTierSelect).toHaveBeenCalledTimes(1);
+    expect(onTierSelect).toHaveBeenCalledWith("0-4");
+    expect(onTitleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("switches to vCPU tiers and omits slice clicks", async () => {
+    const user = userEvent.setup();
+    const onTierSelect = vi.fn();
+    render(
+      <CpuAndMemoryOverview
+        legendVariant="chart"
+        cpuTierDistribution={{
+          "8": 1,
+          "2 cores": 2,
+          "1-2": 4,
+          "4+": 1,
+          idle: 0,
+        }}
+        cpuTotalCores={64}
+        memoryTierDistribution={{ "0-4": 2 }}
+        onTierSelect={onTierSelect}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", {
+        name: "VM distribution by memory size tier",
+      }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", {
+        name: "VM distribution by vCPU count tier",
+      }),
+    );
+
+    expect(screen.getByText("vCPU count tiers")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", {
+        name: "VM distribution by vCPU count tier",
+      }),
+    ).toBeInTheDocument();
+
+    const props = renderedDonut();
+    expect(props.title).toBe("8 VMs");
+    expect(props.subTitle).toBe(`${(64).toLocaleString()} Cores`);
+    expect(props.legendVariant).toBe("chart");
+    expect(props.marginLeft).toBe("52%");
+    expect(props.labelFontSize).toBe(18);
+    expect(props.itemsPerRow).toBe(2);
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["1-2 cores", 4],
+      ["2 cores", 2],
+      ["4+ cores", 1],
+      ["8 cores", 1],
+    ]);
+    expect(props.onItemClick).toBeUndefined();
+  });
+
+  it("shows the CPU empty state when the selected distribution is empty", async () => {
+    const user = userEvent.setup();
+    render(<CpuAndMemoryOverview cpuTierDistribution={{}} />);
+
+    await user.click(
+      screen.getByRole("button", {
+        name: "VM distribution by memory size tier",
+      }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", {
+        name: "VM distribution by vCPU count tier",
+      }),
+    );
+
+    expect(screen.getByText("CPU data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("cpu-memory-donut")).not.toBeInTheDocument();
+  });
+});

package/src/report/__tests__/StorageOverview.test.tsx

@@ -0,0 +1,223 @@
+import "@testing-library/jest-dom";
+import {
+  chart_color_blue_300,
+  chart_color_purple_100,
+  chart_color_purple_300,
+  chart_color_teal_300,
+  chart_color_yellow_400,
+} from "@patternfly/react-tokens";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import { StorageOverview } from "../StorageOverview.js";
+
+const donutProps = vi.hoisted(() => ({
+  current: null as MigrationDonutChartProps | null,
+}));
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: (props: MigrationDonutChartProps): JSX.Element => {
+    donutProps.current = props;
+    return (
+      <div data-testid="storage-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected a storage donut to render");
+  }
+  return props;
+};
+
+const selectView = async (name: string): Promise<void> => {
+  const user = userEvent.setup();
+  await user.click(
+    screen.getByRole("button", { name: "VM count by disk size tier" }),
+  );
+  await user.click(screen.getByRole("menuitem", { name }));
+};
+
+describe("StorageOverview", () => {
+  it("shows the storage empty state when no disk tiers were collected", () => {
+    render(<StorageOverview />);
+
+    expect(screen.getByText("Disks")).toBeInTheDocument();
+    expect(screen.getByText("Storage data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("storage-donut")).not.toBeInTheDocument();
+  });
+
+  it("orders VM-count tiers and totals the VM count", () => {
+    render(
+      <StorageOverview
+        diskSizeTier={{
+          Hard: { vmCount: 3, totalSizeTB: 30 },
+          Easy: { vmCount: 10, totalSizeTB: 5 },
+          Medium: { vmCount: 6, totalSizeTB: 15 },
+        }}
+      />,
+    );
+
+    expect(screen.getByTestId("storage-donut")).toHaveTextContent("19 VMs");
+
+    const props = renderedDonut();
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["0-10 TB", 10],
+      ["11-20 TB", 6],
+      ["21-50 TB", 3],
+    ]);
+    expect(props.data[0]?.countDisplay).toBe("10 VMs");
+    expect(props.legend).toEqual({
+      Easy: chart_color_blue_300.value,
+      Medium: chart_color_purple_300.value,
+      Hard: chart_color_purple_100.value,
+    });
+    expect(props.legendVariant).toBe("html");
+    expect(props.subTitleColor).toBe(
+      "var(--pf-t--global--text--color--subtle)",
+    );
+  });
+
+  it("switches to total disk size and formats TB totals", async () => {
+    render(
+      <StorageOverview
+        diskSizeTier={{
+          Easy: { vmCount: 10, totalSizeTB: 5.5 },
+          Medium: { vmCount: 6, totalSizeTB: 15 },
+        }}
+      />,
+    );
+
+    await selectView("Total disk size by tier");
+
+    const props = renderedDonut();
+    expect(props.title).toBe("20.50 TB");
+    expect(props.subTitle).toBe("16 VMs");
+    expect(props.data[0]?.countDisplay).toBe("5.50 TB");
+  });
+
+  it("drills down into a disk-size range when a tier slice is clicked", () => {
+    const onDiskTierSelect = vi.fn();
+    render(
+      <StorageOverview
+        diskSizeTier={{ Easy: { vmCount: 10, totalSizeTB: 5 } }}
+        onDiskTierSelect={onDiskTierSelect}
+      />,
+    );
+
+    const props = renderedDonut();
+    const slice = props.data[0];
+    if (!slice) {
+      throw new Error("expected a tier slice");
+    }
+    props.onItemClick?.(slice);
+
+    expect(onDiskTierSelect).toHaveBeenCalledWith({
+      min: 0,
+      max: 10 * 1024 * 1024,
+    });
+  });
+
+  it("renders the disk-type bar chart and its empty state", async () => {
+    const { rerender } = render(
+      <StorageOverview
+        diskTypes={{ NFS: { vmCount: 2 }, VMFS: { vmCount: 5 } }}
+      />,
+    );
+
+    await selectView("VM count by disk type");
+
+    // Preferred order places VMFS before NFS.
+    const vmfs = screen.getByText("VMFS");
+    const nfs = screen.getByText("NFS");
+    expect(vmfs.compareDocumentPosition(nfs)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    expect(
+      screen.getByText(/Totals may exceed the unique VM count/),
+    ).toBeInTheDocument();
+
+    rerender(<StorageOverview diskTypes={{}} />);
+    expect(
+      screen.getByText("Disk type data not collected"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the shared-disks donut", async () => {
+    render(<StorageOverview totalVMs={10} totalWithSharedDisks={4} />);
+
+    await selectView("Shared disks VS. No shared disks");
+
+    const props = renderedDonut();
+    expect(props.title).toBe("10 VMs");
+    expect(props.subTitle).toBe("4 with shared disks");
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["With shared disks", 4],
+      ["No shared disks", 6],
+    ]);
+    expect(props.customColors).toEqual({
+      "With shared disks": chart_color_yellow_400.value,
+      "No shared disks": chart_color_blue_300.value,
+    });
+  });
+
+  it("disables the shared-disks view when no VMs have shared disks", async () => {
+    const user = userEvent.setup();
+    render(<StorageOverview totalVMs={10} totalWithSharedDisks={0} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "VM count by disk size tier" }),
+    );
+    const sharedItem = screen.getByRole("menuitem", {
+      name: "Shared disks VS. No shared disks",
+    });
+    expect(sharedItem).toBeDisabled();
+
+    await user.click(sharedItem);
+    // The disabled item does not switch the active view.
+    expect(
+      screen.getByRole("button", { name: "VM count by disk size tier" }),
+    ).toBeInTheDocument();
+  });
+
+  it("passes the chart legend variant through", () => {
+    render(
+      <StorageOverview
+        legendVariant="chart"
+        diskSizeTier={{ Easy: { vmCount: 2, totalSizeTB: 1 } }}
+      />,
+    );
+
+    expect(renderedDonut().legendVariant).toBe("chart");
+  });
+
+  it("keeps the configured tier palette aligned with the categorical order", () => {
+    render(
+      <StorageOverview
+        diskSizeTier={{
+          Easy: { vmCount: 1 },
+          Medium: { vmCount: 1 },
+          Hard: { vmCount: 1 },
+          White: { vmCount: 1 },
+        }}
+      />,
+    );
+
+    expect(renderedDonut().legend).toEqual({
+      Easy: chart_color_blue_300.value,
+      Medium: chart_color_purple_300.value,
+      Hard: chart_color_purple_100.value,
+      "White glove": chart_color_teal_300.value,
+    });
+  });
+});