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

package/dist/report/ClustersOverviewStyles.js

@@ -0,0 +1,101 @@
+import { css } from "@emotion/css";
+export const clustersOverviewStyles = {
+    titleRow: css `
+    width: 100%;
+  `,
+    cardSubtitle: css `
+    color: var(--pf-t--global--text--color--subtle);
+    font-size: 0.85rem;
+  `,
+    menuToggleMinWidth: css `
+    min-width: 250px;
+  `,
+    cpuOvercommitBoxes: css `
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    margin: 124px 0 16px;
+    flex-wrap: wrap;
+
+    @media (max-width: 1200px) {
+      margin: 72px 0 12px;
+      gap: 20px;
+    }
+
+    @media (max-width: 768px) {
+      margin: 40px 0 8px;
+      gap: 16px;
+    }
+  `,
+    cpuOvercommitBox: css `
+    color: #000;
+    min-width: 120px;
+    height: 64px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    padding: 0 16px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+    @media (max-width: 768px) {
+      min-width: 96px;
+      height: 56px;
+      font-size: 18px;
+      padding: 0 12px;
+      border-radius: 10px;
+    }
+
+    @media (max-width: 480px) {
+      min-width: 88px;
+      height: 48px;
+      font-size: 16px;
+      border-radius: 8px;
+    }
+  `,
+    cpuOvercommitLegend: css `
+    display: flex;
+    justify-content: center;
+    gap: 6px 24px;
+    flex-wrap: wrap;
+    margin-top: 20%;
+
+    @media (max-width: 1200px) {
+      margin-top: 20%;
+      gap: 6px 20px;
+    }
+
+    @media (max-width: 768px) {
+      margin-top: 20%;
+      gap: 6px 16px;
+    }
+  `,
+    cpuOvercommitLegendItem: css `
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  `,
+    cpuOvercommitLegendSwatch: css `
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+
+    @media (max-width: 768px) {
+      width: 10px;
+      height: 10px;
+    }
+  `,
+    cpuOvercommitLegendText: css `
+    font-size: 16px;
+
+    @media (max-width: 768px) {
+      font-size: 16px;
+    }
+
+    @media (max-width: 480px) {
+      font-size: 14px;
+    }
+  `,
+};

