@openshift-migration-advisor/shared-components 0.21.0-9429b0a115bf → 0.22.0-5dc08904d608

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":"AASA,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

@@ -1,10 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { css } from "@emotion/css";
-import { ChartDonut, ChartLabel } from "@patternfly/react-charts/victory";
-import { EmptyState, EmptyStateVariant, Flex, FlexItem, } from "@patternfly/react-core";
-import { InboxIcon } from "@patternfly/react-icons";
+// Workaround
+// Shared-components ships as strict ESM ("type": "module"), so webpack
+// enforces fully-specified imports in consuming apps. The documented
+// "@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, 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;
@@ -50,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,
@@ -76,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;
@@ -124,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,
@@ -152,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,
@@ -172,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/report/constants.d.ts

@@ -6,6 +6,18 @@
 export declare const chartColorSuccess: "#0066cc";
 export declare const chartColorFailure: "#dca614";
 export declare const REPORT_CARD_EMPTY_STATE_TITLES: {
+    readonly networks: "Network data not collected";
+    readonly nicCount: "NIC count data not collected";
+    readonly hosts: "Host data not collected";
+    readonly cpuMemory: "CPU and memory data not collected";
+    readonly cpu: "CPU data not collected";
+    readonly memory: "Memory data not collected";
+    readonly storage: "Storage data not collected";
+    readonly diskTypes: "Disk type data not collected";
+    readonly clusters: "Cluster data not collected";
+    readonly cpuOvercommitment: "CPU overcommitment data not collected";
     readonly operatingSystems: "Operating system data not collected";
+    readonly migrationStatus: "Migration status data not collected";
+    readonly issuesBreakdown: "Issues breakdown data not collected";
 };
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/report/constants.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,WAA6B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,WAA+B,CAAC;AAE9D,eAAO,MAAM,8BAA8B;;CAEjC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/report/constants.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,WAA6B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,WAA+B,CAAC;AAE9D,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;CAcjC,CAAC"}

package/dist/report/constants.js

