@openshift-migration-advisor/shared-components 0.28.0-16fc442157c1 → 0.28.0-9da6a7613f16

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/index.d.ts

@@ -36,6 +36,7 @@ export { buildHostPowerStateChart, buildVmPowerStateChart, HOST_POWER_COLORS, VM
 export { ExportReportButton, type ExportReportButtonProps, ReportExportMenu, type ReportExportMenuProps, } from "./ReportExportMenu.js";
 export { ReportTable, type ReportTableProps } from "./ReportTable.js";
 export { type ReportExportOption, type StandardReportExportHandlers, standardReportExportOptions, } from "./reportExportOptions.js";
+export { type StorageDiskTierData, StorageOverview, type StorageOverviewProps, } from "./StorageOverview.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export { ALL_TIERS_FILTER, type OsBarChartViewModel, type OsTableRow, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
 export { VCenterClusterDetails, type VCenterClusterDetailsProps, } from "./VCenterClusterDetails.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":"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"}

package/dist/report/index.js

@@ -33,6 +33,7 @@ export { buildHostPowerStateChart, buildVmPowerStateChart, HOST_POWER_COLORS, VM
 export { ExportReportButton, ReportExportMenu, } from "./ReportExportMenu.js";
 export { ReportTable } from "./ReportTable.js";
 export { standardReportExportOptions, } from "./reportExportOptions.js";
+export { StorageOverview, } from "./StorageOverview.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export { ALL_TIERS_FILTER, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
 export { VCenterClusterDetails, } from "./VCenterClusterDetails.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.28.0-16fc442157c1",
+  "version": "0.28.0-9da6a7613f16",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",

package/src/report/StorageOverview.tsx

@@ -0,0 +1,629 @@
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Content,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  type MenuToggleElement,
+} 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 type { FC, Ref } from "react";
+import { useMemo, useState } from "react";
+import {
+  MigrationDonutChart,
+  type MigrationDonutChartDatum,
+  type MigrationDonutChartLegendVariant,
+} 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";
+
+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;
+}
+
+type ViewMode = "totalSize" | "vmCount" | "vmCountByDiskType" | "sharedDisks";
+
+const VIEW_MODE_LABELS: Record<ViewMode, string> = {
+  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: Record<
+  string,
+  { order: number; label: string; legendCategory: string }
+> = {
+  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: Record<string, string> = {
+  "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: string, unit: string): number => {
+  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: string,
+): { min: number; max?: number } | undefined => {
+  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: Record<string, StorageDiskTierData> | undefined,
+  selector: (tier: StorageDiskTierData) => {
+    count: number;
+    countDisplay: string;
+  },
+): MigrationDonutChartDatum[] => {
+  if (!summary) {
+    return [];
+  }
+
+  const getTierPrefix = (key: string): string | null => {
+    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: string): string => {
+  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";
+};
+
+interface DiskTypeBarChartProps {
+  data: Array<{ name: string; count: number }>;
+  colors: string[];
+}
+
+const DiskTypeBarChart: FC<DiskTypeBarChartProps> = ({ data, colors }) => {
+  const maxCount = useMemo(
+    () => (data.length > 0 ? Math.max(...data.map((d) => d.count)) : 0),
+    [data],
+  );
+
+  if (data.length === 0) {
+    return <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.diskTypes} />;
+  }
+
+  return (
+    <>
+      <div className={dashboardStyles.storageChartWrapper}>
+        <Flex
+          direction={{ default: "row" }}
+          alignItems={{ default: "alignItemsFlexEnd" }}
+          justifyContent={{ default: "justifyContentCenter" }}
+          spaceItems={{ default: "spaceItemsMd" }}
+          style={{ height: "250px", width: "100%" }}
+        >
+          {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 (
+              <Flex
+                key={item.name}
+                direction={{ default: "column" }}
+                alignItems={{ default: "alignItemsCenter" }}
+                spaceItems={{ default: "spaceItemsSm" }}
+                style={{ flex: "1", maxWidth: "120px" }}
+              >
+                <FlexItem
+                  style={{
+                    height: "200px",
+                    display: "flex",
+                    alignItems: "flex-end",
+                    width: "100%",
+                    justifyContent: "center",
+                  }}
+                >
+                  <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`}
+                  >
+                    <Content
+                      component="small"
+                      style={{
+                        color: textColor,
+                        fontWeight: "bold",
+                        fontSize: "10px",
+                      }}
+                    >
+                      {item.count}
+                    </Content>
+                  </div>
+                </FlexItem>
+                <FlexItem>
+                  <Content
+                    component="small"
+                    style={{
+                      fontSize: "12px",
+                      textAlign: "center",
+                      wordBreak: "break-word",
+                    }}
+                  >
+                    {item.name}
+                  </Content>
+                </FlexItem>
+              </Flex>
+            );
+          })}
+        </Flex>
+      </div>
+      <Content component="small" className={dashboardStyles.storageTotalsNote}>
+        Totals may exceed the unique VM count because individual VMs can have
+        multiple disk types
+      </Content>
+    </>
+  );
+};
+
+const isViewMode = (value: string | number | undefined): value is ViewMode =>
+  value === "totalSize" ||
+  value === "vmCount" ||
+  value === "vmCountByDiskType" ||
+  value === "sharedDisks";
+
+export const StorageOverview: FC<StorageOverviewProps> = ({
+  diskSizeTier = {},
+  diskTypes = {},
+  totalVMs,
+  totalWithSharedDisks,
+  onDiskTierSelect,
+  onTitleClick,
+  legendVariant = "html",
+}) => {
+  const [viewMode, setViewMode] = useState<ViewMode>("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: string): number => {
+      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: Record<string, string> = {};
+    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: MigrationDonutChartDatum): void => {
+    const diskRange =
+      item.diskRange ??
+      parseDiskTierLabelToRange(item.name) ??
+      parseDiskTierLabelToRange(item.legendCategory);
+    if (diskRange) {
+      onDiskTierSelect?.(diskRange);
+    }
+  };
+
+  const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+
+  return (
+    <ChartExportSurface
+      id={CHART_ID}
+      title={chartTitle}
+      exportViews={chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS)}
+      activeExportViewId={viewMode}
+      onExportViewChange={(viewId) => {
+        if (isViewMode(viewId)) {
+          setViewMode(viewId);
+        }
+      }}
+    >
+      <Card
+        className={`${dashboardStyles.card} ${dashboardStyles.storageCardOverflowHidden}`}
+      >
+        <CardTitle>
+          <Flex
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+            className={dashboardStyles.storageFlexFullWidth}
+          >
+            <FlexItem>
+              <DatabaseIcon /> Disks
+            </FlexItem>
+            <ChartHeaderActions chartId={CHART_ID} title={chartTitle}>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={(_event, value) => {
+                  if (isViewMode(value)) {
+                    setViewMode(value);
+                  }
+                  setIsDropdownOpen(false);
+                }}
+                onOpenChange={setIsDropdownOpen}
+                toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => setIsDropdownOpen((open) => !open)}
+                    isExpanded={isDropdownOpen}
+                    className={dashboardStyles.storageMenuToggleMinWidth}
+                  >
+                    {VIEW_MODE_LABELS[viewMode]}
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>
+                  <DropdownItem key="vmCount" value="vmCount">
+                    {VIEW_MODE_LABELS.vmCount}
+                  </DropdownItem>
+                  <DropdownItem
+                    key="vmCountByDiskType"
+                    value="vmCountByDiskType"
+                  >
+                    {VIEW_MODE_LABELS.vmCountByDiskType}
+                  </DropdownItem>
+                  <DropdownItem key="totalSize" value="totalSize">
+                    {VIEW_MODE_LABELS.totalSize}
+                  </DropdownItem>
+                  <DropdownItem
+                    key="sharedDisks"
+                    value="sharedDisks"
+                    isDisabled={
+                      totalWithSharedDisks !== undefined &&
+                      totalWithSharedDisks === 0
+                    }
+                  >
+                    {VIEW_MODE_LABELS.sharedDisks}
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            </ChartHeaderActions>
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {viewMode === "vmCountByDiskType" ? (
+            <DiskTypeBarChart
+              data={diskTypeChartData}
+              colors={DISK_TYPE_BAR_COLORS}
+            />
+          ) : viewMode === "sharedDisks" ? (
+            sharedDisksChartData && totalVMs !== undefined ? (
+              <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)}%`
+                }
+              />
+            ) : (
+              <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.storage} />
+            )
+          ) : chartData.length === 0 ? (
+            <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.storage} />
+          ) : (
+            <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}
+            />
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+StorageOverview.displayName = "StorageOverview";

package/src/report/__tests__/StorageOverview.test.tsx

@@ -0,0 +1,223 @@
+import "@testing-library/jest-dom";
+import {
+  chart_color_blue_300,
+  chart_color_purple_100,
+  chart_color_purple_300,
+  chart_color_teal_300,
+  chart_color_yellow_400,
+} from "@patternfly/react-tokens";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import { StorageOverview } from "../StorageOverview.js";
+
+const donutProps = vi.hoisted(() => ({
+  current: null as MigrationDonutChartProps | null,
+}));
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: (props: MigrationDonutChartProps): JSX.Element => {
+    donutProps.current = props;
+    return (
+      <div data-testid="storage-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected a storage donut to render");
+  }
+  return props;
+};
+
+const selectView = async (name: string): Promise<void> => {
+  const user = userEvent.setup();
+  await user.click(
+    screen.getByRole("button", { name: "VM count by disk size tier" }),
+  );
+  await user.click(screen.getByRole("menuitem", { name }));
+};
+
+describe("StorageOverview", () => {
+  it("shows the storage empty state when no disk tiers were collected", () => {
+    render(<StorageOverview />);
+
+    expect(screen.getByText("Disks")).toBeInTheDocument();
+    expect(screen.getByText("Storage data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("storage-donut")).not.toBeInTheDocument();
+  });
+
+  it("orders VM-count tiers and totals the VM count", () => {
+    render(
+      <StorageOverview
+        diskSizeTier={{
+          Hard: { vmCount: 3, totalSizeTB: 30 },
+          Easy: { vmCount: 10, totalSizeTB: 5 },
+          Medium: { vmCount: 6, totalSizeTB: 15 },
+        }}
+      />,
+    );
+
+    expect(screen.getByTestId("storage-donut")).toHaveTextContent("19 VMs");
+
+    const props = renderedDonut();
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["0-10 TB", 10],
+      ["11-20 TB", 6],
+      ["21-50 TB", 3],
+    ]);
+    expect(props.data[0]?.countDisplay).toBe("10 VMs");
+    expect(props.legend).toEqual({
+      Easy: chart_color_blue_300.value,
+      Medium: chart_color_purple_300.value,
+      Hard: chart_color_purple_100.value,
+    });
+    expect(props.legendVariant).toBe("html");
+    expect(props.subTitleColor).toBe(
+      "var(--pf-t--global--text--color--subtle)",
+    );
+  });
+
+  it("switches to total disk size and formats TB totals", async () => {
+    render(
+      <StorageOverview
+        diskSizeTier={{
+          Easy: { vmCount: 10, totalSizeTB: 5.5 },
+          Medium: { vmCount: 6, totalSizeTB: 15 },
+        }}
+      />,
+    );
+
+    await selectView("Total disk size by tier");
+
+    const props = renderedDonut();
+    expect(props.title).toBe("20.50 TB");
+    expect(props.subTitle).toBe("16 VMs");
+    expect(props.data[0]?.countDisplay).toBe("5.50 TB");
+  });
+
+  it("drills down into a disk-size range when a tier slice is clicked", () => {
+    const onDiskTierSelect = vi.fn();
+    render(
+      <StorageOverview
+        diskSizeTier={{ Easy: { vmCount: 10, totalSizeTB: 5 } }}
+        onDiskTierSelect={onDiskTierSelect}
+      />,
+    );
+
+    const props = renderedDonut();
+    const slice = props.data[0];
+    if (!slice) {
+      throw new Error("expected a tier slice");
+    }
+    props.onItemClick?.(slice);
+
+    expect(onDiskTierSelect).toHaveBeenCalledWith({
+      min: 0,
+      max: 10 * 1024 * 1024,
+    });
+  });
+
+  it("renders the disk-type bar chart and its empty state", async () => {
+    const { rerender } = render(
+      <StorageOverview
+        diskTypes={{ NFS: { vmCount: 2 }, VMFS: { vmCount: 5 } }}
+      />,
+    );
+
+    await selectView("VM count by disk type");
+
+    // Preferred order places VMFS before NFS.
+    const vmfs = screen.getByText("VMFS");
+    const nfs = screen.getByText("NFS");
+    expect(vmfs.compareDocumentPosition(nfs)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    expect(
+      screen.getByText(/Totals may exceed the unique VM count/),
+    ).toBeInTheDocument();
+
+    rerender(<StorageOverview diskTypes={{}} />);
+    expect(
+      screen.getByText("Disk type data not collected"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the shared-disks donut", async () => {
+    render(<StorageOverview totalVMs={10} totalWithSharedDisks={4} />);
+
+    await selectView("Shared disks VS. No shared disks");
+
+    const props = renderedDonut();
+    expect(props.title).toBe("10 VMs");
+    expect(props.subTitle).toBe("4 with shared disks");
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["With shared disks", 4],
+      ["No shared disks", 6],
+    ]);
+    expect(props.customColors).toEqual({
+      "With shared disks": chart_color_yellow_400.value,
+      "No shared disks": chart_color_blue_300.value,
+    });
+  });
+
+  it("disables the shared-disks view when no VMs have shared disks", async () => {
+    const user = userEvent.setup();
+    render(<StorageOverview totalVMs={10} totalWithSharedDisks={0} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "VM count by disk size tier" }),
+    );
+    const sharedItem = screen.getByRole("menuitem", {
+      name: "Shared disks VS. No shared disks",
+    });
+    expect(sharedItem).toBeDisabled();
+
+    await user.click(sharedItem);
+    // The disabled item does not switch the active view.
+    expect(
+      screen.getByRole("button", { name: "VM count by disk size tier" }),
+    ).toBeInTheDocument();
+  });
+
+  it("passes the chart legend variant through", () => {
+    render(
+      <StorageOverview
+        legendVariant="chart"
+        diskSizeTier={{ Easy: { vmCount: 2, totalSizeTB: 1 } }}
+      />,
+    );
+
+    expect(renderedDonut().legendVariant).toBe("chart");
+  });
+
+  it("keeps the configured tier palette aligned with the categorical order", () => {
+    render(
+      <StorageOverview
+        diskSizeTier={{
+          Easy: { vmCount: 1 },
+          Medium: { vmCount: 1 },
+          Hard: { vmCount: 1 },
+          White: { vmCount: 1 },
+        }}
+      />,
+    );
+
+    expect(renderedDonut().legend).toEqual({
+      Easy: chart_color_blue_300.value,
+      Medium: chart_color_purple_300.value,
+      Hard: chart_color_purple_100.value,
+      "White glove": chart_color_teal_300.value,
+    });
+  });
+});

package/src/report/index.ts

@@ -195,6 +195,11 @@ export {
   type StandardReportExportHandlers,
   standardReportExportOptions,
 } from "./reportExportOptions.js";
+export {
+  type StorageDiskTierData,
+  StorageOverview,
+  type StorageOverviewProps,
+} from "./StorageOverview.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export {
   ALL_TIERS_FILTER,