package/dist/report/CpuAndMemoryOverview.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+export interface CpuAndMemoryOverviewProps {
+    cpuTierDistribution?: Record<string, number>;
+    memoryTierDistribution?: Record<string, number>;
+    memoryTotalGB?: number;
+    cpuTotalCores?: number;
+    /**
+     * Memory-tier slice click. The argument is the distribution key.
+     * Agent-ui maps it to a VM memory filter; ui-app omits it.
+     */
+    onTierSelect?: (tierLabel: string) => void;
+    /** Center-title click. Agent-ui opens the VM list with no extra filters. */
+    onTitleClick?: () => void;
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const CpuAndMemoryOverview: FC<CpuAndMemoryOverviewProps>;
+//# sourceMappingURL=CpuAndMemoryOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CpuAndMemoryOverview.d.ts","sourceRoot":"","sources":["../../src/report/CpuAndMemoryOverview.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,yBAAyB;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAuFD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAiJ9D,CAAC"}

package/dist/report/CpuAndMemoryOverview.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { Card, CardBody, CardTitle, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { DataProcessorIcon } from "@patternfly/react-icons";
+import { useMemo, useState } from "react";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    memoryTiers: "VM distribution by memory size tier",
+    vcpuTiers: "VM distribution by vCPU count tier",
+};
+const VIEW_SUBTITLES = {
+    memoryTiers: "Memory size tiers",
+    vcpuTiers: "vCPU count tiers",
+};
+/**
+ * Categorical order shared by the agent-ui and ui-app CPU/memory donuts.
+ */
+const TIER_COLORS = [
+    "#0066cc",
+    "#5e40be",
+    "#b6a6e9",
+    "#73c5c5",
+    "#b98412",
+    "#28a745",
+    "#f0ad4e",
+    "#d9534f",
+    "#009596",
+    "#6a6e73",
+];
+const CHART_ID = "cpu-memory-overview";
+const CHART_TITLE = "CPU & memory";
+const cardSubtitle = css `
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+const menuToggleMinWidth = css `
+  min-width: 290px;
+`;
+const titleRow = css `
+  width: 100%;
+`;
+const isViewMode = (value) => value === "memoryTiers" || value === "vcpuTiers";
+const tierSortKey = (label) => {
+    const value = Number.parseInt(label.trim(), 10);
+    return Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
+};
+const hasUnit = (label, unit) => unit === "GB" ? /gb$/i.test(label) : /cores?$/i.test(label);
+const slicesFromDistribution = (distribution, unit) => Object.entries(distribution ?? {})
+    .filter(([, count]) => Number(count) > 0)
+    .sort(([left], [right]) => tierSortKey(left) - tierSortKey(right))
+    .map(([tier, count]) => {
+    const trimmed = tier.trim();
+    const name = hasUnit(trimmed, unit) ? trimmed : `${trimmed} ${unit}`;
+    const vmCount = Number(count);
+    return {
+        name,
+        count: vmCount,
+        countDisplay: `${vmCount} VMs`,
+        legendCategory: tier,
+    };
+});
+const legendFor = (categories) => {
+    const legend = {};
+    categories.forEach((category, index) => {
+        const color = TIER_COLORS[index % TIER_COLORS.length];
+        if (color) {
+            legend[category] = color;
+        }
+    });
+    return legend;
+};
+export const CpuAndMemoryOverview = ({ cpuTierDistribution, memoryTierDistribution, memoryTotalGB, cpuTotalCores, onTierSelect, onTitleClick, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("memoryTiers");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const memorySlices = useMemo(() => slicesFromDistribution(memoryTierDistribution, "GB"), [memoryTierDistribution]);
+    const vcpuSlices = useMemo(() => slicesFromDistribution(cpuTierDistribution, "cores"), [cpuTierDistribution]);
+    const activeSlices = viewMode === "memoryTiers" ? memorySlices : vcpuSlices;
+    const legend = useMemo(() => legendFor(activeSlices.map((slice) => slice.legendCategory)), [activeSlices]);
+    const totalVMs = useMemo(() => activeSlices.reduce((sum, slice) => sum + slice.count, 0), [activeSlices]);
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    const subTitle = viewMode === "memoryTiers"
+        ? typeof memoryTotalGB === "number"
+            ? `${memoryTotalGB.toLocaleString()} GB`
+            : undefined
+        : typeof cpuTotalCores === "number"
+            ? `${cpuTotalCores.toLocaleString()} Cores`
+            : undefined;
+    const emptyTitle = viewMode === "memoryTiers"
+        ? REPORT_CARD_EMPTY_STATE_TITLES.memory
+        : REPORT_CARD_EMPTY_STATE_TITLES.cpu;
+    return (_jsx(ChartExportSurface, { id: CHART_ID, title: chartTitle, exportViews: chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS), activeExportViewId: viewMode, onExportViewChange: (viewId) => {
+            if (isViewMode(viewId)) {
+                setViewMode(viewId);
+            }
+        }, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { className: titleRow, justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(DataProcessorIcon, {}), " ", CHART_TITLE] }), _jsx("div", { className: cardSubtitle, children: VIEW_SUBTITLES[viewMode] })] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: chartTitle, children: _jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: (_event, value) => {
+                                        if (isViewMode(value)) {
+                                            setViewMode(value);
+                                        }
+                                        setIsDropdownOpen(false);
+                                    }, onOpenChange: setIsDropdownOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen((open) => !open), isExpanded: isDropdownOpen, className: menuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "memoryTiers", children: VIEW_MODE_LABELS.memoryTiers }, "memoryTiers"), _jsx(DropdownItem, { value: "vcpuTiers", children: VIEW_MODE_LABELS.vcpuTiers }, "vcpuTiers")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: activeSlices.length === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: activeSlices, legend: legend, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, title: `${totalVMs} VMs`, subTitle: subTitle, subTitleColor: "var(--pf-t--global--text--color--subtle)", legendLabelFormatter: ({ x, countDisplay }) => `${x} (${countDisplay})`, tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%`, itemsPerRow: legendVariant === "chart"
+                            ? Math.ceil(activeSlices.length / 2)
+                            : undefined, labelFontSize: legendVariant === "chart" ? 18 : undefined, marginLeft: legendVariant === "chart" ? "52%" : undefined, onItemClick: viewMode === "memoryTiers" && onTierSelect
+                            ? (item) => onTierSelect(item.legendCategory)
+                            : undefined, onTitleClick: onTitleClick })) })] }) }));
+};
+CpuAndMemoryOverview.displayName = "CpuAndMemoryOverview";

