@openshift-migration-advisor/shared-components 0.23.0 → 0.25.0

package/dist/report/infrastructureSummaryModel.js

@@ -0,0 +1,139 @@
+const VSAN_TYPE_PATTERN = /vsan/i;
+export const formatVSphereVersion = (version) => {
+    if (!version?.trim()) {
+        return "—";
+    }
+    const withoutPrefix = version.trim().replace(/^vSphere\s+/i, "");
+    const parts = withoutPrefix.split(".");
+    while (parts.length > 3 && parts[parts.length - 1] === "0") {
+        parts.pop();
+    }
+    return `vSphere ${parts.join(".")}`;
+};
+export const booleanToFeatureStatus = (value) => {
+    if (value === true) {
+        return "enabled";
+    }
+    if (value === false) {
+        return "disabled";
+    }
+    return "unknown";
+};
+export const hostCapabilityStatus = (hosts, capability) => {
+    if (!hosts || hosts.length === 0) {
+        return "unknown";
+    }
+    const known = hosts
+        .map((host) => host[capability])
+        .filter((value) => typeof value === "boolean");
+    if (known.length === 0) {
+        return "unknown";
+    }
+    return known.some(Boolean) ? "enabled" : "disabled";
+};
+export const vsanStatus = (infra, vms) => {
+    const datastoreMatch = infra?.datastores?.some((datastore) => VSAN_TYPE_PATTERN.test(datastore.type ?? ""));
+    const diskTypeMatch = Object.keys(vms?.diskTypes ?? {}).some((type) => VSAN_TYPE_PATTERN.test(type));
+    if (datastoreMatch || diskTypeMatch) {
+        return "enabled";
+    }
+    if (infra?.datastores || vms?.diskTypes) {
+        return "disabled";
+    }
+    return "unknown";
+};
+const hostCount = (infra) => {
+    if (typeof infra?.totalHosts === "number") {
+        return infra.totalHosts;
+    }
+    if (infra?.hosts) {
+        return infra.hosts.length;
+    }
+    return undefined;
+};
+const datacenterCount = (infra) => {
+    if (typeof infra?.totalDatacenters === "number") {
+        return infra.totalDatacenters;
+    }
+    if (infra?.clustersPerDatacenter && infra.clustersPerDatacenter.length > 0) {
+        return infra.clustersPerDatacenter.length;
+    }
+    return undefined;
+};
+export const countVCenters = (clusters, vcenterId) => {
+    const ids = new Set();
+    if (vcenterId) {
+        ids.add(vcenterId);
+    }
+    for (const cluster of Object.values(clusters ?? {})) {
+        if (cluster.vcenter?.id) {
+            ids.add(cluster.vcenter.id);
+        }
+    }
+    return ids.size > 0 ? ids.size : undefined;
+};
+const toNetworkLabel = (network) => {
+    const vlanId = network.vlanId?.trim();
+    return {
+        name: network.name,
+        vlanId: vlanId || undefined,
+        displayName: vlanId ? `${network.name} (VLAN ${vlanId})` : network.name,
+    };
+};
+export const visibleNetworks = (infra) => (infra?.networks ?? [])
+    .filter((network) => Boolean(network.name?.trim()) && network.type !== "dvswitch")
+    .map(toNetworkLabel);
+export const buildInfrastructureSummary = ({ infra, vcenterVersion, vcenterId, clusters, }) => ({
+    vmwareVersion: formatVSphereVersion(vcenterVersion),
+    datacenters: datacenterCount(infra),
+    vCenters: countVCenters(clusters, vcenterId),
+    esxiHosts: hostCount(infra),
+});
+const clusterFeatureStatus = (cluster) => ({
+    vmotion: hostCapabilityStatus(cluster.infra?.hosts, "vmotionSupported"),
+    drs: booleanToFeatureStatus(cluster.clusterFeatures?.drsEnabled),
+    ha: booleanToFeatureStatus(cluster.clusterFeatures?.haEnabled),
+    vsan: vsanStatus(cluster.infra, cluster.vms),
+});
+const compareClustersByVmCount = (a, b, clusters) => {
+    const vmsA = clusters[a]?.vms?.total ?? 0;
+    const vmsB = clusters[b]?.vms?.total ?? 0;
+    return vmsB - vmsA || a.localeCompare(b);
+};
+export const buildClusterDetailRows = (clusters) => {
+    if (!clusters) {
+        return [];
+    }
+    return Object.keys(clusters)
+        .sort((a, b) => compareClustersByVmCount(a, b, clusters))
+        .map((id) => {
+        const cluster = clusters[id];
+        const features = clusterFeatureStatus(cluster);
+        return {
+            id,
+            name: id,
+            hosts: hostCount(cluster.infra) ?? 0,
+            vms: cluster.vms?.total ?? 0,
+            vmotion: features.vmotion,
+            drs: features.drs,
+            vsan: features.vsan,
+        };
+    });
+};
+export const buildClusterDetails = (cluster) => {
+    if (!cluster) {
+        return undefined;
+    }
+    const networks = visibleNetworks(cluster.infra);
+    const features = clusterFeatureStatus(cluster);
+    return {
+        hosts: hostCount(cluster.infra) ?? 0,
+        vms: cluster.vms?.total ?? 0,
+        networksDetected: networks.length,
+        vmotion: features.vmotion,
+        drs: features.drs,
+        ha: features.ha,
+        vsan: features.vsan,
+        networks,
+    };
+};

