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

package/README.md

@@ -7,6 +7,7 @@ Includes:
 - PatternFly form field wrappers (`react-hook-form`)
 - Guest OS support-tier helpers and badges
 - Report chart primitives (`MigrationDonutChart`)
+- Chart export (`ChartExportProvider`, `ChartExportSurface`, PDF / PNG / HTML)
 - Operating Systems distribution card
 - Infrastructure summary, vCenter cluster details, and host/VM power-state cards
 
@@ -25,17 +26,41 @@ npm install @openshift-migration-advisor/shared-components
 ```tsx
 import {
   buildInfrastructureSummary,
+  ChartExportProvider,
   HostPowerStates,
   InfrastructureSummary,
   MigrationDonutChart,
   OSDistribution,
+  ReportExportMenu,
   SupportTierBadge,
   TextInputFormGroup,
+  useChartExport,
   VCenterClusterDetails,
   VmPowerStates,
 } from "@openshift-migration-advisor/shared-components";
+
+<ChartExportProvider>
+  <Dashboard />
+</ChartExportProvider>
+```
+
+`ChartExportProvider` lazy-loads capture, ZIP, PDF, and HTML. Wrap the chart visual (not the Card chrome) in `ChartExportSurface`. All formats snapshot those same nodes, encode one chart at a time, and drop the canvas. There is no second print tree and no `isExportMode` render:
+
+```tsx
+import { ChartExportSurface } from "@openshift-migration-advisor/shared-components";
+
+<Card>
+  <CardTitle>CPU and memory</CardTitle>
+  <CardBody>
+    <ChartExportSurface id="cpu-memory" title="CPU and memory">
+      <MigrationDonutChart {...chartProps} />
+    </ChartExportSurface>
+  </CardBody>
+</Card>
 ```
 
+`ReportExportMenu` accepts a fully custom `options` list. `standardReportExportOptions()` builds the PDF / HTML / PNG entries; omit a handler to hide that format.
+
 Components are SDK-agnostic: pass already-shaped props (for example `OSDistributionEntry` maps). Map `agent-sdk` / `planner-sdk` models at the app boundary.
 
 ## Development

package/dist/report/ChartDownloadButton.d.ts

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from "react";
+export declare const ChartDownloadButton: FC<{
+    chartId: string;
+    title?: string;
+}>;
+export declare const ChartHeaderActions: FC<{
+    chartId: string;
+    title?: string;
+    children?: ReactNode;
+}>;
+//# sourceMappingURL=ChartDownloadButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDownloadButton.d.ts","sourceRoot":"","sources":["../../src/report/ChartDownloadButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAoBA,CAAC;AAIF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAmBA,CAAC"}

package/dist/report/ChartDownloadButton.js

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

package/dist/report/ChartExportProvider.d.ts

@@ -0,0 +1,23 @@
+import { type FC, type ReactNode } from "react";
+import { type ChartCaptureSource, type ChartExportFile, type PdfTextPage } from "./chartExport.js";
+export type CaptureChartElement = (element: HTMLElement) => Promise<HTMLCanvasElement>;
+export type ZipChartFiles = (files: ChartExportFile[]) => Promise<Blob>;
+export type EncodeChartPng = (canvas: HTMLCanvasElement) => Promise<Blob>;
+export type BuildChartDocument = (charts: ChartCaptureSource[], documentTitle: string) => Promise<Blob>;
+export type BuildPdfDocument = (charts: ChartCaptureSource[], documentTitle: string, extraPages?: PdfTextPage[]) => Promise<Blob>;
+export type { ChartExportApi, ChartExportFormat, } from "./chartExportContext.js";
+export { useChartExport, useRegisterChart } from "./chartExportContext.js";
+export interface ChartExportProviderProps {
+    children: ReactNode;
+    capture?: CaptureChartElement;
+    zipFiles?: ZipChartFiles;
+    encodePng?: EncodeChartPng;
+    buildPdf?: BuildPdfDocument;
+    buildHtml?: BuildChartDocument;
+    downloadFile?: (blob: Blob, filename: string) => void;
+    getZipFilename?: () => string;
+    getPdfFilename?: () => string;
+    getHtmlFilename?: () => string;
+}
+export declare const ChartExportProvider: FC<ChartExportProviderProps>;
+//# sourceMappingURL=ChartExportProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartExportProvider.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAGpB,KAAK,WAAW,EAMjB,MAAM,kBAAkB,CAAC;AAU1B,MAAM,MAAM,mBAAmB,GAAG,CAChC,OAAO,EAAE,WAAW,KACjB,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,MAAM,gBAAgB,GAAG,CAC7B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,YAAY,EACV,cAAc,EACd,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;CAChC;AAsED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiQ5D,CAAC"}