package/dist/report/ErrorTable.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+/**
+ * Minimal shape of a migration issue consumed by {@link ErrorTable}. Declared
+ * locally so this package does not depend on a specific SDK (`agent-sdk` or
+ * `planner-sdk`); callers pass the subset of `MigrationIssue` fields read here.
+ */
+export interface MigrationIssueLike {
+    label: string;
+    assessment: string;
+    count: number;
+}
+export interface ErrorTableProps {
+    errors: MigrationIssueLike[];
+    /** Optional drill-down callback invoked with an issue's `label`. */
+    onConcernClick?: (concernLabel: string) => void;
+}
+export declare const ErrorTable: React.FC<ErrorTableProps>;
+//# sourceMappingURL=ErrorTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorTable.d.ts","sourceRoot":"","sources":["../../src/report/ErrorTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,oEAAoE;IACpE,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgDhD,CAAC"}

package/dist/report/ErrorTable.js

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

package/dist/report/HostPowerStates.d.ts

@@ -2,7 +2,6 @@ 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>;

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

@@ -1 +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"}
+{"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,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAsBpD,CAAC"}

package/dist/report/HostPowerStates.js

@@ -4,8 +4,8 @@ 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, }) => {
+export const HostPowerStates = ({ hostPowerStates, 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 }));
+    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", legendVariant: legendVariant }));
 };
 HostPowerStates.displayName = "HostPowerStates";

package/dist/report/HostsOverview.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+/** Smallest host shape this card reads. Apps pass SDK hosts structurally. */
+export interface HostLike {
+    model?: string | number;
+}
+export interface HostsOverviewProps {
+    hosts?: HostLike[];
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const HostsOverview: FC<HostsOverviewProps>;
+//# sourceMappingURL=HostsOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HostsOverview.d.ts","sourceRoot":"","sources":["../../src/report/HostsOverview.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAO1C,6EAA6E;AAC7E,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAuFD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwDhD,CAAC"}

package/dist/report/HostsOverview.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { Card, CardBody, CardTitle, Flex, FlexItem, } from "@patternfly/react-core";
+import { ServerIcon } from "@patternfly/react-icons";
+import { chart_color_blue_300, chart_color_green_300, chart_color_purple_100, chart_color_purple_300, chart_color_teal_200, chart_color_yellow_400, } from "@patternfly/react-tokens";
+import { useMemo } from "react";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const TOP_HOST_MODELS = 5;
+const OTHER_MODELS_LABEL = "Other models";
+const UNKNOWN_MODEL_LABEL = "Unknown model";
+const CHART_ID = "hosts-overview";
+const CHART_TITLE = "Host distribution by model";
+/**
+ * Same categorical order as the ui-app host-model donut, mapped onto
+ * PatternFly `chart_color_*` tokens (nearest token where the old hex
+ * was not itself a token).
+ */
+const HOST_MODEL_COLORS = [
+    chart_color_blue_300.value,
+    chart_color_purple_300.value,
+    chart_color_purple_100.value,
+    chart_color_teal_200.value,
+    chart_color_yellow_400.value,
+    chart_color_green_300.value,
+];
+const cardSubtitle = css `
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+const hostModelLabel = (model) => {
+    const raw = typeof model === "string"
+        ? model
+        : typeof model === "number"
+            ? String(model)
+            : "";
+    const trimmed = raw.trim();
+    return trimmed !== "" ? trimmed : UNKNOWN_MODEL_LABEL;
+};
+const buildHostModelDonut = (hosts) => {
+    const counts = new Map();
+    for (const host of hosts) {
+        const label = hostModelLabel(host?.model);
+        counts.set(label, (counts.get(label) ?? 0) + 1);
+    }
+    const entries = [...counts.entries()]
+        .map(([model, count]) => ({ model, count }))
+        .sort((a, b) => b.count - a.count);
+    const top = entries.slice(0, TOP_HOST_MODELS);
+    const restSum = entries
+        .slice(TOP_HOST_MODELS)
+        .reduce((sum, entry) => sum + entry.count, 0);
+    const slices = top.map((entry) => ({
+        name: entry.model,
+        count: entry.count,
+        countDisplay: `${entry.count} hosts`,
+        legendCategory: entry.model,
+    }));
+    if (restSum > 0) {
+        slices.push({
+            name: OTHER_MODELS_LABEL,
+            count: restSum,
+            countDisplay: `${restSum} hosts`,
+            legendCategory: OTHER_MODELS_LABEL,
+        });
+    }
+    const legend = {};
+    slices.forEach((slice, index) => {
+        const color = HOST_MODEL_COLORS[index % HOST_MODEL_COLORS.length];
+        if (color) {
+            legend[slice.legendCategory] = color;
+        }
+    });
+    return { slices, legend, totalHosts: hosts.length };
+};
+export const HostsOverview = ({ hosts, legendVariant = "html", }) => {
+    const { slices, legend, totalHosts } = useMemo(() => buildHostModelDonut(Array.isArray(hosts) ? hosts : []), [hosts]);
+    return (_jsx(ChartExportSurface, { id: CHART_ID, title: CHART_TITLE, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(ServerIcon, {}), " ", CHART_TITLE] }), _jsx("div", { className: cardSubtitle, children: "Top 5 models" })] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: CHART_TITLE })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: slices.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.hosts })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: slices, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, legend: legend, legendWidth: 680, title: `${totalHosts}`, subTitle: "Hosts", subTitleColor: "var(--pf-t--global--text--color--subtle)", itemsPerRow: 2, labelFontSize: 16, marginLeft: "0%", tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%` })) })] }) }));
+};
+HostsOverview.displayName = "HostsOverview";

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

