@openshift-migration-advisor/shared-components 0.27.0 → 0.28.0

package/dist/report/ChartExportProvider.d.ts

@@ -1,9 +1,10 @@
 import { type FC, type ReactNode } from "react";
-import { type ChartCaptureSource, type ChartExportFile } from "./chartExport.js";
+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 {
@@ -11,7 +12,7 @@ export interface ChartExportProviderProps {
     capture?: CaptureChartElement;
     zipFiles?: ZipChartFiles;
     encodePng?: EncodeChartPng;
-    buildPdf?: BuildChartDocument;
+    buildPdf?: BuildPdfDocument;
     buildHtml?: BuildChartDocument;
     downloadFile?: (blob: Blob, filename: string) => void;
     getZipFilename?: () => string;

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

@@ -1 +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,EAQrB,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,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,kBAAkB,CAAC;IAC9B,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,CAgQ5D,CAAC"}
+{"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

@@ -156,17 +156,17 @@ export const ChartExportProvider = ({ children, capture, zipFiles, encodePng = c
         runCapture,
         zipFiles,
     ]);
-    const downloadPdf = useCallback(async (documentTitle) => {
+    const downloadPdf = useCallback(async (documentTitle, extraPages) => {
         await runCapture(async () => {
             const charts = listCharts();
-            if (charts.length === 0) {
+            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), getPdfFilename());
+                downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle, extraPages), getPdfFilename());
             }
             finally {
                 await restoreChartExportViews(charts);

package/dist/report/ClustersOverview.d.ts

@@ -0,0 +1,24 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+/**
+ * Cluster inventory fields this card reads.
+ * agent-sdk and planner-sdk inventories both satisfy it. `cpuOverCommitment`
+ * stays `unknown` because generated models type it as a number while older
+ * payloads send a ratio string such as `"1:4"`.
+ */
+export interface InventoryDataLike {
+    infra?: {
+        cpuOverCommitment?: unknown;
+    };
+    vms?: {
+        total?: number;
+    };
+}
+export interface ClustersOverviewProps {
+    clustersPerDatacenter?: number[];
+    clusters?: Record<string, InventoryDataLike>;
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const ClustersOverview: FC<ClustersOverviewProps>;
+//# sourceMappingURL=ClustersOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClustersOverview.d.ts","sourceRoot":"","sources":["../../src/report/ClustersOverview.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAS1C;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE;QACN,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CAAC;IACF,GAAG,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB;IACpC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC7C,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAyOD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA2JtD,CAAC"}

package/dist/report/ClustersOverview.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, CardBody, CardTitle, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { DatabaseIcon } from "@patternfly/react-icons";
+import { chart_color_black_500, chart_color_blue_300, chart_color_green_300, chart_color_orange_100, chart_color_purple_100, chart_color_purple_300, chart_color_red_orange_200, chart_color_teal_200, chart_color_teal_400, chart_color_yellow_400, } from "@patternfly/react-tokens";
+import { useMemo, useState } from "react";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { clustersOverviewStyles } from "./ClustersOverviewStyles.js";
+import { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    dataCenterDistribution: "Cluster distribution by data center",
+    vmByCluster: "VM distribution by cluster",
+    cpuOverCommitment: "Cluster CPU over commitment",
+};
+const TOP_CLUSTERS = 4;
+const TOP_CPU_RATIOS = 5;
+const REST_OF_CLUSTERS_LABEL = "Rest of clusters";
+const REST_OF_DATACENTERS_LABEL = "Rest of datacenters";
+const CHART_ID = "clusters-overview";
+const CHART_TITLE = "Clusters";
+/**
+ * Same categorical order as the previous cluster hex palette, mapped onto
+ * PatternFly `chart_color_*` tokens (nearest token where the old hex was
+ * not itself a token).
+ */
+const CLUSTER_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,
+    chart_color_orange_100.value,
+    chart_color_red_orange_200.value,
+    chart_color_teal_400.value,
+    chart_color_black_500.value,
+];
+const EMPTY_CHART = {
+    chartData: [],
+    legend: {},
+    title: "",
+    subTitle: "",
+};
+const isViewMode = (value) => value === "dataCenterDistribution" ||
+    value === "vmByCluster" ||
+    value === "cpuOverCommitment";
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const legendFor = (categories) => {
+    const legend = {};
+    categories.forEach((category, index) => {
+        const color = CLUSTER_COLORS[index % CLUSTER_COLORS.length];
+        if (color) {
+            legend[category] = color;
+        }
+    });
+    return legend;
+};
+const readCounts = (values) => {
+    if (!Array.isArray(values)) {
+        return [];
+    }
+    return values.filter((value) => typeof value === "number" && Number.isFinite(value) && value >= 0);
+};
+const readClusters = (clusters) => {
+    if (!isRecord(clusters)) {
+        return [];
+    }
+    return Object.values(clusters);
+};
+const readVmTotal = (cluster) => {
+    if (!isRecord(cluster) || !isRecord(cluster.vms)) {
+        return 0;
+    }
+    const total = cluster.vms.total;
+    return typeof total === "number" && Number.isFinite(total) && total >= 0
+        ? total
+        : 0;
+};
+/**
+ * Read `infra.cpuOverCommitment` without assuming either SDK's generated
+ * shape. Missing infra, a non-object infra, or an absent property yield
+ * `undefined` instead of throwing.
+ */
+const readCpuOverCommitment = (cluster) => {
+    if (!isRecord(cluster) || !isRecord(cluster.infra)) {
+        return undefined;
+    }
+    if (!("cpuOverCommitment" in cluster.infra)) {
+        return undefined;
+    }
+    return cluster.infra.cpuOverCommitment;
+};
+const parseCpuOverCommitment = (raw) => {
+    if (typeof raw === "number") {
+        return Number.isFinite(raw) ? raw : Number.NaN;
+    }
+    if (typeof raw !== "string") {
+        return Number.NaN;
+    }
+    const trimmed = raw.trim();
+    if (trimmed === "") {
+        return Number.NaN;
+    }
+    const match = trimmed.match(/^\d+\s*:\s*(\d+(?:\.\d+)?)$/);
+    if (match?.[1] != null) {
+        return Number(match[1]);
+    }
+    const asNum = Number(trimmed);
+    return Number.isFinite(asNum) ? asNum : Number.NaN;
+};
+const formatRatio = (ratio) => {
+    const formatted = ratio % 1 === 0 ? ratio.toFixed(0) : ratio.toFixed(2);
+    return formatted.replace(/(?:\.0+|(\.\d*[1-9]))0+$/, "$1");
+};
+const buildRankedDonut = (counts, options) => {
+    const total = counts.reduce((sum, count) => sum + count, 0);
+    const ranked = counts
+        .map((count, index) => ({ count, index }))
+        .sort((a, b) => b.count - a.count);
+    const top = ranked.slice(0, TOP_CLUSTERS);
+    const restSum = ranked
+        .slice(TOP_CLUSTERS)
+        .reduce((sum, item) => sum + item.count, 0);
+    const slices = top.map((item, index) => {
+        const name = options.sliceName(index + 1);
+        return {
+            name,
+            count: item.count,
+            countDisplay: `${item.count} ${options.countSuffix}`,
+            legendCategory: name,
+        };
+    });
+    if (restSum > 0) {
+        slices.push({
+            name: options.restName,
+            count: restSum,
+            countDisplay: `${restSum} ${options.countSuffix}`,
+            legendCategory: options.restName,
+        });
+    }
+    return {
+        chartData: slices,
+        legend: legendFor(slices.map((slice) => slice.legendCategory)),
+        title: `${total}`,
+        subTitle: options.subTitle,
+    };
+};
+const buildVmByCluster = (clusters) => {
+    const counts = readClusters(clusters).map(readVmTotal);
+    if (counts.length === 0) {
+        return EMPTY_CHART;
+    }
+    return buildRankedDonut(counts, {
+        sliceName: (rank) => `Cluster ${rank}`,
+        countSuffix: "VMs",
+        restName: REST_OF_CLUSTERS_LABEL,
+        subTitle: "VMs",
+    });
+};
+const buildDatacenterDistribution = (clustersPerDatacenter) => {
+    const counts = readCounts(clustersPerDatacenter);
+    if (counts.length === 0) {
+        return EMPTY_CHART;
+    }
+    return buildRankedDonut(counts, {
+        sliceName: (rank) => `Data center ${rank}`,
+        countSuffix: "clusters",
+        restName: REST_OF_DATACENTERS_LABEL,
+        subTitle: "Clusters",
+    });
+};
+const buildCpuOverCommitment = (clusters) => {
+    const ranked = readClusters(clusters)
+        .map((cluster) => parseCpuOverCommitment(readCpuOverCommitment(cluster)))
+        .filter((value) => Number.isFinite(value) && value >= 0)
+        .sort((a, b) => b - a)
+        .slice(0, TOP_CPU_RATIOS);
+    const slices = ranked.map((value, index) => {
+        const legendCategory = `Cluster ${index + 1}`;
+        const display = formatRatio(value);
+        return {
+            name: display,
+            count: value,
+            countDisplay: display,
+            legendCategory,
+        };
+    });
+    return {
+        chartData: slices,
+        legend: legendFor(slices.map((slice) => slice.legendCategory)),
+        title: "",
+        subTitle: "",
+    };
+};
+export const ClustersOverview = ({ clustersPerDatacenter, clusters, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("vmByCluster");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const chart = useMemo(() => {
+        if (viewMode === "cpuOverCommitment") {
+            return buildCpuOverCommitment(clusters);
+        }
+        if (viewMode === "vmByCluster") {
+            return buildVmByCluster(clusters);
+        }
+        return buildDatacenterDistribution(clustersPerDatacenter);
+    }, [viewMode, clustersPerDatacenter, clusters]);
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    const emptyTitle = viewMode === "cpuOverCommitment"
+        ? REPORT_CARD_EMPTY_STATE_TITLES.cpuOvercommitment
+        : REPORT_CARD_EMPTY_STATE_TITLES.clusters;
+    return (_jsx(ChartExportSurface, { id: CHART_ID, title: chartTitle, exportViews: chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS), activeExportViewId: viewMode, onExportViewChange: (viewId) => {
+            if (isViewMode(viewId)) {
+                setViewMode(viewId);
+            }
+        }, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { className: clustersOverviewStyles.titleRow, justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(DatabaseIcon, {}), " ", CHART_TITLE] }), _jsx("div", { className: clustersOverviewStyles.cardSubtitle, children: viewMode === "dataCenterDistribution"
+                                                ? "Top 5 datacenters"
+                                                : "Top 5 clusters" })] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: chartTitle, children: _jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: (_event, value) => {
+                                        if (isViewMode(value)) {
+                                            setViewMode(value);
+                                        }
+                                        setIsDropdownOpen(false);
+                                    }, onOpenChange: setIsDropdownOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen((open) => !open), isExpanded: isDropdownOpen, className: clustersOverviewStyles.menuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "vmByCluster", children: VIEW_MODE_LABELS.vmByCluster }, "vmByCluster"), _jsx(DropdownItem, { value: "cpuOverCommitment", children: VIEW_MODE_LABELS.cpuOverCommitment }, "cpuOverCommitment"), _jsx(DropdownItem, { value: "dataCenterDistribution", children: VIEW_MODE_LABELS.dataCenterDistribution }, "dataCenterDistribution")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: chart.chartData.length === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : viewMode === "cpuOverCommitment" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: clustersOverviewStyles.cpuOvercommitBoxes, children: chart.chartData.map((item) => (_jsx("div", { className: clustersOverviewStyles.cpuOvercommitBox, style: { background: chart.legend[item.legendCategory] }, children: item.countDisplay }, `cpu-box-${item.legendCategory}`))) }), _jsx("div", { className: clustersOverviewStyles.cpuOvercommitLegend, children: chart.chartData.map((item) => (_jsxs("div", { className: clustersOverviewStyles.cpuOvercommitLegendItem, children: [_jsx("span", { className: clustersOverviewStyles.cpuOvercommitLegendSwatch, style: { background: chart.legend[item.legendCategory] } }), _jsxs("span", { className: clustersOverviewStyles.cpuOvercommitLegendText, children: [item.legendCategory, " (", item.countDisplay, ")"] })] }, `cpu-legend-${item.legendCategory}`))) })] })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: chart.chartData, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, legend: chart.legend, title: chart.title, subTitle: chart.subTitle, subTitleColor: "var(--pf-t--global--text--color--subtle)", tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%` })) })] }) }));
+};
+ClustersOverview.displayName = "ClustersOverview";

package/dist/report/ClustersOverviewStyles.d.ts

@@ -0,0 +1,12 @@
+export declare const clustersOverviewStyles: {
+    titleRow: string;
+    cardSubtitle: string;
+    menuToggleMinWidth: string;
+    cpuOvercommitBoxes: string;
+    cpuOvercommitBox: string;
+    cpuOvercommitLegend: string;
+    cpuOvercommitLegendItem: string;
+    cpuOvercommitLegendSwatch: string;
+    cpuOvercommitLegendText: string;
+};
+//# sourceMappingURL=ClustersOverviewStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClustersOverviewStyles.d.ts","sourceRoot":"","sources":["../../src/report/ClustersOverviewStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;;;;;;;;CA2GlC,CAAC"}

package/dist/report/ClustersOverviewStyles.js

@@ -0,0 +1,101 @@
+import { css } from "@emotion/css";
+export const clustersOverviewStyles = {
+    titleRow: css `
+    width: 100%;
+  `,
+    cardSubtitle: css `
+    color: var(--pf-t--global--text--color--subtle);
+    font-size: 0.85rem;
+  `,
+    menuToggleMinWidth: css `
+    min-width: 250px;
+  `,
+    cpuOvercommitBoxes: css `
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    margin: 124px 0 16px;
+    flex-wrap: wrap;
+
+    @media (max-width: 1200px) {
+      margin: 72px 0 12px;
+      gap: 20px;
+    }
+
+    @media (max-width: 768px) {
+      margin: 40px 0 8px;
+      gap: 16px;
+    }
+  `,
+    cpuOvercommitBox: css `
+    color: #000;
+    min-width: 120px;
+    height: 64px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    padding: 0 16px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+    @media (max-width: 768px) {
+      min-width: 96px;
+      height: 56px;
+      font-size: 18px;
+      padding: 0 12px;
+      border-radius: 10px;
+    }
+
+    @media (max-width: 480px) {
+      min-width: 88px;
+      height: 48px;
+      font-size: 16px;
+      border-radius: 8px;
+    }
+  `,
+    cpuOvercommitLegend: css `
+    display: flex;
+    justify-content: center;
+    gap: 6px 24px;
+    flex-wrap: wrap;
+    margin-top: 20%;
+
+    @media (max-width: 1200px) {
+      margin-top: 20%;
+      gap: 6px 20px;
+    }
+
+    @media (max-width: 768px) {
+      margin-top: 20%;
+      gap: 6px 16px;
+    }
+  `,
+    cpuOvercommitLegendItem: css `
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  `,
+    cpuOvercommitLegendSwatch: css `
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+
+    @media (max-width: 768px) {
+      width: 10px;
+      height: 10px;
+    }
+  `,
+    cpuOvercommitLegendText: css `
+    font-size: 16px;
+
+    @media (max-width: 768px) {
+      font-size: 16px;
+    }
+
+    @media (max-width: 480px) {
+      font-size: 14px;
+    }
+  `,
+};

package/dist/report/CpuAndMemoryOverview.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+export interface CpuAndMemoryOverviewProps {
+    cpuTierDistribution?: Record<string, number>;
+    memoryTierDistribution?: Record<string, number>;
+    memoryTotalGB?: number;
+    cpuTotalCores?: number;
+    /**
+     * Memory-tier slice click. The argument is the distribution key.
+     * Agent-ui maps it to a VM memory filter; ui-app omits it.
+     */
+    onTierSelect?: (tierLabel: string) => void;
+    /** Center-title click. Agent-ui opens the VM list with no extra filters. */
+    onTitleClick?: () => void;
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const CpuAndMemoryOverview: FC<CpuAndMemoryOverviewProps>;
+//# sourceMappingURL=CpuAndMemoryOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CpuAndMemoryOverview.d.ts","sourceRoot":"","sources":["../../src/report/CpuAndMemoryOverview.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,yBAAyB;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAuFD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAiJ9D,CAAC"}

package/dist/report/CpuAndMemoryOverview.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { Card, CardBody, CardTitle, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { DataProcessorIcon } from "@patternfly/react-icons";
+import { useMemo, useState } from "react";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    memoryTiers: "VM distribution by memory size tier",
+    vcpuTiers: "VM distribution by vCPU count tier",
+};
+const VIEW_SUBTITLES = {
+    memoryTiers: "Memory size tiers",
+    vcpuTiers: "vCPU count tiers",
+};
+/**
+ * Categorical order shared by the agent-ui and ui-app CPU/memory donuts.
+ */
+const TIER_COLORS = [
+    "#0066cc",
+    "#5e40be",
+    "#b6a6e9",
+    "#73c5c5",
+    "#b98412",
+    "#28a745",
+    "#f0ad4e",
+    "#d9534f",
+    "#009596",
+    "#6a6e73",
+];
+const CHART_ID = "cpu-memory-overview";
+const CHART_TITLE = "CPU & memory";
+const cardSubtitle = css `
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+const menuToggleMinWidth = css `
+  min-width: 290px;
+`;
+const titleRow = css `
+  width: 100%;
+`;
+const isViewMode = (value) => value === "memoryTiers" || value === "vcpuTiers";
+const tierSortKey = (label) => {
+    const value = Number.parseInt(label.trim(), 10);
+    return Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
+};
+const hasUnit = (label, unit) => unit === "GB" ? /gb$/i.test(label) : /cores?$/i.test(label);
+const slicesFromDistribution = (distribution, unit) => Object.entries(distribution ?? {})
+    .filter(([, count]) => Number(count) > 0)
+    .sort(([left], [right]) => tierSortKey(left) - tierSortKey(right))
+    .map(([tier, count]) => {
+    const trimmed = tier.trim();
+    const name = hasUnit(trimmed, unit) ? trimmed : `${trimmed} ${unit}`;
+    const vmCount = Number(count);
+    return {
+        name,
+        count: vmCount,
+        countDisplay: `${vmCount} VMs`,
+        legendCategory: tier,
+    };
+});
+const legendFor = (categories) => {
+    const legend = {};
+    categories.forEach((category, index) => {
+        const color = TIER_COLORS[index % TIER_COLORS.length];
+        if (color) {
+            legend[category] = color;
+        }
+    });
+    return legend;
+};
+export const CpuAndMemoryOverview = ({ cpuTierDistribution, memoryTierDistribution, memoryTotalGB, cpuTotalCores, onTierSelect, onTitleClick, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("memoryTiers");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const memorySlices = useMemo(() => slicesFromDistribution(memoryTierDistribution, "GB"), [memoryTierDistribution]);
+    const vcpuSlices = useMemo(() => slicesFromDistribution(cpuTierDistribution, "cores"), [cpuTierDistribution]);
+    const activeSlices = viewMode === "memoryTiers" ? memorySlices : vcpuSlices;
+    const legend = useMemo(() => legendFor(activeSlices.map((slice) => slice.legendCategory)), [activeSlices]);
+    const totalVMs = useMemo(() => activeSlices.reduce((sum, slice) => sum + slice.count, 0), [activeSlices]);
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    const subTitle = viewMode === "memoryTiers"
+        ? typeof memoryTotalGB === "number"
+            ? `${memoryTotalGB.toLocaleString()} GB`
+            : undefined
+        : typeof cpuTotalCores === "number"
+            ? `${cpuTotalCores.toLocaleString()} Cores`
+            : undefined;
+    const emptyTitle = viewMode === "memoryTiers"
+        ? REPORT_CARD_EMPTY_STATE_TITLES.memory
+        : REPORT_CARD_EMPTY_STATE_TITLES.cpu;
+    return (_jsx(ChartExportSurface, { id: CHART_ID, title: chartTitle, exportViews: chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS), activeExportViewId: viewMode, onExportViewChange: (viewId) => {
+            if (isViewMode(viewId)) {
+                setViewMode(viewId);
+            }
+        }, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { className: titleRow, justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(DataProcessorIcon, {}), " ", CHART_TITLE] }), _jsx("div", { className: cardSubtitle, children: VIEW_SUBTITLES[viewMode] })] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: chartTitle, children: _jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: (_event, value) => {
+                                        if (isViewMode(value)) {
+                                            setViewMode(value);
+                                        }
+                                        setIsDropdownOpen(false);
+                                    }, onOpenChange: setIsDropdownOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen((open) => !open), isExpanded: isDropdownOpen, className: menuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "memoryTiers", children: VIEW_MODE_LABELS.memoryTiers }, "memoryTiers"), _jsx(DropdownItem, { value: "vcpuTiers", children: VIEW_MODE_LABELS.vcpuTiers }, "vcpuTiers")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: activeSlices.length === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: activeSlices, legend: legend, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, title: `${totalVMs} VMs`, subTitle: subTitle, subTitleColor: "var(--pf-t--global--text--color--subtle)", legendLabelFormatter: ({ x, countDisplay }) => `${x} (${countDisplay})`, tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%`, itemsPerRow: legendVariant === "chart"
+                            ? Math.ceil(activeSlices.length / 2)
+                            : undefined, labelFontSize: legendVariant === "chart" ? 18 : undefined, marginLeft: legendVariant === "chart" ? "52%" : undefined, onItemClick: viewMode === "memoryTiers" && onTierSelect
+                            ? (item) => onTierSelect(item.legendCategory)
+                            : undefined, onTitleClick: onTitleClick })) })] }) }));
+};
+CpuAndMemoryOverview.displayName = "CpuAndMemoryOverview";

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

@@ -1 +1 @@
-{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAgCA;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAiPD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,GACnB,OAAO,CAAC,iBAAiB,CAAC,CAkC5B"}
+{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAsCA;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAuQD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,GACnB,OAAO,CAAC,iBAAiB,CAAC,CAoC5B"}

package/dist/report/captureChartElement.js

@@ -1,5 +1,6 @@
+import { t_color_gray_20, t_color_white, t_global_text_color_regular, } from "@patternfly/react-tokens";
 import html2canvas from "html2canvas-pro";
-import { CHART_EXPORT_CAPTURING_ATTR, CHART_EXPORT_SCROLL_ATTR, shouldIgnoreChartExportElement, } from "./chartExport.js";
+import { applyLightThemeToDocument, CHART_EXPORT_CAPTURING_ATTR, CHART_EXPORT_SCROLL_ATTR, shouldIgnoreChartExportElement, } from "./chartExport.js";
 /** CSS-pixel scale; 2x made zip-all of ~15 live cards too slow. */
 const CHART_CAPTURE_SCALE = 1;
 const HIDDEN_LAYOUT_STYLE_KEYS = [
@@ -71,6 +72,10 @@ export function revealHiddenChartAncestors(element) {
 const PADDED_CAPTURE_SELECTOR = ".pf-v6-c-card__title, .pf-v6-c-card__header, .pf-v6-c-card__body";
 const CARD_CAPTURE_SELECTOR = ".pf-v6-c-card";
 const TRANSPARENT_FILLS = new Set(["", "transparent", "rgba(0, 0, 0, 0)"]);
+/** PatternFly light-theme chrome. html2canvas inlines live computed SVG styles. */
+const LIGHT_EXPORT_BACKGROUND = t_color_white.value;
+const LIGHT_EXPORT_BORDER = t_color_gray_20.value;
+const LIGHT_EXPORT_TEXT = t_global_text_color_regular.value;
 function queryCards(root) {
     const cards = Array.from(root.querySelectorAll(CARD_CAPTURE_SELECTOR));
     if (root.matches(CARD_CAPTURE_SELECTOR)) {
@@ -112,16 +117,29 @@ function readCardBorder(source) {
     }
     return { width, style, color };
 }
-function applyCardChrome(source, dest) {
+function applyCardChrome(source, dest, colors) {
     const computed = window.getComputedStyle(source);
     dest.style.borderRadius = computed.borderRadius;
-    dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
     dest.style.overflow = "hidden";
+    dest.style.backgroundColor =
+        colors === "light"
+            ? LIGHT_EXPORT_BACKGROUND
+            : resolvedFill(computed.backgroundColor);
     const border = readCardBorder(source);
     if (border) {
         dest.style.borderWidth = border.width;
         dest.style.borderStyle = border.style;
-        dest.style.borderColor = border.color;
+        dest.style.borderColor =
+            colors === "light" ? LIGHT_EXPORT_BORDER : border.color;
+    }
+}
+function applyLightThemeSvgText(root) {
+    for (const node of root.querySelectorAll("text, tspan")) {
+        if (!(node instanceof SVGElement)) {
+            continue;
+        }
+        node.style.fill = LIGHT_EXPORT_TEXT;
+        node.style.color = LIGHT_EXPORT_TEXT;
     }
 }
 function hideCardBeforePseudo() {
@@ -162,7 +180,7 @@ function copyCardChrome(node) {
         height: node.style.height,
         maxHeight: node.style.maxHeight,
     };
-    applyCardChrome(node, node);
+    applyCardChrome(node, node, "computed");
     node.style.minHeight = "0px";
     node.style.height = "auto";
     node.style.maxHeight = "none";
@@ -174,7 +192,7 @@ function applyComputedStylesToClone(sourceRoot, clonedRoot) {
     sourceCards.forEach((source, index) => {
         const dest = cloneCards[index];
         if (dest) {
-            applyCardChrome(source, dest);
+            applyCardChrome(source, dest, "light");
         }
     });
     const sources = sourceRoot.querySelectorAll(PADDED_CAPTURE_SELECTOR);
@@ -264,14 +282,16 @@ export async function captureChartElement(element) {
         }
         return html2canvas(element, {
             useCORS: true,
-            backgroundColor: null,
+            backgroundColor: LIGHT_EXPORT_BACKGROUND,
             logging: false,
             scale: CHART_CAPTURE_SCALE,
             imageTimeout: 0,
             ignoreElements: (node) => node instanceof Element &&
                 shouldIgnoreChartExportElement(node, element),
-            onclone: (_clonedDoc, clonedElement) => {
+            onclone: (clonedDoc, clonedElement) => {
+                applyLightThemeToDocument(clonedDoc);
                 applyComputedStylesToClone(element, clonedElement);
+                applyLightThemeSvgText(clonedElement);
             },
         });
     }