@openshift-migration-advisor/shared-components 0.25.0-6fd4e1ee8e11 → 0.25.0-db3dbade32ea

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/__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/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,
@@ -108,6 +118,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";
@@ -159,6 +177,7 @@ export {
   ReportExportMenu,
   type ReportExportMenuProps,
 } from "./ReportExportMenu.js";
+export { ReportTable, type ReportTableProps } from "./ReportTable.js";
 export {
   type ReportExportOption,
   type StandardReportExportHandlers,
@@ -179,4 +198,8 @@ export {
   VmPowerStates,
   type VmPowerStatesProps,
 } from "./VmPowerStates.js";
+export {
+  WarningsTable,
+  type WarningsTableProps,
+} from "./WarningsTable.js";
 export { zipChartPngs } from "./zipChartPngs.js";