@@ -1 +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"}
+{"version":3,"file":"InfrastructureSummary.d.ts","sourceRoot":"","sources":["../../src/report/InfrastructureSummary.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAElF,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,0BAA0B,CAAC;CACrC;AAQD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA4ChE,CAAC"}

package/dist/report/InfrastructureSummary.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardBody, CardTitle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, } from "@patternfly/react-core";
+import { Card, CardBody, CardTitle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Flex, FlexItem, } from "@patternfly/react-core";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
 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) })] })] }) })] }));
+const INFRA_CHART_ID = "infrastructure-summary";
+const INFRA_TITLE = "Infrastructure summary";
+export const InfrastructureSummary = ({ summary, }) => (_jsx(ChartExportSurface, { id: INFRA_CHART_ID, title: INFRA_TITLE, children: _jsxs(Card, { isFullHeight: true, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: INFRA_TITLE }), _jsx(ChartHeaderActions, { chartId: INFRA_CHART_ID, title: INFRA_TITLE })] }) }), _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/NetworkOverview.d.ts

@@ -0,0 +1,31 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+/** Network fields this card reads. Apps pass SDK networks structurally. */
+export interface NetworkLike {
+    vmsCount?: number;
+    vlanId?: string | number;
+}
+/** Infra fields this card reads. */
+export interface NetworkInfraLike {
+    networks?: NetworkLike[];
+}
+/** Deprecated NIC histogram used when `distributionByNicCount` is absent. */
+export interface NicCountHistogram {
+    data?: number[];
+    minValue?: number;
+    step?: number;
+}
+/** NIC summary fields this card reads from the VM resource breakdown. */
+export interface NicCountSummary {
+    total?: number;
+    histogram?: NicCountHistogram;
+}
+export interface NetworkOverviewProps {
+    infra?: NetworkInfraLike;
+    nicCount?: NicCountSummary;
+    distributionByNicCount?: Record<string, number>;
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const NetworkOverview: FC<NetworkOverviewProps>;
+//# sourceMappingURL=NetworkOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkOverview.d.ts","sourceRoot":"","sources":["../../src/report/NetworkOverview.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAQ1C,2EAA2E;AAC3E,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,oCAAoC;AACpC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,6EAA6E;AAC7E,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,yEAAyE;AACzE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAiND,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2HpD,CAAC"}