[releases/v2.47] MGMT-22116: Add info about apiVIPs and ingressVIPs for dual-stack in Review and Create page

libs/ui-lib/lib/common/components/clusterConfiguration/utils.ts

@@ -206,9 +206,7 @@ export const isDualStack = ({
   clusterNetworks,
   serviceNetworks,
   openshiftVersion,
-}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks'> & {
-  openshiftVersion?: string;
-}) =>
+}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks' | 'openshiftVersion'>) =>
   areNetworksDualStack(machineNetworks, openshiftVersion) &&
   areNetworksDualStack(clusterNetworks, openshiftVersion) &&
   areNetworksDualStack(serviceNetworks, openshiftVersion);

libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -34,7 +34,7 @@ export const getNetworkInitialValues = (
   isClusterManagedNetworkingUnsupported: boolean,
 ): NetworkConfigurationValues => {
   const isSNOCluster = isSNO(cluster);
-  const isDualStackType = isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion });
+  const isDualStackType = isDualStack(cluster);
 
   return {
     apiVips: cluster.apiVips,

libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx

@@ -1,12 +1,7 @@
 import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
-import {
-  genericTableRowKey,
-  isDualStack,
-  selectApiVip,
-  selectIngressVip,
-} from '../../../../common';
+import { genericTableRowKey, isDualStack } from '../../../../common';
 import {
   getManagementType,
   getStackTypeLabel,
@@ -58,7 +53,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'machine-networks' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion })
+          isDualStack(cluster)
             ? {
                 title: cluster.machineNetworks?.map((network, index) => (
                   <span key={network.cidr}>
@@ -78,9 +73,24 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'API IP' },
           {
-            title: selectApiVip(cluster),
-            props: { 'data-testid': 'api-vip', colSpan: 2 },
+            title: cluster.apiVips?.map((apiVip) => (
+              <span key={apiVip.ip}>
+                {apiVip.ip}
+                <br />
+              </span>
+            )),
+            props: { 'data-testid': 'api-vip' },
           },
+          isDualStack(cluster)
+            ? {
+                title: cluster.apiVips?.map((apiVip, index) => (
+                  <span key={apiVip.ip}>
+                    {index === 0 ? 'Primary' : 'Secondary'}
+                    <br />
+                  </span>
+                )),
+              }
+            : { title: '' },
         ],
       });
 
@@ -91,9 +101,24 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Ingress IP' },
           {
-            title: selectIngressVip(cluster),
-            props: { 'data-testid': 'ingress-vip', colSpan: 2 },
+            title: cluster.ingressVips?.map((ingressVip) => (
+              <span key={ingressVip.ip}>
+                {ingressVip.ip}
+                <br />
+              </span>
+            )),
+            props: { 'data-testid': 'ingress-vip' },
           },
+          isDualStack(cluster)
+            ? {
+                title: cluster.ingressVips?.map((ingressVip, index) => (
+                  <span key={ingressVip.ip}>
+                    {index === 0 ? 'Primary' : 'Secondary'}
+                    <br />
+                  </span>
+                )),
+              }
+            : { title: '' },
         ],
       });
 
@@ -115,7 +140,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-cidr' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+          isDualStack(cluster) && {
             title: cluster.clusterNetworks?.map((network, index) => (
               <span key={network.cidr}>
                 {index === 0 ? 'Primary' : 'Secondary'}
@@ -138,7 +163,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-prefix' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+          isDualStack(cluster) && {
             title: cluster.clusterNetworks?.map((network, index) => (
               <span key={network.hostPrefix}>
                 {index === 0 ? 'Primary' : 'Secondary'}
@@ -161,7 +186,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'service-network-cidr' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+          isDualStack(cluster) && {
             title: cluster.serviceNetworks?.map((network, index) => (
               <span key={network.cidr}>
                 {index === 0 ? 'Primary' : 'Secondary'}

libs/ui-lib/lib/ocm/components/clusterDetail/ClusterProperties.tsx

@@ -41,7 +41,7 @@ export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
 };
 
 export const getStackTypeLabel = (cluster: Cluster): string =>
-  isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) ? 'Dual-stack' : 'IPv4';
+  isDualStack(cluster) ? 'Dual-stack' : 'IPv4';
 
 export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption['enableOn']) => {
   let diskEncryptionType = null;
@@ -67,7 +67,7 @@ export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption[
 
 const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesProps) => {
   const { t } = useTranslation();
-  const isDualStackType = isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion });
+  const isDualStackType = isDualStack(cluster);
   const featureSupportLevelContext = useNewFeatureSupportLevel();
 
   const activeFeatureConfiguration = featureSupportLevelContext.activeFeatureConfiguration;