@openshift-assisted/ui-lib 2.52.2 → 5.0.0-cim

package/lib/cim/components/ClusterDeployment/NetworkConfiguration.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useCallback } from 'react';
 import { useFormikContext } from 'formik';
+import isCIDR from 'is-cidr';
 import { Checkbox, Grid } from '@patternfly/react-core';
 import { NetworkConfigurationValues } from '../../../common/types/clusters';
 import {
@@ -20,15 +21,17 @@ import {
   NETWORK_TYPE_OVN,
 } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { NetworkTypeControlGroup } from '../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
+import { NetworkTypeDropDown } from './networking/NetworkTypeDropdown';
 import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
 
 export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
   defaultNetworkSettings: Pick<
     ClusterDefaultConfig,
     | 'clusterNetworksIpv4'
+    | 'clusterNetworksIpv6'
     | 'clusterNetworksDualstack'
     | 'serviceNetworksIpv4'
+    | 'serviceNetworksIpv6'
     | 'serviceNetworksDualstack'
   >;
   hideManagedNetworking?: boolean;
@@ -63,11 +66,23 @@ const NetworkConfiguration = ({
       setAdvanced(checked);
 
       if (!checked) {
-        setFieldValue('clusterNetworks', defaultNetworkSettings.clusterNetworksIpv4);
-        setFieldValue('serviceNetworks', defaultNetworkSettings.serviceNetworksIpv4);
+        const primaryCidr = values.machineNetworks?.[0]?.cidr;
+        const useIPv6Defaults = primaryCidr && isCIDR.v6(primaryCidr);
+        setFieldValue(
+          'clusterNetworks',
+          useIPv6Defaults
+            ? defaultNetworkSettings.clusterNetworksIpv6
+            : defaultNetworkSettings.clusterNetworksIpv4,
+        );
+        setFieldValue(
+          'serviceNetworks',
+          useIPv6Defaults
+            ? defaultNetworkSettings.serviceNetworksIpv6
+            : defaultNetworkSettings.serviceNetworksIpv4,
+        );
       }
     },
-    [setFieldValue, defaultNetworkSettings],
+    [setFieldValue, defaultNetworkSettings, values.machineNetworks],
   );
 
   // Auto-enable advanced networking when switching to dual-stack
@@ -77,6 +92,37 @@ const NetworkConfiguration = ({
     }
   }, [isDualStack, toggleAdvConfiguration]);
 
+  // Sync cluster/service networks to match primary machine network family when single-stack (fix mismatch)
+  useEffect(() => {
+    if (isDualStack) {
+      return;
+    }
+    const primaryCidr = values.machineNetworks?.[0]?.cidr;
+    const firstClusterCidr = values.clusterNetworks?.[0]?.cidr;
+    if (!primaryCidr || !firstClusterCidr) {
+      return;
+    }
+    const primaryIsIPv6 = isCIDR.v6(primaryCidr);
+    const primaryIsIPv4 = isCIDR.v4(primaryCidr);
+    const clusterIsIPv6 = isCIDR.v6(firstClusterCidr);
+    const clusterIsIPv4 = isCIDR.v4(firstClusterCidr);
+
+    if (primaryIsIPv4 && clusterIsIPv6) {
+      setFieldValue('clusterNetworks', defaultNetworkSettings.clusterNetworksIpv4);
+      setFieldValue('serviceNetworks', defaultNetworkSettings.serviceNetworksIpv4);
+    } else if (primaryIsIPv6 && clusterIsIPv4) {
+      setFieldValue('clusterNetworks', defaultNetworkSettings.clusterNetworksIpv6);
+      setFieldValue('serviceNetworks', defaultNetworkSettings.serviceNetworksIpv6);
+    }
+  }, [
+    isDualStack,
+    values.machineNetworks,
+    values.clusterNetworks,
+    values.serviceNetworks,
+    setFieldValue,
+    defaultNetworkSettings,
+  ]);
+
   const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
   const primaryMachineNetwork = values.machineNetworks?.[0]?.cidr;
 
@@ -117,6 +163,7 @@ const NetworkConfiguration = ({
     validateField,
     primaryMachineNetwork,
   ]);
