@openshift-migration-advisor/shared-components 0.25.0-fce5293f01c1 → 0.27.0-5d0cc20d809e

package/src/report/HostsOverview.tsx

@@ -0,0 +1,185 @@
+import { css } from "@emotion/css";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+} from "@patternfly/react-core";
+import { ServerIcon } from "@patternfly/react-icons";
+import {
+  chart_color_blue_300,
+  chart_color_green_300,
+  chart_color_purple_100,
+  chart_color_purple_300,
+  chart_color_teal_200,
+  chart_color_yellow_400,
+} from "@patternfly/react-tokens";
+import type { FC } from "react";
+import { useMemo } 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 { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+
+/** Smallest host shape this card reads. Apps pass SDK hosts structurally. */
+export interface HostLike {
+  model?: string | number;
+}
+
+export interface HostsOverviewProps {
+  hosts?: HostLike[];
+  /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+  legendVariant?: MigrationDonutChartLegendVariant;
+}
+
+const TOP_HOST_MODELS = 5;
+const OTHER_MODELS_LABEL = "Other models";
+const UNKNOWN_MODEL_LABEL = "Unknown model";
+const CHART_ID = "hosts-overview";
+const CHART_TITLE = "Host distribution by model";
+
+/**
+ * Same categorical order as the ui-app host-model donut, mapped onto
+ * PatternFly `chart_color_*` tokens (nearest token where the old hex
+ * was not itself a token).
+ */
+const HOST_MODEL_COLORS = [
+  chart_color_blue_300.value,
+  chart_color_purple_300.value,
+  chart_color_purple_100.value,
+  chart_color_teal_200.value,
+  chart_color_yellow_400.value,
+  chart_color_green_300.value,
+];
+
+const cardSubtitle = css`
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+
+const hostModelLabel = (model: HostLike["model"]): string => {
+  const raw =
+    typeof model === "string"
+      ? model
+      : typeof model === "number"
+        ? String(model)
+        : "";
+  const trimmed = raw.trim();
+  return trimmed !== "" ? trimmed : UNKNOWN_MODEL_LABEL;
+};
+
+const buildHostModelDonut = (
+  hosts: HostLike[],
+): {
+  slices: MigrationDonutChartDatum[];
+  legend: Record<string, string>;
+  totalHosts: number;
+} => {
+  const counts = new Map<string, number>();
+  for (const host of hosts) {
+    const label = hostModelLabel(host?.model);
+    counts.set(label, (counts.get(label) ?? 0) + 1);
+  }
+
+  const entries = [...counts.entries()]
+    .map(([model, count]) => ({ model, count }))
+    .sort((a, b) => b.count - a.count);
+
+  const top = entries.slice(0, TOP_HOST_MODELS);
+  const restSum = entries
+    .slice(TOP_HOST_MODELS)
+    .reduce((sum, entry) => sum + entry.count, 0);
+
+  const slices: MigrationDonutChartDatum[] = top.map((entry) => ({
+    name: entry.model,
+    count: entry.count,
+    countDisplay: `${entry.count} hosts`,
+    legendCategory: entry.model,
+  }));
+
+  if (restSum > 0) {
+    slices.push({
+      name: OTHER_MODELS_LABEL,
+      count: restSum,
+      countDisplay: `${restSum} hosts`,
+      legendCategory: OTHER_MODELS_LABEL,
+    });
+  }
+
+  const legend: Record<string, string> = {};
+  slices.forEach((slice, index) => {
+    const color = HOST_MODEL_COLORS[index % HOST_MODEL_COLORS.length];
+    if (color) {
+      legend[slice.legendCategory] = color;
+    }
+  });
+
+  return { slices, legend, totalHosts: hosts.length };
+};
+
+export const HostsOverview: FC<HostsOverviewProps> = ({
+  hosts,
+  legendVariant = "html",
+}) => {
+  const { slices, legend, totalHosts } = useMemo(
+    () => buildHostModelDonut(Array.isArray(hosts) ? hosts : []),
+    [hosts],
+  );
+
+  return (
+    <ChartExportSurface id={CHART_ID} title={CHART_TITLE}>
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <div>
+                <div>
+                  <ServerIcon /> {CHART_TITLE}
+                </div>
+                <div className={cardSubtitle}>Top 5 models</div>
+              </div>
+            </FlexItem>
+            <ChartHeaderActions chartId={CHART_ID} title={CHART_TITLE} />
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {slices.length === 0 ? (
+            <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.hosts} />
+          ) : (
+            <MigrationDonutChart
+              legendVariant={legendVariant}
+              data={slices}
+              height={300}
+              width={420}
+              donutThickness={18}
+              titleFontSize={34}
+              legend={legend}
+              legendWidth={680}
+              title={`${totalHosts}`}
+              subTitle="Hosts"
+              subTitleColor="var(--pf-t--global--text--color--subtle)"
+              itemsPerRow={2}
+              labelFontSize={16}
+              marginLeft="0%"
+              tooltipLabelFormatter={({ datum, percent }) =>
+                `${datum.countDisplay}\n${percent.toFixed(1)}%`
+              }
+            />
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+HostsOverview.displayName = "HostsOverview";

package/src/report/ReportTable.tsx

@@ -0,0 +1,81 @@
+import { Button } from "@patternfly/react-core";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import type React from "react";
+import { tableFullWidthStyle } from "./dashboardStyles.js";
+
+export interface ReportTableProps<DataItem> {
+  columns: string[];
+  data: DataItem[];
+  fields: Array<keyof DataItem>;
+  caption?: string;
+  onRowClick?: (item: DataItem) => void;
+  clickableFields?: Array<keyof DataItem>;
+}
+
+export function ReportTable<DataItem>(
+  props: ReportTableProps<DataItem>,
+): React.ReactNode {
+  const {
+    columns,
+    data,
+    fields,
+    caption,
+    onRowClick,
+    clickableFields = [],
+  } = props;
+
+  const renderCell = (
+    item: DataItem,
+    field: keyof DataItem,
+  ): React.ReactNode => {
+    const value = item[field];
+
+    if (value === "" || value == null) {
+      return "-";
+    }
+
+    if (typeof value === "boolean") {
+      return value ? "True" : "False";
+    }
+
+    // Make field clickable if specified
+    if (clickableFields.includes(field) && onRowClick) {
+      return (
+        <Button
+          variant="link"
+          isInline
+          onClick={() => onRowClick(item)}
+          style={{ padding: 0, fontSize: "inherit" }}
+        >
+          {value as React.ReactNode}
+        </Button>
+      );
+    }
+
+    return value as React.ReactNode;
+  };
+
+  return (
+    <Table variant="compact" borders={false} className={tableFullWidthStyle}>
+      {caption && <caption>{caption}</caption>}
+      <Thead>
+        <Tr>
+          {columns.map((name) => (
+            <Th key={name}>{name}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {data.map((item) => (
+          <Tr key={`row-${String(item[fields[0]])}`}>
+            {fields.map((f) => (
+              <Td key={String(f)}>{renderCell(item, f)}</Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+}
+
+ReportTable.displayName = "ReportTable";

package/src/report/WarningsTable.tsx

@@ -0,0 +1,75 @@
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+  Icon,
+} from "@patternfly/react-core";
+import { ExclamationTriangleIcon } from "@patternfly/react-icons";
+import type React from "react";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+import type { MigrationIssueLike } from "./ErrorTable.js";
+import { ReportTable } from "./ReportTable.js";
+
+export interface WarningsTableProps {
+  warnings: MigrationIssueLike[];
+  /** Optional drill-down callback invoked with an issue's `label`. */
+  onConcernClick?: (concernLabel: string) => void;
+}
+
+export const WarningsTable: React.FC<WarningsTableProps> = ({
+  warnings,
+  onConcernClick,
+}) => {
+  const handleRowClick = (issue: MigrationIssueLike) => {
+    if (issue.label && onConcernClick) {
+      onConcernClick(issue.label);
+    }
+  };
+
+  const chartId = "warnings-table";
+  const chartTitle = "Warnings";
+
+  return (
+    <ChartExportSurface id={chartId} title={chartTitle}>
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <Icon status="warning">
+                <ExclamationTriangleIcon />
+              </Icon>{" "}
+              Warnings
+            </FlexItem>
+            <ChartHeaderActions chartId={chartId} title={chartTitle} />
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {warnings.length === 0 ? (
+            <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.warnings} />
+          ) : (
+            <div>
+              <ReportTable<MigrationIssueLike>
+                data={warnings}
+                columns={["Description", "Total VMs"]}
+                fields={["assessment", "count"]}
+                onRowClick={onConcernClick ? handleRowClick : undefined}
+                clickableFields={onConcernClick ? ["assessment"] : []}
+              />
+            </div>
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+WarningsTable.displayName = "WarningsTable";

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