@openshift-migration-advisor/shared-components 0.22.0-dd51551836b7 → 0.23.0-e2d66ca45d64

package/README.md

@@ -8,6 +8,7 @@ Includes:
 - Guest OS support-tier helpers and badges
 - Report chart primitives (`MigrationDonutChart`)
 - Operating Systems distribution card
+- Infrastructure summary, vCenter cluster details, and host/VM power-state cards
 
 ## Installation
 
@@ -23,10 +24,15 @@ npm install @openshift-migration-advisor/shared-components
 
 ```tsx
 import {
+  buildInfrastructureSummary,
+  HostPowerStates,
+  InfrastructureSummary,
   MigrationDonutChart,
   OSDistribution,
   SupportTierBadge,
   TextInputFormGroup,
+  VCenterClusterDetails,
+  VmPowerStates,
 } from "@openshift-migration-advisor/shared-components";
 ```
 

package/dist/charts/MigrationDonutChart.d.ts

@@ -15,6 +15,7 @@ export interface MigrationDonutChartDatum {
     clusterNames?: string[];
     networkNames?: string[];
 }
+export type MigrationDonutChartLegendVariant = "html" | "chart";
 export interface MigrationDonutChartProps {
     data: MigrationDonutChartDatum[];
     legend?: Record<string, string>;
@@ -40,13 +41,29 @@ export interface MigrationDonutChartProps {
         percent: number;
         total: number;
     }) => string;
+    /** Agent-ui: slice / legend click drill-down. */
     onItemClick?: (item: MigrationDonutChartDatum) => void;
+    /** Agent-ui: clickable center title overlay. */
     onTitleClick?: () => void;
-    /** When set, used for legend label instead of "name (countDisplay)". */
+    /** Agent-ui: custom HTML legend labels (ignored when legendVariant is "chart"). */
     legendLabelFormatter?: (item: {
         x: string;
         countDisplay?: string | number;
     }) => string;
+    /**
+     * Legend rendering mode.
+     * - `"html"` (default): custom clickable legend used by agent-ui
+     * - `"chart"`: PatternFly ChartLegend used by ui-app
+     */
+    legendVariant?: MigrationDonutChartLegendVariant;
+    /** ui-app ChartLegend: total legend width. */
+    legendWidth?: number;
+    /** ui-app ChartLegend: columns per row. */
+    itemsPerRow?: number;
+    /** ui-app ChartLegend: label font size. */
+    labelFontSize?: number;
+    /** Prefer themed Victory ChartTooltip (default true for chart legend). */
+    useThemedTooltip?: boolean;
 }
 export declare const MigrationDonutChart: FC<MigrationDonutChartProps>;
 export default MigrationDonutChart;

package/dist/charts/MigrationDonutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAC/B,cAAc,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wEAAwE;IACxE,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;CACd;AAkDD,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAkS5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAG9C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAC/B,cAAc,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;IACb;;;;OAIG;IACH,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA8ED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiX5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/charts/MigrationDonutChart.js

@@ -6,11 +6,35 @@ import { css } from "@emotion/css";
 // "@patternfly/react-charts/victory" subpath has no exports map entry and
 // resolves to a directory, which webpack refuses under fully-specified —
 // breaking the ui-app federated build.
-import { ChartDonut, ChartLabel, } from "@patternfly/react-charts/dist/esm/victory/index.js";
-import { EmptyState, EmptyStateVariant, Flex, FlexItem, } from "@patternfly/react-core";
-import { InboxIcon } from "@patternfly/react-icons";
+import { ChartDonut, ChartLabel, ChartLegend, ChartTooltip, } from "@patternfly/react-charts/dist/esm/victory/index.js";
+import { Flex, FlexItem } from "@patternfly/react-core";
 import { useCallback, useMemo } from "react";
