@openshift-migration-advisor/shared-components 0.24.0 → 0.25.0-6fd4e1ee8e11

package/dist/report/OsUpgradeNotice.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { css } from "@emotion/css";
 import { Content, Flex, FlexItem, Icon } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
-const noticeStyle = css `
-  margin-bottom: var(--pf-t--global--spacer--200);
-`;
-export const OsUpgradeNotice = () => (_jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, className: noticeStyle, children: [_jsx(FlexItem, { children: _jsx(Icon, { status: "info", children: _jsx(InfoCircleIcon, {}) }) }), _jsx(FlexItem, { children: _jsx(Content, { component: "p", style: { fontWeight: 500 }, children: "Some operating systems may need upgrades before migration" }) })] }));
+export const OsUpgradeNotice = () => (_jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsx(FlexItem, { children: _jsx(Icon, { status: "info", children: _jsx(InfoCircleIcon, {}) }) }), _jsx(FlexItem, { children: _jsx(Content, { component: "p", children: "Some operating systems may need upgrades before migration" }) })] }));
 OsUpgradeNotice.displayName = "OsUpgradeNotice";

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

@@ -0,0 +1,16 @@
+import type { FC, ReactNode } from "react";
+import { type MigrationDonutChartDatum, type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+export interface PowerStateCardProps {
+    id: string;
+    title: string;
+    icon: ReactNode;
+    emptyTitle: string;
+    slices: MigrationDonutChartDatum[];
+    legend: Record<string, string>;
+    total: number;
+    subTitle: string;
+    itemsPerRow?: number;
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const PowerStateCard: FC<PowerStateCardProps>;
+//# sourceMappingURL=PowerStateCard.d.ts.map

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

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

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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, 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/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;AAW5B,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,23 +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 = 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;
-`;
-const ExportSupportTierBadge = ({ tier }) => {
-    const { backgroundColor, color } = getSupportTierBadgeInlineStyle(tier);
-    return (_jsx("span", { className: exportBadgeStyle, style: { 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

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+import type { ClusterDetailRow, ClusterDetailsModel } from "./infrastructureSummaryModel.js";
+export interface VCenterClusterDetailsProps {
+    isAggregateView: boolean;
+    rows: ClusterDetailRow[];
+    details?: ClusterDetailsModel;
+}
+export declare const VCenterClusterDetails: FC<VCenterClusterDetailsProps>;
+//# sourceMappingURL=VCenterClusterDetails.d.ts.map

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

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

@@ -0,0 +1,31 @@
+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, 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;
+  overflow: auto;
+`;
+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 }) => {
+    if (rows.length === 0) {
+        return _jsx(Content, { component: "p", children: "No vSphere clusters detected" });
+    }
+    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 },
+                                { label: "DRS", status: details.drs },
+                                { label: "HA", status: details.ha },
+                            ] }) })] }) }), _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}`))) })] })) })] }) })] }));
+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

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+import type { MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+export interface VmPowerStatesProps {
+    powerStates?: Record<string, number>;
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const VmPowerStates: FC<VmPowerStatesProps>;
+//# sourceMappingURL=VmPowerStates.d.ts.map

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

@@ -0,0 +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,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsBhD,CAAC"}

package/dist/report/VmPowerStates.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VirtualMachineIcon } from "@patternfly/react-icons";
+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, 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", legendVariant: legendVariant }));
+};
+VmPowerStates.displayName = "VmPowerStates";

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"}

package/dist/report/captureChartElement.js

@@ -0,0 +1,284 @@
+import html2canvas from "html2canvas-pro";
+import { CHART_EXPORT_CAPTURING_ATTR, CHART_EXPORT_SCROLL_ATTR, shouldIgnoreChartExportElement, } from "./chartExport.js";
+/** CSS-pixel scale; 2x made zip-all of ~15 live cards too slow. */
+const CHART_CAPTURE_SCALE = 1;
+const HIDDEN_LAYOUT_STYLE_KEYS = [
+    "display",
+    "position",
+    "left",
+    "top",
+    "width",
+    "maxHeight",
+    "overflow",
+    "zIndex",
+];
+function isDisplayNone(node) {
+    return window.getComputedStyle(node).display === "none";
+}
+/**
+ * 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 function revealHiddenChartAncestors(element) {
+    const saved = [];
+    let node = element;
+    while (node && node !== document.documentElement) {
+        if (node.hidden || isDisplayNone(node)) {
+            saved.push({
+                node,
+                hidden: node.hidden,
+                styles: {
+                    display: node.style.display,
+                    position: node.style.position,
+                    left: node.style.left,
+                    top: node.style.top,
+                    width: node.style.width,
+                    maxHeight: node.style.maxHeight,
+                    overflow: node.style.overflow,
+                    zIndex: node.style.zIndex,
+                },
+            });
+        }
+        node = node.parentElement;
+    }
+    if (saved.length === 0) {
+        return () => undefined;
+    }
+    const outermost = saved[saved.length - 1].node;
+    const parentWidth = outermost.parentElement?.clientWidth ?? 0;
+    const layoutWidth = parentWidth || document.documentElement.clientWidth || 1024;
+    for (const entry of saved) {
+        entry.node.hidden = false;
+        entry.node.style.display = "block";
+        entry.node.style.position = "fixed";
+        entry.node.style.left = "-10000px";
+        entry.node.style.top = "0";
+        entry.node.style.width = `${layoutWidth}px`;
+        entry.node.style.maxHeight = "none";
+        entry.node.style.overflow = "visible";
+        entry.node.style.zIndex = "-1";
+    }
+    return () => {
+        for (const entry of saved) {
+            entry.node.hidden = entry.hidden;
+            for (const key of HIDDEN_LAYOUT_STYLE_KEYS) {
+                entry.node.style[key] = entry.styles[key];
+            }
+        }
+    };
+}
+const PADDED_CAPTURE_SELECTOR = ".pf-v6-c-card__title, .pf-v6-c-card__header, .pf-v6-c-card__body";
+const CARD_CAPTURE_SELECTOR = ".pf-v6-c-card";
+const TRANSPARENT_FILLS = new Set(["", "transparent", "rgba(0, 0, 0, 0)"]);
+function queryCards(root) {
+    const cards = Array.from(root.querySelectorAll(CARD_CAPTURE_SELECTOR));
+    if (root.matches(CARD_CAPTURE_SELECTOR)) {
+        cards.unshift(root);
+    }
+    return cards;
+}
+function resolvedFill(color) {
+    return TRANSPARENT_FILLS.has(color) ? "#ffffff" : color;
+}
+function applyComputedPadding(source, dest) {
+    const computed = window.getComputedStyle(source);
+    dest.style.paddingTop = computed.paddingTop;
+    dest.style.paddingRight = computed.paddingRight;
+    dest.style.paddingBottom = computed.paddingBottom;
+    dest.style.paddingLeft = computed.paddingLeft;
+}
+function readCardBorder(source) {
+    if (source.style.borderWidth && source.style.borderStyle) {
+        return {
+            width: source.style.borderWidth,
+            style: source.style.borderStyle,
+            color: source.style.borderColor,
+        };
+    }
+    const computed = window.getComputedStyle(source);
+    const before = window.getComputedStyle(source, "::before");
+    const width = before.borderTopWidth && before.borderTopWidth !== "0px"
+        ? before.borderTopWidth
+        : computed.borderTopWidth;
+    const style = before.borderTopStyle && before.borderTopStyle !== "none"
+        ? before.borderTopStyle
+        : computed.borderTopStyle;
+    const color = before.borderTopColor && before.borderTopColor !== "rgba(0, 0, 0, 0)"
+        ? before.borderTopColor
+        : computed.borderTopColor;
+    if (width === "0px" || style === "none") {
+        return null;
+    }
+    return { width, style, color };
+}
+function applyCardChrome(source, dest) {
+    const computed = window.getComputedStyle(source);
+    dest.style.borderRadius = computed.borderRadius;
+    dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
+    dest.style.overflow = "hidden";
+    const border = readCardBorder(source);
+    if (border) {
+        dest.style.borderWidth = border.width;
+        dest.style.borderStyle = border.style;
+        dest.style.borderColor = border.color;
+    }
+}
+function hideCardBeforePseudo() {
+    const style = document.createElement("style");
+    style.setAttribute("data-chart-export-hide-before", "");
+    style.textContent = `
+[${CHART_EXPORT_CAPTURING_ATTR}] .pf-v6-c-card::before,
+[${CHART_EXPORT_CAPTURING_ATTR}].pf-v6-c-card::before {
+  border: none !important;
+  box-shadow: none !important;
+}
+`;
+    document.head.append(style);
+    return () => {
+        style.remove();
+    };
+}
+function copyComputedPadding(node) {
+    const previous = {
+        paddingTop: node.style.paddingTop,
+        paddingRight: node.style.paddingRight,
+        paddingBottom: node.style.paddingBottom,
+        paddingLeft: node.style.paddingLeft,
+    };
+    applyComputedPadding(node, node);
+    return previous;
+}
+function copyCardChrome(node) {
+    const previous = {
+        borderRadius: node.style.borderRadius,
+        backgroundColor: node.style.backgroundColor,
+        overflow: node.style.getPropertyValue("overflow"),
+        overflowPriority: node.style.getPropertyPriority("overflow"),
+        borderWidth: node.style.borderWidth,
+        borderStyle: node.style.borderStyle,
+        borderColor: node.style.borderColor,
+        minHeight: node.style.minHeight,
+        height: node.style.height,
+        maxHeight: node.style.maxHeight,
+    };
+    applyCardChrome(node, node);
+    node.style.minHeight = "0px";
+    node.style.height = "auto";
+    node.style.maxHeight = "none";
+    return previous;
+}
+function applyComputedStylesToClone(sourceRoot, clonedRoot) {
+    const sourceCards = queryCards(sourceRoot);
+    const cloneCards = queryCards(clonedRoot);
+    sourceCards.forEach((source, index) => {
+        const dest = cloneCards[index];
+        if (dest) {
+            applyCardChrome(source, dest);
+        }
+    });
+    const sources = sourceRoot.querySelectorAll(PADDED_CAPTURE_SELECTOR);
+    const dests = clonedRoot.querySelectorAll(PADDED_CAPTURE_SELECTOR);
+    sources.forEach((source, index) => {
+        const dest = dests[index];
+        if (dest) {
+            applyComputedPadding(source, dest);
+        }
+    });
+}
+function prepareCaptureLayout(element) {
+    const expandNodes = [
+        element,
+        ...Array.from(element.querySelectorAll(`[${CHART_EXPORT_SCROLL_ATTR}], .pf-v6-c-card__body`)),
+    ];
+    const cards = queryCards(element);
+    const paddedNodes = Array.from(element.querySelectorAll(PADDED_CAPTURE_SELECTOR));
+    const previousExpand = expandNodes.map((node) => ({
+        node,
+        overflow: node.style.getPropertyValue("overflow"),
+        overflowPriority: node.style.getPropertyPriority("overflow"),
+        maxHeight: node.style.maxHeight,
+        height: node.style.height,
+    }));
+    const previousChrome = cards.map((node) => ({
+        node,
+        ...copyCardChrome(node),
+    }));
+    const previousPadding = paddedNodes.map((node) => ({
+        node,
+        ...copyComputedPadding(node),
+    }));
+    for (const node of expandNodes) {
+        node.style.setProperty("overflow", "visible", "important");
+        node.style.maxHeight = "none";
+        node.style.height = "auto";
+    }
+    return () => {
+        for (const entry of previousExpand) {
+            if (entry.overflow) {
+                entry.node.style.setProperty("overflow", entry.overflow, entry.overflowPriority);
+            }
+            else {
+                entry.node.style.removeProperty("overflow");
+            }
+            entry.node.style.maxHeight = entry.maxHeight;
+            entry.node.style.height = entry.height;
+        }
+        for (const entry of previousChrome) {
+            entry.node.style.borderRadius = entry.borderRadius;
+            entry.node.style.backgroundColor = entry.backgroundColor;
+            if (entry.overflow) {
+                entry.node.style.setProperty("overflow", entry.overflow, entry.overflowPriority);
+            }
+            else {
+                entry.node.style.removeProperty("overflow");
+            }
+            entry.node.style.borderWidth = entry.borderWidth;
+            entry.node.style.borderStyle = entry.borderStyle;
+            entry.node.style.borderColor = entry.borderColor;
+            entry.node.style.minHeight = entry.minHeight;
+            entry.node.style.height = entry.height;
+            entry.node.style.maxHeight = entry.maxHeight;
+        }
+        for (const entry of previousPadding) {
+            entry.node.style.paddingTop = entry.paddingTop;
+            entry.node.style.paddingRight = entry.paddingRight;
+            entry.node.style.paddingBottom = entry.paddingBottom;
+            entry.node.style.paddingLeft = entry.paddingLeft;
+        }
+    };
+}
+export async function captureChartElement(element) {
+    const restoreHidden = revealHiddenChartAncestors(element);
+    const restoreLayout = prepareCaptureLayout(element);
+    element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
+    const restoreCardBefore = hideCardBeforePseudo();
+    try {
+        await new Promise((resolve) => {
+            requestAnimationFrame(() => resolve());
+        });
+        if (element.getBoundingClientRect().width < 1) {
+            await new Promise((resolve) => {
+                requestAnimationFrame(() => resolve());
+            });
+        }
+        return html2canvas(element, {
+            useCORS: true,
+            backgroundColor: null,
+            logging: false,
+            scale: CHART_CAPTURE_SCALE,
+            imageTimeout: 0,
+            ignoreElements: (node) => node instanceof Element &&
+                shouldIgnoreChartExportElement(node, element),
+            onclone: (_clonedDoc, clonedElement) => {
+                applyComputedStylesToClone(element, clonedElement);
+            },
+        });
+    }
+    finally {
+        restoreCardBefore();
+        element.removeAttribute(CHART_EXPORT_CAPTURING_ATTR);
+        restoreLayout();
+        restoreHidden();
+    }
+}

package/dist/report/chartExport.d.ts

@@ -0,0 +1,57 @@
+import type { CSSProperties } from "react";
+export declare const CHART_EXPORT_HIDE_ATTR = "data-chart-export-hide";
+export declare const CHART_EXPORT_SCROLL_ATTR = "data-chart-export-scroll";
+export declare const CHART_EXPORT_CAPTURING_ATTR = "data-chart-capturing";
+export declare const chartExportHideProps: {
+    readonly "data-chart-export-hide": "";
+};
+export declare const chartExportScrollProps: {
+    readonly "data-chart-export-scroll": "";
+};
+export declare const chartExportRootStyle: CSSProperties;
+export type ChartExportMeta = {
+    id: string;
+    title: string;
+    filename?: string;
+};
+export type ChartExportView = {
+    id: string;
+    title: string;
+    filename?: string;
+};
+export type RegisteredChart = {
+    id: string;
+    title: string;
+    filename: string;
+    element: HTMLElement;
+    exportViews?: ChartExportView[];
+    activeExportViewId?: string;
+    setExportView?: (viewId: string) => Promise<void>;
+};
+export type ChartExportFile = {
+    filename: string;
+    blob: Blob;
+};
+export type ChartCaptureSource = {
+    id: string;
+    title: string;
+    filename: string;
+    capture: () => Promise<HTMLCanvasElement>;
+};
+export declare function releaseCanvas(canvas: HTMLCanvasElement): void;
+export declare function waitForChartExportPaint(): Promise<void>;
+export declare function chartExportViewsFromLabels(titlePrefix: string, labels: Record<string, string>): ChartExportView[];
+export declare function toBulkChartCaptureSources(charts: RegisteredChart[], capture: (element: HTMLElement) => Promise<HTMLCanvasElement>, prepareElement?: (element: HTMLElement) => () => void): ChartCaptureSource[];
+export declare function restoreChartExportViews(charts: RegisteredChart[]): Promise<void>;
+export declare function sortRegisteredChartsByDocumentOrder(charts: RegisteredChart[]): RegisteredChart[];
+export declare function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob>;
+export declare function slugifyExportName(value: string): string;
+export declare function chartPngFilename(title: string, id?: string): string;
+/**
+ * html2canvas clones the whole document for every capture. Ignore everything
+ * except the target card (and ancestors / stylesheet nodes) so zip-all does
+ * not re-render every other chart.
+ */
+export declare function shouldIgnoreChartExportElement(node: Element, captureRoot?: Element | null): boolean;
+export declare function downloadBlob(blob: Blob, filename: string): void;
+//# sourceMappingURL=chartExport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartExport.d.ts","sourceRoot":"","sources":["../../src/report/chartExport.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AACnE,eAAO,MAAM,2BAA2B,yBAAyB,CAAC;AAElE,eAAO,MAAM,oBAAoB;;CAEvB,CAAC;AAEX,eAAO,MAAM,sBAAsB;;CAEzB,CAAC;AAEX,eAAO,MAAM,oBAAoB,EAAE,aAGlC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC;AAEF,wBAAgB,aAAa,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAG7D;AAED,wBAAgB,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,CASvD;AAED,wBAAgB,0BAA0B,CACxC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,eAAe,EAAE,CAKnB;AAqBD,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC,iBAAiB,CAAC,EAC7D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,GACpD,kBAAkB,EAAE,CAyBtB;AAED,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,eAAe,EAAE,GACxB,OAAO,CAAC,IAAI,CAAC,CAcf;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,eAAe,EAAE,GACxB,eAAe,EAAE,CAcnB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAcrE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMvD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAU,GAAG,MAAM,CAEpE;AAWD;;;;GAIG;AACH,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,OAAO,EACb,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,OAAO,CAeT;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAS/D"}