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

package/src/report/chartExportContext.tsx

@@ -0,0 +1,92 @@
+import {
+  createContext,
+  type RefCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import {
+  type ChartExportMeta,
+  type ChartExportView,
+  chartPngFilename,
+  type PdfTextPage,
+  type RegisteredChart,
+} from "./chartExport.js";
+
+export type ChartExportFormat = "pdf" | "png" | "html";
+
+export type ChartExportApi = {
+  downloadChart: (id: string) => Promise<void>;
+  downloadAll: () => 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;
+  exportLoadingLabel: string | null;
+  isExportingAll: boolean;
+  isBusy: boolean;
+  exportError: string | null;
+  clearExportError: () => void;
+};
+
+export type ChartExportRegistry = {
+  register: (chart: RegisteredChart) => () => void;
+};
+
+export const ChartExportRegistryContext =
+  createContext<ChartExportRegistry | null>(null);
+export const ChartExportApiContext = createContext<ChartExportApi | null>(null);
+
+export function useChartExport(): ChartExportApi | null {
+  return useContext(ChartExportApiContext);
+}
+
+export function useRegisterChart({
+  id,
+  title,
+  filename,
+  exportViews,
+  activeExportViewId,
+  setExportView,
+}: ChartExportMeta & {
+  exportViews?: ChartExportView[];
+  activeExportViewId?: string;
+  setExportView?: (viewId: string) => Promise<void>;
+}): RefCallback<HTMLElement> {
+  const registry = useContext(ChartExportRegistryContext);
+  const [element, setElement] = useState<HTMLElement | null>(null);
+  const resolvedFilename = filename ?? chartPngFilename(title, id);
+
+  useEffect(() => {
+    if (!registry || !element) {
+      return;
+    }
+    return registry.register({
+      id,
+      title,
+      filename: resolvedFilename,
+      element,
+      exportViews,
+      activeExportViewId,
+      setExportView,
+    });
+  }, [
+    activeExportViewId,
+    element,
+    exportViews,
+    id,
+    registry,
+    resolvedFilename,
+    setExportView,
+    title,
+  ]);
+
+  return setElement;
+}

package/src/report/chartExportFilenames.ts

@@ -0,0 +1,21 @@
+export function getDatedChartExportBasename(date = new Date()): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `migration-export-${year}-${month}-${day}`;
+}
+
+export function getChartExportFilename(
+  format: "pdf" | "html" | "zip",
+  date = new Date(),
+): string {
+  const base = getDatedChartExportBasename(date);
+  if (format === "zip") {
+    return `${base}-charts.zip`;
+  }
+  return `${base}.${format}`;
+}
+
+export function getChartZipFilename(date = new Date()): string {
+  return getChartExportFilename("zip", date);
+}

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/dashboardStyles.ts