+
   return (
     <Grid hasGutter>
       {!hideManagedNetworking && <ManagedNetworkingControlGroup />}
@@ -128,17 +175,18 @@ const NetworkConfiguration = ({
         />
       )}
 
+      <NetworkTypeDropDown isSDNSelectable={isSDNSelectable} />
+
       {(!isMultiNodeCluster || !isUserManagedNetworking) && (
         <StackTypeControlGroup
           clusterId={cluster.id}
           isDualStackSelectable={isDualStackSelectable}
           hostSubnets={hostSubnets}
           defaultNetworkValues={defaultNetworkSettings}
+          allowSingleStackIPv6
         />
       )}
 
-      <NetworkTypeControlGroup isSDNSelectable={isSDNSelectable} />
-
       {!(isMultiNodeCluster && isUserManagedNetworking) && (
         <AvailableSubnetsControl
           clusterId={cluster.id}
@@ -148,6 +196,7 @@ const NetworkConfiguration = ({
           openshiftVersion={cluster.openshiftVersion}
           hosts={cluster.hosts || []}
           isMultiNodeCluster={isMultiNodeCluster}
+          allowSingleStackIPv6
         />
       )}
 

package/lib/cim/components/ClusterDeployment/customManifests/ClusterDeploymentCustomManifestsStep.tsx

@@ -11,7 +11,12 @@ import {
   GridItem,
 } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { ClusterWizardStepHeader, useTranslation } from '../../../../common';
+import {
+  ClusterWizardStepHeader,
+  CustomManifestsAlert,
+  isThirdPartyCNI,
+  useTranslation,
+} from '../../../../common';
 import { AgentClusterInstallK8sResource, AgentClusterInstallModel } from '../../../types';
 import { ConfigMapForm, CustomManifestFormType } from './ConfigMapForm';
 import { appendPatch } from '../../../utils';
@@ -31,6 +36,9 @@ export const ClusterDeploymentCustomManifestsStep = ({
       })) || [],
   };
 
+  const usesExternalPlatform = agentClusterInstall.spec?.platformType === 'External';
+  const usesThirdPartyCNI = isThirdPartyCNI(agentClusterInstall.spec?.networking.networkType);
+
   const validationSchema = Yup.lazy((values: CustomManifestFormType) =>
     Yup.object<CustomManifestFormType>({
       configMaps: Yup.array()
@@ -54,7 +62,7 @@ export const ClusterDeploymentCustomManifestsStep = ({
           }),
         )
         .min(
-          agentClusterInstall.spec?.platformType === 'External' ? 1 : 0,
+          usesExternalPlatform || usesThirdPartyCNI ? 1 : 0,
           t('ai:At least one config map is required'),
         ),
     }),
@@ -114,6 +122,14 @@ export const ClusterDeploymentCustomManifestsStep = ({
           </Content>
         </Alert>
       </GridItem>
+      {(usesExternalPlatform || usesThirdPartyCNI) && (
+        <GridItem>
+          <CustomManifestsAlert
+            usesExternalPlatform={usesExternalPlatform}
+            usesThirdPartyCNI={usesThirdPartyCNI}
+          />
+        </GridItem>
+      )}
       <GridItem>
         <Formik
           initialValues={initialValues}

package/lib/cim/components/ClusterDeployment/networkConfigurationValidation.ts

@@ -1,36 +1,50 @@
+import isCIDR from 'is-cidr';
 import {
   Cluster,
   ClusterDefaultConfig,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NetworkConfigurationValues } from '../../../common/types/clusters';
 import { isDualStack } from '../../../common/components/clusterConfiguration/utils';
-import { DUAL_STACK, IPV4_STACK, NETWORK_TYPE_OVN } from '../../../common';
+import { DUAL_STACK, NETWORK_TYPE_OVN, SINGLE_STACK } from '../../../common';
 
 export const getNetworkInitialValues = (
   cluster: Cluster,
   defaultNetworkSettings: Pick<
     ClusterDefaultConfig,
     | 'clusterNetworksIpv4'
+    | 'clusterNetworksIpv6'
     | 'clusterNetworksDualstack'
     | 'serviceNetworksIpv4'
+    | 'serviceNetworksIpv6'
     | 'serviceNetworksDualstack'
   >,
 ): NetworkConfigurationValues => {
   const managedNetworkingType = cluster.userManagedNetworking ? 'userManaged' : 'clusterManaged';
   const isDualStackCluster = isDualStack(cluster);
+  const primaryMachineCidr = cluster.machineNetworks?.[0]?.cidr;
+  const isSingleStackIPv6 =
+    !isDualStackCluster && primaryMachineCidr && isCIDR.v6(primaryMachineCidr);
 
   let clusterNetworks = cluster.clusterNetworks;
   if (!cluster.clusterNetworks?.length) {
-    clusterNetworks = isDualStackCluster
-      ? defaultNetworkSettings.clusterNetworksDualstack
-      : defaultNetworkSettings.clusterNetworksIpv4;
+    if (isDualStackCluster) {
+      clusterNetworks = defaultNetworkSettings.clusterNetworksDualstack;
+    } else if (isSingleStackIPv6) {
+      clusterNetworks = defaultNetworkSettings.clusterNetworksIpv6;
+    } else {
+      clusterNetworks = defaultNetworkSettings.clusterNetworksIpv4;
+    }
   }
 
   let serviceNetworks = cluster.serviceNetworks;
   if (!serviceNetworks?.length) {
-    serviceNetworks = isDualStackCluster
-      ? defaultNetworkSettings.serviceNetworksDualstack
-      : defaultNetworkSettings.serviceNetworksIpv4;
+    if (isDualStackCluster) {
+      serviceNetworks = defaultNetworkSettings.serviceNetworksDualstack;
+    } else if (isSingleStackIPv6) {
+      serviceNetworks = defaultNetworkSettings.serviceNetworksIpv6;
+    } else {
+      serviceNetworks = defaultNetworkSettings.serviceNetworksIpv4;
+    }
   }
 
   const machineNetworks = cluster.machineNetworks || [];
@@ -45,6 +59,6 @@ export const getNetworkInitialValues = (
     vipDhcpAllocation: cluster.vipDhcpAllocation,
     managedNetworkingType,
     networkType: cluster.networkType || NETWORK_TYPE_OVN,
-    stackType: isDualStackCluster ? DUAL_STACK : IPV4_STACK,
+    stackType: isDualStackCluster ? DUAL_STACK : SINGLE_STACK,
   };
 };

package/lib/cim/components/ClusterDeployment/networking/NetworkTypeDropdown.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useField, useFormikContext } from 'formik';
+import {
+  Dropdown,
+  DropdownItem,
+  FormGroup,
+  MenuToggle,
+  MenuToggleElement,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { getFieldId } from '../../../../common/components/ui';
+import type { NetworkConfigurationValues } from '../../../../common/types/clusters';
+import {
+  NETWORK_TYPE_LABELS,
+  NETWORK_TYPE_SDN,
+  isThirdPartyCNI,
+} from '../../../../common/types/networkType';
+import { useTranslation } from '../../../../common/hooks';
+import { ThirdPartyCNIBanner } from '../../../../common';
+
+export const NetworkTypeDropDown = ({ isSDNSelectable }: { isSDNSelectable: boolean }) => {
+  const { t } = useTranslation();
+  const [field, , { setValue }] = useField<string>('networkType');
+  const [isOpen, setOpen] = React.useState(false);
+  const { values } = useFormikContext<NetworkConfigurationValues>();
+  const fieldId = getFieldId('networkType', 'input');
+
+  const showThirdPartyBanner = isThirdPartyCNI(values.networkType);
+
+  const currentDisplayValue = NETWORK_TYPE_LABELS(t)[field.value];
+  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS(t)).map(([value, label]) => (
+    <DropdownItem
+      key={value}
+      id={value}
+      value={value}
+      isAriaDisabled={value === NETWORK_TYPE_SDN && !isSDNSelectable}
+    >
+      {label}
+    </DropdownItem>
+  ));
+
+  const onSelect = (_event?: React.MouseEvent<Element, MouseEvent>, nextValue?: string): void => {
+    if (nextValue) {
+      setValue(nextValue);
+    }
+    setOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      id={fieldId}
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '100%' }}
+    >
+      {currentDisplayValue || t('ai:Network type')}
+    </MenuToggle>
+  );
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <FormGroup fieldId={fieldId} label={t('ai:Network type')} id={`form-control__${fieldId}`}>
+          <Dropdown
+            id={`${fieldId}-dropdown`}
+            onOpenChange={(open: boolean) => setOpen(open)}
+            onSelect={onSelect}
+            toggle={toggle}
+            isOpen={isOpen}
+          >
+            {dropdownItems}
+          </Dropdown>
+        </FormGroup>
+      </StackItem>
+      {showThirdPartyBanner && <ThirdPartyCNIBanner />}
+    </Stack>
+  );
+};

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -20,12 +20,8 @@ import {
   httpProxyValidationSchema,
   noProxyValidationSchema,
   CLUSTER_DEFAULT_NETWORK_SETTINGS,
-  clusterNetworksValidationSchema,
-  serviceNetworkValidationSchema,
-  dualStackValidationSchema,
-  IPv4ValidationSchema,
-  IPV4_STACK,
-  NetworkConfigurationValues,
+  clusterNetworksSchema,
+  serviceNetworksSchema,
 } from '../../../common';
 import { ClusterDeploymentNetworkingValues } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -53,22 +49,18 @@ const getNetworkConfigurationValidationSchema = (
 ) =>
   Yup.lazy((values: ClusterDeploymentNetworkingValues) =>
     Yup.object<ClusterDeploymentNetworkingValues>().shape({
-      clusterNetworks: clusterNetworksValidationSchema(t).when('stackType', {
-        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
-        then: () => clusterNetworksValidationSchema(t).concat(IPv4ValidationSchema),
-        otherwise: () =>
-          clusterNetworksValidationSchema(t).concat(
-            dualStackValidationSchema(t('ai:cluster network'), t, openshiftVersion),
-          ),
-      }),
-      serviceNetworks: serviceNetworkValidationSchema(t).when('stackType', {
-        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
-        then: () => serviceNetworkValidationSchema(t).concat(IPv4ValidationSchema),
-        otherwise: () =>
-          serviceNetworkValidationSchema(t).concat(
-            dualStackValidationSchema(t('ai:service network'), t, openshiftVersion),
-          ),
-      }),
+      clusterNetworks: clusterNetworksSchema(
+        t,
+        values.stackType ?? '',
+        values.machineNetworks?.[0]?.cidr,
+        openshiftVersion,
+      ),
+      serviceNetworks: serviceNetworksSchema(
+        t,
+        values.stackType ?? '',
+        values.machineNetworks?.[0]?.cidr,
+        openshiftVersion,
+      ),
       apiVips: vipArrayValidationSchema(hostSubnets, values, t),
       ingressVips: vipArrayValidationSchema(hostSubnets, values, t),
       sshPublicKey: sshPublicKeyListValidationSchema(t),

package/lib/cim/components/Hypershift/modals/NodePoolForm.tsx

@@ -13,7 +13,7 @@ import { useFormikContext } from 'formik';
 import { InputField } from '../../../../common';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { AgentK8sResource } from '../../../types';
-import { getAgentsForSelection, getVersionFromReleaseImage } from '../../helpers';
+import { getAgentsForSelection, getVersionFromReleaseString } from '../../helpers';
 import NodePoolAgentsForm from '../forms/NodePoolAgentsForm';
 import {
   AgentMachineK8sResource,
@@ -44,7 +44,7 @@ const NodePoolForm = ({ agents, nodePool, hostedCluster, agentMachines }: NodePo
       !agent.spec.clusterDeploymentName,
   );
 
-  const ocpVersion = getVersionFromReleaseImage(hostedCluster.spec.release.image);
+  const ocpVersion = getVersionFromReleaseString(hostedCluster.spec.release.image);
 
   if (isEdit) {
     const nodePoolAgents = getNodepoolAgents(nodePool, agents, agentMachines, hostedCluster);

package/lib/cim/components/featureSupportLevels/ACMFeatureSupportLevelProvider.tsx

@@ -9,7 +9,7 @@ import {
 import { ClusterImageSetK8sResource } from '../../types';
 import { featureSupportLevelsACM } from '../../config/constants';
 import { getFeatureDisabledReason, isFeatureSupported } from './featureStateUtils';
-import { getOCPVersions, getVersionFromReleaseImage } from '../helpers';
+import { getOCPVersions, getVersionFromClusterImageSet } from '../helpers';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 import { getMajorMinorVersion } from '../../../common/utils';
@@ -53,10 +53,7 @@ export const ACMFeatureSupportLevelProvider: React.FC<ACMFeatureSupportLevelProv
       const clusterImage = clusterImages.find(
         (clusterImageSet) => clusterImageSet.metadata?.name === versionName,
       );
-      const version =
-        getVersionFromReleaseImage(clusterImage?.spec?.releaseImage) ||
-        clusterImage?.metadata?.name ||
-        '';
+      const version = getVersionFromClusterImageSet(clusterImage);
       return getMajorMinorVersion(version);
     },
     [clusterImages],