@openshift-migration-advisor/shared-components 0.25.0 → 0.27.0-3f8ae10b086b

package/src/report/chartExport.ts

@@ -0,0 +1,277 @@
+import type { CSSProperties } from "react";
+
+export const CHART_EXPORT_HIDE_ATTR = "data-chart-export-hide";
+export const CHART_EXPORT_SCROLL_ATTR = "data-chart-export-scroll";
+export const CHART_EXPORT_CAPTURING_ATTR = "data-chart-capturing";
+
+export const chartExportHideProps = {
+  [CHART_EXPORT_HIDE_ATTR]: "",
+} as const;
+
+export const chartExportScrollProps = {
+  [CHART_EXPORT_SCROLL_ATTR]: "",
+} as const;
+
+export const chartExportRootStyle: CSSProperties = {
+  width: "100%",
+  height: "100%",
+};
+
+export type ChartExportMeta = {
+  id: string;
+  title: string;
+  filename?: string;
+};
+
+export type ChartExportView = {
+  id: string;
+  title: string;
+  filename?: string;
+};
+
+export type RegisteredChart = {
+  id: string;
+  title: string;
+  filename: string;
+  element: HTMLElement;
+  exportViews?: ChartExportView[];
+  activeExportViewId?: string;
+  setExportView?: (viewId: string) => Promise<void>;
+};
+
+export type ChartExportFile = {
+  filename: string;
+  blob: Blob;
+};
+
+export type ChartCaptureSource = {
+  id: string;
+  title: string;
+  filename: string;
+  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;
+}
+
+export function waitForChartExportPaint(): Promise<void> {
+  if (typeof requestAnimationFrame !== "function") {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+/** PatternFly applies dark tokens when this class is on `:root`. */
+export const PATTERNFLY_DARK_THEME_CLASSES = [
+  "pf-v6-theme-dark",
+  "pf-v5-theme-dark",
+] as const;
+
+/**
+ * Force PatternFly light tokens on a document (the html2canvas clone).
+ * Does not touch the live page.
+ */
+export function applyLightThemeToDocument(root: Document): void {
+  for (const node of [root.documentElement, root.body]) {
+    if (!node) {
+      continue;
+    }
+    for (const className of PATTERNFLY_DARK_THEME_CLASSES) {
+      node.classList.remove(className);
+    }
+    node.style.colorScheme = "light";
+  }
+}
+
+export function chartExportViewsFromLabels(
+  titlePrefix: string,
+  labels: Record<string, string>,
+): ChartExportView[] {
+  return Object.entries(labels).map(([id, label]) => ({
+    id,
+    title: `${titlePrefix} — ${label}`,
+  }));
+}
+
+function shouldCycleExportViews(chart: RegisteredChart): boolean {
+  return Boolean(
+    chart.exportViews && chart.exportViews.length > 1 && chart.setExportView,
+  );
+}
+
+function bulkExportViews(chart: RegisteredChart): ChartExportView[] {
+  if (shouldCycleExportViews(chart) && chart.exportViews) {
+    return chart.exportViews;
+  }
+  return [
+    {
+      id: chart.id,
+      title: chart.title,
+      filename: chart.filename,
+    },
+  ];
+}
+
+export function toBulkChartCaptureSources(
+  charts: RegisteredChart[],
+  capture: (element: HTMLElement) => Promise<HTMLCanvasElement>,
+  prepareElement?: (element: HTMLElement) => () => void,
+): ChartCaptureSource[] {
+  return charts.flatMap((chart) => {
+    const views = bulkExportViews(chart);
+    const cyclesViews = shouldCycleExportViews(chart);
+    return views.map((view) => ({
+      id: cyclesViews ? `${chart.id}--${view.id}` : chart.id,
+      title: view.title,
+      filename:
+        view.filename ??
+        (cyclesViews
+          ? chartPngFilename(view.title, `${chart.id}-${view.id}`)
+          : chart.filename),
+      capture: async () => {
+        const restore = prepareElement?.(chart.element);
+        try {
+          if (cyclesViews && chart.setExportView) {
+            await chart.setExportView(view.id);
+          }
+          return await capture(chart.element);
+        } finally {
+          restore?.();
+        }
+      },
+    }));
+  });
+}
+
+export async function restoreChartExportViews(
+  charts: RegisteredChart[],
+): Promise<void> {
+  for (const chart of charts) {
+    if (
+      shouldCycleExportViews(chart) &&
+      chart.setExportView &&
+      chart.activeExportViewId
+    ) {
+      try {
+        await chart.setExportView(chart.activeExportViewId);
+      } catch (error) {
+        console.error("Failed to restore the selected chart view:", error);
+      }
+    }
+  }
+}
+
+export function sortRegisteredChartsByDocumentOrder(
+  charts: RegisteredChart[],
+): RegisteredChart[] {
+  return [...charts].sort((left, right) => {
+    if (left.element === right.element) {
+      return 0;
+    }
+    const position = left.element.compareDocumentPosition(right.element);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return 0;
+  });
+}
+
+export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    if (canvas.width < 1 || canvas.height < 1) {
+      reject(new Error("Failed to encode canvas as PNG"));
+      return;
+    }
+    canvas.toBlob((blob) => {
+      if (blob) {
+        resolve(blob);
+        return;
+      }
+      reject(new Error("Failed to encode canvas as PNG"));
+    }, "image/png");
+  });
+}
+
+export function slugifyExportName(value: string): string {
+  const slug = value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "");
+  return slug || "chart";
+}
+
+export function chartPngFilename(title: string, id = "chart"): string {
+  return `${slugifyExportName(title) || slugifyExportName(id)}.png`;
+}
+
+const KEEP_TAGS = new Set(["HTML", "HEAD", "BODY", "STYLE", "LINK"]);
+
+function isHiddenForChartExport(node: Element): boolean {
+  return (
+    node.hasAttribute(CHART_EXPORT_HIDE_ATTR) ||
+    Boolean(node.closest(`[${CHART_EXPORT_HIDE_ATTR}]`))
+  );
+}
+
+/**
+ * html2canvas clones the whole document for every capture. Ignore everything
+ * except the target card (and ancestors / stylesheet nodes) so zip-all does
+ * not re-render every other chart.
+ */
+export function shouldIgnoreChartExportElement(
+  node: Element,
+  captureRoot?: Element | null,
+): boolean {
+  if (!captureRoot) {
+    return isHiddenForChartExport(node);
+  }
+  if (KEEP_TAGS.has(node.tagName)) {
+    return false;
+  }
+  if (
+    node !== captureRoot &&
+    !captureRoot.contains(node) &&
+    !node.contains(captureRoot)
+  ) {
+    return true;
+  }
+  return isHiddenForChartExport(node);
+}
+
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}

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,66 @@ 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 {
+  ClustersOverview,
+  type ClustersOverviewProps,
+  type InventoryDataLike,
+} from "./ClustersOverview.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 +77,11 @@ export {
   EmptySearchResults,
   type EmptySearchResultsProps,
 } from "./EmptySearchResults.js";
+export {
+  ErrorTable,
+  type ErrorTableProps,
+  type MigrationIssueLike,
+} from "./ErrorTable.js";
 export {
   FeatureStatusBadge,
   type FeatureStatusBadgeProps,
@@ -25,6 +90,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 +130,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 +170,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 +183,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 +210,8 @@ export {
   VmPowerStates,
   type VmPowerStatesProps,
 } from "./VmPowerStates.js";
+export {
+  WarningsTable,
+  type WarningsTableProps,
+} from "./WarningsTable.js";
+export { zipChartPngs } from "./zipChartPngs.js";