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

package/src/report/CpuAndMemoryOverview.tsx

@@ -0,0 +1,277 @@
+import { css } from "@emotion/css";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  type MenuToggleElement,
+} from "@patternfly/react-core";
+import { DataProcessorIcon } from "@patternfly/react-icons";
+import type { FC, Ref } from "react";
+import { useMemo, useState } from "react";
+import {
+  MigrationDonutChart,
+  type MigrationDonutChartDatum,
+  type MigrationDonutChartLegendVariant,
+} from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+
+export interface CpuAndMemoryOverviewProps {
+  cpuTierDistribution?: Record<string, number>;
+  memoryTierDistribution?: Record<string, number>;
+  memoryTotalGB?: number;
+  cpuTotalCores?: number;
+  /**
+   * Memory-tier slice click. The argument is the distribution key.
+   * Agent-ui maps it to a VM memory filter; ui-app omits it.
+   */
+  onTierSelect?: (tierLabel: string) => void;
+  /** Center-title click. Agent-ui opens the VM list with no extra filters. */
+  onTitleClick?: () => void;
+  /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+  legendVariant?: MigrationDonutChartLegendVariant;
+}
+
+type ViewMode = "memoryTiers" | "vcpuTiers";
+
+const VIEW_MODE_LABELS: Record<ViewMode, string> = {
+  memoryTiers: "VM distribution by memory size tier",
+  vcpuTiers: "VM distribution by vCPU count tier",
+};
+
+const VIEW_SUBTITLES: Record<ViewMode, string> = {
+  memoryTiers: "Memory size tiers",
+  vcpuTiers: "vCPU count tiers",
+};
+
+/**
+ * Categorical order shared by the agent-ui and ui-app CPU/memory donuts.
+ */
+const TIER_COLORS = [
+  "#0066cc",
+  "#5e40be",
+  "#b6a6e9",
+  "#73c5c5",
+  "#b98412",
+  "#28a745",
+  "#f0ad4e",
+  "#d9534f",
+  "#009596",
+  "#6a6e73",
+];
+
+const CHART_ID = "cpu-memory-overview";
+const CHART_TITLE = "CPU & memory";
+
+const cardSubtitle = css`
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+
+const menuToggleMinWidth = css`
+  min-width: 290px;
+`;
+
+const titleRow = css`
+  width: 100%;
+`;
+
+const isViewMode = (value: string | number | undefined): value is ViewMode =>
+  value === "memoryTiers" || value === "vcpuTiers";
+
+const tierSortKey = (label: string): number => {
+  const value = Number.parseInt(label.trim(), 10);
+  return Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
+};
+
+const hasUnit = (label: string, unit: "GB" | "cores"): boolean =>
+  unit === "GB" ? /gb$/i.test(label) : /cores?$/i.test(label);
+
+const slicesFromDistribution = (
+  distribution: Record<string, number> | undefined,
+  unit: "GB" | "cores",
+): MigrationDonutChartDatum[] =>
+  Object.entries(distribution ?? {})
+    .filter(([, count]) => Number(count) > 0)
+    .sort(([left], [right]) => tierSortKey(left) - tierSortKey(right))
+    .map(([tier, count]) => {
+      const trimmed = tier.trim();
+      const name = hasUnit(trimmed, unit) ? trimmed : `${trimmed} ${unit}`;
+      const vmCount = Number(count);
+      return {
+        name,
+        count: vmCount,
+        countDisplay: `${vmCount} VMs`,
+        legendCategory: tier,
+      };
+    });
+
+const legendFor = (categories: string[]): Record<string, string> => {
+  const legend: Record<string, string> = {};
+  categories.forEach((category, index) => {
+    const color = TIER_COLORS[index % TIER_COLORS.length];
+    if (color) {
+      legend[category] = color;
+    }
+  });
+  return legend;
+};
+
+export const CpuAndMemoryOverview: FC<CpuAndMemoryOverviewProps> = ({
+  cpuTierDistribution,
+  memoryTierDistribution,
+  memoryTotalGB,
+  cpuTotalCores,
+  onTierSelect,
+  onTitleClick,
+  legendVariant = "html",
+}) => {
+  const [viewMode, setViewMode] = useState<ViewMode>("memoryTiers");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const memorySlices = useMemo(
+    () => slicesFromDistribution(memoryTierDistribution, "GB"),
+    [memoryTierDistribution],
+  );
+  const vcpuSlices = useMemo(
+    () => slicesFromDistribution(cpuTierDistribution, "cores"),
+    [cpuTierDistribution],
+  );
+
+  const activeSlices = viewMode === "memoryTiers" ? memorySlices : vcpuSlices;
+  const legend = useMemo(
+    () => legendFor(activeSlices.map((slice) => slice.legendCategory)),
+    [activeSlices],
+  );
+  const totalVMs = useMemo(
+    () => activeSlices.reduce((sum, slice) => sum + slice.count, 0),
+    [activeSlices],
+  );
+
+  const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+  const subTitle =
+    viewMode === "memoryTiers"
+      ? typeof memoryTotalGB === "number"
+        ? `${memoryTotalGB.toLocaleString()} GB`
+        : undefined
+      : typeof cpuTotalCores === "number"
+        ? `${cpuTotalCores.toLocaleString()} Cores`
+        : undefined;
+  const emptyTitle =
+    viewMode === "memoryTiers"
+      ? REPORT_CARD_EMPTY_STATE_TITLES.memory
+      : REPORT_CARD_EMPTY_STATE_TITLES.cpu;
+
+  return (
+    <ChartExportSurface
+      id={CHART_ID}
+      title={chartTitle}
+      exportViews={chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS)}
+      activeExportViewId={viewMode}
+      onExportViewChange={(viewId) => {
+        if (isViewMode(viewId)) {
+          setViewMode(viewId);
+        }
+      }}
+    >
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            className={titleRow}
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <div>
+                <div>
+                  <DataProcessorIcon /> {CHART_TITLE}
+                </div>
+                <div className={cardSubtitle}>{VIEW_SUBTITLES[viewMode]}</div>
+              </div>
+            </FlexItem>
+            <ChartHeaderActions chartId={CHART_ID} title={chartTitle}>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={(_event, value) => {
+                  if (isViewMode(value)) {
+                    setViewMode(value);
+                  }
+                  setIsDropdownOpen(false);
+                }}
+                onOpenChange={setIsDropdownOpen}
+                toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => setIsDropdownOpen((open) => !open)}
+                    isExpanded={isDropdownOpen}
+                    className={menuToggleMinWidth}
+                  >
+                    {VIEW_MODE_LABELS[viewMode]}
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>
+                  <DropdownItem value="memoryTiers" key="memoryTiers">
+                    {VIEW_MODE_LABELS.memoryTiers}
+                  </DropdownItem>
+                  <DropdownItem value="vcpuTiers" key="vcpuTiers">
+                    {VIEW_MODE_LABELS.vcpuTiers}
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            </ChartHeaderActions>
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {activeSlices.length === 0 ? (
+            <CardEmptyState title={emptyTitle} />
+          ) : (
+            <MigrationDonutChart
+              legendVariant={legendVariant}
+              data={activeSlices}
+              legend={legend}
+              height={300}
+              width={420}
+              donutThickness={18}
+              titleFontSize={34}
+              title={`${totalVMs} VMs`}
+              subTitle={subTitle}
+              subTitleColor="var(--pf-t--global--text--color--subtle)"
+              legendLabelFormatter={({ x, countDisplay }) =>
+                `${x} (${countDisplay})`
+              }
+              tooltipLabelFormatter={({ datum, percent }) =>
+                `${datum.countDisplay}\n${percent.toFixed(1)}%`
+              }
+              itemsPerRow={
+                legendVariant === "chart"
+                  ? Math.ceil(activeSlices.length / 2)
+                  : undefined
+              }
+              labelFontSize={legendVariant === "chart" ? 18 : undefined}
+              marginLeft={legendVariant === "chart" ? "52%" : undefined}
+              onItemClick={
+                viewMode === "memoryTiers" && onTierSelect
+                  ? (item) => onTierSelect(item.legendCategory)
+                  : undefined
+              }
+              onTitleClick={onTitleClick}
+            />
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+CpuAndMemoryOverview.displayName = "CpuAndMemoryOverview";

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

@@ -101,12 +101,18 @@ function DownloadChartButton({ id }: { id: string }): JSX.Element {
   );
 }
 
-function DownloadPdfButton(): JSX.Element {
+function DownloadPdfButton({
+  extraPages,
+}: {
+  extraPages?: Parameters<
+    NonNullable<ReturnType<typeof useChartExport>>["downloadPdf"]
+  >[1];
+}): JSX.Element {
   const exportApi = useChartExport();
   return (
     <button
       type="button"
-      onClick={() => void exportApi?.downloadPdf("Overview")}
+      onClick={() => void exportApi?.downloadPdf("Overview", extraPages)}
     >
       Download pdf
     </button>
@@ -181,6 +187,46 @@ describe("ChartExportProvider", () => {
     expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "disks.png");
   });
 
+  it("does not change the live theme while exporting", async () => {
+    const user = userEvent.setup();
+    document.documentElement.classList.add("pf-v6-theme-dark");
+    const capture = vi.fn(async () => {
+      expect(
+        document.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(true);
+      return fakeCanvas();
+    });
+    const downloadFile = vi.fn();
+
+    render(
+      <ChartExportProvider
+        capture={capture}
+        encodePng={async () => new Blob(["png"])}
+        zipFiles={async () => new Blob(["zip"])}
+        downloadFile={downloadFile}
+        getZipFilename={() => "charts.zip"}
+      >
+        <RegisteredChart id="storage" title="Disks" />
+        <DownloadChartButton id="storage" />
+        <DownloadAllButton />
+      </ChartExportProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download storage" }));
+    await waitFor(() =>
+      expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "disks.png"),
+    );
+    await user.click(screen.getByRole("button", { name: "Download all" }));
+    await waitFor(() =>
+      expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "charts.zip"),
+    );
+
+    expect(
+      document.documentElement.classList.contains("pf-v6-theme-dark"),
+    ).toBe(true);
+    document.documentElement.classList.remove("pf-v6-theme-dark");
+  });
+
   it("re-registers charts after React Strict Mode's extra effect cycle", async () => {
     const user = userEvent.setup();
     const capture = vi.fn(async () => fakeCanvas());
@@ -236,6 +282,68 @@ describe("ChartExportProvider", () => {
     expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "report.pdf");
   });
 
+  it("forwards extra text pages (e.g. cluster sizing recommendations) to the pdf builder", async () => {
+    const user = userEvent.setup();
+    const capture = vi.fn(async () => fakeCanvas());
+    const buildPdf = vi.fn(async () => new Blob(["pdf"]));
+    const downloadFile = vi.fn();
+    const extraPages = [
+      {
+        title: "Cluster sizing recommendations",
+        items: [
+          { label: "Cluster name", value: "cluster-1" },
+          { label: "Target platform", value: "Bare metal" },
+        ],
+        footer: "Note: estimates only.",
+      },
+    ];
+
+    render(
+      <ChartExportProvider
+        capture={capture}
+        zipFiles={vi.fn()}
+        buildPdf={buildPdf}
+        downloadFile={downloadFile}
+        getPdfFilename={() => "report.pdf"}
+      >
+        <RegisteredChart id="storage" title="Disks" />
+        <DownloadPdfButton extraPages={extraPages} />
+      </ChartExportProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download pdf" }));
+
+    expect(buildPdf).toHaveBeenCalledTimes(1);
+    expect(buildPdf.mock.calls[0]?.[2]).toEqual(extraPages);
+    expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "report.pdf");
+  });
+
+  it("builds a PDF from extra text pages alone when no charts are registered", async () => {
+    const user = userEvent.setup();
+    const buildPdf = vi.fn(async () => new Blob(["pdf"]));
+    const downloadFile = vi.fn();
+    const extraPages = [{ title: "Cluster sizing recommendations", items: [] }];
+
+    render(
+      <ChartExportProvider
+        capture={vi.fn()}
+        zipFiles={vi.fn()}
+        buildPdf={buildPdf}
+        downloadFile={downloadFile}
+        getPdfFilename={() => "report.pdf"}
+      >
+        <DownloadPdfButton extraPages={extraPages} />
+      </ChartExportProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download pdf" }));
+
+    expect(buildPdf).toHaveBeenCalledTimes(1);
+    expect(buildPdf.mock.calls[0]?.[0]).toEqual([]);
+    expect(buildPdf.mock.calls[0]?.[2]).toEqual(extraPages);
+    expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "report.pdf");
+  });
+
   it("builds HTML from the same captured canvases", async () => {
     const user = userEvent.setup();
     const capture = vi.fn(async () => fakeCanvas());

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