package/dist/report/ChartExportProvider.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState, } from "react";
+import { canvasToBlob, downloadBlob, releaseCanvas, restoreChartExportViews, sortRegisteredChartsByDocumentOrder, toBulkChartCaptureSources, } from "./chartExport.js";
+import { ChartExportApiContext, ChartExportRegistryContext, } from "./chartExportContext.js";
+import { getChartExportFilename } from "./chartExportFilenames.js";
+export { useChartExport, useRegisterChart } from "./chartExportContext.js";
+const EXPORT_LOADING_LABELS = {
+    pdf: "Generating PDF...",
+    png: "Generating PNG...",
+    html: "Generating HTML...",
+};
+const defaultZipFilename = () => getChartExportFilename("zip");
+const defaultPdfFilename = () => getChartExportFilename("pdf");
+const defaultHtmlFilename = () => getChartExportFilename("html");
+async function resolveCapture(override) {
+    if (override) {
+        return override;
+    }
+    const { captureChartElement } = await import("./captureChartElement.js");
+    return captureChartElement;
+}
+async function resolvePrepareElement(overrideCapture) {
+    if (overrideCapture) {
+        return undefined;
+    }
+    const { revealHiddenChartAncestors } = await import("./captureChartElement.js");
+    return revealHiddenChartAncestors;
+}
+async function resolveZip(override) {
+    if (override) {
+        return override;
+    }
+    const { zipChartPngs } = await import("./zipChartPngs.js");
+    return zipChartPngs;
+}
+async function resolvePdf(override) {
+    if (override) {
+        return override;
+    }
+    const { buildPdfFromCharts } = await import("./pdfExport.js");
+    return buildPdfFromCharts;
+}
+async function resolveHtml(override) {
+    if (override) {
+        return override;
+    }
+    const { buildHtmlFromCharts } = await import("./htmlExport.js");
+    return buildHtmlFromCharts;
+}
+function toCaptureSources(charts, capture, prepareElement) {
+    return toBulkChartCaptureSources(charts, capture, prepareElement);
+}
+export const ChartExportProvider = ({ children, capture, zipFiles, encodePng = canvasToBlob, buildPdf, buildHtml, downloadFile = downloadBlob, getZipFilename = defaultZipFilename, getPdfFilename = defaultPdfFilename, getHtmlFilename = defaultHtmlFilename, }) => {
+    const chartsRef = useRef(new Map());
+    const isBusyRef = useRef(false);
+    const [downloadingChartId, setDownloadingChartId] = useState(null);
+    const [exportingFormat, setExportingFormat] = useState(null);
+    const [exportError, setExportError] = useState(null);
+    const registry = useMemo(() => ({
+        register(chart) {
+            const existing = chartsRef.current.get(chart.id);
+            if (existing &&
+                existing.element !== chart.element &&
+                existing.element.isConnected) {
+                console.warn(`Duplicate chart export id "${chart.id}". The previous chart will not be exported.`);
+            }
+            chartsRef.current.set(chart.id, chart);
+            return () => {
+                const current = chartsRef.current.get(chart.id);
+                if (current?.element === chart.element) {
+                    chartsRef.current.delete(chart.id);
+                }
+            };
+        },
+    }), []);
+    const listCharts = useCallback(() => {
+        return sortRegisteredChartsByDocumentOrder(Array.from(chartsRef.current.values()).filter((chart) => chart.element.isConnected));
+    }, []);
+    const runCapture = useCallback(async (work, chartId, format) => {
+        if (isBusyRef.current) {
+            return;
+        }
+        isBusyRef.current = true;
+        setExportError(null);
+        if (chartId) {
+            setDownloadingChartId(chartId);
+        }
+        else {
+            setExportingFormat(format);
+        }
+        try {
+            await work();
+        }
+        catch (error) {
+            console.error(`Error exporting ${format}:`, error);
+            setExportError(`Failed to export ${format.toUpperCase()}. Please try again.`);
+        }
+        finally {
+            isBusyRef.current = false;
+            setDownloadingChartId(null);
+            setExportingFormat(null);
+        }
+    }, []);
+    const downloadChart = useCallback(async (id) => {
+        await runCapture(async () => {
+            const chart = chartsRef.current.get(id);
+            if (!chart?.element.isConnected) {
+                throw new Error("The chart is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const canvas = await captureFn(chart.element);
+            try {
+                downloadFile(await encodePng(canvas), chart.filename);
+            }
+            finally {
+                releaseCanvas(canvas);
+            }
+        }, id, "png");
+    }, [capture, downloadFile, encodePng, runCapture]);
+    const downloadAll = useCallback(async () => {
+        await runCapture(async () => {
+            const charts = listCharts();
+            if (charts.length === 0) {
+                throw new Error("The report is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const prepareElement = await resolvePrepareElement(capture);
+            const zipFn = await resolveZip(zipFiles);
+            const files = [];
+            const sources = toBulkChartCaptureSources(charts, captureFn, prepareElement);
+            try {
+                for (const [index, source] of sources.entries()) {
+                    const canvas = await source.capture();
+                    try {
+                        files.push({
+                            filename: `${String(index + 1).padStart(2, "0")}-${source.filename}`,
+                            blob: await encodePng(canvas),
+                        });
+                    }
+                    finally {
+                        releaseCanvas(canvas);
+                    }
+                }
+            }
+            finally {
+                await restoreChartExportViews(charts);
+            }
+            downloadFile(await zipFn(files), getZipFilename());
+        }, null, "png");
+    }, [
+        capture,
+        downloadFile,
+        encodePng,
+        getZipFilename,
+        listCharts,
+        runCapture,
+        zipFiles,
+    ]);
+    const downloadPdf = useCallback(async (documentTitle, extraPages) => {
+        await runCapture(async () => {
+            const charts = listCharts();
+            if (charts.length === 0 && (extraPages?.length ?? 0) === 0) {
+                throw new Error("The report is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const prepareElement = await resolvePrepareElement(capture);
+            const build = await resolvePdf(buildPdf);
+            try {
+                downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle, extraPages), getPdfFilename());
+            }
+            finally {
+                await restoreChartExportViews(charts);
+            }
+        }, null, "pdf");
+    }, [buildPdf, capture, downloadFile, getPdfFilename, listCharts, runCapture]);
+    const downloadHtml = useCallback(async (documentTitle) => {
+        await runCapture(async () => {
+            const charts = listCharts();
+            if (charts.length === 0) {
+                throw new Error("The report is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const prepareElement = await resolvePrepareElement(capture);
+            const build = await resolveHtml(buildHtml);
+            try {
+                downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle), getHtmlFilename());
+            }
+            finally {
+                await restoreChartExportViews(charts);
+            }
+        }, null, "html");
+    }, [buildHtml, capture, downloadFile, getHtmlFilename, listCharts, runCapture]);
+    const clearExportError = useCallback(() => {
+        setExportError(null);
+    }, []);
+    const api = useMemo(() => ({
+        downloadChart,
+        downloadAll,
+        downloadPdf,
+        downloadHtml,
+        downloadingChartId,
+        exportingFormat,
+        exportLoadingLabel: exportingFormat
+            ? EXPORT_LOADING_LABELS[exportingFormat]
+            : null,
+        isExportingAll: exportingFormat !== null,
+        isBusy: downloadingChartId !== null || exportingFormat !== null,
+        exportError,
+        clearExportError,
+    }), [
+        clearExportError,
+        downloadAll,
+        downloadChart,
+        downloadHtml,
+        downloadPdf,
+        downloadingChartId,
+        exportError,
+        exportingFormat,
+    ]);
+    return (_jsx(ChartExportRegistryContext.Provider, { value: registry, children: _jsx(ChartExportApiContext.Provider, { value: api, children: children }) }));
+};
+ChartExportProvider.displayName = "ChartExportProvider";

package/dist/report/ChartExportSurface.d.ts

@@ -0,0 +1,12 @@
+import { type FC, type ReactNode } from "react";
+import { type ChartExportView } from "./chartExport.js";
+export declare const ChartExportSurface: FC<{
+    id: string;
+    title: string;
+    filename?: string;
+    exportViews?: ChartExportView[];
+    activeExportViewId?: string;
+    onExportViewChange?: (viewId: string) => void;
+    children: ReactNode;
+}>;
+//# sourceMappingURL=ChartExportSurface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartExportSurface.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AACrE,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AAG1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAyCA,CAAC"}

package/dist/report/ChartExportSurface.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { chartExportRootStyle, waitForChartExportPaint, } from "./chartExport.js";
+import { useRegisterChart } from "./chartExportContext.js";
+export const ChartExportSurface = ({ id, title, filename, exportViews, activeExportViewId, onExportViewChange, children, }) => {
+    const activeViewRef = useRef(activeExportViewId);
+    activeViewRef.current = activeExportViewId;
+    const onExportViewChangeRef = useRef(onExportViewChange);
+    onExportViewChangeRef.current = onExportViewChange;
+    const setExportView = useCallback(async (viewId) => {
+        const change = onExportViewChangeRef.current;
+        if (change && activeViewRef.current !== viewId) {
+            change(viewId);
+            await new Promise((resolve) => {
+                window.setTimeout(resolve, 0);
+            });
+        }
+        await waitForChartExportPaint();
+    }, []);
+    const ref = useRegisterChart({
+        id,
+        title,
+        filename,
+        exportViews,
+        activeExportViewId,
+        setExportView: exportViews && exportViews.length > 1 && onExportViewChange
+            ? setExportView
+            : undefined,
+    });
+    return (_jsx("div", { ref: ref, id: id, style: chartExportRootStyle, children: children }));
+};
+ChartExportSurface.displayName = "ChartExportSurface";

package/dist/report/ErrorTable.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+/**
+ * Minimal shape of a migration issue consumed by {@link ErrorTable}. Declared
+ * locally so this package does not depend on a specific SDK (`agent-sdk` or
+ * `planner-sdk`); callers pass the subset of `MigrationIssue` fields read here.
+ */
+export interface MigrationIssueLike {
+    label: string;
+    assessment: string;
+    count: number;
+}
+export interface ErrorTableProps {
+    errors: MigrationIssueLike[];
+    /** Optional drill-down callback invoked with an issue's `label`. */
+    onConcernClick?: (concernLabel: string) => void;
+}
+export declare const ErrorTable: React.FC<ErrorTableProps>;
+//# sourceMappingURL=ErrorTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorTable.d.ts","sourceRoot":"","sources":["../../src/report/ErrorTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,oEAAoE;IACpE,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgDhD,CAAC"}

package/dist/report/ErrorTable.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardTitle, Flex, FlexItem, Icon, } from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+import { ReportTable } from "./ReportTable.js";
+export const ErrorTable = ({ errors, onConcernClick, }) => {
+    const handleRowClick = (issue) => {
+        if (issue.label && onConcernClick) {
+            onConcernClick(issue.label);
+        }
+    };
+    const chartId = "errors-table";
+    const chartTitle = "Errors";
+    return (_jsx(ChartExportSurface, { id: chartId, title: chartTitle, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsxs(FlexItem, { children: [_jsx(Icon, { status: "danger", children: _jsx(ExclamationCircleIcon, {}) }), " ", "Errors"] }), _jsx(ChartHeaderActions, { chartId: chartId, title: chartTitle })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: errors.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.errors })) : (_jsx("div", { children: _jsx(ReportTable, { data: errors, columns: ["Description", "Total VMs"], fields: ["assessment", "count"], onRowClick: onConcernClick ? handleRowClick : undefined, clickableFields: onConcernClick ? ["assessment"] : [] }) })) })] }) }));
+};
+ErrorTable.displayName = "ErrorTable";

