@openshift-migration-advisor/shared-components 0.25.0-fce5293f01c1 → 0.27.0

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

@@ -0,0 +1,14 @@
+import type React from "react";
+export interface ReportTableProps<DataItem> {
+    columns: string[];
+    data: DataItem[];
+    fields: Array<keyof DataItem>;
+    caption?: string;
+    onRowClick?: (item: DataItem) => void;
+    clickableFields?: Array<keyof DataItem>;
+}
+export declare function ReportTable<DataItem>(props: ReportTableProps<DataItem>): React.ReactNode;
+export declare namespace ReportTable {
+    var displayName: string;
+}
+//# sourceMappingURL=ReportTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReportTable.d.ts","sourceRoot":"","sources":["../../src/report/ReportTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAgB,CAAC,QAAQ;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,MAAM,EAAE,KAAK,CAAC,MAAM,QAAQ,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,QAAQ,CAAC,CAAC;CACzC;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAClC,KAAK,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GAChC,KAAK,CAAC,SAAS,CA8DjB;yBAhEe,WAAW"}

package/dist/report/ReportTable.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@patternfly/react-core";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import { tableFullWidthStyle } from "./dashboardStyles.js";
+export function ReportTable(props) {
+    const { columns, data, fields, caption, onRowClick, clickableFields = [], } = props;
+    const renderCell = (item, field) => {
+        const value = item[field];
+        if (value === "" || value == null) {
+            return "-";
+        }
+        if (typeof value === "boolean") {
+            return value ? "True" : "False";
+        }
+        // Make field clickable if specified
+        if (clickableFields.includes(field) && onRowClick) {
+            return (_jsx(Button, { variant: "link", isInline: true, onClick: () => onRowClick(item), style: { padding: 0, fontSize: "inherit" }, children: value }));
+        }
+        return value;
+    };
+    return (_jsxs(Table, { variant: "compact", borders: false, className: tableFullWidthStyle, children: [caption && _jsx("caption", { children: caption }), _jsx(Thead, { children: _jsx(Tr, { children: columns.map((name) => (_jsx(Th, { children: name }, name))) }) }), _jsx(Tbody, { children: data.map((item) => (_jsx(Tr, { children: fields.map((f) => (_jsx(Td, { children: renderCell(item, f) }, String(f)))) }, `row-${String(item[fields[0]])}`))) })] }));
+}
+ReportTable.displayName = "ReportTable";

package/dist/report/WarningsTable.d.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+import type { MigrationIssueLike } from "./ErrorTable.js";
+export interface WarningsTableProps {
+    warnings: MigrationIssueLike[];
+    /** Optional drill-down callback invoked with an issue's `label`. */
+    onConcernClick?: (concernLabel: string) => void;
+}
+export declare const WarningsTable: React.FC<WarningsTableProps>;
+//# sourceMappingURL=WarningsTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WarningsTable.d.ts","sourceRoot":"","sources":["../../src/report/WarningsTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,oEAAoE;IACpE,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgDtD,CAAC"}

package/dist/report/WarningsTable.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 { ExclamationTriangleIcon } 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 WarningsTable = ({ warnings, onConcernClick, }) => {
+    const handleRowClick = (issue) => {
+        if (issue.label && onConcernClick) {
+            onConcernClick(issue.label);
+        }
+    };
+    const chartId = "warnings-table";
+    const chartTitle = "Warnings";
+    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: "warning", children: _jsx(ExclamationTriangleIcon, {}) }), " ", "Warnings"] }), _jsx(ChartHeaderActions, { chartId: chartId, title: chartTitle })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: warnings.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.warnings })) : (_jsx("div", { children: _jsx(ReportTable, { data: warnings, columns: ["Description", "Total VMs"], fields: ["assessment", "count"], onRowClick: onConcernClick ? handleRowClick : undefined, clickableFields: onConcernClick ? ["assessment"] : [] }) })) })] }) }));
+};
+WarningsTable.displayName = "WarningsTable";

package/dist/report/constants.d.ts

