@openshift-migration-advisor/shared-components 0.24.0 → 0.25.0-0ad1e70d1fa5

package/dist/report/infrastructureSummaryModel.js

@@ -0,0 +1,139 @@
+const VSAN_TYPE_PATTERN = /vsan/i;
+export const formatVSphereVersion = (version) => {
+    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) => {
+    if (value === true) {
+        return "enabled";
+    }
+    if (value === false) {
+        return "disabled";
+    }
+    return "unknown";
+};
+export const hostCapabilityStatus = (hosts, capability) => {
+    if (!hosts || hosts.length === 0) {
+        return "unknown";
+    }
+    const known = hosts
+        .map((host) => host[capability])
+        .filter((value) => typeof value === "boolean");
+    if (known.length === 0) {
+        return "unknown";
+    }
+    return known.some(Boolean) ? "enabled" : "disabled";
+};
+export const vsanStatus = (infra, vms) => {
+    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) => {
+    if (typeof infra?.totalHosts === "number") {
+        return infra.totalHosts;
+    }
+    if (infra?.hosts) {
+        return infra.hosts.length;
+    }
+    return undefined;
+};
+const datacenterCount = (infra) => {
+    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, vcenterId) => {
+    const ids = new Set();
+    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) => {
+    const vlanId = network.vlanId?.trim();
+    return {
+        name: network.name,
+        vlanId: vlanId || undefined,
+        displayName: vlanId ? `${network.name} (VLAN ${vlanId})` : network.name,
+    };
+};
+export const visibleNetworks = (infra) => (infra?.networks ?? [])
+    .filter((network) => Boolean(network.name?.trim()) && network.type !== "dvswitch")
+    .map(toNetworkLabel);
+export const buildInfrastructureSummary = ({ infra, vcenterVersion, vcenterId, clusters, }) => ({
+    vmwareVersion: formatVSphereVersion(vcenterVersion),
+    datacenters: datacenterCount(infra),
+    vCenters: countVCenters(clusters, vcenterId),
+    esxiHosts: hostCount(infra),
+});
+const clusterFeatureStatus = (cluster) => ({
+    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, b, clusters) => {
+    const vmsA = clusters[a]?.vms?.total ?? 0;
+    const vmsB = clusters[b]?.vms?.total ?? 0;
+    return vmsB - vmsA || a.localeCompare(b);
+};
+export const buildClusterDetailRows = (clusters) => {
+    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) => {
+    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,
+    };
+};

package/dist/report/pdfExport.d.ts

@@ -0,0 +1,3 @@
+import { type ChartCaptureSource } from "./chartExport.js";
+export declare function buildPdfFromCharts(charts: ChartCaptureSource[], documentTitle: string): Promise<Blob>;
+//# sourceMappingURL=pdfExport.d.ts.map

package/dist/report/pdfExport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdfExport.d.ts","sourceRoot":"","sources":["../../src/report/pdfExport.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAQ1E,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CAuDf"}

package/dist/report/pdfExport.js

