@openshift-migration-advisor/shared-components 0.24.0 → 0.25.0-1701f64050d7

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,4 +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,57 @@ 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 { 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 +68,67 @@ export {
   EmptySearchResults,
   type EmptySearchResultsProps,
 } from "./EmptySearchResults.js";
+export {
+  ErrorTable,
+  type ErrorTableProps,
+  type MigrationIssueLike,
+} from "./ErrorTable.js";
+export {
+  FeatureStatusBadge,
+  type FeatureStatusBadgeProps,
+} from "./FeatureStatusBadge.js";
+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,
+} from "./InfrastructureSummary.js";
+export type {
+  ClusterDetailRow,
+  ClusterDetailsModel,
+  FeatureStatus,
+  HostCapability,
+  InfrastructureSummaryModel,
+  InventoryCluster,
+  InventoryDatastore,
+  InventoryHost,
+  InventoryInfra,
+  InventoryNetwork,
+  InventoryVms,
+  NetworkLabel,
+} from "./infrastructureSummaryModel.js";
+export {
+  booleanToFeatureStatus,
+  buildClusterDetailRows,
+  buildClusterDetails,
+  buildInfrastructureSummary,
+  countVCenters,
+  formatVSphereVersion,
+  hostCapabilityStatus,
+  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";
@@ -45,6 +157,35 @@ export {
   SupportTier,
 } from "./osSupportTier.js";
 export { default as PopoverIcon } from "./PopoverIcon.js";
+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,
+  buildVmPowerStateChart,
+  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,
@@ -52,3 +193,16 @@ export {
   type OsTableRow,
   useOsBarChartViewModel,
 } from "./useOsBarChartViewModel.js";
+export {
+  VCenterClusterDetails,
+  type VCenterClusterDetailsProps,
+} from "./VCenterClusterDetails.js";
+export {
+  VmPowerStates,
+  type VmPowerStatesProps,
+} from "./VmPowerStates.js";
+export {
+  WarningsTable,
+  type WarningsTableProps,
+} from "./WarningsTable.js";
+export { zipChartPngs } from "./zipChartPngs.js";

package/src/report/infrastructureSummaryModel.ts

@@ -0,0 +1,281 @@
+export type FeatureStatus = "enabled" | "disabled" | "unknown";
+
+export type HostCapability = "vmotionSupported" | "storageVmotionSupported";
+
+export type InventoryHost = {
+  vmotionSupported?: boolean;
+  storageVmotionSupported?: boolean;
+};
+
+export type InventoryDatastore = {
+  type?: string;
+};
+
+export type InventoryNetwork = {
+  name: string;
+  type?: string;
+  vlanId?: string;
+};
+
+export type InventoryInfra = {
+  totalHosts?: number;
+  totalDatacenters?: number;
+  hosts?: InventoryHost[];
+  clustersPerDatacenter?: number[];
+  networks?: InventoryNetwork[];
+  datastores?: InventoryDatastore[];
+};
+
+export type InventoryVms = {
+  total?: number;
+  diskTypes?: Record<string, unknown>;
+};
+
+export type InventoryCluster = {
+  infra?: InventoryInfra;
+  vms?: InventoryVms;
+  vcenter?: { id?: string };
+  clusterFeatures?: {
+    drsEnabled?: boolean;
+    haEnabled?: boolean;
+  };
+};
+
+export type InfrastructureSummaryModel = {
+  vmwareVersion: string;
+  datacenters: number | undefined;
+  vCenters: number | undefined;
+  esxiHosts: number | undefined;
+};
+
+export type NetworkLabel = {
+  name: string;
+  vlanId?: string;
+  displayName: string;
+};
+
+export type ClusterDetailRow = {
+  id: string;
+  name: string;
+  hosts: number;
+  vms: number;
+  vmotion: FeatureStatus;
+  drs: FeatureStatus;
+  vsan: FeatureStatus;
+};
+
+export type ClusterDetailsModel = {
+  hosts: number;
+  vms: number;
+  networksDetected: number;
+  vmotion: FeatureStatus;
+  drs: FeatureStatus;
+  ha: FeatureStatus;
+  vsan: FeatureStatus;
+  networks: NetworkLabel[];
+};
+
+const VSAN_TYPE_PATTERN = /vsan/i;
+
+export const formatVSphereVersion = (version?: string): string => {
+  if (!version?.trim()) {
+    return "—";
+  }
+
+  const withoutPrefix = version.trim().replace(/^vSphere\s+/i, "");
+  const parts = withoutPrefix.split(".");
+  while (parts.length > 3 && parts[parts.length - 1] === "0") {
+    parts.pop();
+  }
+
+  return `vSphere ${parts.join(".")}`;
+};
+
+export const booleanToFeatureStatus = (
+  value: boolean | undefined,
+): FeatureStatus => {
+  if (value === true) {
+    return "enabled";
+  }
+  if (value === false) {
+    return "disabled";
+  }
+  return "unknown";
+};
+
+export const hostCapabilityStatus = (
+  hosts: InventoryHost[] | undefined,
+  capability: HostCapability,
+): FeatureStatus => {
+  if (!hosts || hosts.length === 0) {
+    return "unknown";
+  }
+
+  const known = hosts
+    .map((host) => host[capability])
+    .filter((value): value is boolean => typeof value === "boolean");
+
+  if (known.length === 0) {
+    return "unknown";
+  }
+
+  return known.some(Boolean) ? "enabled" : "disabled";
+};
+
+export const vsanStatus = (
+  infra?: InventoryInfra,
+  vms?: InventoryVms,
+): FeatureStatus => {
+  const datastoreMatch = infra?.datastores?.some((datastore) =>
+    VSAN_TYPE_PATTERN.test(datastore.type ?? ""),
+  );
+  const diskTypeMatch = Object.keys(vms?.diskTypes ?? {}).some((type) =>
+    VSAN_TYPE_PATTERN.test(type),
+  );
+
+  if (datastoreMatch || diskTypeMatch) {
+    return "enabled";
+  }
+
+  if (infra?.datastores || vms?.diskTypes) {
+    return "disabled";
+  }
+
+  return "unknown";
+};
+
+const hostCount = (infra?: InventoryInfra): number | undefined => {
+  if (typeof infra?.totalHosts === "number") {
+    return infra.totalHosts;
+  }
+  if (infra?.hosts) {
+    return infra.hosts.length;
+  }
+  return undefined;
+};
+
+const datacenterCount = (infra?: InventoryInfra): number | undefined => {
+  if (typeof infra?.totalDatacenters === "number") {
+    return infra.totalDatacenters;
+  }
+  if (infra?.clustersPerDatacenter && infra.clustersPerDatacenter.length > 0) {
+    return infra.clustersPerDatacenter.length;
+  }
+  return undefined;
+};
+
+export const countVCenters = (
+  clusters?: Record<string, InventoryCluster>,
+  vcenterId?: string,
+): number | undefined => {
+  const ids = new Set<string>();
+  if (vcenterId) {
+    ids.add(vcenterId);
+  }
+  for (const cluster of Object.values(clusters ?? {})) {
+    if (cluster.vcenter?.id) {
+      ids.add(cluster.vcenter.id);
+    }
+  }
+  return ids.size > 0 ? ids.size : undefined;
+};
+
+const toNetworkLabel = (network: InventoryNetwork): NetworkLabel => {
+  const vlanId = network.vlanId?.trim();
+  return {
+    name: network.name,
+    vlanId: vlanId || undefined,
+    displayName: vlanId ? `${network.name} (VLAN ${vlanId})` : network.name,
+  };
+};
+
+export const visibleNetworks = (infra?: InventoryInfra): NetworkLabel[] =>
+  (infra?.networks ?? [])
+    .filter(
+      (network) => Boolean(network.name?.trim()) && network.type !== "dvswitch",
+    )
+    .map(toNetworkLabel);
+
+export const buildInfrastructureSummary = ({
+  infra,
+  vcenterVersion,
+  vcenterId,
+  clusters,
+}: {
+  infra?: InventoryInfra;
+  vcenterVersion?: string;
+  vcenterId?: string;
+  clusters?: Record<string, InventoryCluster>;
+}): InfrastructureSummaryModel => ({
+  vmwareVersion: formatVSphereVersion(vcenterVersion),
+  datacenters: datacenterCount(infra),
+  vCenters: countVCenters(clusters, vcenterId),
+  esxiHosts: hostCount(infra),
+});
+
+const clusterFeatureStatus = (
+  cluster: InventoryCluster,
+): Pick<ClusterDetailRow, "vmotion" | "drs" | "vsan"> & {
+  ha: FeatureStatus;
+} => ({
+  vmotion: hostCapabilityStatus(cluster.infra?.hosts, "vmotionSupported"),
+  drs: booleanToFeatureStatus(cluster.clusterFeatures?.drsEnabled),
+  ha: booleanToFeatureStatus(cluster.clusterFeatures?.haEnabled),
+  vsan: vsanStatus(cluster.infra, cluster.vms),
+});
+
+const compareClustersByVmCount = (
+  a: string,
+  b: string,
+  clusters: Record<string, InventoryCluster>,
+): number => {
+  const vmsA = clusters[a]?.vms?.total ?? 0;
+  const vmsB = clusters[b]?.vms?.total ?? 0;
+  return vmsB - vmsA || a.localeCompare(b);
+};
+
+export const buildClusterDetailRows = (
+  clusters?: Record<string, InventoryCluster>,
+): ClusterDetailRow[] => {
+  if (!clusters) {
+    return [];
+  }
+
+  return Object.keys(clusters)
+    .sort((a, b) => compareClustersByVmCount(a, b, clusters))
+    .map((id) => {
+      const cluster = clusters[id];
+      const features = clusterFeatureStatus(cluster);
+      return {
+        id,
+        name: id,
+        hosts: hostCount(cluster.infra) ?? 0,
+        vms: cluster.vms?.total ?? 0,
+        vmotion: features.vmotion,
+        drs: features.drs,
+        vsan: features.vsan,
+      };
+    });
+};
+
+export const buildClusterDetails = (
+  cluster?: InventoryCluster,
+): ClusterDetailsModel | undefined => {
+  if (!cluster) {
+    return undefined;
+  }
+
+  const networks = visibleNetworks(cluster.infra);
+  const features = clusterFeatureStatus(cluster);
+
+  return {
+    hosts: hostCount(cluster.infra) ?? 0,
+    vms: cluster.vms?.total ?? 0,
+    networksDetected: networks.length,
+    vmotion: features.vmotion,
+    drs: features.drs,
+    ha: features.ha,
+    vsan: features.vsan,
+    networks,
+  };
+};