@@ -19,6 +19,8 @@ export declare const REPORT_CARD_EMPTY_STATE_TITLES: {
     readonly operatingSystems: "Operating system data not collected";
     readonly migrationStatus: "Migration status data not collected";
     readonly issuesBreakdown: "Issues breakdown data not collected";
+    readonly errors: "Error data not collected";
+    readonly warnings: "Warning data not collected";
     readonly hostPowerStates: "Host power state data not collected";
     readonly vmPowerStates: "VM power state data not collected";
 };

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

@@ -1 +1 @@
-{"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;;;;;;;;;;;;;;;;CAgBjC,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;;;;;;;;;;;;;;;;;;CAkBjC,CAAC"}

package/dist/report/constants.js

@@ -20,6 +20,8 @@ export const REPORT_CARD_EMPTY_STATE_TITLES = {
     operatingSystems: "Operating system data not collected",
     migrationStatus: "Migration status data not collected",
     issuesBreakdown: "Issues breakdown data not collected",
+    errors: "Error data not collected",
+    warnings: "Warning data not collected",
     hostPowerStates: "Host power state data not collected",
     vmPowerStates: "VM power state data not collected",
 };

package/dist/report/index.d.ts

@@ -10,8 +10,10 @@ export { chartColorFailure, chartColorSuccess, REPORT_CARD_EMPTY_STATE_TITLES, }
 export { DashboardEmptyStateBase, type DashboardEmptyStateBaseProps, } from "./DashboardEmptyStateBase.js";
 export { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
 export { EmptySearchResults, type EmptySearchResultsProps, } from "./EmptySearchResults.js";
+export { ErrorTable, type ErrorTableProps, type MigrationIssueLike, } from "./ErrorTable.js";
 export { FeatureStatusBadge, type FeatureStatusBadgeProps, } from "./FeatureStatusBadge.js";
 export { HostPowerStates, type HostPowerStatesProps, } from "./HostPowerStates.js";
+export { type HostLike, HostsOverview, type HostsOverviewProps, } from "./HostsOverview.js";
 export { buildHtmlFromCharts, buildHtmlReport, escapeHtml, type HtmlReportImage, } from "./htmlExport.js";
 export { InfrastructureSummary, type InfrastructureSummaryProps, } from "./InfrastructureSummary.js";
 export type { ClusterDetailRow, ClusterDetailsModel, FeatureStatus, HostCapability, InfrastructureSummaryModel, InventoryCluster, InventoryDatastore, InventoryHost, InventoryInfra, InventoryNetwork, InventoryVms, NetworkLabel, } from "./infrastructureSummaryModel.js";
@@ -30,10 +32,12 @@ export { type PdfExportSegment, sliceCanvas, splitSegmentForPageHeight, } from "
 export type { PowerStateChartModel } from "./powerStates.js";
 export { buildHostPowerStateChart, buildVmPowerStateChart, HOST_POWER_COLORS, VM_POWER_COLORS, } from "./powerStates.js";
 export { ExportReportButton, type ExportReportButtonProps, ReportExportMenu, type ReportExportMenuProps, } from "./ReportExportMenu.js";
+export { ReportTable, type ReportTableProps } from "./ReportTable.js";
 export { type ReportExportOption, type StandardReportExportHandlers, standardReportExportOptions, } from "./reportExportOptions.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export { ALL_TIERS_FILTER, type OsBarChartViewModel, type OsTableRow, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
 export { VCenterClusterDetails, type VCenterClusterDetailsProps, } from "./VCenterClusterDetails.js";
 export { VmPowerStates, type VmPowerStatesProps, } from "./VmPowerStates.js";
+export { WarningsTable, type WarningsTableProps, } from "./WarningsTable.js";
 export { zipChartPngs } from "./zipChartPngs.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -10,8 +10,10 @@ export { chartColorFailure, chartColorSuccess, REPORT_CARD_EMPTY_STATE_TITLES, }
 export { DashboardEmptyStateBase, } from "./DashboardEmptyStateBase.js";
 export { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
 export { EmptySearchResults, } from "./EmptySearchResults.js";
+export { ErrorTable, } from "./ErrorTable.js";
 export { FeatureStatusBadge, } from "./FeatureStatusBadge.js";
 export { HostPowerStates, } from "./HostPowerStates.js";
+export { HostsOverview, } from "./HostsOverview.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";
@@ -27,9 +29,11 @@ export { buildPdfFromCharts } from "./pdfExport.js";
 export { sliceCanvas, splitSegmentForPageHeight, } from "./pdfPage.js";
 export { buildHostPowerStateChart, buildVmPowerStateChart, HOST_POWER_COLORS, VM_POWER_COLORS, } from "./powerStates.js";
 export { ExportReportButton, ReportExportMenu, } from "./ReportExportMenu.js";
+export { ReportTable } from "./ReportTable.js";
 export { standardReportExportOptions, } from "./reportExportOptions.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export { ALL_TIERS_FILTER, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
 export { VCenterClusterDetails, } from "./VCenterClusterDetails.js";
 export { VmPowerStates, } from "./VmPowerStates.js";
+export { WarningsTable, } from "./WarningsTable.js";
 export { zipChartPngs } from "./zipChartPngs.js";

package/package.json

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

@@ -0,0 +1,85 @@
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+  Icon,
+} from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+import type React from "react";
+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";
+
+/**
+ * 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 const ErrorTable: React.FC<ErrorTableProps> = ({
+  errors,
+  onConcernClick,
+}) => {
+  const handleRowClick = (issue: MigrationIssueLike) => {
+    if (issue.label && onConcernClick) {
+      onConcernClick(issue.label);
+    }
+  };
+
+  const chartId = "errors-table";
+  const chartTitle = "Errors";
+
+  return (
+    <ChartExportSurface id={chartId} title={chartTitle}>
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <Icon status="danger">
+                <ExclamationCircleIcon />
+              </Icon>{" "}
+              Errors
+            </FlexItem>
+            <ChartHeaderActions chartId={chartId} title={chartTitle} />
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {errors.length === 0 ? (
+            <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.errors} />
+          ) : (
+            <div>
+              <ReportTable<MigrationIssueLike>
+                data={errors}
+                columns={["Description", "Total VMs"]}
+                fields={["assessment", "count"]}
+                onRowClick={onConcernClick ? handleRowClick : undefined}
+                clickableFields={onConcernClick ? ["assessment"] : []}
+              />
+            </div>
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+ErrorTable.displayName = "ErrorTable";

package/src/report/HostsOverview.tsx

@@ -0,0 +1,185 @@
+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 type { FC } from "react";
+import { useMemo } 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 { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.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;
+}
+
+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: HostLike["model"]): string => {
+  const raw =
+    typeof model === "string"
+      ? model
+      : typeof model === "number"
+        ? String(model)
+        : "";
+  const trimmed = raw.trim();
+  return trimmed !== "" ? trimmed : UNKNOWN_MODEL_LABEL;
+};
+
+const buildHostModelDonut = (
+  hosts: HostLike[],
+): {
+  slices: MigrationDonutChartDatum[];
+  legend: Record<string, string>;
+  totalHosts: number;
+} => {
+  const counts = new Map<string, number>();
+  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: MigrationDonutChartDatum[] = 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: Record<string, string> = {};
+  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: FC<HostsOverviewProps> = ({
+  hosts,
+  legendVariant = "html",
+}) => {
+  const { slices, legend, totalHosts } = useMemo(
+    () => buildHostModelDonut(Array.isArray(hosts) ? hosts : []),
+    [hosts],
+  );
+
+  return (
+    <ChartExportSurface id={CHART_ID} title={CHART_TITLE}>
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <div>
+                <div>
+                  <ServerIcon /> {CHART_TITLE}
+                </div>
+                <div className={cardSubtitle}>Top 5 models</div>
+              </div>
+            </FlexItem>
+            <ChartHeaderActions chartId={CHART_ID} title={CHART_TITLE} />
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {slices.length === 0 ? (
+            <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.hosts} />
+          ) : (
+            <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)}%`
+              }
+            />
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+HostsOverview.displayName = "HostsOverview";

package/src/report/ReportTable.tsx

@@ -0,0 +1,81 @@
+import { Button } from "@patternfly/react-core";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import type React from "react";
+import { tableFullWidthStyle } from "./dashboardStyles.js";
+
+export interface ReportTableProps<DataItem> {
+  columns: string[];
+  data: DataItem[];
+  fields: Array<keyof DataItem>;
+  caption?: string;
+  onRowClick?: (item: DataItem) => void;
+  clickableFields?: Array<keyof DataItem>;
+}
+
+export function ReportTable<DataItem>(
+  props: ReportTableProps<DataItem>,
+): React.ReactNode {
+  const {
+    columns,
+    data,
+    fields,
+    caption,
+    onRowClick,
+    clickableFields = [],
+  } = props;
+
+  const renderCell = (
+    item: DataItem,
+    field: keyof DataItem,
+  ): React.ReactNode => {
+    const value = item[field];
+
+    if (value === "" || value == null) {
+      return "-";
+    }
+
+    if (typeof value === "boolean") {
+      return value ? "True" : "False";
+    }
+
+    // Make field clickable if specified
+    if (clickableFields.includes(field) && onRowClick) {
+      return (
+        <Button
+          variant="link"
+          isInline
+          onClick={() => onRowClick(item)}
+          style={{ padding: 0, fontSize: "inherit" }}
+        >
+          {value as React.ReactNode}
+        </Button>
+      );
+    }
+
+    return value as React.ReactNode;
+  };
+
+  return (
+    <Table variant="compact" borders={false} className={tableFullWidthStyle}>
+      {caption && <caption>{caption}</caption>}
+      <Thead>
+        <Tr>
+          {columns.map((name) => (
+            <Th key={name}>{name}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {data.map((item) => (
+          <Tr key={`row-${String(item[fields[0]])}`}>
+            {fields.map((f) => (
+              <Td key={String(f)}>{renderCell(item, f)}</Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+}
+
+ReportTable.displayName = "ReportTable";

package/src/report/WarningsTable.tsx

@@ -0,0 +1,75 @@
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+  Icon,
+} from "@patternfly/react-core";
+import { ExclamationTriangleIcon } from "@patternfly/react-icons";
+import type React from "react";
+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 type { MigrationIssueLike } from "./ErrorTable.js";
+import { ReportTable } from "./ReportTable.js";
+
+export interface WarningsTableProps {
+  warnings: MigrationIssueLike[];
+  /** Optional drill-down callback invoked with an issue's `label`. */
+  onConcernClick?: (concernLabel: string) => void;
+}
+
+export const WarningsTable: React.FC<WarningsTableProps> = ({
+  warnings,
+  onConcernClick,
+}) => {
+  const handleRowClick = (issue: MigrationIssueLike) => {
+    if (issue.label && onConcernClick) {
+      onConcernClick(issue.label);
+    }
+  };
+
+  const chartId = "warnings-table";
+  const chartTitle = "Warnings";
+
+  return (
+    <ChartExportSurface id={chartId} title={chartTitle}>
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <Icon status="warning">
+                <ExclamationTriangleIcon />
+              </Icon>{" "}
+              Warnings
+            </FlexItem>
+            <ChartHeaderActions chartId={chartId} title={chartTitle} />
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {warnings.length === 0 ? (
+            <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.warnings} />
+          ) : (
+            <div>
+              <ReportTable<MigrationIssueLike>
+                data={warnings}
+                columns={["Description", "Total VMs"]}
+                fields={["assessment", "count"]}
+                onRowClick={onConcernClick ? handleRowClick : undefined}
+                clickableFields={onConcernClick ? ["assessment"] : []}
+              />
+            </div>
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+WarningsTable.displayName = "WarningsTable";

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

@@ -0,0 +1,145 @@
+import "@testing-library/jest-dom";
+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 { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import { HostsOverview } from "../HostsOverview.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="hosts-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected the host model donut to render");
+  }
+  return props;
+};
+
+describe("HostsOverview", () => {
+  it("shows the shared empty state when no hosts are available", () => {
+    render(<HostsOverview />);
+
+    expect(screen.getByText("Host distribution by model")).toBeInTheDocument();
+    expect(screen.getByText("Top 5 models")).toBeInTheDocument();
+    expect(screen.getByText("Host data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("hosts-donut")).not.toBeInTheDocument();
+  });
+
+  it("buckets host counts into the top 5 models plus Other models", () => {
+    render(
+      <HostsOverview
+        hosts={[
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M1" },
+          { model: "M2" },
+          { model: "M2" },
+          { model: "M2" },
+          { model: "M2" },
+          { model: "M2" },
+          { model: "M3" },
+          { model: "M3" },
+          { model: "M3" },
+          { model: "M3" },
+          { model: "M4" },
+          { model: "M4" },
+          { model: "M4" },
+          { model: "M5" },
+          { model: "M5" },
+          { model: "M6" },
+          { model: "M7" },
+        ]}
+      />,
+    );
+
+    expect(screen.getByTestId("hosts-donut")).toHaveTextContent("22 Hosts");
+
+    const props = renderedDonut();
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["M1", 6],
+      ["M2", 5],
+      ["M3", 4],
+      ["M4", 3],
+      ["M5", 2],
+      ["Other models", 2],
+    ]);
+    expect(props.data[5]?.countDisplay).toBe("2 hosts");
+    expect(props.legend).toEqual({
+      M1: chart_color_blue_300.value,
+      M2: chart_color_purple_300.value,
+      M3: chart_color_purple_100.value,
+      M4: chart_color_teal_200.value,
+      M5: chart_color_yellow_400.value,
+      "Other models": chart_color_green_300.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.legendWidth).toBe(680);
+    expect(props.itemsPerRow).toBe(2);
+    expect(props.labelFontSize).toBe(16);
+    expect(props.marginLeft).toBe("0%");
+    expect(props.subTitleColor).toBe(
+      "var(--pf-t--global--text--color--subtle)",
+    );
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "M1",
+          y: 6,
+          countDisplay: "6 hosts",
+          legendCategory: "M1",
+        },
+        percent: 27.2727,
+        total: 22,
+      }),
+    ).toBe("6 hosts\n27.3%");
+  });
+
+  it("treats numeric models as labels and blank models as unknown", () => {
+    render(
+      <HostsOverview
+        legendVariant="chart"
+        hosts={[{ model: 42 }, { model: "   " }, { model: "  R640  " }]}
+      />,
+    );
+
+    expect(renderedDonut().data.map((slice) => slice.name)).toEqual([
+      "42",
+      "Unknown model",
+      "R640",
+    ]);
+    expect(renderedDonut().legendVariant).toBe("chart");
+    expect(renderedDonut().title).toBe("3");
+  });
+});

