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

package/dist/report/ReportExportMenu.d.ts

@@ -14,6 +14,7 @@ export interface ExportReportButtonProps extends StandardReportExportHandlers {
     loadingLabel?: string | null;
     isDisabled?: boolean;
     toggleLabel?: string;
+    assessmentSectionLabel?: string;
 }
 export declare const ExportReportButton: FC<ExportReportButtonProps>;
 //# sourceMappingURL=ReportExportMenu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReportExportMenu.d.ts","sourceRoot":"","sources":["../../src/report/ReportExportMenu.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,4BAA4B,EAElC,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8DtD,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,4BAA4B;IAC3E,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkB1D,CAAC"}
+{"version":3,"file":"ReportExportMenu.d.ts","sourceRoot":"","sources":["../../src/report/ReportExportMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,EAAE,EAA+C,MAAM,OAAO,CAAC;AAC7E,OAAO,EACL,KAAK,kBAAkB,EAEvB,KAAK,4BAA4B,EAElC,MAAM,0BAA0B,CAAC;AA6BlC,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAqFtD,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,4BAA4B;IAC3E,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAoB1D,CAAC"}

package/dist/report/ReportExportMenu.js

@@ -1,13 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Dropdown, DropdownItem, DropdownList, MenuToggle, Spinner, } from "@patternfly/react-core";
+import { Divider, Dropdown, DropdownGroup, DropdownItem, DropdownList, MenuToggle, Spinner, } from "@patternfly/react-core";
 import { DownloadIcon } from "@patternfly/react-icons";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { standardReportExportOptions, } from "./reportExportOptions.js";
+function sectionGroupKey(section) {
+    return section?.id;
+}
+function groupExportOptions(options) {
+    const groups = [];
+    for (const option of options) {
+        const sectionKey = sectionGroupKey(option.section);
+        const last = groups.length > 0 ? groups[groups.length - 1] : undefined;
+        const lastKey = last ? sectionGroupKey(last.section) : undefined;
+        if (last && lastKey === sectionKey) {
+            last.options.push(option);
+        }
+        else {
+            groups.push({ section: option.section, options: [option] });
+        }
+    }
+    return groups;
+}
 export const ReportExportMenu = ({ options, isLoading = false, loadingLabel = null, isDisabled = false, toggleLabel = "Export", }) => {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const optionGroups = useMemo(() => groupExportOptions(options), [options]);
     if (options.length === 0) {
         return null;
     }
+    const menuItems = [];
+    optionGroups.forEach((group, index) => {
+        if (index > 0) {
+            const dividerKey = group.section?.id ?? group.options[0]?.key ?? "ungrouped";
+            menuItems.push(_jsx(Divider, { component: "li" }, `divider-before-${dividerKey}`));
+        }
+        const items = group.options.map((option) => (_jsx(DropdownItem, { isDisabled: option.isDisabled, description: option.description, onClick: option.onSelect, children: option.label }, option.key)));
+        if (group.section) {
+            menuItems.push(_jsx(DropdownGroup, { label: group.section.label, children: items }, group.section.id));
+        }
+        else {
+            menuItems.push(...items);
+        }
+    });
     return (_jsx(Dropdown, { isOpen: isDropdownOpen, popperProps: {
             placement: "bottom-end",
             preventOverflow: true,
@@ -17,14 +50,15 @@ export const ReportExportMenu = ({ options, isLoading = false, loadingLabel = nu
             setIsDropdownOpen(isOpen);
         }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => {
                 setIsDropdownOpen((open) => !open);
-            }, isExpanded: isDropdownOpen, variant: "secondary", isDisabled: isLoading || isDisabled, "aria-label": "Export report options", icon: isLoading ? (_jsx(Spinner, { size: "sm", "aria-hidden": "true" })) : (_jsx(DownloadIcon, { "aria-hidden": "true" })), children: isLoading ? (loadingLabel ?? "Generating...") : toggleLabel })), children: _jsx(DropdownList, { children: options.map((option) => (_jsx(DropdownItem, { isDisabled: option.isDisabled, description: option.description, onClick: option.onSelect, children: option.label }, option.key))) }) }));
+            }, isExpanded: isDropdownOpen, variant: "secondary", isDisabled: isLoading || isDisabled, "aria-label": "Export report options", icon: isLoading ? (_jsx(Spinner, { size: "sm", "aria-hidden": "true" })) : (_jsx(DownloadIcon, { "aria-hidden": "true" })), children: isLoading ? (loadingLabel ?? "Generating...") : toggleLabel })), children: _jsx(DropdownList, { children: menuItems }) }));
 };
 ReportExportMenu.displayName = "ReportExportMenu";
