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

package/dist/report/NetworkOverview.js

@@ -0,0 +1,201 @@
+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 { TopologyIcon } 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 { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    networkDistribution: "VM distribution by network",
+    nicCount: "VM distribution by NIC count",
+};
+const TOP_NETWORKS = 4;
+const REST_OF_NETWORKS_LABEL = "Rest of networks";
+const CHART_ID = "network-overview";
+const CHART_TITLE = "Networks";
+/**
+ * Categorical order from the ui-app network donut, mapped onto PatternFly
+ * `chart_color_*` tokens (nearest token where the old hex was not a token).
+ */
+const NETWORK_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 cardSubtitle = css `
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+const menuToggleMinWidth = css `
+  min-width: 250px;
+`;
+const titleRow = css `
+  width: 100%;
+`;
+const isViewMode = (value) => value === "networkDistribution" || value === "nicCount";
+const legendFor = (categories) => {
+    const legend = {};
+    categories.forEach((category, index) => {
+        const color = NETWORK_COLORS[index % NETWORK_COLORS.length];
+        if (color) {
+            legend[category] = color;
+        }
+    });
+    return legend;
+};
+const vlanLabel = (vlanId) => {
+    if (typeof vlanId !== "string" && typeof vlanId !== "number") {
+        return "-";
+    }
+    const value = String(vlanId).trim();
+    return value !== "" ? value : "-";
+};
+const buildNetworkDonut = (networks) => {
+    const items = (Array.isArray(networks) ? networks : [])
+        .map((network) => ({
+        vmsCount: typeof network?.vmsCount === "number" ? network.vmsCount : Number.NaN,
+        vlanId: vlanLabel(network?.vlanId),
+    }))
+        .filter((network) => Number.isFinite(network.vmsCount) && network.vmsCount >= 0)
+        .sort((a, b) => b.vmsCount - a.vmsCount);
+    const totalVMs = items.reduce((sum, network) => sum + network.vmsCount, 0);
+    const top = items.slice(0, TOP_NETWORKS);
+    const restSum = items
+        .slice(TOP_NETWORKS)
+        .reduce((sum, network) => sum + network.vmsCount, 0);
+    const vlanBySlice = {};
+    const slices = top.map((network, index) => {
+        const name = `Network ${index + 1}`;
+        vlanBySlice[name] = network.vlanId;
+        return {
+            name,
+            count: network.vmsCount,
+            countDisplay: `${network.vmsCount} VMs`,
+            legendCategory: name,
+        };
+    });
+    if (restSum > 0) {
+        slices.push({
+            name: REST_OF_NETWORKS_LABEL,
+            count: restSum,
+            countDisplay: `${restSum} VMs`,
+            legendCategory: REST_OF_NETWORKS_LABEL,
+        });
+        vlanBySlice[REST_OF_NETWORKS_LABEL] = "-";
+    }
+    return {
+        slices,
+        legend: legendFor(slices.map((slice) => slice.legendCategory)),
+        title: `${totalVMs}`,
+        vlanBySlice,
+    };
+};
+const nicBucketLabel = (bucket) => {
+    const count = Number.parseInt(bucket, 10);
+    if (bucket.endsWith("+")) {
+        return `${count}+ NIC`;
+    }
+    return count === 1 ? "1 NIC" : `${count} NIC`;
+};
+const compareNicBuckets = (a, b) => {
+    const aPlus = a.bucket.endsWith("+");
+    const bPlus = b.bucket.endsWith("+");
+    if (aPlus !== bPlus) {
+        return aPlus ? 1 : -1;
+    }
+    const aNum = Number.parseInt(a.bucket, 10);
+    const bNum = Number.parseInt(b.bucket, 10);
+    if (Number.isFinite(aNum) && Number.isFinite(bNum)) {
+        return aNum - bNum;
+    }
+    return a.bucket.localeCompare(b.bucket);
+};
+const slicesFromBuckets = (entries) => entries.map((entry) => {
+    const label = nicBucketLabel(entry.bucket);
+    return {
+        name: label,
+        count: entry.count,
+        countDisplay: `${entry.count} VMs`,
+        legendCategory: label,
+    };
+});
+const buildNicDonut = (distributionByNicCount, nicCount) => {
+    if (distributionByNicCount != null) {
+        const entries = Object.entries(distributionByNicCount)
+            .map(([bucket, value]) => ({
+            bucket,
+            count: Number.isFinite(Number(value)) ? Number(value) : 0,
+        }))
+            .filter((entry) => entry.count > 0)
+            .sort(compareNicBuckets);
+        const slices = slicesFromBuckets(entries);
+        const total = entries.reduce((sum, entry) => sum + entry.count, 0);
+        return {
+            slices,
+            legend: legendFor(slices.map((slice) => slice.legendCategory)),
+            title: `${total}`,
+        };
+    }
+    const histogram = nicCount?.histogram;
+    const data = Array.isArray(histogram?.data) ? histogram.data : [];
+    const minValue = typeof histogram?.minValue === "number" ? histogram.minValue : 0;
+    const step = typeof histogram?.step === "number" ? histogram.step : 1;
+    const buckets = data
+        .map((count, index) => ({
+        bucket: String(minValue + index * step),
+        count: Number(count) || 0,
+    }))
+        .filter((entry) => entry.count > 0)
+        .sort((a, b) => Number(a.bucket) - Number(b.bucket));
+    const slices = slicesFromBuckets(buckets);
+    const total = typeof nicCount?.total === "number"
+        ? nicCount.total
+        : buckets.reduce((sum, entry) => sum + entry.count, 0);
+    return {
+        slices,
+        legend: legendFor(slices.map((slice) => slice.legendCategory)),
+        title: `${total}`,
+    };
+};
+export const NetworkOverview = ({ infra, nicCount, distributionByNicCount, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("networkDistribution");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const networkChart = useMemo(() => buildNetworkDonut(infra?.networks), [infra?.networks]);
+    const nicChart = useMemo(() => buildNicDonut(distributionByNicCount, nicCount), [distributionByNicCount, nicCount]);
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    const activeChart = viewMode === "networkDistribution" ? networkChart : nicChart;
+    const emptyTitle = viewMode === "networkDistribution"
+        ? REPORT_CARD_EMPTY_STATE_TITLES.networks
+        : REPORT_CARD_EMPTY_STATE_TITLES.nicCount;
+    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(TopologyIcon, {}), " ", CHART_TITLE] }), viewMode === "networkDistribution" && (_jsx("div", { className: cardSubtitle, children: "Top 5 networks" }))] }) }), _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: "networkDistribution", children: VIEW_MODE_LABELS.networkDistribution }, "networkDistribution"), _jsx(DropdownItem, { value: "nicCount", children: VIEW_MODE_LABELS.nicCount }, "nicCount")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: activeChart.slices.length === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: activeChart.slices, legend: activeChart.legend, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, title: activeChart.title, subTitle: "VMs", subTitleColor: "var(--pf-t--global--text--color--subtle)", itemsPerRow: Math.ceil(activeChart.slices.length / 2), labelFontSize: 18, marginLeft: "0%", tooltipLabelFormatter: ({ datum, percent }) => {
+                            const summary = `${datum.countDisplay}\n${percent.toFixed(1)}%`;
+                            if (viewMode !== "networkDistribution") {
+                                return summary;
+                            }
+                            const vlan = networkChart.vlanBySlice[datum.legendCategory];
+                            return `${summary}\nVLAN: ${vlan ?? "-"}`;
+                        } })) })] }) }));
+};
+NetworkOverview.displayName = "NetworkOverview";

package/dist/report/OSDistribution.d.ts

@@ -2,12 +2,10 @@ import type { FC } from "react";
 import { type OSDistributionEntry } from "./osSupportTier.js";
 interface OSDistributionProps {
     osData: Record<string, OSDistributionEntry>;
-    isExportMode?: boolean;
 }
 export declare const OSDistribution: FC<OSDistributionProps>;
 interface OSBarChartProps {
     osData: Record<string, OSDistributionEntry>;
-    isExportMode?: boolean;
 }
 export declare const OSBarChart: FC<OSBarChartProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"OSDistribution.d.ts","sourceRoot":"","sources":["../../src/report/OSDistribution.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAQrC,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAY5B,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAyBlD,CAAC;AAEF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAoH1C,CAAC"}
+{"version":3,"file":"OSDistribution.d.ts","sourceRoot":"","sources":["../../src/report/OSDistribution.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAWrC,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAe5B,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAmClD,CAAC;AAEF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA0G1C,CAAC"}

package/dist/report/OSDistribution.js

@@ -4,6 +4,9 @@ import { Card, CardBody, CardTitle, Flex, FlexItem, MenuToggle, SearchInput, Sel
 import { DesktopIcon } from "@patternfly/react-icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportHideProps, chartExportScrollProps } from "./chartExport.js";
 import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
 import { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
 import { EmptySearchResults } from "./EmptySearchResults.js";
@@ -17,13 +20,13 @@ const tableScrollStyle = css `
   overflow: auto;
   max-height: 350px;
 `;
-export const OSDistribution = ({ osData, isExportMode = false, }) => (_jsxs(Card, { className: isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card, id: "os-distribution", children: [_jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsxs(FlexItem, { children: [_jsx(DesktopIcon, {}), " Operating Systems"] }), _jsx(FlexItem, { children: _jsx(OsSupportTiersHelpPopover, {}) })] }) }), _jsx(CardBody, { children: _jsx(OSBarChart, { osData: osData, isExportMode: isExportMode }) })] }));
-export const OSBarChart = ({ osData, isExportMode = false, }) => {
+const OS_DISTRIBUTION_CHART_ID = "os-distribution";
+const OS_DISTRIBUTION_TITLE = "Operating system distribution";
+export const OSDistribution = ({ osData }) => (_jsx(ChartExportSurface, { id: OS_DISTRIBUTION_CHART_ID, title: OS_DISTRIBUTION_TITLE, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsxs(FlexItem, { children: [_jsx(DesktopIcon, {}), " Operating Systems"] }), _jsx(FlexItem, { ...chartExportHideProps, children: _jsx(OsSupportTiersHelpPopover, {}) })] }) }), _jsx(ChartHeaderActions, { chartId: OS_DISTRIBUTION_CHART_ID, title: OS_DISTRIBUTION_TITLE })] }) }), _jsx(CardBody, { children: _jsx(OSBarChart, { osData: osData }) })] }) }));
+export const OSBarChart = ({ osData }) => {
     const vm = useOsBarChartViewModel(osData);
     if (vm.tableRows.length === 0) {
         return (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.operatingSystems }));
     }
-    return (_jsxs(_Fragment, { children: [!isExportMode ? (_jsx(Toolbar, { hasNoPadding: true, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarItem, { children: _jsx(SearchInput, { placeholder: "Filter by OS", value: vm.osFilter, onChange: (_event, value) => vm.setOsFilter(value), onClear: vm.clearOsFilter, "aria-label": "Filter operating systems by name" }) }), _jsx(ToolbarItem, { children: _jsx(Select, { isOpen: vm.isTierSelectOpen, selected: vm.tierFilter, onSelect: vm.handleTierSelect, onOpenChange: vm.setIsTierSelectOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, isExpanded: vm.isTierSelectOpen, onClick: vm.toggleTierSelectOpen, isFullWidth: true, children: vm.tierFilterLabel })), "aria-label": "Filter operating systems by support tier", children: _jsxs(SelectList, { children: [_jsx(SelectOption, { value: ALL_TIERS_FILTER, children: "All tiers" }), ORDERED_SUPPORT_TIERS.map((tier) => (_jsx(SelectOption, { value: tier, children: getSupportTierLegendLabel(tier) }, tier)))] }) }) })] }) })) : null, _jsxs(Stack, { hasGutter: true, children: [vm.showUpgradeNotice ? (_jsx(StackItem, { children: _jsx(OsUpgradeNotice, {}) })) : null, _jsx(StackItem, { children: _jsx("div", { className: isExportMode
-                                ? tableFullWidthStyle
-                                : `${tableScrollStyle} ${tableFullWidthStyle}`, children: _jsxs(Table, { "aria-label": "Operating systems", variant: "compact", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "OS" }), _jsx(Th, { children: "Tier" }), _jsx(Th, { children: "VMs" })] }) }), _jsx(Tbody, { children: vm.showNoResults ? (_jsx(Tr, { children: _jsx(Td, { colSpan: 3, children: _jsx(EmptySearchResults, { title: "No matching operating system found" }) }) })) : (vm.filteredRows.map((row) => (_jsxs(Tr, { children: [_jsx(Td, { dataLabel: "OS", children: _jsx(OsNameCell, { osName: row.osName, upgradeRecommendation: row.upgradeRecommendation, isExportMode: isExportMode }) }), _jsx(Td, { dataLabel: "Tier", children: _jsx(SupportTierBadge, { tier: row.tier, isExportMode: isExportMode }) }), _jsx(Td, { dataLabel: "VMs", children: row.count })] }, row.osName)))) })] }) }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ...chartExportHideProps, children: _jsx(Toolbar, { hasNoPadding: true, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarItem, { children: _jsx(SearchInput, { placeholder: "Filter by OS", value: vm.osFilter, onChange: (_event, value) => vm.setOsFilter(value), onClear: vm.clearOsFilter, "aria-label": "Filter operating systems by name" }) }), _jsx(ToolbarItem, { children: _jsx(Select, { isOpen: vm.isTierSelectOpen, selected: vm.tierFilter, onSelect: vm.handleTierSelect, onOpenChange: vm.setIsTierSelectOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, isExpanded: vm.isTierSelectOpen, onClick: vm.toggleTierSelectOpen, isFullWidth: true, children: vm.tierFilterLabel })), "aria-label": "Filter operating systems by support tier", children: _jsxs(SelectList, { children: [_jsx(SelectOption, { value: ALL_TIERS_FILTER, children: "All tiers" }), ORDERED_SUPPORT_TIERS.map((tier) => (_jsx(SelectOption, { value: tier, children: getSupportTierLegendLabel(tier) }, tier)))] }) }) })] }) }) }), _jsxs(Stack, { hasGutter: true, children: [vm.showUpgradeNotice ? (_jsx(StackItem, { children: _jsx(OsUpgradeNotice, {}) })) : null, _jsx(StackItem, { children: _jsx("div", { className: `${tableScrollStyle} ${tableFullWidthStyle}`, ...chartExportScrollProps, children: _jsxs(Table, { "aria-label": "Operating systems", variant: "compact", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "OS" }), _jsx(Th, { children: "Tier" }), _jsx(Th, { children: "VMs" })] }) }), _jsx(Tbody, { children: vm.showNoResults ? (_jsx(Tr, { children: _jsx(Td, { colSpan: 3, children: _jsx(EmptySearchResults, { title: "No matching operating system found" }) }) })) : (vm.filteredRows.map((row) => (_jsxs(Tr, { children: [_jsx(Td, { dataLabel: "OS", children: _jsx(OsNameCell, { osName: row.osName, upgradeRecommendation: row.upgradeRecommendation }) }), _jsx(Td, { dataLabel: "Tier", children: _jsx(SupportTierBadge, { tier: row.tier }) }), _jsx(Td, { dataLabel: "VMs", children: row.count })] }, row.osName)))) })] }) }) })] })] }));
 };

package/dist/report/OsUpgradeRecommendationPopover.d.ts

@@ -6,7 +6,6 @@ export declare const OsUpgradeRecommendationPopover: FC<OsUpgradeRecommendationP
 interface OsNameCellProps {
     osName: string;
     upgradeRecommendation?: string;
-    isExportMode?: boolean;
 }
 export declare const OsNameCell: FC<OsNameCellProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"OsUpgradeRecommendationPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeRecommendationPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAchC,UAAU,mCAAmC;IAC3C,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAC7C,mCAAmC,CAiBpC,CAAC;AAIF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA0B1C,CAAC"}
+{"version":3,"file":"OsUpgradeRecommendationPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeRecommendationPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAehC,UAAU,mCAAmC;IAC3C,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAC7C,mCAAmC,CAiBpC,CAAC;AAIF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAyB1C,CAAC"}

package/dist/report/OsUpgradeRecommendationPopover.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { css } from "@emotion/css";
 import { Button, Flex, FlexItem, Popover } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
+import { chartExportHideProps } from "./chartExport.js";
 const upgradeRecommendationPopoverCloseButton = css `
   .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain,
   .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain:hover {
@@ -14,11 +15,11 @@ const infoButtonStyle = css `
 `;
 export const OsUpgradeRecommendationPopover = ({ upgradeRecommendation }) => (_jsx(Popover, { className: upgradeRecommendationPopoverCloseButton, position: "bottom", headerContent: "Upgrade to get support", bodyContent: _jsx("div", { children: upgradeRecommendation }), children: _jsx(Button, { type: "button", "aria-label": "Open operating system upgrade information", variant: "plain", className: infoButtonStyle, children: _jsx(InfoCircleIcon, { color: "var(--pf-t--global--icon--color--status--info--default)" }) }) }));
 OsUpgradeRecommendationPopover.displayName = "OsUpgradeRecommendationPopover";
-export const OsNameCell = ({ osName, upgradeRecommendation, isExportMode = false, }) => {
+export const OsNameCell = ({ osName, upgradeRecommendation, }) => {
     const hasUpgradeRecommendation = upgradeRecommendation && upgradeRecommendation.trim() !== "";
-    if (!hasUpgradeRecommendation || isExportMode) {
+    if (!hasUpgradeRecommendation) {
         return _jsx(_Fragment, { children: osName });
     }
-    return (_jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsXs" }, flexWrap: { default: "nowrap" }, children: [_jsx(FlexItem, { children: osName }), _jsx(FlexItem, { shrink: { default: "shrink" }, children: _jsx(OsUpgradeRecommendationPopover, { upgradeRecommendation: upgradeRecommendation }) })] }));
+    return (_jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsXs" }, flexWrap: { default: "nowrap" }, children: [_jsx(FlexItem, { children: osName }), _jsx(FlexItem, { shrink: { default: "shrink" }, ...chartExportHideProps, children: _jsx(OsUpgradeRecommendationPopover, { upgradeRecommendation: upgradeRecommendation }) })] }));
 };
 OsNameCell.displayName = "OsNameCell";

package/dist/report/PowerStateCard.d.ts

@@ -9,7 +9,6 @@ export interface PowerStateCardProps {
     legend: Record<string, string>;
     total: number;
     subTitle: string;
-    isExportMode?: boolean;
     itemsPerRow?: number;
     legendVariant?: MigrationDonutChartLegendVariant;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PowerStateCard.d.ts","sourceRoot":"","sources":["../../src/report/PowerStateCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAI1C,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,wBAAwB,EAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA8ClD,CAAC"}
+{"version":3,"file":"PowerStateCard.d.ts","sourceRoot":"","sources":["../../src/report/PowerStateCard.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,wBAAwB,EAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoDlD,CAAC"}

package/dist/report/PowerStateCard.js

@@ -1,7 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Card, CardBody, CardTitle } from "@patternfly/react-core";
+import { Card, CardBody, CardTitle, Flex, FlexItem, } from "@patternfly/react-core";
 import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
 import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
 import { dashboardStyles } from "./dashboardStyles.js";
-export const PowerStateCard = ({ id, title, icon, emptyTitle, slices, legend, total, subTitle, isExportMode = false, itemsPerRow = 2, legendVariant = "html", }) => (_jsxs(Card, { className: isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card, id: id, children: [_jsxs(CardTitle, { children: [icon, " ", title] }), _jsx(CardBody, { children: total === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: slices, legend: legend, height: 300, width: 420, donutThickness: 18, padAngle: 1, title: `${total}`, subTitle: subTitle, subTitleColor: "var(--pf-t--global--text--color--subtle)", titleFontSize: 34, labelFontSize: 16, itemsPerRow: itemsPerRow, marginLeft: "0%", tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%` })) })] }));
+export const PowerStateCard = ({ id, title, icon, emptyTitle, slices, legend, total, subTitle, itemsPerRow = 2, legendVariant = "html", }) => (_jsx(ChartExportSurface, { id: id, title: title, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsxs(FlexItem, { children: [icon, " ", title] }), _jsx(ChartHeaderActions, { chartId: id, title: title })] }) }), _jsx(CardBody, { children: total === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: slices, legend: legend, height: 300, width: 420, donutThickness: 18, padAngle: 1, title: `${total}`, subTitle: subTitle, subTitleColor: "var(--pf-t--global--text--color--subtle)", titleFontSize: 34, labelFontSize: 16, itemsPerRow: itemsPerRow, marginLeft: "0%", tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%` })) })] }) }));
 PowerStateCard.displayName = "PowerStateCard";

package/dist/report/ReportExportMenu.d.ts

@@ -0,0 +1,19 @@
+import { type FC } from "react";
+import { type ReportExportOption, type StandardReportExportHandlers } from "./reportExportOptions.js";
+export interface ReportExportMenuProps {
+    options: ReportExportOption[];
+    isLoading?: boolean;
+    loadingLabel?: string | null;
+    isDisabled?: boolean;
+    toggleLabel?: string;
+}
+export declare const ReportExportMenu: FC<ReportExportMenuProps>;
+export interface ExportReportButtonProps extends StandardReportExportHandlers {
+    extraOptions?: ReportExportOption[];
+    isLoading?: boolean;
+    loadingLabel?: string | null;
+    isDisabled?: boolean;
+    toggleLabel?: string;
+}
+export declare const ExportReportButton: FC<ExportReportButtonProps>;
+//# sourceMappingURL=ReportExportMenu.d.ts.map

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

@@ -0,0 +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"}

package/dist/report/ReportExportMenu.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown, DropdownItem, DropdownList, MenuToggle, Spinner, } from "@patternfly/react-core";
+import { DownloadIcon } from "@patternfly/react-icons";
+import { useState } from "react";
+import { standardReportExportOptions, } from "./reportExportOptions.js";
+export const ReportExportMenu = ({ options, isLoading = false, loadingLabel = null, isDisabled = false, toggleLabel = "Export", }) => {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    if (options.length === 0) {
+        return null;
+    }
+    return (_jsx(Dropdown, { isOpen: isDropdownOpen, popperProps: {
+            placement: "bottom-end",
+            preventOverflow: true,
+        }, onSelect: () => {
+            setIsDropdownOpen(false);
+        }, onOpenChange: (isOpen) => {
+            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))) }) }));
+};
+ReportExportMenu.displayName = "ReportExportMenu";
+export const ExportReportButton = ({ onExportPdf, onExportPng, onExportHtml, extraOptions = [], ...menuProps }) => (_jsx(ReportExportMenu, { options: [
+        ...standardReportExportOptions({
+            onExportPdf,
+            onExportPng,
+            onExportHtml,
+        }),
+        ...extraOptions,
+    ], ...menuProps }));
+ExportReportButton.displayName = "ExportReportButton";