-const legendColors = ["#0066cc", "#5e40be", "#b6a6e9", "#b98412"];
+const legendColors = [
+    "#0066cc",
+    "#5e40be",
+    "#009596",
+    "#4cb140",
+    "#f0ab00",
+    "#b98412",
+    "#a30000",
+    "#b6a6e9",
+];
+/** Victory chart tooltips that respect PatternFly light/dark themes. */
+const themedChartTooltipStyle = {
+    fontSize: 9,
+    fill: "var(--pf-t--global--text--color--regular)",
+};
+const themedChartTooltipFlyoutStyle = {
+    stroke: "var(--pf-t--global--border--color--default)",
+    strokeWidth: 1,
+    fill: "var(--pf-t--global--background--color--floating--default)",
+};
+const themedChartTooltipFlyoutPadding = {
+    top: 6,
+    bottom: 6,
+    left: 10,
+    right: 10,
+};
 const styles = {
     legendIcon: css `
     margin-right: 4px;
@@ -56,21 +80,25 @@ const styles = {
     padding: var(--pf-t--global--spacer--ml);
   `,
 };
-export const MigrationDonutChart = ({ data, legend, customColors, height = 260, width = 420, title, subTitle, titleColor = "#000000", subTitleColor = "#000000", marginLeft = "0%", titleFontSize = 28, subTitleFontSize = 14, donutThickness = 45, padAngle = 1, tooltipLabelFormatter, onItemClick, onTitleClick, legendLabelFormatter, }) => {
+export const MigrationDonutChart = ({ data, legend, customColors, height = 260, width = 420, title, subTitle, titleColor = "var(--pf-t--global--text--color--regular)", subTitleColor = "var(--pf-t--global--text--color--subtle)", marginLeft = "0%", titleFontSize = 28, subTitleFontSize = 14, donutThickness = 45, padAngle = 1, tooltipLabelFormatter, onItemClick, onTitleClick, legendLabelFormatter, legendVariant = "html", legendWidth, itemsPerRow = 1, labelFontSize = 25, useThemedTooltip, }) => {
+    const showChartLegend = legendVariant === "chart";
+    const themedTooltipEnabled = useThemedTooltip ?? showChartLegend;
     const dynamicLegend = useMemo(() => {
-        return data.reduce((acc, current) => {
-            const key = `${current.legendCategory}`;
-            if (!acc.seen.has(key)) {
-                acc.seen.add(key);
-                const color = customColors?.[key] ??
-                    legendColors[(acc.seen.size - 1) % legendColors.length];
-                acc.result.push({ [key]: color });
+        const legendMap = {};
+        const seen = new Set();
+        for (const item of data) {
+            const key = item.legendCategory;
+            if (!seen.has(key)) {
+                seen.add(key);
+                legendMap[key] =
+                    customColors?.[key] ??
+                        legendColors[(seen.size - 1) % legendColors.length];
             }
-            return acc;
-        }, { seen: new Set(), result: [] }).result;
+        }
+        return legendMap;
     }, [data, customColors]);
-    const chartLegend = legend ? legend : Object.assign({}, ...dynamicLegend);
-    const getColor = useCallback((name) => chartLegend[name], [chartLegend]);
+    const chartLegend = legend ?? dynamicLegend;
+    const getColor = useCallback((name) => chartLegend[name] ?? legendColors[0], [chartLegend]);
     const chartData = useMemo(() => {
         return data.map((item) => ({
             x: item.name,
@@ -82,6 +110,29 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
     const colorScale = useMemo(() => {
         return chartData.map((item) => getColor(item.legendCategory));
     }, [chartData, getColor]);
+    const legendData = useMemo(() => {
+        return chartData.map((item) => ({
+            name: `${item.x} (${item.countDisplay})`,
+            symbol: { fill: getColor(item.legendCategory) },
+        }));
+    }, [chartData, getColor]);
+    const legendWidthValue = legendWidth ?? 800;
+    const legendX = useMemo(() => {
+        const symbolAndGap = 34;
+        const charWidth = labelFontSize * 0.55;
+        const itemWidths = legendData.map((d) => symbolAndGap + d.name.length * charWidth);
+        const numCols = Math.min(legendData.length, itemsPerRow);
+        const gutter = 16;
+        let contentWidth = (numCols - 1) * gutter;
+        for (let c = 0; c < numCols; c++) {
+            let maxW = 0;
+            for (let i = c; i < itemWidths.length; i += itemsPerRow) {
+                maxW = Math.max(maxW, itemWidths[i] ?? 0);
+            }
+            contentWidth += maxW;
+        }
+        return Math.max(0, (legendWidthValue - contentWidth) / 2);
+    }, [legendData, itemsPerRow, legendWidthValue, labelFontSize]);
     const innerRadius = useMemo(() => {
         const outerApprox = Math.min(width, height) / 2;
         const computed = outerApprox - donutThickness;
@@ -130,24 +181,42 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
             },
         ];
     }, [onItemClick, handleClick]);
+    const donutTooltip = useMemo(() => themedTooltipEnabled ? (_jsx(ChartTooltip, { style: themedChartTooltipStyle, flyoutStyle: themedChartTooltipFlyoutStyle, flyoutPadding: themedChartTooltipFlyoutPadding })) : undefined, [themedTooltipEnabled]);
+    const formatLabel = useCallback((datum) => {
+        const percent = totalY > 0 ? (Number(datum.y) / totalY) * 100 : 0;
+        return tooltipLabelFormatter
+            ? tooltipLabelFormatter({
+                datum: {
+                    x: datum.x,
+                    y: Number(datum.y),
+                    countDisplay: datum.countDisplay,
+                    legendCategory: datum.legendCategory,
+                },
+                percent,
+                total: totalY,
+            })
+            : `${datum.x}: ${datum.countDisplay ?? datum.y}`;
+    }, [tooltipLabelFormatter, totalY]);
     if (!data || data.length === 0) {
-        return (_jsx(EmptyState, { headingLevel: "h3", titleText: "No data available", icon: InboxIcon, variant: EmptyStateVariant.xs }));
+        return null;
     }
-    return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, className: `${onItemClick ? styles.cursorPointer : styles.cursorDefault} ${styles.chartContainer}`, children: [_jsxs("div", { className: styles.donutWrapper, children: [_jsx(ChartDonut, { ariaDesc: "Migration data donut chart", data: chartData, events: chartEvents, labels: ({ datum, }) => {
-                            const percent = totalY > 0 ? (Number(datum.y) / totalY) * 100 : 0;
-                            return tooltipLabelFormatter
-                                ? tooltipLabelFormatter({
-                                    datum: {
-                                        x: datum.x,
-                                        y: Number(datum.y),
-                                        countDisplay: datum.countDisplay,
-                                        legendCategory: datum.legendCategory,
-                                    },
-                                    percent,
-                                    total: totalY,
-                                })
-                                : `${datum.x}: ${datum.countDisplay ?? datum.y}`;
-                        }, colorScale: colorScale, constrainToVisibleArea: true, innerRadius: innerRadius, padAngle: padAngle, title: title, subTitle: subTitle, height: height, width: width, padding: {
+    const htmlLegend = (_jsx(Flex, { className: `${styles.legendContainer} ${css `margin-left: ${marginLeft};`}`, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsFlexStart" }, children: _jsx(Flex, { className: styles.legendInner, spaceItems: { default: "spaceItemsMd" }, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsCenter" }, flexWrap: { default: "wrap" }, children: data.map((item) => {
+                const label = legendLabelFormatter
+                    ? legendLabelFormatter({
+                        x: item.name,
+                        countDisplay: item.countDisplay,
+                    })
+                    : item.name;
+                const content = (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "10", height: "10", "aria-hidden": "true", className: styles.legendIcon, children: [_jsx("title", { children: "Legend color indicator" }), _jsx("rect", { width: "10", height: "10", fill: getColor(item.legendCategory) })] }), _jsx("span", { children: label })] }));
+                return (_jsx(FlexItem, { children: onItemClick ? (_jsx("button", { type: "button", onClick: () => onItemClick(item), className: styles.legendButton, children: content })) : (_jsx("span", { className: styles.legendLabel, children: content })) }, `${item.legendCategory}-${item.name}`));
+            }) }) }));
+    const chartLegendElement = (_jsx(FlexItem, { flex: { default: "flex_1" }, children: _jsx(Flex, { justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsCenter" }, children: _jsx(FlexItem, { children: _jsx(ChartLegend, { data: legendData, orientation: "horizontal", height: 200, width: legendWidthValue, x: legendX, itemsPerRow: itemsPerRow, style: {
+                        labels: {
+                            fontSize: labelFontSize,
+                            fill: "var(--pf-t--global--text--color--regular)",
+                        },
+                    } }) }) }) }));
+    return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, className: `${onItemClick ? styles.cursorPointer : styles.cursorDefault} ${styles.chartContainer}`, children: [_jsxs("div", { className: styles.donutWrapper, children: [_jsx(ChartDonut, { ariaDesc: "Migration data donut chart", data: chartData, events: chartEvents, labelComponent: donutTooltip, labels: ({ datum, }) => formatLabel(datum), colorScale: colorScale, constrainToVisibleArea: true, innerRadius: innerRadius, padAngle: padAngle, title: title, subTitle: subTitle, height: height, width: width, padding: {
                             bottom: 5,
                             left: 20,
                             right: 20,
@@ -158,7 +227,7 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
                                     fontSize: titleFontSize,
                                     fontWeight: "bold",
                                 },
-                            ] })) : undefined, subTitleComponent: subTitle ? (_jsx(ChartLabel, { style: [
+                            ] })) : undefined, subTitleComponent: subTitle ? (_jsx(ChartLabel, { dy: showChartLegend ? 7 : undefined, style: [
                                 {
                                     fill: subTitleColor,
                                     fontSize: subTitleFontSize,
@@ -178,15 +247,6 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
                                 e.preventDefault();
                                 onTitleClick();
                             }
-                        } }))] }), _jsx(Flex, { className: `${styles.legendContainer} ${css `margin-left: ${marginLeft};`}`, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsFlexStart" }, children: _jsx(Flex, { className: styles.legendInner, spaceItems: { default: "spaceItemsMd" }, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsCenter" }, flexWrap: { default: "wrap" }, children: data.map((item) => {
-                        const label = legendLabelFormatter
-                            ? legendLabelFormatter({
-                                x: item.name,
-                                countDisplay: item.countDisplay,
-                            })
-                            : item.name;
-                        const content = (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "10", height: "10", "aria-hidden": "true", className: styles.legendIcon, children: [_jsx("title", { children: "Legend color indicator" }), _jsx("rect", { width: "10", height: "10", fill: getColor(item.legendCategory) })] }), _jsx("span", { children: label })] }));
-                        return (_jsx(FlexItem, { children: onItemClick ? (_jsx("button", { type: "button", onClick: () => onItemClick(item), className: styles.legendButton, children: content })) : (_jsx("span", { className: styles.legendLabel, children: content })) }, `${item.legendCategory}-${item.name}`));
-                    }) }) })] }));
+                        } }))] }), showChartLegend ? chartLegendElement : htmlLegend] }));
 };
 export default MigrationDonutChart;

