@openshift-migration-advisor/shared-components 0.25.0-fce5293f01c1 → 0.27.0-6438cd962b5f

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

@@ -0,0 +1,145 @@
+import "@testing-library/jest-dom";
+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 { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import { HostsOverview } from "../HostsOverview.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="hosts-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected the host model donut to render");
+  }
+  return props;
+};
+
+describe("HostsOverview", () => {
+  it("shows the shared empty state when no hosts are available", () => {
+    render(<HostsOverview />);
+
+    expect(screen.getByText("Host distribution by model")).toBeInTheDocument();
+    expect(screen.getByText("Top 5 models")).toBeInTheDocument();
+    expect(screen.getByText("Host data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("hosts-donut")).not.toBeInTheDocument();
+  });
+
+  it("buckets host counts into the top 5 models plus Other models", () => {
+    render(
+      <HostsOverview
+        hosts={[
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M2" },
+          { model: "M2" },
+          { model: "M2" },
+          { model: "M2" },
+          { model: "M2" },
+          { model: "M3" },
+          { model: "M3" },
+          { model: "M3" },
+          { model: "M3" },
+          { model: "M4" },
+          { model: "M4" },
+          { model: "M4" },
+          { model: "M5" },
+          { model: "M5" },
+          { model: "M6" },
+          { model: "M7" },
+        ]}
+      />,
+    );
+
+    expect(screen.getByTestId("hosts-donut")).toHaveTextContent("22 Hosts");
+
+    const props = renderedDonut();
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["M1", 6],
+      ["M2", 5],
+      ["M3", 4],
+      ["M4", 3],
+      ["M5", 2],
+      ["Other models", 2],
+    ]);
+    expect(props.data[5]?.countDisplay).toBe("2 hosts");
+    expect(props.legend).toEqual({
+      M1: chart_color_blue_300.value,
+      M2: chart_color_purple_300.value,
+      M3: chart_color_purple_100.value,
+      M4: chart_color_teal_200.value,
+      M5: chart_color_yellow_400.value,
+      "Other models": chart_color_green_300.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.legendWidth).toBe(680);
+    expect(props.itemsPerRow).toBe(2);
+    expect(props.labelFontSize).toBe(16);
+    expect(props.marginLeft).toBe("0%");
+    expect(props.subTitleColor).toBe(
+      "var(--pf-t--global--text--color--subtle)",
+    );
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "M1",
+          y: 6,
+          countDisplay: "6 hosts",
+          legendCategory: "M1",
+        },
+        percent: 27.2727,
+        total: 22,
+      }),
+    ).toBe("6 hosts\n27.3%");
+  });
+
+  it("treats numeric models as labels and blank models as unknown", () => {
+    render(
+      <HostsOverview
+        legendVariant="chart"
+        hosts={[{ model: 42 }, { model: "   " }, { model: "  R640  " }]}
+      />,
+    );
+
+    expect(renderedDonut().data.map((slice) => slice.name)).toEqual([
+      "42",
+      "Unknown model",
+      "R640",
+    ]);
+    expect(renderedDonut().legendVariant).toBe("chart");
+    expect(renderedDonut().title).toBe("3");
+  });
+});

package/src/report/__tests__/chartExportPackagers.test.ts

@@ -7,6 +7,7 @@ import {
 } from "../chartExport.js";
 import { getChartExportFilename } from "../chartExportFilenames.js";
 import { buildHtmlReport, escapeHtml } from "../htmlExport.js";
+import { buildPdfFromCharts } from "../pdfExport.js";
 import {
   fitPdfImageSize,
   placePdfBlock,
@@ -198,6 +199,63 @@ describe("placePdfBlock", () => {
   });
 });
 