package/dist/report/ReportTable.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+export interface ReportTableProps<DataItem> {
+    columns: string[];
+    data: DataItem[];
+    fields: Array<keyof DataItem>;
+    caption?: string;
+    onRowClick?: (item: DataItem) => void;
+    clickableFields?: Array<keyof DataItem>;
+}
+export declare function ReportTable<DataItem>(props: ReportTableProps<DataItem>): React.ReactNode;
+export declare namespace ReportTable {
+    var displayName: string;
+}
+//# sourceMappingURL=ReportTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReportTable.d.ts","sourceRoot":"","sources":["../../src/report/ReportTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAgB,CAAC,QAAQ;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,MAAM,EAAE,KAAK,CAAC,MAAM,QAAQ,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,QAAQ,CAAC,CAAC;CACzC;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAClC,KAAK,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GAChC,KAAK,CAAC,SAAS,CA8DjB;yBAhEe,WAAW"}

package/dist/report/ReportTable.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@patternfly/react-core";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import { tableFullWidthStyle } from "./dashboardStyles.js";
+export function ReportTable(props) {
+    const { columns, data, fields, caption, onRowClick, clickableFields = [], } = props;
+    const renderCell = (item, field) => {
+        const value = item[field];
+        if (value === "" || value == null) {
+            return "-";
+        }
+        if (typeof value === "boolean") {
+            return value ? "True" : "False";
+        }
+        // Make field clickable if specified
+        if (clickableFields.includes(field) && onRowClick) {
+            return (_jsx(Button, { variant: "link", isInline: true, onClick: () => onRowClick(item), style: { padding: 0, fontSize: "inherit" }, children: value }));
+        }
+        return value;
+    };
+    return (_jsxs(Table, { variant: "compact", borders: false, className: tableFullWidthStyle, children: [caption && _jsx("caption", { children: caption }), _jsx(Thead, { children: _jsx(Tr, { children: columns.map((name) => (_jsx(Th, { children: name }, name))) }) }), _jsx(Tbody, { children: data.map((item) => (_jsx(Tr, { children: fields.map((f) => (_jsx(Td, { children: renderCell(item, f) }, String(f)))) }, `row-${String(item[fields[0]])}`))) })] }));
+}
+ReportTable.displayName = "ReportTable";

