@openshift-migration-advisor/shared-components 0.22.0-aaabd4569e38 → 0.23.0-54185b7f1be8

package/src/report/OsSupportTiersHelpPopover.tsx

@@ -1,5 +1,10 @@
-import { css } from "@emotion/css";
-import { Label } from "@patternfly/react-core";
+import {
+  Button,
+  Content,
+  Label,
+  Stack,
+  StackItem,
+} from "@patternfly/react-core";
 import { ExternalLinkAltIcon } from "@patternfly/react-icons";
 import type { FC } from "react";
 import {
@@ -11,66 +16,32 @@ import {
 } from "./osSupportTier.js";
 import PopoverIcon from "./PopoverIcon.js";
 
-const tierListStyle = css`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pf-t--global--spacer--400);
-`;
-
-const tierItemStyle = css`
-  display: flex;
-  flex-direction: column;
-  gap: var(--pf-t--global--spacer--100);
-`;
-
-const tierBadgeStyle = css`
-  width: fit-content;
-  max-width: 100%;
-  align-self: flex-start;
-`;
-
-const tierDescriptionStyle = css`
-  margin: 0;
-  color: var(--pf-t--global--text--color--regular);
-`;
-
-const learnMoreLinkStyle = css`
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pf-t--global--spacer--xs);
-  margin-top: var(--pf-t--global--spacer--400);
-`;
-
 const OsSupportTiersHelpBody: FC = () => (
-  <div>
-    <ul className={tierListStyle}>
-      {ORDERED_SUPPORT_TIERS.map((tier) => (
-        <li key={tier} className={tierItemStyle}>
-          <Label
-            className={tierBadgeStyle}
-            color={getSupportTierBadgeColor(tier)}
-            isCompact
-          >
-            {getSupportTierLegendLabel(tier)}
-          </Label>
-          <p className={tierDescriptionStyle}>
-            {getSupportTierDefinition(tier)}
-          </p>
-        </li>
-      ))}
-    </ul>
-    <a
-      className={learnMoreLinkStyle}
-      href={SUPPORT_TIER_LEARN_MORE_URL}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      Learn more <ExternalLinkAltIcon />
-    </a>
-  </div>
+  <Stack hasGutter>
+    {ORDERED_SUPPORT_TIERS.map((tier) => (
+      <StackItem key={tier}>
+        <Label color={getSupportTierBadgeColor(tier)} isCompact>
+          {getSupportTierLegendLabel(tier)}
+        </Label>
+        <Content component="p">{getSupportTierDefinition(tier)}</Content>
+      </StackItem>
+    ))}
+    <StackItem>
+      <Button
+        variant="link"
+        isInline
+        component="a"
+        href={SUPPORT_TIER_LEARN_MORE_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        icon={<ExternalLinkAltIcon />}
+        iconPosition="end"
+        aria-label="Learn more about operating system support tiers"
+      >
+        Learn more
+      </Button>
+    </StackItem>
+  </Stack>
 );
 
 export const OsSupportTiersHelpPopover: FC = () => (

package/src/report/OsUpgradeNotice.tsx

@@ -1,17 +1,11 @@
-import { css } from "@emotion/css";
 import { Content, Flex, FlexItem, Icon } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
 import type { FC } from "react";
 
-const noticeStyle = css`
-  margin-bottom: var(--pf-t--global--spacer--200);
-`;
-
 export const OsUpgradeNotice: FC = () => (
   <Flex
     alignItems={{ default: "alignItemsCenter" }}
     spaceItems={{ default: "spaceItemsSm" }}
-    className={noticeStyle}
   >
     <FlexItem>
       <Icon status="info">
@@ -19,7 +13,7 @@ export const OsUpgradeNotice: FC = () => (
       </Icon>
     </FlexItem>
     <FlexItem>
-      <Content component="p" style={{ fontWeight: 500 }}>
+      <Content component="p">
         Some operating systems may need upgrades before migration
       </Content>
     </FlexItem>

package/src/report/PowerStateCard.tsx

@@ -0,0 +1,73 @@
+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/SupportTierBadge.tsx

@@ -9,13 +9,15 @@ import {
   type SupportTier,
 } from "./osSupportTier.js";
 
-const exportBadgeStyle = css`
+const exportBadgeStyle = (backgroundColor: string, color: string) => css`
   display: inline-block;
   padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
   border-radius: var(--pf-t--global--border--radius--pill);
   font-size: var(--pf-t--global--font--size--body--sm);
   line-height: var(--pf-t--global--font--line-height--body);
   white-space: nowrap;
+  background-color: ${backgroundColor};
+  color: ${color};
 `;
 
 interface SupportTierBadgeProps {
@@ -27,7 +29,7 @@ const ExportSupportTierBadge: FC<{ tier: SupportTier }> = ({ tier }) => {
   const { backgroundColor, color } = getSupportTierBadgeInlineStyle(tier);
 
   return (
-    <span className={exportBadgeStyle} style={{ backgroundColor, color }}>
+    <span className={exportBadgeStyle(backgroundColor, color)}>
       {getSupportTierLegendLabel(tier)}
     </span>
   );

package/src/report/VCenterClusterDetails.tsx

@@ -0,0 +1,211 @@
+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 "./infrastructureSummary.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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,148 @@
+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();
+  });
+});