package/dist/report/HostPowerStates.d.ts

@@ -2,7 +2,6 @@ import type { FC } from "react";
 import type { MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
 export interface HostPowerStatesProps {
     hostPowerStates?: Record<string, number>;
-    isExportMode?: boolean;
     legendVariant?: MigrationDonutChartLegendVariant;
 }
 export declare const HostPowerStates: FC<HostPowerStatesProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"HostPowerStates.d.ts","sourceRoot":"","sources":["../../src/report/HostPowerStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AAKzF,MAAM,WAAW,oBAAoB;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwBpD,CAAC"}
+{"version":3,"file":"HostPowerStates.d.ts","sourceRoot":"","sources":["../../src/report/HostPowerStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AAKzF,MAAM,WAAW,oBAAoB;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAsBpD,CAAC"}

package/dist/report/HostPowerStates.js

@@ -4,8 +4,8 @@ import { useMemo } from "react";
 import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
 import { PowerStateCard } from "./PowerStateCard.js";
 import { buildHostPowerStateChart } from "./powerStates.js";
-export const HostPowerStates = ({ hostPowerStates, isExportMode = false, legendVariant, }) => {
+export const HostPowerStates = ({ hostPowerStates, legendVariant, }) => {
     const chart = useMemo(() => buildHostPowerStateChart(hostPowerStates), [hostPowerStates]);
-    return (_jsx(PowerStateCard, { id: "esxi-host-power-states", title: "ESXi host power states", icon: _jsx(ServerIcon, {}), emptyTitle: REPORT_CARD_EMPTY_STATE_TITLES.hostPowerStates, slices: chart.slices, legend: chart.legend, total: chart.total, subTitle: "Hosts", isExportMode: isExportMode, legendVariant: legendVariant }));
+    return (_jsx(PowerStateCard, { id: "esxi-host-power-states", title: "ESXi host power states", icon: _jsx(ServerIcon, {}), emptyTitle: REPORT_CARD_EMPTY_STATE_TITLES.hostPowerStates, slices: chart.slices, legend: chart.legend, total: chart.total, subTitle: "Hosts", legendVariant: legendVariant }));
 };
 HostPowerStates.displayName = "HostPowerStates";

package/dist/report/HostsOverview.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+/** Smallest host shape this card reads. Apps pass SDK hosts structurally. */
+export interface HostLike {
+    model?: string | number;
+}
+export interface HostsOverviewProps {
+    hosts?: HostLike[];
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const HostsOverview: FC<HostsOverviewProps>;
+//# sourceMappingURL=HostsOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HostsOverview.d.ts","sourceRoot":"","sources":["../../src/report/HostsOverview.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAO1C,6EAA6E;AAC7E,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAuFD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwDhD,CAAC"}

package/dist/report/HostsOverview.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { Card, CardBody, CardTitle, Flex, FlexItem, } from "@patternfly/react-core";
+import { ServerIcon } from "@patternfly/react-icons";
+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 { useMemo } from "react";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const TOP_HOST_MODELS = 5;
+const OTHER_MODELS_LABEL = "Other models";
+const UNKNOWN_MODEL_LABEL = "Unknown model";
+const CHART_ID = "hosts-overview";
+const CHART_TITLE = "Host distribution by model";
+/**
+ * Same categorical order as the ui-app host-model donut, mapped onto
+ * PatternFly `chart_color_*` tokens (nearest token where the old hex
+ * was not itself a token).
+ */
+const HOST_MODEL_COLORS = [
+    chart_color_blue_300.value,
+    chart_color_purple_300.value,
+    chart_color_purple_100.value,
+    chart_color_teal_200.value,
+    chart_color_yellow_400.value,
+    chart_color_green_300.value,
+];
+const cardSubtitle = css `
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+const hostModelLabel = (model) => {
+    const raw = typeof model === "string"
+        ? model
+        : typeof model === "number"
+            ? String(model)
+            : "";
+    const trimmed = raw.trim();
+    return trimmed !== "" ? trimmed : UNKNOWN_MODEL_LABEL;
+};
+const buildHostModelDonut = (hosts) => {
+    const counts = new Map();
+    for (const host of hosts) {
+        const label = hostModelLabel(host?.model);
+        counts.set(label, (counts.get(label) ?? 0) + 1);
+    }
+    const entries = [...counts.entries()]
+        .map(([model, count]) => ({ model, count }))
+        .sort((a, b) => b.count - a.count);
+    const top = entries.slice(0, TOP_HOST_MODELS);
+    const restSum = entries
+        .slice(TOP_HOST_MODELS)
+        .reduce((sum, entry) => sum + entry.count, 0);
+    const slices = top.map((entry) => ({
+        name: entry.model,
+        count: entry.count,
+        countDisplay: `${entry.count} hosts`,
+        legendCategory: entry.model,
+    }));
+    if (restSum > 0) {
+        slices.push({
+            name: OTHER_MODELS_LABEL,
+            count: restSum,
+            countDisplay: `${restSum} hosts`,
+            legendCategory: OTHER_MODELS_LABEL,
+        });
+    }
+    const legend = {};
+    slices.forEach((slice, index) => {
+        const color = HOST_MODEL_COLORS[index % HOST_MODEL_COLORS.length];
+        if (color) {
+            legend[slice.legendCategory] = color;
+        }
+    });
+    return { slices, legend, totalHosts: hosts.length };
+};
+export const HostsOverview = ({ hosts, legendVariant = "html", }) => {
+    const { slices, legend, totalHosts } = useMemo(() => buildHostModelDonut(Array.isArray(hosts) ? hosts : []), [hosts]);
+    return (_jsx(ChartExportSurface, { id: CHART_ID, title: CHART_TITLE, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(ServerIcon, {}), " ", CHART_TITLE] }), _jsx("div", { className: cardSubtitle, children: "Top 5 models" })] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: CHART_TITLE })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: slices.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.hosts })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: slices, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, legend: legend, legendWidth: 680, title: `${totalHosts}`, subTitle: "Hosts", subTitleColor: "var(--pf-t--global--text--color--subtle)", itemsPerRow: 2, labelFontSize: 16, marginLeft: "0%", tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%` })) })] }) }));
+};
+HostsOverview.displayName = "HostsOverview";

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