@@ -47,23 +47,10 @@ export const dashboardStyles = {
     overflow: hidden !important;
   `,
 
-  cardPrint: css`
-    border: 1px solid #d2d2d2 !important;
-    border-radius: 10px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    min-height: unset;
-    max-height: unset;
-    page-break-inside: avoid;
-  `,
-
   storageCardOverflowHidden: css`
     overflow: hidden;
   `,
 
-  storageCardOverflowVisible: css`
-    overflow: visible;
-  `,
-
   storageChartWrapper: css`
     display: flex;
     justify-content: center;
@@ -72,16 +59,6 @@ export const dashboardStyles = {
     padding: 20px 0;
   `,
 
-  storageExportSectionMargin: css`
-    margin-bottom: 24px;
-  `,
-
-  storageExportSectionTitle: css`
-    font-size: 14px;
-    font-weight: 600;
-    margin-bottom: 12px;
-  `,
-
   storageFlexFullWidth: css`
     width: 100%;
   `,

package/src/report/htmlExport.ts

@@ -0,0 +1,83 @@
+import { type ChartCaptureSource, releaseCanvas } from "./chartExport.js";
+
+export interface HtmlReportImage {
+  name: string;
+  dataUrl: string;
+}
+
+export function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function buildHtmlReport(
+  documentTitle: string,
+  images: HtmlReportImage[],
+  generatedAt = new Date(),
+): string {
+  const sections = images
+    .map(
+      (image) => `
+    <section>
+      <h2>${escapeHtml(image.name)}</h2>
+      <img src="${image.dataUrl}" alt="${escapeHtml(image.name)}" />
+    </section>`,
+    )
+    .join("\n");
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>${escapeHtml(documentTitle)}</title>
+  <style>
+    body {
+      font-family: RedHatText, Helvetica, Arial, sans-serif;
+      margin: 32px auto;
+      max-width: 1100px;
+      background: #fff;
+      color: #151515;
+    }
+    h1 { font-size: 28px; margin-bottom: 8px; }
+    h2 { font-size: 18px; margin: 32px 0 12px; }
+    .meta { color: #6a6e73; margin-bottom: 24px; }
+    img {
+      width: 100%;
+      height: auto;
+    }
+  </style>
+</head>
+<body>
+  <h1>${escapeHtml(documentTitle)}</h1>
+  <p class="meta">Generated ${escapeHtml(generatedAt.toLocaleString())}</p>
+  ${sections}
+</body>
+</html>
+`;
+}
+
+export async function buildHtmlFromCharts(
+  charts: ChartCaptureSource[],
+  documentTitle: string,
+): Promise<Blob> {
+  const images: HtmlReportImage[] = [];
+  for (const chart of charts) {
+    const canvas = await chart.capture();
+    try {
+      images.push({
+        name: chart.title,
+        dataUrl: canvas.toDataURL("image/png"),
+      });
+    } finally {
+      releaseCanvas(canvas);
+    }
+  }
+
+  return new Blob([buildHtmlReport(documentTitle, images)], {
+    type: "text/html;charset=utf-8",
+  });
+}

package/src/report/index.ts

@@ -3,6 +3,61 @@ export {
   CardEmptyState,
   type CardEmptyStateProps,
 } from "./CardEmptyState.js";
+export {
+  ChartDownloadButton,
+  ChartHeaderActions,
+} from "./ChartDownloadButton.js";
+export {
+  type BuildChartDocument,
+  type BuildPdfDocument,
+  type CaptureChartElement,
+  ChartExportProvider,
+  type ChartExportProviderProps,
+  type EncodeChartPng,
+  type ZipChartFiles,
+} from "./ChartExportProvider.js";
+export { ChartExportSurface } from "./ChartExportSurface.js";
+export {
+  CpuAndMemoryOverview,
+  type CpuAndMemoryOverviewProps,
+} from "./CpuAndMemoryOverview.js";
+export { captureChartElement } from "./captureChartElement.js";
+export {
+  CHART_EXPORT_CAPTURING_ATTR,
+  CHART_EXPORT_HIDE_ATTR,
+  CHART_EXPORT_SCROLL_ATTR,
+  type ChartCaptureSource,
+  type ChartExportFile,
+  type ChartExportMeta,
+  type ChartExportView,
+  canvasToBlob,
+  chartExportHideProps,
+  chartExportRootStyle,
+  chartExportScrollProps,
+  chartExportViewsFromLabels,
+  chartPngFilename,
+  downloadBlob,
+  type PdfTextPage,
+  type PdfTextPageItem,
+  type RegisteredChart,
+  releaseCanvas,
+  restoreChartExportViews,
+  shouldIgnoreChartExportElement,
+  slugifyExportName,
+  sortRegisteredChartsByDocumentOrder,
+  toBulkChartCaptureSources,
+} from "./chartExport.js";
+export {
+  type ChartExportApi,
+  type ChartExportFormat,
+  useChartExport,
+  useRegisterChart,
+} from "./chartExportContext.js";
+export {
+  getChartExportFilename,
+  getChartZipFilename,
+  getDatedChartExportBasename,
+} from "./chartExportFilenames.js";
 export {
   chartColorFailure,
   chartColorSuccess,
@@ -17,6 +72,11 @@ export {
   EmptySearchResults,
   type EmptySearchResultsProps,
 } from "./EmptySearchResults.js";
+export {
+  ErrorTable,
+  type ErrorTableProps,
+  type MigrationIssueLike,
+} from "./ErrorTable.js";
 export {
   FeatureStatusBadge,
   type FeatureStatusBadgeProps,
@@ -25,6 +85,17 @@ export {
   HostPowerStates,
   type HostPowerStatesProps,
 } from "./HostPowerStates.js";
+export {
+  type HostLike,
+  HostsOverview,
+  type HostsOverviewProps,
+} from "./HostsOverview.js";
+export {
+  buildHtmlFromCharts,
+  buildHtmlReport,
+  escapeHtml,
+  type HtmlReportImage,
+} from "./htmlExport.js";
 export {
   InfrastructureSummary,
   type InfrastructureSummaryProps,
@@ -54,6 +125,14 @@ export {
   visibleNetworks,
   vsanStatus,
 } from "./infrastructureSummaryModel.js";
+export {
+  type NetworkInfraLike,
+  type NetworkLike,
+  NetworkOverview,
+  type NetworkOverviewProps,
+  type NicCountHistogram,
+  type NicCountSummary,
+} from "./NetworkOverview.js";
 export { OSBarChart, OSDistribution } from "./OSDistribution.js";
 export { OsSupportTiersHelpPopover } from "./OsSupportTiersHelpPopover.js";
 export { OsUpgradeNotice } from "./OsUpgradeNotice.js";
@@ -86,6 +165,12 @@ export {
   PowerStateCard,
   type PowerStateCardProps,
 } from "./PowerStateCard.js";
+export { buildPdfFromCharts } from "./pdfExport.js";
+export {
+  type PdfExportSegment,
+  sliceCanvas,
+  splitSegmentForPageHeight,
+} from "./pdfPage.js";
 export type { PowerStateChartModel } from "./powerStates.js";
 export {
   buildHostPowerStateChart,
@@ -93,6 +178,18 @@ export {
   HOST_POWER_COLORS,
   VM_POWER_COLORS,
 } from "./powerStates.js";
+export {
+  ExportReportButton,
+  type ExportReportButtonProps,
+  ReportExportMenu,
+  type ReportExportMenuProps,
+} from "./ReportExportMenu.js";
+export { ReportTable, type ReportTableProps } from "./ReportTable.js";
+export {
+  type ReportExportOption,
+  type StandardReportExportHandlers,
+  standardReportExportOptions,
+} from "./reportExportOptions.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export {
   ALL_TIERS_FILTER,
@@ -108,3 +205,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

@@ -0,0 +1,233 @@
+import jsPDF from "jspdf";
+import {
+  type ChartCaptureSource,
+  type PdfTextPage,
+  releaseCanvas,
+} from "./chartExport.js";
+import { fitPdfImageSize, placePdfBlock, sliceCanvas } from "./pdfPage.js";
+
+const MARGIN_MM = 10;
+const GAP_MM = 8;
+/** Flatten captures onto white; jsPDF cannot embed transparent PNG alpha cleanly. */
+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();
+  const pageHeight = pdf.internal.pageSize.getHeight();
+  const contentWidth = pageWidth - MARGIN_MM * 2;
+  const contentHeight = pageHeight - MARGIN_MM * 2;
+  const pageTop = MARGIN_MM;
+  const pageBottom = pageHeight - MARGIN_MM;
+
+  addCoverPage(
+    pdf,
+    documentTitle,
+    [...charts.map((chart) => chart.title), ...extraPages.map((p) => p.title)],
+    pageWidth,
+    pageHeight,
+  );
+
+  let cursorY: number | null = null;
+  for (const chart of charts) {
+    const canvas = await chart.capture();
+    try {
+      if (canvas.width < 1 || canvas.height < 1) {
+        throw new Error("Chart capture produced an empty image");
+      }
+      const size = fitPdfImageSize(
+        canvas.width,
+        canvas.height,
+        contentWidth,
+        contentHeight,
+      );
+      const placement = placePdfBlock(
+        cursorY,
+        size.heightMm,
+        pageTop,
+        pageBottom,
+      );
+      if (placement.needsNewPage) {
+        pdf.addPage();
+      }
+      addChartImage(
+        pdf,
+        canvas,
+        MARGIN_MM + (contentWidth - size.widthMm) / 2,
+        placement.y,
+        size.widthMm,
+        size.heightMm,
+      );
+      cursorY = placement.y + size.heightMm + GAP_MM;
+    } finally {
+      releaseCanvas(canvas);
+    }
+  }
+
+  if (extraPages.length > 0) {
+    addExtraPages(pdf, extraPages, pageWidth, pageHeight);
+  }
+
+  addPageNumbers(pdf, pageWidth, pageHeight);
+  return pdf.output("blob");
+}
+
+function addCoverPage(
+  pdf: jsPDF,
+  documentTitle: string,
+  tocItems: string[],
+  pageWidth: number,
+  pageHeight: number,
+): void {
+  const contentWidth = pageWidth - MARGIN_MM * 2;
+  pdf.setFontSize(18);
+  const titleLines = pdf.splitTextToSize(
+    documentTitle,
+    contentWidth,
+  ) as string[];
+  let titleY = MARGIN_MM + 8;
+  for (const line of titleLines) {
+    pdf.text(line, pageWidth / 2, titleY, { align: "center" });
+    titleY += 8;
+  }
+
+  pdf.setFontSize(11);
+  const generatedAt = new Date();
+  pdf.text(
+    `Generated: ${generatedAt.toLocaleDateString()} ${generatedAt.toLocaleTimeString()}`,
+    pageWidth / 2,
+    titleY + 4,
+    { align: "center" },
+  );
+
+  pdf.setFontSize(14);
+  pdf.text("Table of contents", MARGIN_MM, titleY + 16);
+  pdf.setFontSize(11);
+  let tocY = titleY + 26;
+  for (const item of tocItems) {
+    if (tocY > pageHeight - MARGIN_MM - 10) {
+      pdf.addPage();
+      tocY = MARGIN_MM;
+    }
+    pdf.text(`- ${item}`, MARGIN_MM, tocY);
+    tocY += 7;
+  }
+}
+
+function addChartImage(
+  pdf: jsPDF,
+  canvas: HTMLCanvasElement,
+  x: number,
+  y: number,
+  widthMm: number,
+  heightMm: number,
+): void {
+  const flattened = sliceCanvas(
+    canvas,
+    canvas.width,
+    canvas.height,
+    0,
+    PAGE_BACKGROUND,
+  );
+  try {
+    pdf.addImage(
+      flattened.toDataURL("image/jpeg", 0.92),
+      "JPEG",
+      x,
+      y,
+      widthMm,
+      heightMm,
+    );
+  } finally {
+    releaseCanvas(flattened);
+  }
+}
+
+/**
+ * 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,
+  pageHeight: number,
+): void {
+  const totalPages = pdf.getNumberOfPages();
+  pdf.setFontSize(9);
+  for (let page = 1; page <= totalPages; page++) {
+    pdf.setPage(page);
+    pdf.text(`Page ${page} of ${totalPages}`, pageWidth / 2, pageHeight - 6, {
+      align: "center",
+    });
+  }
+}

package/src/report/pdfPage.ts

@@ -0,0 +1,83 @@
+export interface PdfExportSegment {
+  top: number;
+  height: number;
+}
+
+export function splitSegmentForPageHeight(
+  segment: PdfExportSegment,
+  imgHeight: number,
+  pageHeightPx: number,
+): PdfExportSegment[] {
+  const total = Math.max(1, Math.min(segment.height, imgHeight - segment.top));
+  if (pageHeightPx <= 0 || total <= pageHeightPx) {
+    return [{ top: segment.top, height: total }];
+  }
+
+  const slices: PdfExportSegment[] = [];
+  let offset = 0;
+  while (offset < total) {
+    const height = Math.min(pageHeightPx, total - offset);
+    slices.push({ top: segment.top + offset, height });
+    offset += height;
+  }
+  return slices;
+}
+
+export function fitPdfImageSize(
+  pixelWidth: number,
+  pixelHeight: number,
+  maxWidthMm: number,
+  maxHeightMm: number,
+): { widthMm: number; heightMm: number } {
+  const safeWidth = Math.max(1, pixelWidth);
+  const safeHeight = Math.max(1, pixelHeight);
+  const widthScale = maxWidthMm / safeWidth;
+  const heightAtFullWidth = safeHeight * widthScale;
+  if (heightAtFullWidth <= maxHeightMm) {
+    return { widthMm: maxWidthMm, heightMm: heightAtFullWidth };
+  }
+  const scale = maxHeightMm / safeHeight;
+  return { widthMm: safeWidth * scale, heightMm: maxHeightMm };
+}
+
+export function placePdfBlock(
+  cursorY: number | null,
+  blockHeightMm: number,
+  pageTopMm: number,
+  pageBottomMm: number,
+): { y: number; needsNewPage: boolean } {
+  if (cursorY === null || cursorY + blockHeightMm > pageBottomMm) {
+    return { y: pageTopMm, needsNewPage: true };
+  }
+  return { y: cursorY, needsNewPage: false };
+}
+
+export function sliceCanvas(
+  sourceCanvas: HTMLCanvasElement,
+  width: number,
+  height: number,
+  offsetY: number,
+  backgroundColor: string,
+): HTMLCanvasElement {
+  const pageCanvas = document.createElement("canvas");
+  pageCanvas.width = width;
+  pageCanvas.height = height;
+  const context = pageCanvas.getContext("2d");
+  if (!context) {
+    throw new Error("Canvas 2D context unavailable");
+  }
+  context.fillStyle = backgroundColor;
+  context.fillRect(0, 0, width, height);
+  context.drawImage(
+    sourceCanvas,
+    0,
+    offsetY,
+    width,
+    height,
+    0,
+    0,
+    width,
+    height,
+  );
+  return pageCanvas;
+}