@@ -1,5 +1,4 @@
-import { chart_color_blue_300 } from "@patternfly/react-tokens/dist/esm/chart_color_blue_300";
-import { chart_color_yellow_300 } from "@patternfly/react-tokens/dist/esm/chart_color_yellow_300";
+import { chart_color_blue_300, chart_color_yellow_300, } from "@patternfly/react-tokens";
 /**
  * PatternFly chart color semantics (https://www.patternfly.org/charts/colors-for-charts/design-guidelines/#best-practices):
  *   Blue  → success / migratable / supported
@@ -8,5 +7,17 @@ import { chart_color_yellow_300 } from "@patternfly/react-tokens/dist/esm/chart_
 export const chartColorSuccess = chart_color_blue_300.value;
 export const chartColorFailure = chart_color_yellow_300.value;
 export const REPORT_CARD_EMPTY_STATE_TITLES = {
+    networks: "Network data not collected",
+    nicCount: "NIC count data not collected",
+    hosts: "Host data not collected",
+    cpuMemory: "CPU and memory data not collected",
+    cpu: "CPU data not collected",
+    memory: "Memory data not collected",
+    storage: "Storage data not collected",
+    diskTypes: "Disk type data not collected",
+    clusters: "Cluster data not collected",
+    cpuOvercommitment: "CPU overcommitment data not collected",
     operatingSystems: "Operating system data not collected",
+    migrationStatus: "Migration status data not collected",
+    issuesBreakdown: "Issues breakdown data not collected",
 };

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

@@ -1 +1 @@
-{"version":3,"file":"osSupportTier.d.ts","sourceRoot":"","sources":["../../src/report/osSupportTier.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAUzD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE,eAAO,MAAM,2BAA2B,+CACM,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AASD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAK3D,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAShE,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAK9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,WAAW,EACX,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAMjC,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,4FAA4F;AAC5F,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,WAAW,EACX,qBAAqB,CAkBtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,WAAW,GAAG,SAAS,EACpC,SAAS,EAAE,OAAO,GACjB,WAAW,CAMb;AAED,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAC1C,OAAO,CAeT;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEjE;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEnE;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAElE;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,WAAW,GAChB,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAElC;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,WAAW,GAChB,qBAAqB,CAEvB"}
+{"version":3,"file":"osSupportTier.d.ts","sourceRoot":"","sources":["../../src/report/osSupportTier.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAYzD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE,eAAO,MAAM,2BAA2B,+CACM,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AASD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAK3D,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAShE,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAK9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,WAAW,EACX,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAMjC,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,4FAA4F;AAC5F,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,WAAW,EACX,qBAAqB,CAkBtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,WAAW,GAAG,SAAS,EACpC,SAAS,EAAE,OAAO,GACjB,WAAW,CAMb;AAED,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAC1C,OAAO,CAeT;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEjE;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEnE;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAElE;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,WAAW,GAChB,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAElC;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,WAAW,GAChB,qBAAqB,CAEvB"}

package/dist/report/osSupportTier.js

@@ -1,11 +1,4 @@
-import { t_color_blue_20 } from "@patternfly/react-tokens/dist/esm/t_color_blue_20";
-import { t_color_blue_60 } from "@patternfly/react-tokens/dist/esm/t_color_blue_60";
-import { t_color_green_20 } from "@patternfly/react-tokens/dist/esm/t_color_green_20";
-import { t_color_green_60 } from "@patternfly/react-tokens/dist/esm/t_color_green_60";
-import { t_color_orange_20 } from "@patternfly/react-tokens/dist/esm/t_color_orange_20";
-import { t_color_orange_60 } from "@patternfly/react-tokens/dist/esm/t_color_orange_60";
-import { t_color_yellow_20 } from "@patternfly/react-tokens/dist/esm/t_color_yellow_20";
-import { t_color_yellow_60 } from "@patternfly/react-tokens/dist/esm/t_color_yellow_60";
+import { t_color_blue_20, t_color_blue_60, t_color_green_20, t_color_green_60, t_color_orange_20, t_color_orange_60, t_color_yellow_20, t_color_yellow_60, } from "@patternfly/react-tokens";
 /**
  * Guest OS support tiers (matches agent-sdk / planner-sdk `OsInfoSupportTierEnum` values).
  * Defined locally so this package stays SDK-agnostic.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.21.0-9429b0a115bf",
+  "version": "0.22.0-5dc08904d608",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",
@@ -35,7 +35,8 @@
     "clean": "rm -rf node_modules dist .tmp",
     "check": "yarn run -T biome check .",
     "check:fix": "yarn run -T biome check --write .",
-    "test": "echo 'No tests configured for this package'",
+    "test": "yarn run -T vitest run",
+    "test:watch": "yarn run -T vitest",
     "typecheck": "yarn run -T tsc -b --noEmit"
   },
   "files": [

package/src/charts/MigrationDonutChart.tsx

@@ -1,13 +1,18 @@
 import { css } from "@emotion/css";
-import { ChartDonut, ChartLabel } from "@patternfly/react-charts/victory";
+// Workaround
+// Shared-components ships as strict ESM ("type": "module"), so webpack
+// enforces fully-specified imports in consuming apps. The documented
+// "@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 {
-  EmptyState,
-  EmptyStateVariant,
-  Flex,
-  FlexItem,
-} from "@patternfly/react-core";
-import { InboxIcon } from "@patternfly/react-icons";
-import type { FC } from "react";
+  ChartDonut,
+  ChartLabel,
+  ChartLegend,
+  ChartTooltip,
+} from "@patternfly/react-charts/dist/esm/victory/index.js";
+import { Flex, FlexItem } from "@patternfly/react-core";
+import type { FC, ReactElement } from "react";
 import { useCallback, useMemo } from "react";
 
 export interface MigrationDonutChartDatum {
@@ -21,6 +26,8 @@ export interface MigrationDonutChartDatum {
   networkNames?: string[];
 }
 
+export type MigrationDonutChartLegendVariant = "html" | "chart";
+
 export interface MigrationDonutChartProps {
   data: MigrationDonutChartDatum[];
   legend?: Record<string, string>;
@@ -46,16 +53,60 @@ 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;
 }
 
-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)",
+} as const;
+
+const themedChartTooltipFlyoutStyle = {
+  stroke: "var(--pf-t--global--border--color--default)",
+  strokeWidth: 1,
+  fill: "var(--pf-t--global--background--color--floating--default)",
+} as const;
+
+const themedChartTooltipFlyoutPadding = {
+  top: 6,
+  bottom: 6,
+  left: 10,
+  right: 10,
+} as const;
 
 const styles = {
   legendIcon: css`
@@ -111,8 +162,8 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
   width = 420,
   title,
   subTitle,
-  titleColor = "#000000",
-  subTitleColor = "#000000",
+  titleColor = "var(--pf-t--global--text--color--regular)",
+  subTitleColor = "var(--pf-t--global--text--color--subtle)",
   marginLeft = "0%",
   titleFontSize = 28,
   subTitleFontSize = 14,
@@ -122,30 +173,35 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
   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 });
-        }
-        return acc;
-      },
-      { seen: new Set(), result: [] } as {
-        seen: Set<string>;
-        result: Record<string, string>[];
-      },
-    ).result;
+    const legendMap: Record<string, string> = {};
+    const seen = new Set<string>();
+
+    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 legendMap;
   }, [data, customColors]);
 
-  const chartLegend = legend ? legend : Object.assign({}, ...dynamicLegend);
+  const chartLegend = legend ?? dynamicLegend;
   const getColor = useCallback(
-    (name: string): string => chartLegend[name],
+    (name: string): string => chartLegend[name] ?? legendColors[0],
     [chartLegend],
   );
 
@@ -162,6 +218,33 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
     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;
@@ -221,17 +304,132 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
     ];
   }, [onItemClick, handleClick]);
 
+  const donutTooltip = useMemo(
+    () =>
+      themedTooltipEnabled ? (
+        <ChartTooltip
+          style={themedChartTooltipStyle}
+          flyoutStyle={themedChartTooltipFlyoutStyle}
+          flyoutPadding={themedChartTooltipFlyoutPadding}
+        />
+      ) : undefined,
+    [themedTooltipEnabled],
+  );
+
+  const formatLabel = useCallback(
+    (datum: {
+      x: string;
+      y: number;
+      legendCategory: string;
+      countDisplay?: string | number;
+    }) => {
+      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 (
-      <EmptyState
-        headingLevel="h3"
-        titleText="No data available"
-        icon={InboxIcon}
-        variant={EmptyStateVariant.xs}
-      />
-    );
+    return null;
   }
 
+  const htmlLegend: ReactElement = (
+    <Flex
+      className={`${styles.legendContainer} ${css`margin-left: ${marginLeft};`}`}
+      justifyContent={{ default: "justifyContentCenter" }}
+      alignItems={{ default: "alignItemsFlexStart" }}
+    >
+      <Flex
+        className={styles.legendInner}
+        spaceItems={{ default: "spaceItemsMd" }}
+        justifyContent={{ default: "justifyContentCenter" }}
+        alignItems={{ default: "alignItemsCenter" }}
+        flexWrap={{ default: "wrap" }}
+      >
+        {data.map((item) => {
+          const label = legendLabelFormatter
+            ? legendLabelFormatter({
+                x: item.name,
+                countDisplay: item.countDisplay,
+              })
+            : item.name;
+
+          const content = (
+            <>
+              <svg
+                width="10"
+                height="10"
+                aria-hidden="true"
+                className={styles.legendIcon}
+              >
+                <title>Legend color indicator</title>
+                <rect
+                  width="10"
+                  height="10"
+                  fill={getColor(item.legendCategory)}
+                />
+              </svg>
+              <span>{label}</span>
+            </>
+          );
+
+          return (
+            <FlexItem key={`${item.legendCategory}-${item.name}`}>
+              {onItemClick ? (
+                <button
+                  type="button"
+                  onClick={() => onItemClick(item)}
+                  className={styles.legendButton}
+                >
+                  {content}
+                </button>
+              ) : (
+                <span className={styles.legendLabel}>{content}</span>
+              )}
+            </FlexItem>
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+
+  const chartLegendElement: ReactElement = (
+    <FlexItem flex={{ default: "flex_1" }}>
+      <Flex
+        justifyContent={{ default: "justifyContentCenter" }}
+        alignItems={{ default: "alignItemsCenter" }}
+      >
+        <FlexItem>
+          <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)",
+              },
+            }}
+          />
+        </FlexItem>
+      </Flex>
+    </FlexItem>
+  );
+
   return (
     <Flex
       direction={{ default: "column" }}
@@ -243,6 +441,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
           ariaDesc="Migration data donut chart"
           data={chartData}
           events={chartEvents}
+          labelComponent={donutTooltip}
           labels={({
             datum,
           }: {
@@ -252,21 +451,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
               legendCategory: string;
               countDisplay?: string | number;
             };
-          }) => {
-            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}`;
-          }}
+          }) => formatLabel(datum)}
           colorScale={colorScale}
           constrainToVisibleArea
           innerRadius={innerRadius}
@@ -297,6 +482,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
           subTitleComponent={
             subTitle ? (
               <ChartLabel
+                dy={showChartLegend ? 7 : undefined}
                 style={[
                   {
                     fill: subTitleColor,
@@ -334,63 +520,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
           />
         )}
       </div>
-      <Flex
-        className={`${styles.legendContainer} ${css`margin-left: ${marginLeft};`}`}
-        justifyContent={{ default: "justifyContentCenter" }}
-        alignItems={{ default: "alignItemsFlexStart" }}
-      >
-        <Flex
-          className={styles.legendInner}
-          spaceItems={{ default: "spaceItemsMd" }}
-          justifyContent={{ default: "justifyContentCenter" }}
-          alignItems={{ default: "alignItemsCenter" }}
-          flexWrap={{ default: "wrap" }}
-        >
-          {data.map((item) => {
-            const label = legendLabelFormatter
-              ? legendLabelFormatter({
-                  x: item.name,
-                  countDisplay: item.countDisplay,
-                })
-              : item.name;
-
-            const content = (
-              <>
-                <svg
-                  width="10"
-                  height="10"
-                  aria-hidden="true"
-                  className={styles.legendIcon}
-                >
-                  <title>Legend color indicator</title>
-                  <rect
-                    width="10"
-                    height="10"
-                    fill={getColor(item.legendCategory)}
-                  />
-                </svg>
-                <span>{label}</span>
-              </>
-            );
-
-            return (
-              <FlexItem key={`${item.legendCategory}-${item.name}`}>
-                {onItemClick ? (
-                  <button
-                    type="button"
-                    onClick={() => onItemClick(item)}
-                    className={styles.legendButton}
-                  >
-                    {content}
-                  </button>
-                ) : (
-                  <span className={styles.legendLabel}>{content}</span>
-                )}
-              </FlexItem>
-            );
-          })}
-        </Flex>
-      </Flex>
+      {showChartLegend ? chartLegendElement : htmlLegend}
     </Flex>
   );
 };

package/src/report/constants.ts

@@ -1,5 +1,7 @@
-import { chart_color_blue_300 } from "@patternfly/react-tokens/dist/esm/chart_color_blue_300";
-import { chart_color_yellow_300 } from "@patternfly/react-tokens/dist/esm/chart_color_yellow_300";
+import {
+  chart_color_blue_300,
+  chart_color_yellow_300,
+} from "@patternfly/react-tokens";
 
 /**
  * PatternFly chart color semantics (https://www.patternfly.org/charts/colors-for-charts/design-guidelines/#best-practices):
@@ -10,5 +12,17 @@ export const chartColorSuccess = chart_color_blue_300.value;
 export const chartColorFailure = chart_color_yellow_300.value;
 
 export const REPORT_CARD_EMPTY_STATE_TITLES = {
+  networks: "Network data not collected",
+  nicCount: "NIC count data not collected",
+  hosts: "Host data not collected",
+  cpuMemory: "CPU and memory data not collected",
+  cpu: "CPU data not collected",
+  memory: "Memory data not collected",
+  storage: "Storage data not collected",
+  diskTypes: "Disk type data not collected",
+  clusters: "Cluster data not collected",
+  cpuOvercommitment: "CPU overcommitment data not collected",
   operatingSystems: "Operating system data not collected",
+  migrationStatus: "Migration status data not collected",
+  issuesBreakdown: "Issues breakdown data not collected",
 } as const;

package/src/report/osSupportTier.ts

@@ -1,12 +1,14 @@
 import type { LabelProps } from "@patternfly/react-core";
-import { t_color_blue_20 } from "@patternfly/react-tokens/dist/esm/t_color_blue_20";
-import { t_color_blue_60 } from "@patternfly/react-tokens/dist/esm/t_color_blue_60";
-import { t_color_green_20 } from "@patternfly/react-tokens/dist/esm/t_color_green_20";
-import { t_color_green_60 } from "@patternfly/react-tokens/dist/esm/t_color_green_60";
-import { t_color_orange_20 } from "@patternfly/react-tokens/dist/esm/t_color_orange_20";
-import { t_color_orange_60 } from "@patternfly/react-tokens/dist/esm/t_color_orange_60";
-import { t_color_yellow_20 } from "@patternfly/react-tokens/dist/esm/t_color_yellow_20";
-import { t_color_yellow_60 } from "@patternfly/react-tokens/dist/esm/t_color_yellow_60";
+import {
+  t_color_blue_20,
+  t_color_blue_60,
+  t_color_green_20,
+  t_color_green_60,
+  t_color_orange_20,
+  t_color_orange_60,
+  t_color_yellow_20,
+  t_color_yellow_60,
+} from "@patternfly/react-tokens";
 
 /**
  * Guest OS support tiers (matches agent-sdk / planner-sdk `OsInfoSupportTierEnum` values).