@@ -0,0 +1,82 @@
+import jsPDF from "jspdf";
+import { 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, documentTitle) {
+    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), pageWidth, pageHeight);
+    let cursorY = 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);
+        }
+    }
+    addPageNumbers(pdf, pageWidth, pageHeight);
+    return pdf.output("blob");
+}
+function addCoverPage(pdf, documentTitle, tocItems, pageWidth, pageHeight) {
+    const contentWidth = pageWidth - MARGIN_MM * 2;
+    pdf.setFontSize(18);
+    const titleLines = pdf.splitTextToSize(documentTitle, contentWidth);
+    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, canvas, x, y, widthMm, heightMm) {
+    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);
+    }
+}
+function addPageNumbers(pdf, pageWidth, pageHeight) {
+    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/dist/report/pdfPage.d.ts

@@ -0,0 +1,15 @@
+export interface PdfExportSegment {
+    top: number;
+    height: number;
+}
+export declare function splitSegmentForPageHeight(segment: PdfExportSegment, imgHeight: number, pageHeightPx: number): PdfExportSegment[];
+export declare function fitPdfImageSize(pixelWidth: number, pixelHeight: number, maxWidthMm: number, maxHeightMm: number): {
+    widthMm: number;
+    heightMm: number;
+};
+export declare function placePdfBlock(cursorY: number | null, blockHeightMm: number, pageTopMm: number, pageBottomMm: number): {
+    y: number;
+    needsNewPage: boolean;
+};
+export declare function sliceCanvas(sourceCanvas: HTMLCanvasElement, width: number, height: number, offsetY: number, backgroundColor: string): HTMLCanvasElement;
+//# sourceMappingURL=pdfPage.d.ts.map

package/dist/report/pdfPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdfPage.d.ts","sourceRoot":"","sources":["../../src/report/pdfPage.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB,gBAAgB,EAAE,CAcpB;AAED,wBAAgB,eAAe,CAC7B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAUvC;AAED,wBAAgB,aAAa,CAC3B,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAE,CAKtC;AAED,wBAAgB,WAAW,CACzB,YAAY,EAAE,iBAAiB,EAC/B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,MAAM,GACtB,iBAAiB,CAsBnB"}

package/dist/report/pdfPage.js

@@ -0,0 +1,44 @@
+export function splitSegmentForPageHeight(segment, imgHeight, pageHeightPx) {
+    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 = [];
+    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, pixelHeight, maxWidthMm, maxHeightMm) {
+    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, blockHeightMm, pageTopMm, pageBottomMm) {
+    if (cursorY === null || cursorY + blockHeightMm > pageBottomMm) {
+        return { y: pageTopMm, needsNewPage: true };
+    }
+    return { y: cursorY, needsNewPage: false };
+}
+export function sliceCanvas(sourceCanvas, width, height, offsetY, backgroundColor) {
+    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;
+}

package/dist/report/powerStates.d.ts

@@ -0,0 +1,11 @@
+import type { MigrationDonutChartDatum } from "../charts/MigrationDonutChart.js";
+export type PowerStateChartModel = {
+    slices: MigrationDonutChartDatum[];
+    legend: Record<string, string>;
+    total: number;
+};
+export declare const HOST_POWER_COLORS: Record<string, string>;
+export declare const VM_POWER_COLORS: Record<string, string>;
+export declare const buildHostPowerStateChart: (hostPowerStates?: Record<string, number>) => PowerStateChartModel;
+export declare const buildVmPowerStateChart: (powerStates?: Record<string, number>) => PowerStateChartModel;
+//# sourceMappingURL=powerStates.d.ts.map

package/dist/report/powerStates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"powerStates.d.ts","sourceRoot":"","sources":["../../src/report/powerStates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,wBAAwB,EAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA8BF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMpD,CAAC;AAcF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAIlD,CAAC;AAmCF,eAAO,MAAM,wBAAwB,GACnC,kBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KACvC,oBAgCF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,cAAc,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KACnC,oBAmCF,CAAC"}

package/dist/report/powerStates.js

@@ -0,0 +1,113 @@
+const HOST_POWER_CATEGORIES = [
+    "Powered on",
+    "Powered off",
+    "Standby",
+    "Not responding",
+    "Maintenance",
+];
+const HOST_POWER_KEY_ALIASES = {
+    poweredon: "Powered on",
+    powered_on: "Powered on",
+    green: "Powered on",
+    poweredoff: "Powered off",
+    powered_off: "Powered off",
+    standby: "Standby",
+    stand_by: "Standby",
+    notresponding: "Not responding",
+    not_responding: "Not responding",
+    gray: "Not responding",
+    grey: "Not responding",
+    red: "Not responding",
+    maintenance: "Maintenance",
+    inmaintenance: "Maintenance",
+    inmaintenancemode: "Maintenance",
+};
+export const HOST_POWER_COLORS = {
+    "Powered on": "#0066cc",
+    "Powered off": "#dca614",
+    Standby: "#f0ab00",
+    "Not responding": "#c9190b",
+    Maintenance: "#002f5d",
+};
+const VM_POWER_CATEGORIES = ["Powered off", "Powered on", "Suspended"];
+const VM_POWER_KEY_ALIASES = {
+    poweredoff: "Powered off",
+    powered_off: "Powered off",
+    poweredon: "Powered on",
+    powered_on: "Powered on",
+    suspended: "Suspended",
+};
+export const VM_POWER_COLORS = {
+    "Powered off": "#0066cc",
+    "Powered on": "#dca614",
+    Suspended: "#5e40be",
+};
+const OTHER_COLOR = "#6a6e73";
+const normalizeKey = (key) => key
+    .trim()
+    .toLowerCase()
+    .replace(/[\s-]+/g, "");
+const formatUnknownLabel = (key) => {
+    const spaced = key
+        .replace(/[_-]+/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .trim();
+    if (!spaced) {
+        return "Unknown";
+    }
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+};
+const toSlice = (name, count, unit) => ({
+    name,
+    count,
+    legendCategory: name,
+    countDisplay: `${count} ${count === 1 ? unit.replace(/s$/, "") : unit}`,
+});
+const sumCounts = (counts) => Object.values(counts).reduce((total, count) => total + (count || 0), 0);
+export const buildHostPowerStateChart = (hostPowerStates) => {
+    const counts = Object.fromEntries(HOST_POWER_CATEGORIES.map((category) => [category, 0]));
+    for (const [key, count] of Object.entries(hostPowerStates ?? {})) {
+        const mapped = HOST_POWER_KEY_ALIASES[normalizeKey(key)];
+        const label = mapped ?? formatUnknownLabel(key);
+        counts[label] = (counts[label] ?? 0) + (count || 0);
+    }
+    const orderedLabels = [
+        ...HOST_POWER_CATEGORIES,
+        ...Object.keys(counts).filter((label) => !HOST_POWER_CATEGORIES.includes(label)),
+    ];
+    const slices = orderedLabels.map((label) => toSlice(label, counts[label] ?? 0, "hosts"));
+    const legend = {};
+    for (const label of orderedLabels) {
+        legend[label] = HOST_POWER_COLORS[label] ?? OTHER_COLOR;
+    }
+    return {
+        slices,
+        legend,
+        total: sumCounts(counts),
+    };
+};
+export const buildVmPowerStateChart = (powerStates) => {
+    const counts = {
+        "Powered off": 0,
+        "Powered on": 0,
+    };
+    for (const [key, count] of Object.entries(powerStates ?? {})) {
+        const mapped = VM_POWER_KEY_ALIASES[normalizeKey(key)];
+        const label = mapped ?? formatUnknownLabel(key);
+        counts[label] = (counts[label] ?? 0) + (count || 0);
+    }
+    const orderedLabels = [
+        ...VM_POWER_CATEGORIES.filter((category) => category !== "Suspended" || (counts[category] ?? 0) > 0),
+        ...Object.keys(counts).filter((label) => !VM_POWER_CATEGORIES.includes(label)),
+    ];
+    const slices = orderedLabels.map((label) => toSlice(label, counts[label] ?? 0, "VMs"));
+    const legend = {};
+    for (const label of orderedLabels) {
+        legend[label] = VM_POWER_COLORS[label] ?? OTHER_COLOR;
+    }
+    return {
+        slices,
+        legend,
+        total: sumCounts(counts),
+    };
+};

package/dist/report/reportExportOptions.d.ts

@@ -0,0 +1,17 @@
+export interface ReportExportOption {
+    key: string;
+    label: string;
+    description?: string;
+    onSelect: () => void;
+    isDisabled?: boolean;
+}
+export interface StandardReportExportHandlers {
+    onExportPdf?: () => void;
+    onExportPng?: () => void;
+    onExportHtml?: () => void;
+}
+/**
+ * Standard report-download actions. Omit a handler to hide that format.
+ */
+export declare const standardReportExportOptions: ({ onExportPdf, onExportPng, onExportHtml, }: StandardReportExportHandlers) => ReportExportOption[];
+//# sourceMappingURL=reportExportOptions.d.ts.map

package/dist/report/reportExportOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reportExportOptions.d.ts","sourceRoot":"","sources":["../../src/report/reportExportOptions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,GAAI,6CAIzC,4BAA4B,KAAG,kBAAkB,EA+BnD,CAAC"}

package/dist/report/reportExportOptions.js

@@ -0,0 +1,31 @@
+/**
+ * Standard report-download actions. Omit a handler to hide that format.
+ */
+export const standardReportExportOptions = ({ onExportPdf, onExportPng, onExportHtml, }) => {
+    const options = [];
+    if (onExportPdf) {
+        options.push({
+            key: "pdf",
+            label: "PDF",
+            description: "Export the report as a PDF",
+            onSelect: onExportPdf,
+        });
+    }
+    if (onExportHtml) {
+        options.push({
+            key: "html",
+            label: "HTML",
+            description: "Export the report as HTML",
+            onSelect: onExportHtml,
+        });
+    }
+    if (onExportPng) {
+        options.push({
+            key: "png",
+            label: "PNG",
+            description: "Download all charts as PNG files",
+            onSelect: onExportPng,
+        });
+    }
+    return options;
+};

package/dist/report/zipChartPngs.d.ts

@@ -0,0 +1,3 @@
+import type { ChartExportFile } from "./chartExport.js";
+export declare function zipChartPngs(files: ChartExportFile[]): Promise<Blob>;
+//# sourceMappingURL=zipChartPngs.d.ts.map

package/dist/report/zipChartPngs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zipChartPngs.d.ts","sourceRoot":"","sources":["../../src/report/zipChartPngs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,wBAAsB,YAAY,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAM1E"}

package/dist/report/zipChartPngs.js

@@ -0,0 +1,8 @@
+import JSZip from "jszip";
+export async function zipChartPngs(files) {
+    const zip = new JSZip();
+    for (const file of files) {
+        zip.file(file.filename, file.blob);
+    }
+    return zip.generateAsync({ type: "blob", compression: "STORE" });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.24.0",
+  "version": "0.25.0-0ad1e70d1fa5",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",
@@ -44,5 +44,10 @@
     "src",
     "LICENSE",
     "README.md"
-  ]
+  ],
+  "dependencies": {
+    "html2canvas-pro": "^2.4.4",
+    "jspdf": "^4.2.1",
+    "jszip": "^3.10.2"
+  }
 }

