@openshift-migration-advisor/shared-components 0.25.0-883f4c9ae996 → 0.25.0-fce5293f01c1

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

package/dist/report/NetworkOverview.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { Card, CardBody, CardTitle, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { TopologyIcon } from "@patternfly/react-icons";
+import { chart_color_black_500, chart_color_blue_300, chart_color_green_300, chart_color_orange_100, chart_color_purple_100, chart_color_purple_300, chart_color_red_orange_200, chart_color_teal_200, chart_color_teal_400, chart_color_yellow_400, } from "@patternfly/react-tokens";
+import { useMemo, useState } from "react";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    networkDistribution: "VM distribution by network",
+    nicCount: "VM distribution by NIC count",
+};
+const TOP_NETWORKS = 4;
+const REST_OF_NETWORKS_LABEL = "Rest of networks";
+const CHART_ID = "network-overview";
+const CHART_TITLE = "Networks";
+/**
+ * Categorical order from the ui-app network donut, mapped onto PatternFly
+ * `chart_color_*` tokens (nearest token where the old hex was not a token).
+ */
+const NETWORK_COLORS = [
+    chart_color_blue_300.value,
+    chart_color_purple_300.value,
+    chart_color_purple_100.value,
+    chart_color_teal_200.value,
+    chart_color_yellow_400.value,
+    chart_color_green_300.value,
+    chart_color_orange_100.value,
+    chart_color_red_orange_200.value,
+    chart_color_teal_400.value,
+    chart_color_black_500.value,
+];
+const cardSubtitle = css `
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+const menuToggleMinWidth = css `
+  min-width: 250px;
+`;
+const titleRow = css `
+  width: 100%;
+`;
+const isViewMode = (value) => value === "networkDistribution" || value === "nicCount";
+const legendFor = (categories) => {
+    const legend = {};
+    categories.forEach((category, index) => {
+        const color = NETWORK_COLORS[index % NETWORK_COLORS.length];
+        if (color) {
+            legend[category] = color;
+        }
+    });
+    return legend;
+};
+const vlanLabel = (vlanId) => {
+    if (typeof vlanId !== "string" && typeof vlanId !== "number") {
+        return "-";
+    }
+    const value = String(vlanId).trim();
+    return value !== "" ? value : "-";
+};
+const buildNetworkDonut = (networks) => {
+    const items = (Array.isArray(networks) ? networks : [])
+        .map((network) => ({
+        vmsCount: typeof network?.vmsCount === "number" ? network.vmsCount : Number.NaN,
+        vlanId: vlanLabel(network?.vlanId),
+    }))
+        .filter((network) => Number.isFinite(network.vmsCount) && network.vmsCount >= 0)
+        .sort((a, b) => b.vmsCount - a.vmsCount);
+    const totalVMs = items.reduce((sum, network) => sum + network.vmsCount, 0);
+    const top = items.slice(0, TOP_NETWORKS);
+    const restSum = items
+        .slice(TOP_NETWORKS)
+        .reduce((sum, network) => sum + network.vmsCount, 0);
+    const vlanBySlice = {};
+    const slices = top.map((network, index) => {
+        const name = `Network ${index + 1}`;
+        vlanBySlice[name] = network.vlanId;
+        return {
+            name,
+            count: network.vmsCount,
+            countDisplay: `${network.vmsCount} VMs`,
+            legendCategory: name,
+        };
+    });
+    if (restSum > 0) {
+        slices.push({
+            name: REST_OF_NETWORKS_LABEL,
+            count: restSum,
+            countDisplay: `${restSum} VMs`,
+            legendCategory: REST_OF_NETWORKS_LABEL,
+        });
+        vlanBySlice[REST_OF_NETWORKS_LABEL] = "-";
+    }
+    return {
+        slices,
+        legend: legendFor(slices.map((slice) => slice.legendCategory)),
+        title: `${totalVMs}`,
+        vlanBySlice,
+    };
+};
+const nicBucketLabel = (bucket) => {
+    const count = Number.parseInt(bucket, 10);
+    if (bucket.endsWith("+")) {
+        return `${count}+ NIC`;
+    }
+    return count === 1 ? "1 NIC" : `${count} NIC`;
+};
+const compareNicBuckets = (a, b) => {
+    const aPlus = a.bucket.endsWith("+");
+    const bPlus = b.bucket.endsWith("+");
+    if (aPlus !== bPlus) {
+        return aPlus ? 1 : -1;
+    }
+    const aNum = Number.parseInt(a.bucket, 10);
+    const bNum = Number.parseInt(b.bucket, 10);
+    if (Number.isFinite(aNum) && Number.isFinite(bNum)) {
+        return aNum - bNum;
+    }
+    return a.bucket.localeCompare(b.bucket);
+};
+const slicesFromBuckets = (entries) => entries.map((entry) => {
+    const label = nicBucketLabel(entry.bucket);
+    return {
+        name: label,
+        count: entry.count,
+        countDisplay: `${entry.count} VMs`,
+        legendCategory: label,
+    };
+});
+const buildNicDonut = (distributionByNicCount, nicCount) => {
+    if (distributionByNicCount != null) {
+        const entries = Object.entries(distributionByNicCount)
+            .map(([bucket, value]) => ({
+            bucket,
+            count: Number.isFinite(Number(value)) ? Number(value) : 0,
+        }))
+            .filter((entry) => entry.count > 0)
+            .sort(compareNicBuckets);
+        const slices = slicesFromBuckets(entries);
+        const total = entries.reduce((sum, entry) => sum + entry.count, 0);
+        return {
+            slices,
+            legend: legendFor(slices.map((slice) => slice.legendCategory)),
+            title: `${total}`,
+        };
+    }
+    const histogram = nicCount?.histogram;
+    const data = Array.isArray(histogram?.data) ? histogram.data : [];
+    const minValue = typeof histogram?.minValue === "number" ? histogram.minValue : 0;
+    const step = typeof histogram?.step === "number" ? histogram.step : 1;
+    const buckets = data
+        .map((count, index) => ({
+        bucket: String(minValue + index * step),
+        count: Number(count) || 0,
+    }))
+        .filter((entry) => entry.count > 0)
+        .sort((a, b) => Number(a.bucket) - Number(b.bucket));
+    const slices = slicesFromBuckets(buckets);
+    const total = typeof nicCount?.total === "number"
+        ? nicCount.total
+        : buckets.reduce((sum, entry) => sum + entry.count, 0);
+    return {
+        slices,
+        legend: legendFor(slices.map((slice) => slice.legendCategory)),
+        title: `${total}`,
+    };
+};
+export const NetworkOverview = ({ infra, nicCount, distributionByNicCount, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("networkDistribution");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const networkChart = useMemo(() => buildNetworkDonut(infra?.networks), [infra?.networks]);
+    const nicChart = useMemo(() => buildNicDonut(distributionByNicCount, nicCount), [distributionByNicCount, nicCount]);
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    const activeChart = viewMode === "networkDistribution" ? networkChart : nicChart;
+    const emptyTitle = viewMode === "networkDistribution"
+        ? REPORT_CARD_EMPTY_STATE_TITLES.networks
+        : REPORT_CARD_EMPTY_STATE_TITLES.nicCount;
+    return (_jsx(ChartExportSurface, { id: CHART_ID, title: chartTitle, exportViews: chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS), activeExportViewId: viewMode, onExportViewChange: (viewId) => {
+            if (isViewMode(viewId)) {
+                setViewMode(viewId);
+            }
+        }, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { className: titleRow, justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(TopologyIcon, {}), " ", CHART_TITLE] }), viewMode === "networkDistribution" && (_jsx("div", { className: cardSubtitle, children: "Top 5 networks" }))] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: chartTitle, children: _jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: (_event, value) => {
+                                        if (isViewMode(value)) {
+                                            setViewMode(value);
+                                        }
+                                        setIsDropdownOpen(false);
+                                    }, onOpenChange: setIsDropdownOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen((open) => !open), isExpanded: isDropdownOpen, className: menuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "networkDistribution", children: VIEW_MODE_LABELS.networkDistribution }, "networkDistribution"), _jsx(DropdownItem, { value: "nicCount", children: VIEW_MODE_LABELS.nicCount }, "nicCount")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: activeChart.slices.length === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: activeChart.slices, legend: activeChart.legend, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, title: activeChart.title, subTitle: "VMs", subTitleColor: "var(--pf-t--global--text--color--subtle)", itemsPerRow: Math.ceil(activeChart.slices.length / 2), labelFontSize: 18, marginLeft: "0%", tooltipLabelFormatter: ({ datum, percent }) => {
+                            const summary = `${datum.countDisplay}\n${percent.toFixed(1)}%`;
+                            if (viewMode !== "networkDistribution") {
+                                return summary;
+                            }
+                            const vlan = networkChart.vlanBySlice[datum.legendCategory];
+                            return `${summary}\nVLAN: ${vlan ?? "-"}`;
+                        } })) })] }) }));
+};
+NetworkOverview.displayName = "NetworkOverview";

package/dist/report/index.d.ts

@@ -16,6 +16,7 @@ export { buildHtmlFromCharts, buildHtmlReport, escapeHtml, type HtmlReportImage,
 export { InfrastructureSummary, type InfrastructureSummaryProps, } from "./InfrastructureSummary.js";
 export type { ClusterDetailRow, ClusterDetailsModel, FeatureStatus, HostCapability, InfrastructureSummaryModel, InventoryCluster, InventoryDatastore, InventoryHost, InventoryInfra, InventoryNetwork, InventoryVms, NetworkLabel, } from "./infrastructureSummaryModel.js";
 export { booleanToFeatureStatus, buildClusterDetailRows, buildClusterDetails, buildInfrastructureSummary, countVCenters, formatVSphereVersion, hostCapabilityStatus, visibleNetworks, vsanStatus, } from "./infrastructureSummaryModel.js";
+export { type NetworkInfraLike, type NetworkLike, NetworkOverview, type NetworkOverviewProps, type NicCountHistogram, type NicCountSummary, } from "./NetworkOverview.js";
 export { OSBarChart, OSDistribution } from "./OSDistribution.js";
 export { OsSupportTiersHelpPopover } from "./OsSupportTiersHelpPopover.js";
 export { OsUpgradeNotice } from "./OsUpgradeNotice.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":"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"}

package/dist/report/index.js

@@ -15,6 +15,7 @@ export { HostPowerStates, } from "./HostPowerStates.js";
 export { buildHtmlFromCharts, buildHtmlReport, escapeHtml, } from "./htmlExport.js";
 export { InfrastructureSummary, } from "./InfrastructureSummary.js";
 export { booleanToFeatureStatus, buildClusterDetailRows, buildClusterDetails, buildInfrastructureSummary, countVCenters, formatVSphereVersion, hostCapabilityStatus, visibleNetworks, vsanStatus, } from "./infrastructureSummaryModel.js";
+export { NetworkOverview, } from "./NetworkOverview.js";
 export { OSBarChart, OSDistribution } from "./OSDistribution.js";
 export { OsSupportTiersHelpPopover } from "./OsSupportTiersHelpPopover.js";
 export { OsUpgradeNotice } from "./OsUpgradeNotice.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.25.0-883f4c9ae996",
+  "version": "0.25.0-fce5293f01c1",
   "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",

package/src/report/NetworkOverview.tsx

@@ -0,0 +1,405 @@
+import { css } from "@emotion/css";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  type MenuToggleElement,
+} from "@patternfly/react-core";
+import { TopologyIcon } from "@patternfly/react-icons";
+import {
+  chart_color_black_500,
+  chart_color_blue_300,
+  chart_color_green_300,
+  chart_color_orange_100,
+  chart_color_purple_100,
+  chart_color_purple_300,
+  chart_color_red_orange_200,
+  chart_color_teal_200,
+  chart_color_teal_400,
+  chart_color_yellow_400,
+} from "@patternfly/react-tokens";
+import type { FC, Ref } from "react";
+import { useMemo, useState } from "react";
+import {
+  MigrationDonutChart,
+  type MigrationDonutChartDatum,
+  type MigrationDonutChartLegendVariant,
+} 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";
+
+/** 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;
+}
+
+type ViewMode = "networkDistribution" | "nicCount";
+
+const VIEW_MODE_LABELS: Record<ViewMode, string> = {
+  networkDistribution: "VM distribution by network",
+  nicCount: "VM distribution by NIC count",
+};
+
+const TOP_NETWORKS = 4;
+const REST_OF_NETWORKS_LABEL = "Rest of networks";
+const CHART_ID = "network-overview";
+const CHART_TITLE = "Networks";
+
+/**
+ * Categorical order from the ui-app network donut, mapped onto PatternFly
+ * `chart_color_*` tokens (nearest token where the old hex was not a token).
+ */
+const NETWORK_COLORS = [
+  chart_color_blue_300.value,
+  chart_color_purple_300.value,
+  chart_color_purple_100.value,
+  chart_color_teal_200.value,
+  chart_color_yellow_400.value,
+  chart_color_green_300.value,
+  chart_color_orange_100.value,
+  chart_color_red_orange_200.value,
+  chart_color_teal_400.value,
+  chart_color_black_500.value,
+];
+
+const cardSubtitle = css`
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+
+const menuToggleMinWidth = css`
+  min-width: 250px;
+`;
+
+const titleRow = css`
+  width: 100%;
+`;
+
+const isViewMode = (value: string | number | undefined): value is ViewMode =>
+  value === "networkDistribution" || value === "nicCount";
+
+const legendFor = (categories: string[]): Record<string, string> => {
+  const legend: Record<string, string> = {};
+  categories.forEach((category, index) => {
+    const color = NETWORK_COLORS[index % NETWORK_COLORS.length];
+    if (color) {
+      legend[category] = color;
+    }
+  });
+  return legend;
+};
+
+const vlanLabel = (vlanId: NetworkLike["vlanId"]): string => {
+  if (typeof vlanId !== "string" && typeof vlanId !== "number") {
+    return "-";
+  }
+  const value = String(vlanId).trim();
+  return value !== "" ? value : "-";
+};
+
+const buildNetworkDonut = (
+  networks: NetworkLike[] | undefined,
+): {
+  slices: MigrationDonutChartDatum[];
+  legend: Record<string, string>;
+  title: string;
+  vlanBySlice: Record<string, string>;
+} => {
+  const items = (Array.isArray(networks) ? networks : [])
+    .map((network) => ({
+      vmsCount:
+        typeof network?.vmsCount === "number" ? network.vmsCount : Number.NaN,
+      vlanId: vlanLabel(network?.vlanId),
+    }))
+    .filter(
+      (network) => Number.isFinite(network.vmsCount) && network.vmsCount >= 0,
+    )
+    .sort((a, b) => b.vmsCount - a.vmsCount);
+
+  const totalVMs = items.reduce((sum, network) => sum + network.vmsCount, 0);
+  const top = items.slice(0, TOP_NETWORKS);
+  const restSum = items
+    .slice(TOP_NETWORKS)
+    .reduce((sum, network) => sum + network.vmsCount, 0);
+
+  const vlanBySlice: Record<string, string> = {};
+  const slices: MigrationDonutChartDatum[] = top.map((network, index) => {
+    const name = `Network ${index + 1}`;
+    vlanBySlice[name] = network.vlanId;
+    return {
+      name,
+      count: network.vmsCount,
+      countDisplay: `${network.vmsCount} VMs`,
+      legendCategory: name,
+    };
+  });
+
+  if (restSum > 0) {
+    slices.push({
+      name: REST_OF_NETWORKS_LABEL,
+      count: restSum,
+      countDisplay: `${restSum} VMs`,
+      legendCategory: REST_OF_NETWORKS_LABEL,
+    });
+    vlanBySlice[REST_OF_NETWORKS_LABEL] = "-";
+  }
+
+  return {
+    slices,
+    legend: legendFor(slices.map((slice) => slice.legendCategory)),
+    title: `${totalVMs}`,
+    vlanBySlice,
+  };
+};
+
+const nicBucketLabel = (bucket: string): string => {
+  const count = Number.parseInt(bucket, 10);
+  if (bucket.endsWith("+")) {
+    return `${count}+ NIC`;
+  }
+  return count === 1 ? "1 NIC" : `${count} NIC`;
+};
+
+const compareNicBuckets = (
+  a: { bucket: string },
+  b: { bucket: string },
+): number => {
+  const aPlus = a.bucket.endsWith("+");
+  const bPlus = b.bucket.endsWith("+");
+  if (aPlus !== bPlus) {
+    return aPlus ? 1 : -1;
+  }
+  const aNum = Number.parseInt(a.bucket, 10);
+  const bNum = Number.parseInt(b.bucket, 10);
+  if (Number.isFinite(aNum) && Number.isFinite(bNum)) {
+    return aNum - bNum;
+  }
+  return a.bucket.localeCompare(b.bucket);
+};
+
+const slicesFromBuckets = (
+  entries: { bucket: string; count: number }[],
+): MigrationDonutChartDatum[] =>
+  entries.map((entry) => {
+    const label = nicBucketLabel(entry.bucket);
+    return {
+      name: label,
+      count: entry.count,
+      countDisplay: `${entry.count} VMs`,
+      legendCategory: label,
+    };
+  });
+
+const buildNicDonut = (
+  distributionByNicCount: Record<string, number> | undefined,
+  nicCount: NicCountSummary | undefined,
+): {
+  slices: MigrationDonutChartDatum[];
+  legend: Record<string, string>;
+  title: string;
+} => {
+  if (distributionByNicCount != null) {
+    const entries = Object.entries(distributionByNicCount)
+      .map(([bucket, value]) => ({
+        bucket,
+        count: Number.isFinite(Number(value)) ? Number(value) : 0,
+      }))
+      .filter((entry) => entry.count > 0)
+      .sort(compareNicBuckets);
+    const slices = slicesFromBuckets(entries);
+    const total = entries.reduce((sum, entry) => sum + entry.count, 0);
+    return {
+      slices,
+      legend: legendFor(slices.map((slice) => slice.legendCategory)),
+      title: `${total}`,
+    };
+  }
+
+  const histogram = nicCount?.histogram;
+  const data = Array.isArray(histogram?.data) ? histogram.data : [];
+  const minValue =
+    typeof histogram?.minValue === "number" ? histogram.minValue : 0;
+  const step = typeof histogram?.step === "number" ? histogram.step : 1;
+  const buckets = data
+    .map((count, index) => ({
+      bucket: String(minValue + index * step),
+      count: Number(count) || 0,
+    }))
+    .filter((entry) => entry.count > 0)
+    .sort((a, b) => Number(a.bucket) - Number(b.bucket));
+  const slices = slicesFromBuckets(buckets);
+  const total =
+    typeof nicCount?.total === "number"
+      ? nicCount.total
+      : buckets.reduce((sum, entry) => sum + entry.count, 0);
+
+  return {
+    slices,
+    legend: legendFor(slices.map((slice) => slice.legendCategory)),
+    title: `${total}`,
+  };
+};
+
+export const NetworkOverview: FC<NetworkOverviewProps> = ({
+  infra,
+  nicCount,
+  distributionByNicCount,
+  legendVariant = "html",
+}) => {
+  const [viewMode, setViewMode] = useState<ViewMode>("networkDistribution");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const networkChart = useMemo(
+    () => buildNetworkDonut(infra?.networks),
+    [infra?.networks],
+  );
+  const nicChart = useMemo(
+    () => buildNicDonut(distributionByNicCount, nicCount),
+    [distributionByNicCount, nicCount],
+  );
+
+  const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+  const activeChart =
+    viewMode === "networkDistribution" ? networkChart : nicChart;
+  const emptyTitle =
+    viewMode === "networkDistribution"
+      ? REPORT_CARD_EMPTY_STATE_TITLES.networks
+      : REPORT_CARD_EMPTY_STATE_TITLES.nicCount;
+
+  return (
+    <ChartExportSurface
+      id={CHART_ID}
+      title={chartTitle}
+      exportViews={chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS)}
+      activeExportViewId={viewMode}
+      onExportViewChange={(viewId) => {
+        if (isViewMode(viewId)) {
+          setViewMode(viewId);
+        }
+      }}
+    >
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            className={titleRow}
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <div>
+                <div>
+                  <TopologyIcon /> {CHART_TITLE}
+                </div>
+                {viewMode === "networkDistribution" && (
+                  <div className={cardSubtitle}>Top 5 networks</div>
+                )}
+              </div>
+            </FlexItem>
+            <ChartHeaderActions chartId={CHART_ID} title={chartTitle}>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={(_event, value) => {
+                  if (isViewMode(value)) {
+                    setViewMode(value);
+                  }
+                  setIsDropdownOpen(false);
+                }}
+                onOpenChange={setIsDropdownOpen}
+                toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => setIsDropdownOpen((open) => !open)}
+                    isExpanded={isDropdownOpen}
+                    className={menuToggleMinWidth}
+                  >
+                    {VIEW_MODE_LABELS[viewMode]}
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>
+                  <DropdownItem
+                    value="networkDistribution"
+                    key="networkDistribution"
+                  >
+                    {VIEW_MODE_LABELS.networkDistribution}
+                  </DropdownItem>
+                  <DropdownItem value="nicCount" key="nicCount">
+                    {VIEW_MODE_LABELS.nicCount}
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            </ChartHeaderActions>
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {activeChart.slices.length === 0 ? (
+            <CardEmptyState title={emptyTitle} />
+          ) : (
+            <MigrationDonutChart
+              legendVariant={legendVariant}
+              data={activeChart.slices}
+              legend={activeChart.legend}
+              height={300}
+              width={420}
+              donutThickness={18}
+              titleFontSize={34}
+              title={activeChart.title}
+              subTitle="VMs"
+              subTitleColor="var(--pf-t--global--text--color--subtle)"
+              itemsPerRow={Math.ceil(activeChart.slices.length / 2)}
+              labelFontSize={18}
+              marginLeft="0%"
+              tooltipLabelFormatter={({ datum, percent }) => {
+                const summary = `${datum.countDisplay}\n${percent.toFixed(1)}%`;
+                if (viewMode !== "networkDistribution") {
+                  return summary;
+                }
+                const vlan = networkChart.vlanBySlice[datum.legendCategory];
+                return `${summary}\nVLAN: ${vlan ?? "-"}`;
+              }}
+            />
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+NetworkOverview.displayName = "NetworkOverview";

package/src/report/__tests__/NetworkOverview.test.tsx

@@ -0,0 +1,269 @@
+import "@testing-library/jest-dom";
+import {
+  chart_color_black_500,
+  chart_color_blue_300,
+  chart_color_green_300,
+  chart_color_orange_100,
+  chart_color_purple_100,
+  chart_color_purple_300,
+  chart_color_red_orange_200,
+  chart_color_teal_200,
+  chart_color_teal_400,
+  chart_color_yellow_400,
+} from "@patternfly/react-tokens";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import { NetworkOverview } from "../NetworkOverview.js";
+
+const donutProps = vi.hoisted(() => ({
+  current: null as MigrationDonutChartProps | null,
+}));
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: (props: MigrationDonutChartProps): JSX.Element => {
+    donutProps.current = props;
+    return (
+      <div data-testid="network-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected a network donut to render");
+  }
+  return props;
+};
+
+describe("NetworkOverview", () => {
+  it("shows the network empty state when no networks were collected", () => {
+    render(<NetworkOverview />);
+
+    expect(screen.getByText("Networks")).toBeInTheDocument();
+    expect(screen.getByText("Top 5 networks")).toBeInTheDocument();
+    expect(screen.getByText("Network data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("network-donut")).not.toBeInTheDocument();
+  });
+
+  it("keeps the top 4 networks and rolls the rest into one slice", () => {
+    render(
+      <NetworkOverview
+        infra={{
+          networks: [
+            { vmsCount: 10, vlanId: "100" },
+            { vmsCount: 8, vlanId: 200 },
+            { vmsCount: 6, vlanId: "   " },
+            { vmsCount: 4 },
+            { vmsCount: 3, vlanId: "9" },
+            { vmsCount: 1, vlanId: "8" },
+            { vmsCount: Number.NaN },
+          ],
+        }}
+      />,
+    );
+
+    const props = renderedDonut();
+    expect(props.title).toBe("32");
+    expect(props.subTitle).toBe("VMs");
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["Network 1", 10],
+      ["Network 2", 8],
+      ["Network 3", 6],
+      ["Network 4", 4],
+      ["Rest of networks", 4],
+    ]);
+    expect(props.legend).toEqual({
+      "Network 1": chart_color_blue_300.value,
+      "Network 2": chart_color_purple_300.value,
+      "Network 3": chart_color_purple_100.value,
+      "Network 4": chart_color_teal_200.value,
+      "Rest of networks": chart_color_yellow_400.value,
+    });
+    expect(props.legendVariant).toBe("html");
+    expect(props.height).toBe(300);
+    expect(props.width).toBe(420);
+    expect(props.donutThickness).toBe(18);
+    expect(props.titleFontSize).toBe(34);
+    expect(props.labelFontSize).toBe(18);
+    expect(props.itemsPerRow).toBe(3);
+    expect(props.marginLeft).toBe("0%");
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "Network 1",
+          y: 10,
+          countDisplay: "10 VMs",
+          legendCategory: "Network 1",
+        },
+        percent: 31.25,
+        total: 32,
+      }),
+    ).toBe("10 VMs\n31.3%\nVLAN: 100");
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "Network 2",
+          y: 8,
+          countDisplay: "8 VMs",
+          legendCategory: "Network 2",
+        },
+        percent: 25,
+        total: 32,
+      }),
+    ).toBe("8 VMs\n25.0%\nVLAN: 200");
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "Rest of networks",
+          y: 4,
+          countDisplay: "4 VMs",
+          legendCategory: "Rest of networks",
+        },
+        percent: 12.5,
+        total: 32,
+      }),
+    ).toBe("4 VMs\n12.5%\nVLAN: -");
+  });
+
+  it("switches to NIC count and falls back to the histogram", async () => {
+    const user = userEvent.setup();
+    render(
+      <NetworkOverview
+        legendVariant="chart"
+        nicCount={{
+          total: 9,
+          histogram: { minValue: 1, step: 1, data: [4, 0, 5] },
+        }}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "VM distribution by network" }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", { name: "VM distribution by NIC count" }),
+    );
+
+    expect(screen.queryByText("Top 5 networks")).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "VM distribution by NIC count" }),
+    ).toBeInTheDocument();
+
+    const props = renderedDonut();
+    expect(props.legendVariant).toBe("chart");
+    expect(props.title).toBe("9");
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["1 NIC", 4],
+      ["3 NIC", 5],
+    ]);
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "1 NIC",
+          y: 4,
+          countDisplay: "4 VMs",
+          legendCategory: "1 NIC",
+        },
+        percent: 44.444,
+        total: 9,
+      }),
+    ).toBe("4 VMs\n44.4%");
+  });
+
+  it("plots distributionByNicCount ahead of the deprecated histogram", async () => {
+    const user = userEvent.setup();
+    render(
+      <NetworkOverview
+        distributionByNicCount={{ "2": 5, "4+": 2, "1": 3, "0": 1 }}
+        nicCount={{
+          total: 99,
+          histogram: { minValue: 1, step: 1, data: [9] },
+        }}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "VM distribution by network" }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", { name: "VM distribution by NIC count" }),
+    );
+
+    const props = renderedDonut();
+    expect(props.title).toBe("11");
+    expect(props.data.map((slice) => slice.name)).toEqual([
+      "0 NIC",
+      "1 NIC",
+      "2 NIC",
+      "4+ NIC",
+    ]);
+    expect(props.legend).toEqual({
+      "0 NIC": chart_color_blue_300.value,
+      "1 NIC": chart_color_purple_300.value,
+      "2 NIC": chart_color_purple_100.value,
+      "4+ NIC": chart_color_teal_200.value,
+    });
+  });
+
+  it("shows the NIC empty state when the selected distribution is empty", async () => {
+    const user = userEvent.setup();
+    render(<NetworkOverview distributionByNicCount={{}} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "VM distribution by network" }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", { name: "VM distribution by NIC count" }),
+    );
+
+    expect(
+      screen.getByText("NIC count data not collected"),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("network-donut")).not.toBeInTheDocument();
+  });
+
+  it("uses the extended palette when there are more NIC buckets than base colors", async () => {
+    const user = userEvent.setup();
+    render(
+      <NetworkOverview
+        distributionByNicCount={{
+          "0": 1,
+          "1": 1,
+          "2": 1,
+          "3": 1,
+          "4": 1,
+          "5": 1,
+          "6": 1,
+          "7": 1,
+          "8": 1,
+          "9": 1,
+        }}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "VM distribution by network" }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", { name: "VM distribution by NIC count" }),
+    );
+
+    expect(renderedDonut().legend).toMatchObject({
+      "5 NIC": chart_color_green_300.value,
+      "6 NIC": chart_color_orange_100.value,
+      "7 NIC": chart_color_red_orange_200.value,
+      "8 NIC": chart_color_teal_400.value,
+      "9 NIC": chart_color_black_500.value,
+    });
+  });
+});

package/src/report/index.ts

@@ -108,6 +108,14 @@ export {
   visibleNetworks,
   vsanStatus,
 } from "./infrastructureSummaryModel.js";
+export {
+  type NetworkInfraLike,
+  type NetworkLike,
+  NetworkOverview,
+  type NetworkOverviewProps,
+  type NicCountHistogram,
+  type NicCountSummary,
+} from "./NetworkOverview.js";
 export { OSBarChart, OSDistribution } from "./OSDistribution.js";
 export { OsSupportTiersHelpPopover } from "./OsSupportTiersHelpPopover.js";
 export { OsUpgradeNotice } from "./OsUpgradeNotice.js";