-export const ExportReportButton = ({ onExportPdf, onExportPng, onExportHtml, extraOptions = [], ...menuProps }) => (_jsx(ReportExportMenu, { options: [
+export const ExportReportButton = ({ onExportPdf, onExportPng, onExportHtml, extraOptions = [], assessmentSectionLabel, ...menuProps }) => (_jsx(ReportExportMenu, { options: [
         ...standardReportExportOptions({
             onExportPdf,
             onExportPng,
             onExportHtml,
+            assessmentSectionLabel,
         }),
         ...extraOptions,
     ], ...menuProps }));

package/dist/report/StorageOverview.d.ts

@@ -0,0 +1,27 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+export interface StorageDiskTierData {
+    vmCount?: number;
+    totalSizeTB?: number;
+}
+export interface StorageOverviewProps {
+    diskSizeTier?: Record<string, StorageDiskTierData>;
+    diskTypes?: Record<string, StorageDiskTierData>;
+    totalVMs?: number;
+    totalWithSharedDisks?: number;
+    /**
+     * Disk-tier slice / center-title click. The argument is the tier's parsed
+     * disk-size range (in MB). Agent-ui maps it to a VM disk filter; ui-app omits
+     * it. Called with `undefined` for the center-title click (no tier filter).
+     */
+    onDiskTierSelect?: (diskRange: {
+        min: number;
+        max?: number;
+    }) => 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 StorageOverview: FC<StorageOverviewProps>;
+//# sourceMappingURL=StorageOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageOverview.d.ts","sourceRoot":"","sources":["../../src/report/StorageOverview.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AA0TD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA6PpD,CAAC"}

package/dist/report/StorageOverview.js

@@ -0,0 +1,319 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, CardBody, CardTitle, Content, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { DatabaseIcon } from "@patternfly/react-icons";
+import { chart_color_blue_300, chart_color_green_300, chart_color_orange_200, chart_color_purple_100, chart_color_purple_300, chart_color_red_orange_300, chart_color_teal_200, chart_color_teal_300, 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 { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    totalSize: "Total disk size by tier",
+    vmCount: "VM count by disk size tier",
+    vmCountByDiskType: "VM count by disk type",
+    sharedDisks: "Shared disks VS. No shared disks",
+};
+const CHART_ID = "storage-overview";
+const CHART_TITLE = "Storage";
+const TIER_CONFIG = {
+    Easy: { order: 0, label: "0-10 TB", legendCategory: "Easy" },
+    Medium: { order: 1, label: "11-20 TB", legendCategory: "Medium" },
+    Hard: { order: 2, label: "21-50 TB", legendCategory: "Hard" },
+    White: { order: 3, label: "> 50 TB", legendCategory: "White glove" },
+};
+/**
+ * Categorical order shared by the agent-ui and ui-app storage donuts, mapped
+ * onto PatternFly `chart_color_*` tokens.
+ */
+const COLOR_PALETTE = [
+    chart_color_blue_300.value,
+    chart_color_purple_300.value,
+    chart_color_purple_100.value,
+    chart_color_teal_300.value,
+    chart_color_yellow_400.value,
+    chart_color_green_300.value,
+    chart_color_orange_200.value,
+    chart_color_red_orange_300.value,
+];
+const DISK_TYPE_BAR_COLORS = [
+    chart_color_blue_300.value,
+    chart_color_purple_300.value,
+    chart_color_purple_100.value,
+    chart_color_yellow_400.value,
+    chart_color_teal_200.value,
+];
+const SHARED_DISKS_COLORS = {
+    "With shared disks": chart_color_yellow_400.value,
+    "No shared disks": chart_color_blue_300.value,
+};
+const DISK_TYPE_PREFERRED_ORDER = ["VMFS", "NFS", "vSAN", "RDM", "vVols"];
+// --- Disk-tier label parsing (self-contained copy so the shared card does not
+// depend on agent-ui internals). Used for both tier ordering and drill-down. ---
+const MB_IN_GIB = 1024;
+const MB_IN_TIB = 1024 * 1024;
+const diskSizeRanges = [
+    { label: "0-100GiB", min: 0, max: 100 * MB_IN_GIB },
+    { label: "100-500GiB", min: 100 * MB_IN_GIB, max: 500 * MB_IN_GIB },
+    { label: "500GiB-1TiB", min: 500 * MB_IN_GIB, max: MB_IN_TIB },
+    { label: "1-2TiB", min: MB_IN_TIB, max: 2 * MB_IN_TIB },
+    { label: "2-5TiB", min: 2 * MB_IN_TIB, max: 5 * MB_IN_TIB },
+];
+const legacyDiskSizeRanges = [
+    { label: "0-10 TB", min: 0, max: 10 * MB_IN_TIB },
+    { label: "11-20 TB", min: 10 * MB_IN_TIB + 1, max: 20 * MB_IN_TIB },
+    { label: "21-50 TB", min: 20 * MB_IN_TIB + 1, max: 50 * MB_IN_TIB },
+    { label: "50+ TB", min: 50 * MB_IN_TIB + 1, max: undefined },
+];
+const sizeValueToMB = (value, unit) => {
+    const amount = Number.parseFloat(value);
+    if (!Number.isFinite(amount)) {
+        return Number.NaN;
+    }
+    switch (unit.toLowerCase()) {
+        case "gib":
+        case "gb":
+            return amount * MB_IN_GIB;
+        case "tib":
+        case "tb":
+            return amount * MB_IN_TIB;
+        case "mib":
+        case "mb":
+            return amount;
+        default:
+            return Number.NaN;
+    }
+};
+/** Parses inventory disk tier labels (GiB/TiB or legacy TB buckets) into MB ranges. */
+const parseDiskTierLabelToRange = (label) => {
+    const normalized = label.trim();
+    if (!normalized) {
+        return undefined;
+    }
+    const predefined = diskSizeRanges.find((range) => range.label === normalized) ??
+        legacyDiskSizeRanges.find((range) => range.label === normalized ||
+            (normalized === "> 50 TB" && range.label === "50+ TB"));
+    if (predefined) {
+        return { min: predefined.min, max: predefined.max };
+    }
+    const mixedUnitRange = /^(\d+(?:\.\d+)?)\s*(GiB|TiB|GB|TB|MIB|MB)\s*-\s*(\d+(?:\.\d+)?)\s*(GiB|TiB|GB|TB|MIB|MB)$/i.exec(normalized);
+    if (mixedUnitRange) {
+        const min = sizeValueToMB(mixedUnitRange[1], mixedUnitRange[2]);
+        const max = sizeValueToMB(mixedUnitRange[3], mixedUnitRange[4]);
+        if (Number.isFinite(min) && Number.isFinite(max)) {
+            return { min: Math.floor(min), max: Math.floor(max) };
+        }
+    }
+    const singleUnitRange = /^(\d+(?:\.\d+)?)\s*-\s*(\d+(?:\.\d+)?)\s*(GiB|TiB|GB|TB|MIB|MB)$/i.exec(normalized);
+    if (singleUnitRange) {
+        const min = sizeValueToMB(singleUnitRange[1], singleUnitRange[3]);
+        const max = sizeValueToMB(singleUnitRange[2], singleUnitRange[3]);
+        if (Number.isFinite(min) && Number.isFinite(max)) {
+            return { min: Math.floor(min), max: Math.floor(max) };
+        }
+    }
+    const openEndedRange = /^(\d+(?:\.\d+)?)\s*(GiB|TiB|GB|TB|MIB|MB)?\s*\+$/i.exec(normalized);
+    if (openEndedRange) {
+        const unit = openEndedRange[2] || "TB";
+        const min = sizeValueToMB(openEndedRange[1], unit);
+        if (Number.isFinite(min)) {
+            const minMB = Math.floor(min);
+            return { min: minMB > 0 ? minMB + 1 : minMB, max: undefined };
+        }
+    }
+    return undefined;
+};
+const buildTierChartData = (summary, selector) => {
+    if (!summary) {
+        return [];
+    }
+    const getTierPrefix = (key) => {
+        const normalizedKey = key.trim().toLowerCase();
+        for (const prefix of Object.keys(TIER_CONFIG)) {
+            if (normalizedKey.startsWith(prefix.toLowerCase())) {
+                return prefix;
+            }
+        }
+        return null;
+    };
+    return Object.entries(summary)
+        .map(([key, tier]) => {
+        const prefix = getTierPrefix(key);
+        const display = prefix
+            ? TIER_CONFIG[prefix]
+            : { label: key, legendCategory: key };
+        const { count, countDisplay } = selector(tier);
+        const label = display.label;
+        return {
+            name: label,
+            count,
+            countDisplay,
+            legendCategory: display.legendCategory,
+            diskRange: parseDiskTierLabelToRange(key) ?? parseDiskTierLabelToRange(label),
+            sortOrder: parseDiskTierLabelToRange(key)?.min ??
+                parseDiskTierLabelToRange(label)?.min ??
+                (prefix ? TIER_CONFIG[prefix].order : 999),
+        };
+    })
+        .sort((a, b) => a.sortOrder - b.sortOrder)
+        .map(({ sortOrder: _sortOrder, ...datum }) => datum);
+};
+const getContrastColor = (hexColor) => {
+    const hex = hexColor.replace("#", "");
+    const r = Number.parseInt(hex.substring(0, 2), 16);
+    const g = Number.parseInt(hex.substring(2, 4), 16);
+    const b = Number.parseInt(hex.substring(4, 6), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? "#000" : "#fff";
+};
+const DiskTypeBarChart = ({ data, colors }) => {
+    const maxCount = useMemo(() => (data.length > 0 ? Math.max(...data.map((d) => d.count)) : 0), [data]);
+    if (data.length === 0) {
+        return _jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.diskTypes });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: dashboardStyles.storageChartWrapper, children: _jsx(Flex, { direction: { default: "row" }, alignItems: { default: "alignItemsFlexEnd" }, justifyContent: { default: "justifyContentCenter" }, spaceItems: { default: "spaceItemsMd" }, style: { height: "250px", width: "100%" }, children: data.map((item, index) => {
+                        const heightPercentage = maxCount > 0 ? (item.count / maxCount) * 100 : 0;
+                        const minHeight = item.count > 0 ? 10 : 0;
+                        const barColor = colors[index % colors.length];
+                        const textColor = getContrastColor(barColor);
+                        return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, style: { flex: "1", maxWidth: "120px" }, children: [_jsx(FlexItem, { style: {
+                                        height: "200px",
+                                        display: "flex",
+                                        alignItems: "flex-end",
+                                        width: "100%",
+                                        justifyContent: "center",
+                                    }, children: _jsx("div", { style: {
+                                            width: "40px",
+                                            height: `${Math.max(heightPercentage, minHeight)}%`,
+                                            backgroundColor: barColor,
+                                            transition: "height 0.3s ease",
+                                            borderRadius: "4px 4px 0 0",
+                                            display: "flex",
+                                            alignItems: "flex-start",
+                                            justifyContent: "center",
+                                            paddingTop: "4px",
+                                        }, title: `${item.name}: ${item.count} VMs`, children: _jsx(Content, { component: "small", style: {
+                                                color: textColor,
+                                                fontWeight: "bold",
+                                                fontSize: "10px",
+                                            }, children: item.count }) }) }), _jsx(FlexItem, { children: _jsx(Content, { component: "small", style: {
+                                            fontSize: "12px",
+                                            textAlign: "center",
+                                            wordBreak: "break-word",
+                                        }, children: item.name }) })] }, item.name));
+                    }) }) }), _jsx(Content, { component: "small", className: dashboardStyles.storageTotalsNote, children: "Totals may exceed the unique VM count because individual VMs can have multiple disk types" })] }));
+};
+const isViewMode = (value) => value === "totalSize" ||
+    value === "vmCount" ||
+    value === "vmCountByDiskType" ||
+    value === "sharedDisks";
+export const StorageOverview = ({ diskSizeTier = {}, diskTypes = {}, totalVMs, totalWithSharedDisks, onDiskTierSelect, onTitleClick, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("vmCount");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const totals = useMemo(() => Object.values(diskSizeTier).reduce((acc, tier) => ({
+        totalSize: acc.totalSize + (tier?.totalSizeTB || 0),
+        totalVMs: acc.totalVMs + (tier?.vmCount || 0),
+    }), { totalSize: 0, totalVMs: 0 }), [diskSizeTier]);
+    const chartData = useMemo(() => buildTierChartData(diskSizeTier, (tier) => {
+        const count = viewMode === "totalSize"
+            ? tier?.totalSizeTB || 0
+            : tier?.vmCount || 0;
+        return {
+            count,
+            countDisplay: viewMode === "totalSize" ? `${count.toFixed(2)}` : `${count}`,
+        };
+    }), [diskSizeTier, viewMode]);
+    const diskTypeChartData = useMemo(() => {
+        if (Object.keys(diskTypes).length === 0) {
+            return [];
+        }
+        const orderIndex = (name) => {
+            const idx = DISK_TYPE_PREFERRED_ORDER.indexOf(name);
+            return idx === -1 ? Number.MAX_SAFE_INTEGER : idx;
+        };
+        return Object.entries(diskTypes)
+            .map(([diskTypeName, summary]) => ({
+            name: diskTypeName,
+            count: summary?.vmCount || 0,
+        }))
+            .sort((a, b) => orderIndex(a.name) - orderIndex(b.name));
+    }, [diskTypes]);
+    const sharedDisksChartData = useMemo(() => {
+        if (totalWithSharedDisks === undefined ||
+            totalVMs === undefined ||
+            totalWithSharedDisks === 0) {
+            return null;
+        }
+        const withSharedDisks = Math.min(totalWithSharedDisks, totalVMs);
+        const withoutSharedDisks = Math.max(0, totalVMs - withSharedDisks);
+        return [
+            {
+                name: "With shared disks",
+                count: withSharedDisks,
+                countDisplay: `${withSharedDisks}`,
+                legendCategory: "With shared disks",
+            },
+            {
+                name: "No shared disks",
+                count: withoutSharedDisks,
+                countDisplay: `${withoutSharedDisks}`,
+                legendCategory: "No shared disks",
+            },
+        ];
+    }, [totalVMs, totalWithSharedDisks]);
+    const tierLegend = useMemo(() => {
+        const legendMap = {};
+        chartData.forEach((slice, idx) => {
+            const color = COLOR_PALETTE[idx % COLOR_PALETTE.length];
+            if (color) {
+                legendMap[slice.legendCategory] = color;
+            }
+        });
+        return legendMap;
+    }, [chartData]);
+    const commonDonutProps = {
+        height: 300,
+        width: 420,
+        donutThickness: 18,
+        titleFontSize: 34,
+        subTitleColor: "var(--pf-t--global--text--color--subtle)",
+        legendVariant,
+    };
+    const handleDiskTierClick = (item) => {
+        const diskRange = item.diskRange ??
+            parseDiskTierLabelToRange(item.name) ??
+            parseDiskTierLabelToRange(item.legendCategory);
+        if (diskRange) {
+            onDiskTierSelect?.(diskRange);
+        }
+    };
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    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} ${dashboardStyles.storageCardOverflowHidden}`, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, className: dashboardStyles.storageFlexFullWidth, children: [_jsxs(FlexItem, { children: [_jsx(DatabaseIcon, {}), " Disks"] }), _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: dashboardStyles.storageMenuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "vmCount", children: VIEW_MODE_LABELS.vmCount }, "vmCount"), _jsx(DropdownItem, { value: "vmCountByDiskType", children: VIEW_MODE_LABELS.vmCountByDiskType }, "vmCountByDiskType"), _jsx(DropdownItem, { value: "totalSize", children: VIEW_MODE_LABELS.totalSize }, "totalSize"), _jsx(DropdownItem, { value: "sharedDisks", isDisabled: totalWithSharedDisks !== undefined &&
+                                                    totalWithSharedDisks === 0, children: VIEW_MODE_LABELS.sharedDisks }, "sharedDisks")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: viewMode === "vmCountByDiskType" ? (_jsx(DiskTypeBarChart, { data: diskTypeChartData, colors: DISK_TYPE_BAR_COLORS })) : viewMode === "sharedDisks" ? (sharedDisksChartData && totalVMs !== undefined ? (_jsx(MigrationDonutChart, { ...commonDonutProps, data: sharedDisksChartData.map((item) => ({
+                            ...item,
+                            countDisplay: `${item.countDisplay} VMs`,
+                        })), customColors: SHARED_DISKS_COLORS, title: `${totalVMs} VMs`, subTitle: `${totalWithSharedDisks ?? 0} with shared disks`, marginLeft: "25%", tooltipLabelFormatter: ({ datum, percent }) => `${datum.x}: ${datum.countDisplay}\n${percent.toFixed(1)}%` })) : (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.storage }))) : chartData.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.storage })) : (_jsx(MigrationDonutChart, { ...commonDonutProps, data: chartData.map((item) => ({
+                            ...item,
+                            countDisplay: viewMode === "totalSize"
+                                ? `${item.countDisplay} TB`
+                                : `${item.countDisplay} VMs`,
+                        })), legend: tierLegend, title: viewMode === "totalSize"
+                            ? `${totals.totalSize.toFixed(2)} TB`
+                            : `${totals.totalVMs} VMs`, subTitle: viewMode === "totalSize"
+                            ? `${totals.totalVMs} VMs`
+                            : `${totals.totalSize.toFixed(2)} TB`, legendLabelFormatter: ({ x, countDisplay }) => `${x} (${countDisplay})`, tooltipLabelFormatter: ({ datum, percent }) => `${datum.x}: ${datum.countDisplay}\n${percent.toFixed(1)}%`, onItemClick: viewMode === "vmCount" || viewMode === "totalSize"
+                            ? handleDiskTierClick
+                            : undefined, onTitleClick: onTitleClick })) })] }) }));
+};
+StorageOverview.displayName = "StorageOverview";

package/dist/report/VMMigrationStatus.d.ts

@@ -0,0 +1,33 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+/**
+ * VM-issue counts this card reads. agent-sdk's `IssuesBreakdown` satisfies it;
+ * each field stays optional so older or partial payloads do not throw.
+ */
+export interface IssuesBreakdownLike {
+    critical?: number;
+    error?: number;
+    warning?: number;
+    information?: number;
+    advisory?: number;
+}
+export interface VMMigrationStatusProps {
+    data: {
+        migratable: number;
+        nonMigratable: number;
+    };
+    issuesBreakdown?: IssuesBreakdownLike;
+    /**
+     * Donut-slice click. `true` for the migratable slice, `false` otherwise.
+     * Agent-ui maps it to a VM migration-readiness filter; ui-app omits it.
+     */
+    onReadinessSelect?: (isMigratable: boolean) => void;
+    /** Breakdown-bar click. The argument is the concern category label. */
+    onCategorySelect?: (category: 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 VMMigrationStatus: FC<VMMigrationStatusProps>;
+//# sourceMappingURL=VMMigrationStatus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VMMigrationStatus.d.ts","sourceRoot":"","sources":["../../src/report/VMMigrationStatus.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAY1C;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC;QACnB,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AA+CD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAgPxD,CAAC"}

package/dist/report/VMMigrationStatus.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { Card, CardBody, CardTitle, Content, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { VirtualMachineIcon } from "@patternfly/react-icons";
+import { chart_color_blue_300, chart_color_purple_100, chart_color_purple_300, chart_color_teal_200, 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 { chartExportViewsFromLabels } from "./chartExport.js";
+import { chartColorFailure, chartColorSuccess, REPORT_CARD_EMPTY_STATE_TITLES, } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    issuesVsNoIssues: "No issues vs with issues",
+    issuesBreakdown: "With issues breakdown",
+};
+const CHART_ID = "vm-migration-status";
+const CHART_TITLE = "VM migration status";
+const MIGRATABLE_LABEL = "Migratable";
+const NOT_MIGRATABLE_LABEL = "Not ready for migration";
+const CATEGORY_ORDER = [
+    { label: "Critical", key: "critical" },
+    { label: "Error", key: "error" },
+    { label: "Warning", key: "warning" },
+    { label: "Information", key: "information" },
+    { label: "Advisory", key: "advisory" },
+];
+/**
+ * Same categorical order as the previous breakdown hex palette, mapped onto
+ * PatternFly `chart_color_*` tokens (nearest token where the old hex was not
+ * itself a token).
+ */
+const CATEGORY_COLORS = {
+    Critical: chart_color_blue_300.value,
+    Error: chart_color_purple_300.value,
+    Warning: chart_color_purple_100.value,
+    Information: chart_color_teal_200.value,
+    Advisory: chart_color_yellow_400.value,
+};
+const menuToggleMinWidth = css `
+  min-width: 250px;
+`;
+const isViewMode = (value) => value === "issuesVsNoIssues" || value === "issuesBreakdown";
+const toCount = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : 0;
+export const VMMigrationStatus = ({ data, issuesBreakdown, onReadinessSelect, onCategorySelect, onTitleClick, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("issuesVsNoIssues");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const totalVMs = data.migratable + data.nonMigratable;
+    const donutData = [
+        {
+            name: MIGRATABLE_LABEL,
+            count: data.migratable,
+            countDisplay: `${data.migratable} VMs`,
+            legendCategory: MIGRATABLE_LABEL,
+        },
+        {
+            name: NOT_MIGRATABLE_LABEL,
+            count: data.nonMigratable,
+            countDisplay: `${data.nonMigratable} VMs`,
+            legendCategory: NOT_MIGRATABLE_LABEL,
+        },
+    ];
+    const legend = {
+        [MIGRATABLE_LABEL]: chartColorSuccess,
+        [NOT_MIGRATABLE_LABEL]: chartColorFailure,
+    };
+    const breakdownData = useMemo(() => {
+        if (!issuesBreakdown) {
+            return [];
+        }
+        return CATEGORY_ORDER.map(({ label, key }) => ({
+            name: label,
+            count: toCount(issuesBreakdown[key]),
+        }));
+    }, [issuesBreakdown]);
+    const maxCount = useMemo(() => breakdownData.length > 0
+        ? Math.max(...breakdownData.map((d) => d.count))
+        : 0, [breakdownData]);
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    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, { alignItems: { default: "alignItemsCenter" }, justifyContent: { default: "justifyContentSpaceBetween" }, children: [_jsxs(FlexItem, { children: [_jsx(VirtualMachineIcon, {}), " VM Migration Status"] }), _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: "issuesVsNoIssues", children: VIEW_MODE_LABELS.issuesVsNoIssues }, "issuesVsNoIssues"), _jsx(DropdownItem, { value: "issuesBreakdown", children: VIEW_MODE_LABELS.issuesBreakdown }, "issuesBreakdown")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: viewMode === "issuesVsNoIssues" ? (totalVMs === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.migrationStatus })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: donutData, legend: legend, height: 300, width: 420, donutThickness: 18, padAngle: 1, title: `${totalVMs}`, subTitle: "VMs", subTitleColor: "var(--pf-t--global--text--color--subtle)", titleFontSize: 34, legendLabelFormatter: ({ x, countDisplay }) => `${x} (${countDisplay})`, onItemClick: onReadinessSelect
+                            ? (item) => onReadinessSelect(item.name === MIGRATABLE_LABEL)
+                            : undefined, onTitleClick: onTitleClick }))) : breakdownData.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.issuesBreakdown })) : (_jsxs("div", { children: [_jsx("div", { className: dashboardStyles.storageChartWrapper, children: _jsx(Flex, { direction: { default: "row" }, alignItems: { default: "alignItemsFlexEnd" }, justifyContent: { default: "justifyContentCenter" }, spaceItems: { default: "spaceItemsMd" }, style: {
+                                        height: "250px",
+                                        width: "100%",
+                                    }, children: breakdownData.map((item) => {
+                                        const heightPercentage = maxCount > 0 ? (item.count / maxCount) * 100 : 0;
+                                        const minHeightPercentage = item.count > 0 ? 20 : 0;
+                                        const finalHeightPercentage = Math.max(heightPercentage, minHeightPercentage);
+                                        const barColor = CATEGORY_COLORS[item.name] || CATEGORY_COLORS.Critical;
+                                        return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, style: { flex: "1", maxWidth: "120px" }, children: [_jsx(FlexItem, { style: {
+                                                        height: "200px",
+                                                        display: "flex",
+                                                        alignItems: "flex-end",
+                                                        width: "100%",
+                                                        justifyContent: "center",
+                                                    }, children: _jsx("button", { type: "button", onClick: () => onCategorySelect?.(item.name), title: `${item.name}: ${item.count} VMs`, style: {
+                                                            width: "60px",
+                                                            height: `${finalHeightPercentage}%`,
+                                                            backgroundColor: barColor,
+                                                            transition: "height 0.3s ease",
+                                                            borderRadius: "4px 4px 0 0",
+                                                            cursor: "pointer",
+                                                            border: "none",
+                                                            padding: 0,
+                                                        } }) }), _jsx(FlexItem, { children: _jsxs(Content, { component: "small", style: {
+                                                            fontSize: "12px",
+                                                            textAlign: "center",
+                                                            wordBreak: "break-word",
+                                                            color: "var(--pf-t--global--text--color--regular)",
+                                                        }, children: [item.name, _jsx("br", {}), "(", item.count, " VMs)"] }) })] }, item.name));
+                                    }) }) }), _jsx("div", { children: _jsx(Content, { component: "small", style: {
+                                        fontSize: "12px",
+                                        color: "var(--pf-t--global--text--color--subtle)",
+                                        marginTop: "16px",
+                                        textAlign: "center",
+                                        display: "block",
+                                    }, children: "Totals may exceed the unique VM count because a VM can appear in multiple categories" }) })] })) })] }) }));
+};
+VMMigrationStatus.displayName = "VMMigrationStatus";

package/dist/report/captureChartElement.d.ts

@@ -1,8 +1,13 @@
+export declare const CHART_CAPTURE_SCALE_SINGLE = 2;
+export type CaptureChartElementOptions = {
+    /** Higher scale sharpens text in PNG exports; keep at 1 for bulk PDF/zip. */
+    scale?: number;
+};
 /**
  * Tab panels stay mounted with `hidden` / `display:none` when another tab is
  * active. html2canvas then measures a 0×0 box. Reveal those ancestors off-screen
  * for the duration of the capture, then restore.
  */
 export declare function revealHiddenChartAncestors(element: HTMLElement): () => void;
-export declare function captureChartElement(element: HTMLElement): Promise<HTMLCanvasElement>;
+export declare function captureChartElement(element: HTMLElement, options?: CaptureChartElementOptions): Promise<HTMLCanvasElement>;
 //# sourceMappingURL=captureChartElement.d.ts.map

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":"AAeA,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAG5C,MAAM,MAAM,0BAA0B,GAAG;IACvC,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwBF;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAwQD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,0BAA+B,GACvC,OAAO,CAAC,iBAAiB,CAAC,CA0C5B"}