@openshift-migration-advisor/shared-components 0.22.0-dd51551836b7 → 0.23.0-e2d66ca45d64

package/src/report/OSDistribution.tsx

@@ -11,6 +11,8 @@ import {
   Select,
   SelectList,
   SelectOption,
+  Stack,
+  StackItem,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -36,22 +38,9 @@ import {
   useOsBarChartViewModel,
 } from "./useOsBarChartViewModel.js";
 
-const filterToolbarStyle = css`
-  padding-left: 0;
-  padding-right: 0;
-`;
-
-const filterItemStyle = css`
-  flex: 1 1 0;
-  min-width: 0;
-`;
-
-const vmsColumnStyle = css`
-  text-align: right;
-`;
-
 const tableScrollStyle = css`
   overflow: auto;
+  max-height: 350px;
 `;
 
 interface OSDistributionProps {
@@ -106,9 +95,9 @@ export const OSBarChart: FC<OSBarChartProps> = ({
   return (
     <>
       {!isExportMode ? (
-        <Toolbar className={filterToolbarStyle}>
+        <Toolbar hasNoPadding>
           <ToolbarContent>
-            <ToolbarItem className={filterItemStyle}>
+            <ToolbarItem>
               <SearchInput
                 placeholder="Filter by OS"
                 value={vm.osFilter}
@@ -117,7 +106,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
                 aria-label="Filter operating systems by name"
               />
             </ToolbarItem>
-            <ToolbarItem className={filterItemStyle}>
+            <ToolbarItem>
               <Select
                 isOpen={vm.isTierSelectOpen}
                 selected={vm.tierFilter}
@@ -128,7 +117,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
                     ref={toggleRef}
                     isExpanded={vm.isTierSelectOpen}
                     onClick={vm.toggleTierSelectOpen}
-                    style={{ width: "100%" }}
+                    isFullWidth
                   >
                     {vm.tierFilterLabel}
                   </MenuToggle>
@@ -151,56 +140,60 @@ export const OSBarChart: FC<OSBarChartProps> = ({
         </Toolbar>
       ) : null}
 
-      {vm.showUpgradeNotice ? <OsUpgradeNotice /> : null}
-
-      <div
-        className={isExportMode ? undefined : tableScrollStyle}
-        style={isExportMode ? undefined : { maxHeight: "350px" }}
-      >
-        <Table
-          aria-label="Operating systems"
-          variant="compact"
-          className={tableFullWidthStyle}
-        >
-          <Thead>
-            <Tr>
-              <Th>OS</Th>
-              <Th>Tier</Th>
-              <Th className={vmsColumnStyle}>VMs</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {vm.showNoResults ? (
-              <Tr>
-                <Td colSpan={3}>
-                  <EmptySearchResults title="No matching operating system found" />
-                </Td>
-              </Tr>
-            ) : (
-              vm.filteredRows.map((row) => (
-                <Tr key={row.osName}>
-                  <Td dataLabel="OS">
-                    <OsNameCell
-                      osName={row.osName}
-                      upgradeRecommendation={row.upgradeRecommendation}
-                      isExportMode={isExportMode}
-                    />
-                  </Td>
-                  <Td dataLabel="Tier">
-                    <SupportTierBadge
-                      tier={row.tier}
-                      isExportMode={isExportMode}
-                    />
-                  </Td>
-                  <Td dataLabel="VMs" className={vmsColumnStyle}>
-                    {row.count}
-                  </Td>
+      <Stack hasGutter>
+        {vm.showUpgradeNotice ? (
+          <StackItem>
+            <OsUpgradeNotice />
+          </StackItem>
+        ) : null}
+        <StackItem>
+          <div
+            className={
+              isExportMode
+                ? tableFullWidthStyle
+                : `${tableScrollStyle} ${tableFullWidthStyle}`
+            }
+          >
+            <Table aria-label="Operating systems" variant="compact">
+              <Thead>
+                <Tr>
+                  <Th>OS</Th>
+                  <Th>Tier</Th>
+                  <Th>VMs</Th>
                 </Tr>
-              ))
-            )}
-          </Tbody>
-        </Table>
-      </div>
+              </Thead>
+              <Tbody>
+                {vm.showNoResults ? (
+                  <Tr>
+                    <Td colSpan={3}>
+                      <EmptySearchResults title="No matching operating system found" />
+                    </Td>
+                  </Tr>
+                ) : (
+                  vm.filteredRows.map((row) => (
+                    <Tr key={row.osName}>
+                      <Td dataLabel="OS">
+                        <OsNameCell
+                          osName={row.osName}
+                          upgradeRecommendation={row.upgradeRecommendation}
+                          isExportMode={isExportMode}
+                        />
+                      </Td>
+                      <Td dataLabel="Tier">
+                        <SupportTierBadge
+                          tier={row.tier}
+                          isExportMode={isExportMode}
+                        />
+                      </Td>
+                      <Td dataLabel="VMs">{row.count}</Td>
+                    </Tr>
+                  ))
+                )}
+              </Tbody>
+            </Table>
+          </div>
+        </StackItem>
+      </Stack>
     </>
   );
 };

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 "./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>
+      <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}>
+      <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}>
+      <Card isFullHeight>
+        <CardTitle>vSAN capabilities</CardTitle>
+        <CardBody>
+          <FeatureList items={[{ label: "vSAN", status: details.vsan }]} />
+        </CardBody>
+      </Card>
+    </GridItem>
+    <GridItem md={4}>
+      <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";