@@ -1 +1 @@
-{"version":3,"file":"InfrastructureSummary.d.ts","sourceRoot":"","sources":["../../src/report/InfrastructureSummary.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAElF,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,0BAA0B,CAAC;CACrC;AAKD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAkChE,CAAC"}
+{"version":3,"file":"InfrastructureSummary.d.ts","sourceRoot":"","sources":["../../src/report/InfrastructureSummary.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAElF,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,0BAA0B,CAAC;CACrC;AAQD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA4ChE,CAAC"}

package/dist/report/InfrastructureSummary.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardBody, CardTitle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, } from "@patternfly/react-core";
+import { Card, CardBody, CardTitle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Flex, FlexItem, } from "@patternfly/react-core";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
 const formatCount = (value) => typeof value === "number" ? String(value) : "—";
-export const InfrastructureSummary = ({ summary, }) => (_jsxs(Card, { isFullHeight: true, id: "infrastructure-summary", children: [_jsx(CardTitle, { children: "Infrastructure summary" }), _jsx(CardBody, { children: _jsxs(DescriptionList, { isAutoFit: true, displaySize: "lg", children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "VMware version" }), _jsx(DescriptionListDescription, { children: summary.vmwareVersion })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Datacenters" }), _jsx(DescriptionListDescription, { children: formatCount(summary.datacenters) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "vCenters" }), _jsx(DescriptionListDescription, { children: formatCount(summary.vCenters) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "ESXi hosts" }), _jsx(DescriptionListDescription, { children: formatCount(summary.esxiHosts) })] })] }) })] }));
+const INFRA_CHART_ID = "infrastructure-summary";
+const INFRA_TITLE = "Infrastructure summary";
+export const InfrastructureSummary = ({ summary, }) => (_jsx(ChartExportSurface, { id: INFRA_CHART_ID, title: INFRA_TITLE, children: _jsxs(Card, { isFullHeight: true, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: INFRA_TITLE }), _jsx(ChartHeaderActions, { chartId: INFRA_CHART_ID, title: INFRA_TITLE })] }) }), _jsx(CardBody, { children: _jsxs(DescriptionList, { isAutoFit: true, displaySize: "lg", children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "VMware version" }), _jsx(DescriptionListDescription, { children: summary.vmwareVersion })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Datacenters" }), _jsx(DescriptionListDescription, { children: formatCount(summary.datacenters) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "vCenters" }), _jsx(DescriptionListDescription, { children: formatCount(summary.vCenters) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "ESXi hosts" }), _jsx(DescriptionListDescription, { children: formatCount(summary.esxiHosts) })] })] }) })] }) }));
 InfrastructureSummary.displayName = "InfrastructureSummary";

package/dist/report/NetworkOverview.d.ts

@@ -0,0 +1,31 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+/** Network fields this card reads. Apps pass SDK networks structurally. */
+export interface NetworkLike {
+    vmsCount?: number;
+    vlanId?: string | number;
+}
+/** Infra fields this card reads. */
+export interface NetworkInfraLike {
+    networks?: NetworkLike[];
+}
+/** Deprecated NIC histogram used when `distributionByNicCount` is absent. */
+export interface NicCountHistogram {
+    data?: number[];
+    minValue?: number;
+    step?: number;
+}
+/** NIC summary fields this card reads from the VM resource breakdown. */
+export interface NicCountSummary {
+    total?: number;
+    histogram?: NicCountHistogram;
+}
+export interface NetworkOverviewProps {
+    infra?: NetworkInfraLike;
+    nicCount?: NicCountSummary;
+    distributionByNicCount?: Record<string, number>;
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const NetworkOverview: FC<NetworkOverviewProps>;
+//# sourceMappingURL=NetworkOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkOverview.d.ts","sourceRoot":"","sources":["../../src/report/NetworkOverview.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAQ1C,2EAA2E;AAC3E,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,oCAAoC;AACpC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,6EAA6E;AAC7E,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,yEAAyE;AACzE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAiND,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2HpD,CAAC"}