package/src/charts/index.ts

@@ -1,5 +1,6 @@
 export {
   MigrationDonutChart,
   type MigrationDonutChartDatum,
+  type MigrationDonutChartLegendVariant,
   type MigrationDonutChartProps,
 } from "./MigrationDonutChart.js";

package/src/forms/RadioButtonFormGroup.tsx

@@ -33,12 +33,19 @@ export default function RadioButtonFormGroup({
   const showError = error && (isTouched || isSubmitted);
 
   return (
-    <FormGroup label={label} isRequired={isRequired} fieldId={id} {...props}>
+    <FormGroup
+      label={label}
+      isRequired={isRequired}
+      fieldId={id}
+      role="radiogroup"
+      isInline
+      {...props}
+    >
       <Controller
         name={name}
         control={methods.control}
         render={({ field }) => (
-          <div style={{ display: "flex", gap: "16px" }} role="radiogroup">
+          <>
             {options.map((option) => (
               <Radio
                 key={option.value}
@@ -50,7 +57,7 @@ export default function RadioButtonFormGroup({
                 onBlur={field.onBlur}
               />
             ))}
-          </div>
+          </>
         )}
       />
       <FormFieldHelperText

package/src/report/ChartDownloadButton.tsx

@@ -0,0 +1,59 @@
+import { Button, Flex, FlexItem } from "@patternfly/react-core";
+import { DownloadIcon } from "@patternfly/react-icons";
+import type { FC, ReactNode } from "react";
+import { chartExportHideProps } from "./chartExport.js";
+import { useChartExport } from "./chartExportContext.js";
+
+export const ChartDownloadButton: FC<{
+  chartId: string;
+  title?: string;
+}> = ({ chartId, title }) => {
+  const exportApi = useChartExport();
+  if (!exportApi) {
+    return null;
+  }
+
+  const label = title ? `Download ${title} as PNG` : "Download chart as PNG";
+
+  return (
+    <Button
+      variant="plain"
+      icon={<DownloadIcon />}
+      aria-label={label}
+      isLoading={exportApi.downloadingChartId === chartId}
+      isDisabled={exportApi.isBusy}
+      onClick={() => {
+        void exportApi.downloadChart(chartId);
+      }}
+    />
+  );
+};
+
+ChartDownloadButton.displayName = "ChartDownloadButton";
+
+export const ChartHeaderActions: FC<{
+  chartId: string;
+  title?: string;
+  children?: ReactNode;
+}> = ({ chartId, title, children }) => {
+  const exportApi = useChartExport();
+  if (!exportApi && !children) {
+    return null;
+  }
+
+  return (
+    <FlexItem {...chartExportHideProps}>
+      <Flex
+        alignItems={{ default: "alignItemsCenter" }}
+        spaceItems={{ default: "spaceItemsSm" }}
+      >
+        {children}
+        {exportApi ? (
+          <ChartDownloadButton chartId={chartId} title={title} />
+        ) : null}
+      </Flex>
+    </FlexItem>
+  );
+};
+
+ChartHeaderActions.displayName = "ChartHeaderActions";