@openshift-migration-advisor/shared-components 0.24.0 → 0.25.0-0ad1e70d1fa5

package/src/report/SupportTierBadge.tsx

@@ -1,4 +1,3 @@
-import { css } from "@emotion/css";
 import { Label, Tooltip } from "@patternfly/react-core";
 import type { FC } from "react";
 import {
@@ -9,47 +8,22 @@ import {
   type SupportTier,
 } from "./osSupportTier.js";
 
-const exportBadgeStyle = 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;
-`;
-
 interface SupportTierBadgeProps {
   tier: SupportTier;
-  isExportMode?: boolean;
 }
 
-const ExportSupportTierBadge: FC<{ tier: SupportTier }> = ({ tier }) => {
-  const { backgroundColor, color } = getSupportTierBadgeInlineStyle(tier);
-
-  return (
-    <span className={exportBadgeStyle} style={{ backgroundColor, color }}>
-      {getSupportTierLegendLabel(tier)}
+export const SupportTierBadge: FC<SupportTierBadgeProps> = ({ tier }) => (
+  <Tooltip content={getSupportTierDefinition(tier)}>
+    <span>
+      <Label
+        color={getSupportTierBadgeColor(tier)}
+        isCompact
+        style={getSupportTierBadgeInlineStyle(tier)}
+      >
+        {getSupportTierLegendLabel(tier)}
+      </Label>
     </span>
-  );
-};
-
-export const SupportTierBadge: FC<SupportTierBadgeProps> = ({
-  tier,
-  isExportMode = false,
-}) => {
-  if (isExportMode) {
-    return <ExportSupportTierBadge tier={tier} />;
-  }
-
-  return (
-    <Tooltip content={getSupportTierDefinition(tier)}>
-      <span>
-        <Label color={getSupportTierBadgeColor(tier)} isCompact>
-          {getSupportTierLegendLabel(tier)}
-        </Label>
-      </span>
-    </Tooltip>
-  );
-};
+  </Tooltip>
+);
 
 SupportTierBadge.displayName = "SupportTierBadge";

package/src/report/VCenterClusterDetails.tsx

@@ -0,0 +1,233 @@
+import { css } from "@emotion/css";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Content,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  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 { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportScrollProps } from "./chartExport.js";
+import { FeatureStatusBadge } from "./FeatureStatusBadge.js";
+import type {
+  ClusterDetailRow,
+  ClusterDetailsModel,
+  FeatureStatus,
+} from "./infrastructureSummaryModel.js";
+
+export interface VCenterClusterDetailsProps {
+  isAggregateView: boolean;
+  rows: ClusterDetailRow[];
+  details?: ClusterDetailsModel;
+}
+
+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[];
+}> = ({ rows }) => {
+  if (rows.length === 0) {
+    return <Content component="p">No vSphere clusters detected</Content>;
+  }
+
+  return (
+    <div
+      className={clusterDetailsTableScrollStyle}
+      data-scroll-constrained="true"
+      {...chartExportScrollProps}
+    >
+      <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>
+);
+
+const CLUSTER_DETAILS_CHART_ID = "vcenter-cluster-details";
+const CLUSTER_DETAILS_TITLE = "vCenter cluster details";
+
+export const VCenterClusterDetails: FC<VCenterClusterDetailsProps> = ({
+  isAggregateView,
+  rows,
+  details,
+}) => (
+  <ChartExportSurface
+    id={CLUSTER_DETAILS_CHART_ID}
+    title={CLUSTER_DETAILS_TITLE}
+  >
+    <Card isFullHeight>
+      <CardTitle>
+        <Flex
+          justifyContent={{ default: "justifyContentSpaceBetween" }}
+          alignItems={{ default: "alignItemsCenter" }}
+        >
+          <FlexItem>{CLUSTER_DETAILS_TITLE}</FlexItem>
+          <ChartHeaderActions
+            chartId={CLUSTER_DETAILS_CHART_ID}
+            title={CLUSTER_DETAILS_TITLE}
+          />
+        </Flex>
+      </CardTitle>
+      <CardBody>
+        {isAggregateView || !details ? (
+          <AggregateCluster rows={rows} />
+        ) : (
+          <DetailedClusterView details={details} />
+        )}
+      </CardBody>
+    </Card>
+  </ChartExportSurface>
+);
+
+VCenterClusterDetails.displayName = "VCenterClusterDetails";

package/src/report/VmPowerStates.tsx

@@ -0,0 +1,38 @@
+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>;
+  legendVariant?: MigrationDonutChartLegendVariant;
+}
+
+export const VmPowerStates: FC<VmPowerStatesProps> = ({
+  powerStates,
+  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"
+      legendVariant={legendVariant}
+    />
+  );
+};
+
+VmPowerStates.displayName = "VmPowerStates";