+describe("buildPdfFromCharts with extra text pages", () => {
+  it("appends a text page even when there are no chart captures", async () => {
+    const blob = await buildPdfFromCharts([], "Report", [
+      {
+        title: "Cluster sizing recommendations",
+        items: [
+          { label: "Cluster name", value: "cluster-1" },
+          { label: "Target platform", value: "Bare metal" },
+          {
+            label: "Total nodes",
+            value: "6 (3 workers + 3 control plane)",
+          },
+          { label: "Failover capacity", value: "1 failover nodes" },
+          { label: "Worker node size", value: "8 CPU, 32 GB memory" },
+          {
+            label: "Control plane node size",
+            value: "16 CPU, 64 GB memory",
+          },
+        ],
+        footer: "Note: estimates only.",
+      },
+    ]);
+
+    expect(blob).toBeInstanceOf(Blob);
+    expect(blob.size).toBeGreaterThan(0);
+    expect(blob.type).toBe("application/pdf");
+  });
+
+  it("paginates extra pages with many rows without throwing", async () => {
+    const manyItems = Array.from({ length: 60 }, (_, index) => ({
+      label: `Field ${index}`,
+      value: `Value ${index}`,
+    }));
+
+    const blob = await buildPdfFromCharts([], "Report", [
+      { title: "Cluster sizing recommendations", items: manyItems },
+    ]);
+
+    expect(blob.size).toBeGreaterThan(0);
+  });
+
+  it("supports multiple extra pages (e.g. one per sized cluster)", async () => {
+    const blob = await buildPdfFromCharts([], "Report", [
+      {
+        title: "Cluster sizing recommendations — cluster-a",
+        items: [{ label: "Cluster name", value: "cluster-a" }],
+      },
+      {
+        title: "Cluster sizing recommendations — cluster-b",
+        items: [{ label: "Cluster name", value: "cluster-b" }],
+      },
+    ]);
+
+    expect(blob.size).toBeGreaterThan(0);
+  });
+});
+
 describe("buildHtmlReport", () => {
   it("embeds captured chart images and escapes the title", () => {
     const html = buildHtmlReport(

package/src/report/chartExport.ts

@@ -51,6 +51,24 @@ export type ChartCaptureSource = {
   capture: () => Promise<HTMLCanvasElement>;
 };
 
+/** One label/value row rendered on a {@link PdfTextPage}. */
+export type PdfTextPageItem = {
+  label: string;
+  value: string;
+};
+
+/**
+ * A native-text PDF page appended after the captured chart images.
+ *
+ * Used for content that is not a chart/card (e.g. calculated recommendations)
+ * but still needs to be part of the exported PDF.
+ */
+export type PdfTextPage = {
+  title: string;
+  items: PdfTextPageItem[];
+  footer?: string;
+};
+
 export function releaseCanvas(canvas: HTMLCanvasElement): void {
   canvas.width = 0;
   canvas.height = 0;

package/src/report/chartExportContext.tsx

@@ -9,6 +9,7 @@ import {
   type ChartExportMeta,
   type ChartExportView,
   chartPngFilename,
+  type PdfTextPage,
   type RegisteredChart,
 } from "./chartExport.js";
 
@@ -17,7 +18,14 @@ export type ChartExportFormat = "pdf" | "png" | "html";
 export type ChartExportApi = {
   downloadChart: (id: string) => Promise<void>;
   downloadAll: () => Promise<void>;
-  downloadPdf: (documentTitle: string) => Promise<void>;
+  /**
+   * @param extraPages - Native-text pages appended after the captured chart
+   * images (e.g. calculated recommendations that aren't rendered as charts).
+   */
+  downloadPdf: (
+    documentTitle: string,
+    extraPages?: PdfTextPage[],
+  ) => Promise<void>;
   downloadHtml: (documentTitle: string) => Promise<void>;
   downloadingChartId: string | null;
   exportingFormat: ChartExportFormat | null;

package/src/report/constants.ts

@@ -25,6 +25,8 @@ export const REPORT_CARD_EMPTY_STATE_TITLES = {
   operatingSystems: "Operating system data not collected",
   migrationStatus: "Migration status data not collected",
   issuesBreakdown: "Issues breakdown data not collected",
+  errors: "Error data not collected",
+  warnings: "Warning data not collected",
   hostPowerStates: "Host power state data not collected",
   vmPowerStates: "VM power state data not collected",
 } as const;

package/src/report/index.ts

@@ -9,6 +9,7 @@ export {
 } from "./ChartDownloadButton.js";
 export {
   type BuildChartDocument,
+  type BuildPdfDocument,
   type CaptureChartElement,
   ChartExportProvider,
   type ChartExportProviderProps,
@@ -32,6 +33,8 @@ export {
   chartExportViewsFromLabels,
   chartPngFilename,
   downloadBlob,
+  type PdfTextPage,
+  type PdfTextPageItem,
   type RegisteredChart,
   releaseCanvas,
   restoreChartExportViews,
@@ -65,6 +68,11 @@ export {
   EmptySearchResults,
   type EmptySearchResultsProps,
 } from "./EmptySearchResults.js";
+export {
+  ErrorTable,
+  type ErrorTableProps,
+  type MigrationIssueLike,
+} from "./ErrorTable.js";
 export {
   FeatureStatusBadge,
   type FeatureStatusBadgeProps,
@@ -73,6 +81,11 @@ export {
   HostPowerStates,
   type HostPowerStatesProps,
 } from "./HostPowerStates.js";
+export {
+  type HostLike,
+  HostsOverview,
+  type HostsOverviewProps,
+} from "./HostsOverview.js";
 export {
   buildHtmlFromCharts,
   buildHtmlReport,
@@ -167,6 +180,7 @@ export {
   ReportExportMenu,
   type ReportExportMenuProps,
 } from "./ReportExportMenu.js";
+export { ReportTable, type ReportTableProps } from "./ReportTable.js";
 export {
   type ReportExportOption,
   type StandardReportExportHandlers,
@@ -187,4 +201,8 @@ export {
   VmPowerStates,
   type VmPowerStatesProps,
 } from "./VmPowerStates.js";
+export {
+  WarningsTable,
+  type WarningsTableProps,
+} from "./WarningsTable.js";
 export { zipChartPngs } from "./zipChartPngs.js";

package/src/report/pdfExport.ts

@@ -1,5 +1,9 @@
 import jsPDF from "jspdf";
-import { type ChartCaptureSource, releaseCanvas } from "./chartExport.js";
+import {
+  type ChartCaptureSource,
+  type PdfTextPage,
+  releaseCanvas,
+} from "./chartExport.js";
 import { fitPdfImageSize, placePdfBlock, sliceCanvas } from "./pdfPage.js";
 
 const MARGIN_MM = 10;
@@ -10,6 +14,7 @@ const PAGE_BACKGROUND = "#ffffff";
 export async function buildPdfFromCharts(
   charts: ChartCaptureSource[],
   documentTitle: string,
+  extraPages: PdfTextPage[] = [],
 ): Promise<Blob> {
   const pdf = new jsPDF("p", "mm", "a4");
   const pageWidth = pdf.internal.pageSize.getWidth();
@@ -22,7 +27,7 @@ export async function buildPdfFromCharts(
   addCoverPage(
     pdf,
     documentTitle,
-    charts.map((chart) => chart.title),
+    [...charts.map((chart) => chart.title), ...extraPages.map((p) => p.title)],
     pageWidth,
     pageHeight,
   );
@@ -63,6 +68,10 @@ export async function buildPdfFromCharts(
     }
   }
 
+  if (extraPages.length > 0) {
+    addExtraPages(pdf, extraPages, pageWidth, pageHeight);
+  }
+
   addPageNumbers(pdf, pageWidth, pageHeight);
   return pdf.output("blob");
 }
@@ -138,6 +147,76 @@ function addChartImage(
   }
 }
 
+/**
+ * Append one native-text PDF page per entry in `extraPages`, rendered as
+ * label/value rows rather than a captured image. Each page starts fresh so
+ * its content never bleeds into a chart page.
+ */
+function addExtraPages(
+  pdf: jsPDF,
+  extraPages: PdfTextPage[],
+  pageWidth: number,
+  pageHeight: number,
+): void {
+  const LABEL_COL_WIDTH = 68; // mm — enough for the longest label
+  const VALUE_COL_X = MARGIN_MM + LABEL_COL_WIDTH;
+  const VALUE_COL_WIDTH = pageWidth - MARGIN_MM - LABEL_COL_WIDTH;
+  const LINE_HEIGHT = 7; // mm between rows
+
+  for (const page of extraPages) {
+    pdf.addPage();
+    let y = MARGIN_MM + 8;
+
+    pdf.setFontSize(16);
+    pdf.setFont("helvetica", "bold");
+    pdf.text(page.title, MARGIN_MM, y);
+    y += 10;
+
+    pdf.setDrawColor(0, 103, 187);
+    pdf.setLineWidth(0.5);
+    pdf.line(MARGIN_MM, y, pageWidth - MARGIN_MM, y);
+    y += 10;
+
+    pdf.setFontSize(11);
+
+    for (const item of page.items) {
+      pdf.setFont("helvetica", "bold");
+      const labelLines = pdf.splitTextToSize(
+        item.label,
+        LABEL_COL_WIDTH - 4,
+      ) as string[];
+      pdf.text(labelLines, MARGIN_MM, y);
+
+      pdf.setFont("helvetica", "normal");
+      const valueLines = pdf.splitTextToSize(
+        item.value,
+        VALUE_COL_WIDTH,
+      ) as string[];
+      pdf.text(valueLines, VALUE_COL_X, y);
+
+      y += LINE_HEIGHT * Math.max(labelLines.length, valueLines.length);
+
+      if (y > pageHeight - MARGIN_MM - 25) {
+        pdf.addPage();
+        y = MARGIN_MM + 10;
+      }
+    }
+
+    if (page.footer) {
+      y += 4;
+      pdf.setFontSize(9);
+      pdf.setFont("helvetica", "bolditalic");
+      const footerLines = pdf.splitTextToSize(
+        page.footer,
+        pageWidth - MARGIN_MM * 2,
+      ) as string[];
+      pdf.text(footerLines, MARGIN_MM, y);
+      pdf.setFont("helvetica", "normal");
+      pdf.setFontSize(11);
+    }
+  }
+}
+
 function addPageNumbers(
   pdf: jsPDF,
   pageWidth: number,