@openshift-migration-advisor/shared-components 0.23.0-e6249b8ada7d → 0.24.0

package/src/report/FeatureStatusBadge.tsx

@@ -1,30 +0,0 @@
-import { Label } from "@patternfly/react-core";
-import { CheckCircleIcon, TimesCircleIcon } from "@patternfly/react-icons";
-import type { FC } from "react";
-import type { FeatureStatus } from "./infrastructureSummaryModel.js";
-
-export interface FeatureStatusBadgeProps {
-  status: FeatureStatus;
-}
-
-export const FeatureStatusBadge: FC<FeatureStatusBadgeProps> = ({ status }) => {
-  if (status === "unknown") {
-    return <span>—</span>;
-  }
-
-  if (status === "enabled") {
-    return (
-      <Label color="green" isCompact icon={<CheckCircleIcon />}>
-        Enabled
-      </Label>
-    );
-  }
-
-  return (
-    <Label color="grey" isCompact icon={<TimesCircleIcon />}>
-      Disabled
-    </Label>
-  );
-};
-
-FeatureStatusBadge.displayName = "FeatureStatusBadge";

package/src/report/HostPowerStates.tsx

@@ -1,41 +0,0 @@
-import { ServerIcon } from "@patternfly/react-icons";
-import type { FC } from "react";
-import { useMemo } from "react";
-import type { MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
-import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
-import { PowerStateCard } from "./PowerStateCard.js";
-import { buildHostPowerStateChart } from "./powerStates.js";
-
-export interface HostPowerStatesProps {
-  hostPowerStates?: Record<string, number>;
-  isExportMode?: boolean;
-  legendVariant?: MigrationDonutChartLegendVariant;
-}
-
-export const HostPowerStates: FC<HostPowerStatesProps> = ({
-  hostPowerStates,
-  isExportMode = false,
-  legendVariant,
-}) => {
-  const chart = useMemo(
-    () => buildHostPowerStateChart(hostPowerStates),
-    [hostPowerStates],
-  );
-
-  return (
-    <PowerStateCard
-      id="esxi-host-power-states"
-      title="ESXi host power states"
-      icon={<ServerIcon />}
-      emptyTitle={REPORT_CARD_EMPTY_STATE_TITLES.hostPowerStates}
-      slices={chart.slices}
-      legend={chart.legend}
-      total={chart.total}
-      subTitle="Hosts"
-      isExportMode={isExportMode}
-      legendVariant={legendVariant}
-    />
-  );
-};
-
-HostPowerStates.displayName = "HostPowerStates";

package/src/report/InfrastructureSummary.tsx

@@ -1,56 +0,0 @@
-import {
-  Card,
-  CardBody,
-  CardTitle,
-  DescriptionList,
-  DescriptionListDescription,
-  DescriptionListGroup,
-  DescriptionListTerm,
-} from "@patternfly/react-core";
-import type { FC } from "react";
-import type { InfrastructureSummaryModel } from "./infrastructureSummaryModel.js";
-
-export interface InfrastructureSummaryProps {
-  summary: InfrastructureSummaryModel;
-}
-
-const formatCount = (value: number | undefined): string =>
-  typeof value === "number" ? String(value) : "—";
-
-export const InfrastructureSummary: FC<InfrastructureSummaryProps> = ({
-  summary,
-}) => (
-  <Card isFullHeight id="infrastructure-summary">
-    <CardTitle>Infrastructure summary</CardTitle>
-    <CardBody>
-      <DescriptionList isAutoFit displaySize="lg">
-        <DescriptionListGroup>
-          <DescriptionListTerm>VMware version</DescriptionListTerm>
-          <DescriptionListDescription>
-            {summary.vmwareVersion}
-          </DescriptionListDescription>
-        </DescriptionListGroup>
-        <DescriptionListGroup>
-          <DescriptionListTerm>Datacenters</DescriptionListTerm>
-          <DescriptionListDescription>
-            {formatCount(summary.datacenters)}
-          </DescriptionListDescription>
-        </DescriptionListGroup>
-        <DescriptionListGroup>
-          <DescriptionListTerm>vCenters</DescriptionListTerm>
-          <DescriptionListDescription>
-            {formatCount(summary.vCenters)}
-          </DescriptionListDescription>
-        </DescriptionListGroup>
-        <DescriptionListGroup>
-          <DescriptionListTerm>ESXi hosts</DescriptionListTerm>
-          <DescriptionListDescription>
-            {formatCount(summary.esxiHosts)}
-          </DescriptionListDescription>
-        </DescriptionListGroup>
-      </DescriptionList>
-    </CardBody>
-  </Card>
-);
-
-InfrastructureSummary.displayName = "InfrastructureSummary";

package/src/report/PowerStateCard.tsx

@@ -1,73 +0,0 @@
-import { Card, CardBody, CardTitle } from "@patternfly/react-core";
-import type { FC, ReactNode } from "react";
-import {
-  MigrationDonutChart,
-  type MigrationDonutChartDatum,
-  type MigrationDonutChartLegendVariant,
-} from "../charts/MigrationDonutChart.js";
-import { CardEmptyState } from "./CardEmptyState.js";
-import { dashboardStyles } from "./dashboardStyles.js";
-
-export interface PowerStateCardProps {
-  id: string;
-  title: string;
-  icon: ReactNode;
-  emptyTitle: string;
-  slices: MigrationDonutChartDatum[];
-  legend: Record<string, string>;
-  total: number;
-  subTitle: string;
-  isExportMode?: boolean;
-  itemsPerRow?: number;
-  legendVariant?: MigrationDonutChartLegendVariant;
-}
-
-export const PowerStateCard: FC<PowerStateCardProps> = ({
-  id,
-  title,
-  icon,
-  emptyTitle,
-  slices,
-  legend,
-  total,
-  subTitle,
-  isExportMode = false,
-  itemsPerRow = 2,
-  legendVariant = "html",
-}) => (
-  <Card
-    className={isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card}
-    id={id}
-  >
-    <CardTitle>
-      {icon} {title}
-    </CardTitle>
-    <CardBody>
-      {total === 0 ? (
-        <CardEmptyState title={emptyTitle} />
-      ) : (
-        <MigrationDonutChart
-          legendVariant={legendVariant}
-          data={slices}
-          legend={legend}
-          height={300}
-          width={420}
-          donutThickness={18}
-          padAngle={1}
-          title={`${total}`}
-          subTitle={subTitle}
-          subTitleColor="var(--pf-t--global--text--color--subtle)"
-          titleFontSize={34}
-          labelFontSize={16}
-          itemsPerRow={itemsPerRow}
-          marginLeft="0%"
-          tooltipLabelFormatter={({ datum, percent }) =>
-            `${datum.countDisplay}\n${percent.toFixed(1)}%`
-          }
-        />
-      )}
-    </CardBody>
-  </Card>
-);
-
-PowerStateCard.displayName = "PowerStateCard";

package/src/report/VCenterClusterDetails.tsx

@@ -1,211 +0,0 @@
-import { css } from "@emotion/css";
-import {
-  Card,
-  CardBody,
-  CardTitle,
-  Content,
-  DescriptionList,
-  DescriptionListDescription,
-  DescriptionListGroup,
-  DescriptionListTerm,
-  Grid,
-  GridItem,
-  Label,
-  LabelGroup,
-} from "@patternfly/react-core";
-import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
-import type { FC } from "react";
-import { FeatureStatusBadge } from "./FeatureStatusBadge.js";
-import type {
-  ClusterDetailRow,
-  ClusterDetailsModel,
-  FeatureStatus,
-} from "./infrastructureSummaryModel.js";
-
-export interface VCenterClusterDetailsProps {
-  isAggregateView: boolean;
-  rows: ClusterDetailRow[];
-  details?: ClusterDetailsModel;
-  isExportMode?: boolean;
-}
-
-const clusterDetailsTableScrollStyle = css`
-  max-height: 320px;
-  overflow: auto;
-`;
-
-const FeatureList: FC<{
-  items: { label: string; status: FeatureStatus }[];
-}> = ({ items }) => (
-  <DescriptionList isHorizontal isCompact>
-    {items.map((item) => (
-      <DescriptionListGroup key={item.label}>
-        <DescriptionListTerm>{item.label}</DescriptionListTerm>
-        <DescriptionListDescription>
-          <FeatureStatusBadge status={item.status} />
-        </DescriptionListDescription>
-      </DescriptionListGroup>
-    ))}
-  </DescriptionList>
-);
-
-const AggregateClusterTable: FC<{
-  rows: ClusterDetailRow[];
-}> = ({ rows }) => (
-  <Table
-    variant="compact"
-    borders={false}
-    isStickyHeader
-    data-testid="vcenter-cluster-details-table"
-  >
-    <Thead>
-      <Tr>
-        <Th>Cluster name</Th>
-        <Th>Hosts</Th>
-        <Th>VMs</Th>
-        <Th>vMotion</Th>
-        <Th>DRS</Th>
-        <Th>vSAN</Th>
-      </Tr>
-    </Thead>
-    <Tbody>
-      {rows.map((row) => (
-        <Tr key={row.id}>
-          <Td dataLabel="Cluster name">{row.name}</Td>
-          <Td dataLabel="Hosts">{row.hosts}</Td>
-          <Td dataLabel="VMs">{row.vms}</Td>
-          <Td dataLabel="vMotion">
-            <FeatureStatusBadge status={row.vmotion} />
-          </Td>
-          <Td dataLabel="DRS">
-            <FeatureStatusBadge status={row.drs} />
-          </Td>
-          <Td dataLabel="vSAN">
-            <FeatureStatusBadge status={row.vsan} />
-          </Td>
-        </Tr>
-      ))}
-    </Tbody>
-  </Table>
-);
-
-const AggregateCluster: FC<{
-  rows: ClusterDetailRow[];
-  isExportMode: boolean;
-}> = ({ rows, isExportMode }) => {
-  if (rows.length === 0) {
-    return <Content component="p">No vSphere clusters detected</Content>;
-  }
-
-  return (
-    <div
-      className={isExportMode ? undefined : clusterDetailsTableScrollStyle}
-      data-scroll-constrained={isExportMode ? undefined : "true"}
-    >
-      <AggregateClusterTable rows={rows} />
-    </div>
-  );
-};
-
-const DetailedClusterView: FC<{ details: ClusterDetailsModel }> = ({
-  details,
-}) => (
-  <Grid hasGutter>
-    <GridItem span={12}>
-      <DescriptionList isAutoFit displaySize="lg">
-        <DescriptionListGroup>
-          <DescriptionListTerm>Hosts</DescriptionListTerm>
-          <DescriptionListDescription>
-            {details.hosts}
-          </DescriptionListDescription>
-        </DescriptionListGroup>
-        <DescriptionListGroup>
-          <DescriptionListTerm>VMs</DescriptionListTerm>
-          <DescriptionListDescription>{details.vms}</DescriptionListDescription>
-        </DescriptionListGroup>
-        <DescriptionListGroup>
-          <DescriptionListTerm>Networks detected</DescriptionListTerm>
-          <DescriptionListDescription>
-            {details.networksDetected}
-          </DescriptionListDescription>
-        </DescriptionListGroup>
-      </DescriptionList>
-    </GridItem>
-    <GridItem md={4} span={12}>
-      <Card isFullHeight>
-        <CardTitle>Core infrastructure</CardTitle>
-        <CardBody>
-          <FeatureList
-            items={[
-              { label: "vMotion", status: details.vmotion },
-              { label: "DRS", status: details.drs },
-              { label: "HA", status: details.ha },
-            ]}
-          />
-        </CardBody>
-      </Card>
-    </GridItem>
-    <GridItem md={4} span={12}>
-      <Card isFullHeight>
-        <CardTitle>vSAN capabilities</CardTitle>
-        <CardBody>
-          <FeatureList items={[{ label: "vSAN", status: details.vsan }]} />
-        </CardBody>
-      </Card>
-    </GridItem>
-    <GridItem md={4} span={12}>
-      <Card isFullHeight>
-        <CardTitle>Network topology</CardTitle>
-        <CardBody>
-          {details.networks.length === 0 ? (
-            <Content component="p">No networks detected</Content>
-          ) : (
-            <>
-              <Content component="p">
-                {details.networksDetected}{" "}
-                {details.networksDetected === 1
-                  ? "network detected"
-                  : "networks detected"}
-              </Content>
-              <LabelGroup
-                isCompact
-                numLabels={details.networks.length}
-                aria-label="Detected networks"
-              >
-                {details.networks.map((network, index) => (
-                  <Label
-                    key={`${network.name}-${network.vlanId ?? index}`}
-                    color="blue"
-                    isCompact
-                  >
-                    {network.displayName}
-                  </Label>
-                ))}
-              </LabelGroup>
-            </>
-          )}
-        </CardBody>
-      </Card>
-    </GridItem>
-  </Grid>
-);
-
-export const VCenterClusterDetails: FC<VCenterClusterDetailsProps> = ({
-  isAggregateView,
-  rows,
-  details,
-  isExportMode = false,
-}) => (
-  <Card isFullHeight id="vcenter-cluster-details">
-    <CardTitle>vCenter cluster details</CardTitle>
-    <CardBody>
-      {isAggregateView || !details ? (
-        <AggregateCluster rows={rows} isExportMode={isExportMode} />
-      ) : (
-        <DetailedClusterView details={details} />
-      )}
-    </CardBody>
-  </Card>
-);
-
-VCenterClusterDetails.displayName = "VCenterClusterDetails";

package/src/report/VmPowerStates.tsx

@@ -1,41 +0,0 @@
-import { VirtualMachineIcon } from "@patternfly/react-icons";
-import type { FC } from "react";
-import { useMemo } from "react";
-import type { MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
-import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
-import { PowerStateCard } from "./PowerStateCard.js";
-import { buildVmPowerStateChart } from "./powerStates.js";
-
-export interface VmPowerStatesProps {
-  powerStates?: Record<string, number>;
-  isExportMode?: boolean;
-  legendVariant?: MigrationDonutChartLegendVariant;
-}
-
-export const VmPowerStates: FC<VmPowerStatesProps> = ({
-  powerStates,
-  isExportMode = false,
-  legendVariant,
-}) => {
-  const chart = useMemo(
-    () => buildVmPowerStateChart(powerStates),
-    [powerStates],
-  );
-
-  return (
-    <PowerStateCard
-      id="vm-power-states"
-      title="VM power states"
-      icon={<VirtualMachineIcon />}
-      emptyTitle={REPORT_CARD_EMPTY_STATE_TITLES.vmPowerStates}
-      slices={chart.slices}
-      legend={chart.legend}
-      total={chart.total}
-      subTitle="VMs"
-      isExportMode={isExportMode}
-      legendVariant={legendVariant}
-    />
-  );
-};
-
-VmPowerStates.displayName = "VmPowerStates";

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

@@ -1,47 +0,0 @@
-import "@testing-library/jest-dom";
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { HostPowerStates } from "../HostPowerStates.js";
-import { VmPowerStates } from "../VmPowerStates.js";
-
-vi.mock("../../charts/MigrationDonutChart.js", () => ({
-  MigrationDonutChart: ({
-    title,
-    subTitle,
-  }: {
-    title?: string;
-    subTitle?: string;
-  }): JSX.Element => (
-    <div data-testid="power-donut">
-      {title} {subTitle}
-    </div>
-  ),
-}));
-
-afterEach(() => cleanup());
-
-describe("HostPowerStates", () => {
-  it("renders the host power donut from inventory data", () => {
-    render(<HostPowerStates hostPowerStates={{ green: 7 }} />);
-
-    expect(screen.getByText("ESXi host power states")).toBeInTheDocument();
-    expect(screen.getByTestId("power-donut")).toHaveTextContent("7 Hosts");
-  });
-
-  it("shows an empty state when host power data is missing", () => {
-    render(<HostPowerStates hostPowerStates={{}} />);
-
-    expect(
-      screen.getByText("Host power state data not collected"),
-    ).toBeInTheDocument();
-  });
-});
-
-describe("VmPowerStates", () => {
-  it("renders the VM power donut from inventory data", () => {
-    render(<VmPowerStates powerStates={{ poweredOff: 297, poweredOn: 53 }} />);
-
-    expect(screen.getByText("VM power states")).toBeInTheDocument();
-    expect(screen.getByTestId("power-donut")).toHaveTextContent("350 VMs");
-  });
-});

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

@@ -1,148 +0,0 @@
-import "@testing-library/jest-dom";
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
-import { InfrastructureSummary } from "../InfrastructureSummary.js";
-import { VCenterClusterDetails } from "../VCenterClusterDetails.js";
-
-afterEach(() => cleanup());
-
-describe("InfrastructureSummary", () => {
-  it("renders inventory summary fields from the mapped model", () => {
-    render(
-      <InfrastructureSummary
-        summary={{
-          vmwareVersion: "vSphere 7.0.3",
-          datacenters: 1,
-          vCenters: 1,
-          esxiHosts: 12,
-        }}
-      />,
-    );
-
-    expect(screen.getByText("Infrastructure summary")).toBeInTheDocument();
-    expect(screen.getByText("vSphere 7.0.3")).toBeInTheDocument();
-    expect(screen.getByText("Datacenters")).toBeInTheDocument();
-    expect(screen.getByText("vCenters")).toBeInTheDocument();
-    expect(screen.getByText("ESXi hosts")).toBeInTheDocument();
-    expect(screen.getByText("12")).toBeInTheDocument();
-  });
-});
-
-describe("VCenterClusterDetails", () => {
-  it("renders the aggregate cluster table with feature statuses", () => {
-    render(
-      <VCenterClusterDetails
-        isAggregateView
-        rows={[
-          {
-            id: "Cluster-Prod-01",
-            name: "Cluster-Prod-01",
-            hosts: 5,
-            vms: 280,
-            vmotion: "enabled",
-            drs: "enabled",
-            vsan: "enabled",
-          },
-          {
-            id: "Cluster-Dev-02",
-            name: "Cluster-Dev-02",
-            hosts: 7,
-            vms: 350,
-            vmotion: "enabled",
-            drs: "disabled",
-            vsan: "enabled",
-          },
-        ]}
-      />,
-    );
-
-    expect(screen.getByText("vCenter cluster details")).toBeInTheDocument();
-    expect(screen.getByText("Cluster-Prod-01")).toBeInTheDocument();
-    expect(screen.getByText("Cluster-Dev-02")).toBeInTheDocument();
-    expect(screen.getAllByText("Enabled").length).toBeGreaterThan(0);
-    expect(screen.getByText("Disabled")).toBeInTheDocument();
-  });
-
-  it("limits the aggregate table height so long cluster lists can scroll", () => {
-    render(
-      <VCenterClusterDetails
-        isAggregateView
-        rows={Array.from({ length: 12 }, (_, index) => ({
-          id: `cluster-${index}`,
-          name: `cluster-${index}`,
-          hosts: index + 1,
-          vms: (index + 1) * 10,
-          vmotion: "unknown",
-          drs: "unknown",
-          vsan: "disabled",
-        }))}
-      />,
-    );
-
-    expect(
-      screen.getByTestId("vcenter-cluster-details-table").parentElement,
-    ).toHaveAttribute("data-scroll-constrained", "true");
-  });
-
-  it("does not clip the aggregate table in export mode", () => {
-    render(
-      <VCenterClusterDetails
-        isAggregateView
-        isExportMode
-        rows={Array.from({ length: 12 }, (_, index) => ({
-          id: `cluster-${index}`,
-          name: `cluster-${index}`,
-          hosts: index + 1,
-          vms: (index + 1) * 10,
-          vmotion: "unknown",
-          drs: "unknown",
-          vsan: "disabled",
-        }))}
-      />,
-    );
-
-    expect(
-      screen.getByTestId("vcenter-cluster-details-table").parentElement,
-    ).not.toHaveAttribute("data-scroll-constrained");
-  });
-
-  it("renders the detailed cluster cards for a single cluster", () => {
-    render(
-      <VCenterClusterDetails
-        isAggregateView={false}
-        rows={[]}
-        details={{
-          hosts: 7,
-          vms: 350,
-          networksDetected: 2,
-          vmotion: "enabled",
-          drs: "disabled",
-          ha: "enabled",
-          vsan: "disabled",
-          networks: [
-            {
-              name: "VDS-Dev",
-              vlanId: "10",
-              displayName: "VDS-Dev (VLAN 10)",
-            },
-            {
-              name: "VDS-Dev",
-              vlanId: "11",
-              displayName: "VDS-Dev (VLAN 11)",
-            },
-          ],
-        }}
-      />,
-    );
-
-    expect(screen.getByText("Core infrastructure")).toBeInTheDocument();
-    expect(screen.getByText("vSAN capabilities")).toBeInTheDocument();
-    expect(screen.getByText("Network topology")).toBeInTheDocument();
-    expect(screen.getByText("vMotion")).toBeInTheDocument();
-    expect(screen.getByText("DRS")).toBeInTheDocument();
-    expect(screen.getByText("HA")).toBeInTheDocument();
-    expect(screen.getByText("VDS-Dev (VLAN 10)")).toBeInTheDocument();
-    expect(screen.getByText("VDS-Dev (VLAN 11)")).toBeInTheDocument();
-    expect(screen.queryByText("VM encryption")).toBeNull();
-  });
-});