package/dist/charts/index.d.ts

@@ -1,2 +1,2 @@
-export { MigrationDonutChart, type MigrationDonutChartDatum, type MigrationDonutChartProps, } from "./MigrationDonutChart.js";
+export { MigrationDonutChart, type MigrationDonutChartDatum, type MigrationDonutChartLegendVariant, type MigrationDonutChartProps, } from "./MigrationDonutChart.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,GAC9B,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,gCAAgC,EACrC,KAAK,wBAAwB,GAC9B,MAAM,0BAA0B,CAAC"}

package/dist/forms/RadioButtonFormGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/RadioButtonFormGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,yBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,+BAoC3B"}
+{"version":3,"file":"RadioButtonFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/RadioButtonFormGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,yBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,+BA2C3B"}

package/dist/forms/RadioButtonFormGroup.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormGroup, Radio } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
 import FormFieldHelperText from "./FormFieldHelperText.js";
@@ -8,5 +8,5 @@ export default function RadioButtonFormGroup({ id, label, name, isRequired = fal
     const isTouched = methods.formState.touchedFields[name];
     const isSubmitted = methods.formState.isSubmitted;
     const showError = error && (isTouched || isSubmitted);
-    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, ...props, children: [_jsx(Controller, { name: name, control: methods.control, render: ({ field }) => (_jsx("div", { style: { display: "flex", gap: "16px" }, role: "radiogroup", children: options.map((option) => (_jsx(Radio, { id: option.id, name: name, label: option.label, isChecked: field.value === option.value, onChange: () => field.onChange(option.value), onBlur: field.onBlur }, option.value))) })) }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
+    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, role: "radiogroup", isInline: true, ...props, children: [_jsx(Controller, { name: name, control: methods.control, render: ({ field }) => (_jsx(_Fragment, { children: options.map((option) => (_jsx(Radio, { id: option.id, name: name, label: option.label, isChecked: field.value === option.value, onChange: () => field.onChange(option.value), onBlur: field.onBlur }, option.value))) })) }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
 }

package/dist/report/FeatureStatusBadge.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import type { FeatureStatus } from "./infrastructureSummaryModel.js";
+export interface FeatureStatusBadgeProps {
+    status: FeatureStatus;
+}
+export declare const FeatureStatusBadge: FC<FeatureStatusBadgeProps>;
+//# sourceMappingURL=FeatureStatusBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureStatusBadge.d.ts","sourceRoot":"","sources":["../../src/report/FeatureStatusBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkB1D,CAAC"}

package/dist/report/FeatureStatusBadge.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label } from "@patternfly/react-core";
+import { CheckCircleIcon, TimesCircleIcon } from "@patternfly/react-icons";
+export const FeatureStatusBadge = ({ status }) => {
+    if (status === "unknown") {
+        return _jsx("span", { children: "\u2014" });
+    }
+    if (status === "enabled") {
+        return (_jsx(Label, { color: "green", isCompact: true, icon: _jsx(CheckCircleIcon, {}), children: "Enabled" }));
+    }
+    return (_jsx(Label, { color: "grey", isCompact: true, icon: _jsx(TimesCircleIcon, {}), children: "Disabled" }));
+};
+FeatureStatusBadge.displayName = "FeatureStatusBadge";

package/dist/report/HostPowerStates.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+import type { MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+export interface HostPowerStatesProps {
+    hostPowerStates?: Record<string, number>;
+    isExportMode?: boolean;
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const HostPowerStates: FC<HostPowerStatesProps>;
+//# sourceMappingURL=HostPowerStates.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HostPowerStates.d.ts","sourceRoot":"","sources":["../../src/report/HostPowerStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AAKzF,MAAM,WAAW,oBAAoB;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwBpD,CAAC"}

package/dist/report/HostPowerStates.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ServerIcon } from "@patternfly/react-icons";
+import { useMemo } from "react";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { PowerStateCard } from "./PowerStateCard.js";
+import { buildHostPowerStateChart } from "./powerStates.js";
+export const HostPowerStates = ({ hostPowerStates, isExportMode = false, legendVariant, }) => {
+    const chart = useMemo(() => buildHostPowerStateChart(hostPowerStates), [hostPowerStates]);
+    return (_jsx(PowerStateCard, { id: "esxi-host-power-states", title: "ESXi host power states", icon: _jsx(ServerIcon, {}), emptyTitle: REPORT_CARD_EMPTY_STATE_TITLES.hostPowerStates, slices: chart.slices, legend: chart.legend, total: chart.total, subTitle: "Hosts", isExportMode: isExportMode, legendVariant: legendVariant }));
+};
+HostPowerStates.displayName = "HostPowerStates";

package/dist/report/InfrastructureSummary.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import type { InfrastructureSummaryModel } from "./infrastructureSummaryModel.js";
+export interface InfrastructureSummaryProps {
+    summary: InfrastructureSummaryModel;
+}
+export declare const InfrastructureSummary: FC<InfrastructureSummaryProps>;
+//# sourceMappingURL=InfrastructureSummary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfrastructureSummary.d.ts","sourceRoot":"","sources":["../../src/report/InfrastructureSummary.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAElF,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,0BAA0B,CAAC;CACrC;AAKD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAkChE,CAAC"}

package/dist/report/InfrastructureSummary.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardTitle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, } from "@patternfly/react-core";
+const formatCount = (value) => typeof value === "number" ? String(value) : "—";
+export const InfrastructureSummary = ({ summary, }) => (_jsxs(Card, { isFullHeight: true, id: "infrastructure-summary", children: [_jsx(CardTitle, { children: "Infrastructure summary" }), _jsx(CardBody, { children: _jsxs(DescriptionList, { isAutoFit: true, displaySize: "lg", children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "VMware version" }), _jsx(DescriptionListDescription, { children: summary.vmwareVersion })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Datacenters" }), _jsx(DescriptionListDescription, { children: formatCount(summary.datacenters) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "vCenters" }), _jsx(DescriptionListDescription, { children: formatCount(summary.vCenters) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "ESXi hosts" }), _jsx(DescriptionListDescription, { children: formatCount(summary.esxiHosts) })] })] }) })] }));
+InfrastructureSummary.displayName = "InfrastructureSummary";

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

@@ -1 +1 @@
-{"version":3,"file":"OSDistribution.d.ts","sourceRoot":"","sources":["../../src/report/OSDistribution.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAQrC,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAyB5B,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,CAgH1C,CAAC"}
+{"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"}

package/dist/report/OSDistribution.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { css } from "@emotion/css";
-import { Card, CardBody, CardTitle, Flex, FlexItem, MenuToggle, SearchInput, Select, SelectList, SelectOption, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
+import { Card, CardBody, CardTitle, Flex, FlexItem, MenuToggle, SearchInput, Select, SelectList, SelectOption, Stack, StackItem, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
 import { DesktopIcon } from "@patternfly/react-icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { CardEmptyState } from "./CardEmptyState.js";
@@ -13,19 +13,9 @@ import { OsNameCell } from "./OsUpgradeRecommendationPopover.js";
 import { getSupportTierLegendLabel, ORDERED_SUPPORT_TIERS, } from "./osSupportTier.js";
 import { SupportTierBadge } from "./SupportTierBadge.js";
 import { ALL_TIERS_FILTER, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
-const filterToolbarStyle = css `
-  padding-left: 0;
-  padding-right: 0;
-`;
-const filterItemStyle = css `
-  flex: 1 1 0;
-  min-width: 0;
-`;
-const vmsColumnStyle = css `
-  text-align: right;
-`;
 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, }) => {
@@ -33,5 +23,7 @@ export const OSBarChart = ({ osData, isExportMode = false, }) => {
     if (vm.tableRows.length === 0) {
         return (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.operatingSystems }));
     }
-    return (_jsxs(_Fragment, { children: [!isExportMode ? (_jsx(Toolbar, { className: filterToolbarStyle, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarItem, { className: filterItemStyle, 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, { className: filterItemStyle, 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, style: { width: "100%" }, 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, vm.showUpgradeNotice ? _jsx(OsUpgradeNotice, {}) : null, _jsx("div", { className: isExportMode ? undefined : tableScrollStyle, style: isExportMode ? undefined : { maxHeight: "350px" }, children: _jsxs(Table, { "aria-label": "Operating systems", variant: "compact", className: tableFullWidthStyle, children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "OS" }), _jsx(Th, { children: "Tier" }), _jsx(Th, { className: vmsColumnStyle, 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", className: vmsColumnStyle, children: row.count })] }, row.osName)))) })] }) })] }));
+    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)))) })] }) }) })] })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"OsSupportTiersHelpPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsSupportTiersHelpPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAwEhC,eAAO,MAAM,yBAAyB,EAAE,EASvC,CAAC"}
+{"version":3,"file":"OsSupportTiersHelpPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsSupportTiersHelpPopover.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAsChC,eAAO,MAAM,yBAAyB,EAAE,EASvC,CAAC"}

package/dist/report/OsSupportTiersHelpPopover.js

@@ -1,37 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { css } from "@emotion/css";
-import { Label } from "@patternfly/react-core";
+import { Button, Content, Label, Stack, StackItem, } from "@patternfly/react-core";
 import { ExternalLinkAltIcon } from "@patternfly/react-icons";
 import { getSupportTierBadgeColor, getSupportTierDefinition, getSupportTierLegendLabel, ORDERED_SUPPORT_TIERS, SUPPORT_TIER_LEARN_MORE_URL, } from "./osSupportTier.js";
 import PopoverIcon from "./PopoverIcon.js";
-const tierListStyle = css `
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pf-t--global--spacer--400);
-`;
-const tierItemStyle = css `
-  display: flex;
-  flex-direction: column;
-  gap: var(--pf-t--global--spacer--100);
-`;
-const tierBadgeStyle = css `
-  width: fit-content;
-  max-width: 100%;
-  align-self: flex-start;
-`;
-const tierDescriptionStyle = css `
-  margin: 0;
-  color: var(--pf-t--global--text--color--regular);
-`;
-const learnMoreLinkStyle = css `
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pf-t--global--spacer--xs);
-  margin-top: var(--pf-t--global--spacer--400);
-`;
-const OsSupportTiersHelpBody = () => (_jsxs("div", { children: [_jsx("ul", { className: tierListStyle, children: ORDERED_SUPPORT_TIERS.map((tier) => (_jsxs("li", { className: tierItemStyle, children: [_jsx(Label, { className: tierBadgeStyle, color: getSupportTierBadgeColor(tier), isCompact: true, children: getSupportTierLegendLabel(tier) }), _jsx("p", { className: tierDescriptionStyle, children: getSupportTierDefinition(tier) })] }, tier))) }), _jsxs("a", { className: learnMoreLinkStyle, href: SUPPORT_TIER_LEARN_MORE_URL, target: "_blank", rel: "noopener noreferrer", children: ["Learn more ", _jsx(ExternalLinkAltIcon, {})] })] }));
+const OsSupportTiersHelpBody = () => (_jsxs(Stack, { hasGutter: true, children: [ORDERED_SUPPORT_TIERS.map((tier) => (_jsxs(StackItem, { children: [_jsx(Label, { color: getSupportTierBadgeColor(tier), isCompact: true, children: getSupportTierLegendLabel(tier) }), _jsx(Content, { component: "p", children: getSupportTierDefinition(tier) })] }, tier))), _jsx(StackItem, { children: _jsx(Button, { variant: "link", isInline: true, component: "a", href: SUPPORT_TIER_LEARN_MORE_URL, target: "_blank", rel: "noopener noreferrer", icon: _jsx(ExternalLinkAltIcon, {}), iconPosition: "end", "aria-label": "Learn more about operating system support tiers", children: "Learn more" }) })] }));
 export const OsSupportTiersHelpPopover = () => (_jsx(PopoverIcon, { noVerticalAlign: true, maxWidth: "40rem", headerContent: "Guest OS support tiers", bodyContent: _jsx(OsSupportTiersHelpBody, {}), buttonOuiaId: "guest-os-support-tiers-help", "aria-label": "Guest OS support tiers help" }));
 OsSupportTiersHelpPopover.displayName = "OsSupportTiersHelpPopover";

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

@@ -1 +1 @@
-{"version":3,"file":"OsUpgradeNotice.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeNotice.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,eAAO,MAAM,eAAe,EAAE,EAiB7B,CAAC"}
+{"version":3,"file":"OsUpgradeNotice.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeNotice.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,eAAO,MAAM,eAAe,EAAE,EAgB7B,CAAC"}

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

@@ -0,0 +1,17 @@
+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;
+    isExportMode?: boolean;
+    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":"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"}

package/dist/report/PowerStateCard.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Card, CardBody, CardTitle } from "@patternfly/react-core";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.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)}%` })) })] }));
+PowerStateCard.displayName = "PowerStateCard";

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

package/dist/report/SupportTierBadge.js

@@ -2,17 +2,19 @@ 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 `
+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, style: { backgroundColor, color }, children: getSupportTierLegendLabel(tier) }));
+    return (_jsx("span", { className: exportBadgeStyle(backgroundColor, color), children: getSupportTierLegendLabel(tier) }));
 };
 export const SupportTierBadge = ({ tier, isExportMode = false, }) => {
     if (isExportMode) {

package/dist/report/VCenterClusterDetails.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+import type { ClusterDetailRow, ClusterDetailsModel } from "./infrastructureSummaryModel.js";
+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

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