package/dist/report/SupportTierBadge.d.ts

@@ -2,7 +2,6 @@ import type { FC } from "react";
 import { type SupportTier } from "./osSupportTier.js";
 interface SupportTierBadgeProps {
     tier: SupportTier;
-    isExportMode?: boolean;
 }
 export declare const SupportTierBadge: FC<SupportTierBadgeProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"SupportTierBadge.d.ts","sourceRoot":"","sources":["../../src/report/SupportTierBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAKL,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAa5B,UAAU,qBAAqB;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAiBtD,CAAC"}
+{"version":3,"file":"SupportTierBadge.d.ts","sourceRoot":"","sources":["../../src/report/SupportTierBadge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAKL,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAE5B,UAAU,qBAAqB;IAC7B,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAYtD,CAAC"}

package/dist/report/SupportTierBadge.js

@@ -1,25 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { css } from "@emotion/css";
 import { Label, Tooltip } from "@patternfly/react-core";
 import { getSupportTierBadgeColor, getSupportTierBadgeInlineStyle, getSupportTierDefinition, getSupportTierLegendLabel, } from "./osSupportTier.js";
-const exportBadgeStyle = (backgroundColor, color) => css `
-  display: inline-block;
-  padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
-  border-radius: var(--pf-t--global--border--radius--pill);
-  font-size: var(--pf-t--global--font--size--body--sm);
-  line-height: var(--pf-t--global--font--line-height--body);
-  white-space: nowrap;
-  background-color: ${backgroundColor};
-  color: ${color};
-`;
-const ExportSupportTierBadge = ({ tier }) => {
-    const { backgroundColor, color } = getSupportTierBadgeInlineStyle(tier);
-    return (_jsx("span", { className: exportBadgeStyle(backgroundColor, color), children: getSupportTierLegendLabel(tier) }));
-};
-export const SupportTierBadge = ({ tier, isExportMode = false, }) => {
-    if (isExportMode) {
-        return _jsx(ExportSupportTierBadge, { tier: tier });
-    }
-    return (_jsx(Tooltip, { content: getSupportTierDefinition(tier), children: _jsx("span", { children: _jsx(Label, { color: getSupportTierBadgeColor(tier), isCompact: true, children: getSupportTierLegendLabel(tier) }) }) }));
-};
+export const SupportTierBadge = ({ tier }) => (_jsx(Tooltip, { content: getSupportTierDefinition(tier), children: _jsx("span", { children: _jsx(Label, { color: getSupportTierBadgeColor(tier), isCompact: true, style: getSupportTierBadgeInlineStyle(tier), children: getSupportTierLegendLabel(tier) }) }) }));
 SupportTierBadge.displayName = "SupportTierBadge";

package/dist/report/VCenterClusterDetails.d.ts

@@ -4,7 +4,6 @@ export interface VCenterClusterDetailsProps {
     isAggregateView: boolean;
     rows: ClusterDetailRow[];
     details?: ClusterDetailsModel;
-    isExportMode?: boolean;
 }
 export declare const VCenterClusterDetails: FC<VCenterClusterDetailsProps>;
 //# sourceMappingURL=VCenterClusterDetails.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VCenterClusterDetails.d.ts","sourceRoot":"","sources":["../../src/report/VCenterClusterDetails.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,WAAW,0BAA0B;IACzC,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAmKD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAgBhE,CAAC"}
+{"version":3,"file":"VCenterClusterDetails.d.ts","sourceRoot":"","sources":["../../src/report/VCenterClusterDetails.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,WAAW,0BAA0B;IACzC,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAsKD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA+BhE,CAAC"}

package/dist/report/VCenterClusterDetails.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { css } from "@emotion/css";
-import { Card, CardBody, CardTitle, Content, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Grid, GridItem, Label, LabelGroup, } from "@patternfly/react-core";
+import { Card, CardBody, CardTitle, Content, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Flex, FlexItem, Grid, GridItem, Label, LabelGroup, } from "@patternfly/react-core";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportScrollProps } from "./chartExport.js";
 import { FeatureStatusBadge } from "./FeatureStatusBadge.js";
 const clusterDetailsTableScrollStyle = css `
   max-height: 320px;
@@ -9,11 +12,11 @@ const clusterDetailsTableScrollStyle = css `
 `;
 const FeatureList = ({ items }) => (_jsx(DescriptionList, { isHorizontal: true, isCompact: true, children: items.map((item) => (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: item.label }), _jsx(DescriptionListDescription, { children: _jsx(FeatureStatusBadge, { status: item.status }) })] }, item.label))) }));
 const AggregateClusterTable = ({ rows }) => (_jsxs(Table, { variant: "compact", borders: false, isStickyHeader: true, "data-testid": "vcenter-cluster-details-table", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "Cluster name" }), _jsx(Th, { children: "Hosts" }), _jsx(Th, { children: "VMs" }), _jsx(Th, { children: "vMotion" }), _jsx(Th, { children: "DRS" }), _jsx(Th, { children: "vSAN" })] }) }), _jsx(Tbody, { children: rows.map((row) => (_jsxs(Tr, { children: [_jsx(Td, { dataLabel: "Cluster name", children: row.name }), _jsx(Td, { dataLabel: "Hosts", children: row.hosts }), _jsx(Td, { dataLabel: "VMs", children: row.vms }), _jsx(Td, { dataLabel: "vMotion", children: _jsx(FeatureStatusBadge, { status: row.vmotion }) }), _jsx(Td, { dataLabel: "DRS", children: _jsx(FeatureStatusBadge, { status: row.drs }) }), _jsx(Td, { dataLabel: "vSAN", children: _jsx(FeatureStatusBadge, { status: row.vsan }) })] }, row.id))) })] }));
-const AggregateCluster = ({ rows, isExportMode }) => {
+const AggregateCluster = ({ rows }) => {
     if (rows.length === 0) {
         return _jsx(Content, { component: "p", children: "No vSphere clusters detected" });
     }
-    return (_jsx("div", { className: isExportMode ? undefined : clusterDetailsTableScrollStyle, "data-scroll-constrained": isExportMode ? undefined : "true", children: _jsx(AggregateClusterTable, { rows: rows }) }));
+    return (_jsx("div", { className: clusterDetailsTableScrollStyle, "data-scroll-constrained": "true", ...chartExportScrollProps, children: _jsx(AggregateClusterTable, { rows: rows }) }));
 };
 const DetailedClusterView = ({ details, }) => (_jsxs(Grid, { hasGutter: true, children: [_jsx(GridItem, { children: _jsxs(DescriptionList, { isAutoFit: true, displaySize: "lg", children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Hosts" }), _jsx(DescriptionListDescription, { children: details.hosts })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "VMs" }), _jsx(DescriptionListDescription, { children: details.vms })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Networks detected" }), _jsx(DescriptionListDescription, { children: details.networksDetected })] })] }) }), _jsx(GridItem, { md: 4, children: _jsxs(Card, { isFullHeight: true, children: [_jsx(CardTitle, { children: "Core infrastructure" }), _jsx(CardBody, { children: _jsx(FeatureList, { items: [
                                 { label: "vMotion", status: details.vmotion },
@@ -22,5 +25,7 @@ const DetailedClusterView = ({ details, }) => (_jsxs(Grid, { hasGutter: true, ch
                             ] }) })] }) }), _jsx(GridItem, { md: 4, children: _jsxs(Card, { isFullHeight: true, children: [_jsx(CardTitle, { children: "vSAN capabilities" }), _jsx(CardBody, { children: _jsx(FeatureList, { items: [{ label: "vSAN", status: details.vsan }] }) })] }) }), _jsx(GridItem, { md: 4, children: _jsxs(Card, { isFullHeight: true, children: [_jsx(CardTitle, { children: "Network topology" }), _jsx(CardBody, { children: details.networks.length === 0 ? (_jsx(Content, { component: "p", children: "No networks detected" })) : (_jsxs(_Fragment, { children: [_jsxs(Content, { component: "p", children: [details.networksDetected, " ", details.networksDetected === 1
                                             ? "network detected"
                                             : "networks detected"] }), _jsx(LabelGroup, { isCompact: true, numLabels: details.networks.length, "aria-label": "Detected networks", children: details.networks.map((network, index) => (_jsx(Label, { color: "blue", isCompact: true, children: network.displayName }, `${network.name}-${network.vlanId ?? index}`))) })] })) })] }) })] }));
-export const VCenterClusterDetails = ({ isAggregateView, rows, details, isExportMode = false, }) => (_jsxs(Card, { isFullHeight: true, id: "vcenter-cluster-details", children: [_jsx(CardTitle, { children: "vCenter cluster details" }), _jsx(CardBody, { children: isAggregateView || !details ? (_jsx(AggregateCluster, { rows: rows, isExportMode: isExportMode })) : (_jsx(DetailedClusterView, { details: details })) })] }));
+const CLUSTER_DETAILS_CHART_ID = "vcenter-cluster-details";
+const CLUSTER_DETAILS_TITLE = "vCenter cluster details";
+export const VCenterClusterDetails = ({ isAggregateView, rows, details, }) => (_jsx(ChartExportSurface, { id: CLUSTER_DETAILS_CHART_ID, title: CLUSTER_DETAILS_TITLE, children: _jsxs(Card, { isFullHeight: true, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: CLUSTER_DETAILS_TITLE }), _jsx(ChartHeaderActions, { chartId: CLUSTER_DETAILS_CHART_ID, title: CLUSTER_DETAILS_TITLE })] }) }), _jsx(CardBody, { children: isAggregateView || !details ? (_jsx(AggregateCluster, { rows: rows })) : (_jsx(DetailedClusterView, { details: details })) })] }) }));
 VCenterClusterDetails.displayName = "VCenterClusterDetails";

package/dist/report/VmPowerStates.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"VmPowerStates.d.ts","sourceRoot":"","sources":["../../src/report/VmPowerStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AAKzF,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwBhD,CAAC"}
+{"version":3,"file":"VmPowerStates.d.ts","sourceRoot":"","sources":["../../src/report/VmPowerStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AAKzF,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsBhD,CAAC"}

package/dist/report/VmPowerStates.js

@@ -4,8 +4,8 @@ import { useMemo } from "react";
 import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
 import { PowerStateCard } from "./PowerStateCard.js";
 import { buildVmPowerStateChart } from "./powerStates.js";
-export const VmPowerStates = ({ powerStates, isExportMode = false, legendVariant, }) => {
+export const VmPowerStates = ({ powerStates, legendVariant, }) => {
     const chart = useMemo(() => buildVmPowerStateChart(powerStates), [powerStates]);
-    return (_jsx(PowerStateCard, { id: "vm-power-states", title: "VM power states", icon: _jsx(VirtualMachineIcon, {}), emptyTitle: REPORT_CARD_EMPTY_STATE_TITLES.vmPowerStates, slices: chart.slices, legend: chart.legend, total: chart.total, subTitle: "VMs", isExportMode: isExportMode, legendVariant: legendVariant }));
+    return (_jsx(PowerStateCard, { id: "vm-power-states", title: "VM power states", icon: _jsx(VirtualMachineIcon, {}), emptyTitle: REPORT_CARD_EMPTY_STATE_TITLES.vmPowerStates, slices: chart.slices, legend: chart.legend, total: chart.total, subTitle: "VMs", legendVariant: legendVariant }));
 };
 VmPowerStates.displayName = "VmPowerStates";

package/dist/report/WarningsTable.d.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+import type { MigrationIssueLike } from "./ErrorTable.js";
+export interface WarningsTableProps {
+    warnings: MigrationIssueLike[];
+    /** Optional drill-down callback invoked with an issue's `label`. */
+    onConcernClick?: (concernLabel: string) => void;
+}
+export declare const WarningsTable: React.FC<WarningsTableProps>;
+//# sourceMappingURL=WarningsTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WarningsTable.d.ts","sourceRoot":"","sources":["../../src/report/WarningsTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,oEAAoE;IACpE,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgDtD,CAAC"}

package/dist/report/WarningsTable.js

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

package/dist/report/captureChartElement.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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>;
+//# sourceMappingURL=captureChartElement.d.ts.map

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

@@ -0,0 +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"}