package/src/report/constants.ts

@@ -25,6 +25,8 @@ export const REPORT_CARD_EMPTY_STATE_TITLES = {
   operatingSystems: "Operating system data not collected",
   migrationStatus: "Migration status data not collected",
   issuesBreakdown: "Issues breakdown data not collected",
+  errors: "Error data not collected",
+  warnings: "Warning data not collected",
   hostPowerStates: "Host power state data not collected",
   vmPowerStates: "VM power state data not collected",
 } as const;

package/src/report/index.ts

@@ -65,6 +65,11 @@ export {
   EmptySearchResults,
   type EmptySearchResultsProps,
 } from "./EmptySearchResults.js";
+export {
+  ErrorTable,
+  type ErrorTableProps,
+  type MigrationIssueLike,
+} from "./ErrorTable.js";
 export {
   FeatureStatusBadge,
   type FeatureStatusBadgeProps,
@@ -73,6 +78,11 @@ export {
   HostPowerStates,
   type HostPowerStatesProps,
 } from "./HostPowerStates.js";
+export {
+  type HostLike,
+  HostsOverview,
+  type HostsOverviewProps,
+} from "./HostsOverview.js";
 export {
   buildHtmlFromCharts,
   buildHtmlReport,
@@ -167,6 +177,7 @@ export {
   ReportExportMenu,
   type ReportExportMenuProps,
 } from "./ReportExportMenu.js";
+export { ReportTable, type ReportTableProps } from "./ReportTable.js";
 export {
   type ReportExportOption,
   type StandardReportExportHandlers,
@@ -187,4 +198,8 @@ export {
   VmPowerStates,
   type VmPowerStatesProps,
 } from "./VmPowerStates.js";
+export {
+  WarningsTable,
+  type WarningsTableProps,
+} from "./WarningsTable.js";
 export { zipChartPngs } from "./zipChartPngs.js";