package/dist/report/powerStates.d.ts

@@ -0,0 +1,11 @@
+import type { MigrationDonutChartDatum } from "../charts/MigrationDonutChart.js";
+export type PowerStateChartModel = {
+    slices: MigrationDonutChartDatum[];
+    legend: Record<string, string>;
+    total: number;
+};
+export declare const HOST_POWER_COLORS: Record<string, string>;
+export declare const VM_POWER_COLORS: Record<string, string>;
+export declare const buildHostPowerStateChart: (hostPowerStates?: Record<string, number>) => PowerStateChartModel;
+export declare const buildVmPowerStateChart: (powerStates?: Record<string, number>) => PowerStateChartModel;
+//# sourceMappingURL=powerStates.d.ts.map

package/dist/report/powerStates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"powerStates.d.ts","sourceRoot":"","sources":["../../src/report/powerStates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,wBAAwB,EAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA8BF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMpD,CAAC;AAcF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAIlD,CAAC;AAmCF,eAAO,MAAM,wBAAwB,GACnC,kBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KACvC,oBAgCF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,cAAc,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KACnC,oBAmCF,CAAC"}

package/dist/report/powerStates.js

@@ -0,0 +1,113 @@
+const HOST_POWER_CATEGORIES = [
+    "Powered on",
+    "Powered off",
+    "Standby",
+    "Not responding",
+    "Maintenance",
+];
+const HOST_POWER_KEY_ALIASES = {
+    poweredon: "Powered on",
+    powered_on: "Powered on",
+    green: "Powered on",
+    poweredoff: "Powered off",
+    powered_off: "Powered off",
+    standby: "Standby",
+    stand_by: "Standby",
+    notresponding: "Not responding",
+    not_responding: "Not responding",
+    gray: "Not responding",
+    grey: "Not responding",
+    red: "Not responding",
+    maintenance: "Maintenance",
+    inmaintenance: "Maintenance",
+    inmaintenancemode: "Maintenance",
+};
+export const HOST_POWER_COLORS = {
+    "Powered on": "#0066cc",
+    "Powered off": "#dca614",
+    Standby: "#f0ab00",
+    "Not responding": "#c9190b",
+    Maintenance: "#002f5d",
+};
+const VM_POWER_CATEGORIES = ["Powered off", "Powered on", "Suspended"];
+const VM_POWER_KEY_ALIASES = {
+    poweredoff: "Powered off",
+    powered_off: "Powered off",
+    poweredon: "Powered on",
+    powered_on: "Powered on",
+    suspended: "Suspended",
+};
+export const VM_POWER_COLORS = {
+    "Powered off": "#0066cc",
+    "Powered on": "#dca614",
+    Suspended: "#5e40be",
+};
+const OTHER_COLOR = "#6a6e73";
+const normalizeKey = (key) => key
+    .trim()
+    .toLowerCase()
+    .replace(/[\s-]+/g, "");
+const formatUnknownLabel = (key) => {
+    const spaced = key
+        .replace(/[_-]+/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .trim();
+    if (!spaced) {
+        return "Unknown";
+    }
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+};
+const toSlice = (name, count, unit) => ({
+    name,
+    count,
+    legendCategory: name,
+    countDisplay: `${count} ${count === 1 ? unit.replace(/s$/, "") : unit}`,
+});
+const sumCounts = (counts) => Object.values(counts).reduce((total, count) => total + (count || 0), 0);
+export const buildHostPowerStateChart = (hostPowerStates) => {
+    const counts = Object.fromEntries(HOST_POWER_CATEGORIES.map((category) => [category, 0]));
+    for (const [key, count] of Object.entries(hostPowerStates ?? {})) {
+        const mapped = HOST_POWER_KEY_ALIASES[normalizeKey(key)];
+        const label = mapped ?? formatUnknownLabel(key);
+        counts[label] = (counts[label] ?? 0) + (count || 0);
+    }
+    const orderedLabels = [
+        ...HOST_POWER_CATEGORIES,
+        ...Object.keys(counts).filter((label) => !HOST_POWER_CATEGORIES.includes(label)),
+    ];
+    const slices = orderedLabels.map((label) => toSlice(label, counts[label] ?? 0, "hosts"));
+    const legend = {};
+    for (const label of orderedLabels) {
+        legend[label] = HOST_POWER_COLORS[label] ?? OTHER_COLOR;
+    }
+    return {
+        slices,
+        legend,
+        total: sumCounts(counts),
+    };
+};
+export const buildVmPowerStateChart = (powerStates) => {
+    const counts = {
+        "Powered off": 0,
+        "Powered on": 0,
+    };
+    for (const [key, count] of Object.entries(powerStates ?? {})) {
+        const mapped = VM_POWER_KEY_ALIASES[normalizeKey(key)];
+        const label = mapped ?? formatUnknownLabel(key);
+        counts[label] = (counts[label] ?? 0) + (count || 0);
+    }
+    const orderedLabels = [
+        ...VM_POWER_CATEGORIES.filter((category) => category !== "Suspended" || (counts[category] ?? 0) > 0),
+        ...Object.keys(counts).filter((label) => !VM_POWER_CATEGORIES.includes(label)),
+    ];
+    const slices = orderedLabels.map((label) => toSlice(label, counts[label] ?? 0, "VMs"));
+    const legend = {};
+    for (const label of orderedLabels) {
+        legend[label] = VM_POWER_COLORS[label] ?? OTHER_COLOR;
+    }
+    return {
+        slices,
+        legend,
+        total: sumCounts(counts),
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",

package/src/charts/index.ts

@@ -1,5 +1,6 @@
 export {
   MigrationDonutChart,
   type MigrationDonutChartDatum,
+  type MigrationDonutChartLegendVariant,
   type MigrationDonutChartProps,
 } from "./MigrationDonutChart.js";

package/src/forms/RadioButtonFormGroup.tsx

@@ -33,12 +33,19 @@ export default function RadioButtonFormGroup({
   const showError = error && (isTouched || isSubmitted);
 
   return (
-    <FormGroup label={label} isRequired={isRequired} fieldId={id} {...props}>
+    <FormGroup
+      label={label}
+      isRequired={isRequired}
+      fieldId={id}
+      role="radiogroup"
+      isInline
+      {...props}
+    >
       <Controller
         name={name}
         control={methods.control}
         render={({ field }) => (
-          <div style={{ display: "flex", gap: "16px" }} role="radiogroup">
+          <>
             {options.map((option) => (
               <Radio
                 key={option.value}
@@ -50,7 +57,7 @@ export default function RadioButtonFormGroup({
                 onBlur={field.onBlur}
               />
             ))}
-          </div>
+          </>
         )}
       />
       <FormFieldHelperText

package/src/report/FeatureStatusBadge.tsx

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

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

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