Allow HA CPN based on the selected OpenShift image

Author: jgyselov

Diff for: libs/locales/lib/en/translation.json

@@ -840,7 +840,7 @@
   "ai:This IP is being allocated by the DHCP server": "This IP is being allocated by the DHCP server",
   "ai:This IP was allocated by the DHCP server.": "This IP was allocated by the DHCP server.",
   "ai:This name will replace the original discovered hostname.": "This name will replace the original discovered hostname.",
-  "ai:This option is not available for Nutanix platform": "This option is not available for Nutanix platform",
+  "ai:This option is not available with the selected OpenShift version": "This option is not available with the selected OpenShift version",
   "ai:This option is not editable after the draft cluster is created": "This option is not editable after the draft cluster is created",
   "ai:this script.": "this script.",
   "ai:This stage may take a while to finish. To view detailed information, click the events log link below.": "This stage might take a while to finish. To view detailed information, click the events log link.",

Diff for: libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsForm.tsx

@@ -17,9 +17,10 @@ import {
   ClusterDetailsFormFieldsProps,
 } from './ClusterDetailsFormFields';
 import { useFormikContext } from 'formik';
-import { ClusterDetailsValues, CpuArchitecture, SupportedCpuArchitecture } from '../../../common';
+import { ClusterDetailsValues, CpuArchitecture } from '../../../common';
 import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
 import { ValidationSection } from './components/ValidationSection';
+import { toNumber } from 'lodash-es';
 
 type ClusterDeploymentDetailsFormProps = {
   clusterImages: ClusterImageSetK8sResource[];
@@ -109,22 +110,17 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
 
   const { values } = useFormikContext<ClusterDetailsValues>();
 
-  const cpuArchitectures = React.useMemo(() => {
+  const [cpuArchitectures, allowHighlyAvailable] = React.useMemo(() => {
     const cpuArchitectures = [CpuArchitecture.x86, CpuArchitecture.ARM, CpuArchitecture.s390x];
-    if (!osImages) {
-      return cpuArchitectures;
-    }
-
-    const openshiftVersion = versions
-      .find((ver) => ver.value === values.openshiftVersion)
-      ?.version.split('.')
-      .slice(0, 2)
-      .join('.');
+    const version = allVersions.find((ver) => ver.value === values.openshiftVersion);
+    const isMulti = version?.cpuArchitectures?.[0] === CpuArchitecture.MULTI;
 
-    return osImages
-      .filter((osImage) => osImage.openshiftVersion === openshiftVersion)
-      .map((osImage) => osImage.cpuArchitecture as SupportedCpuArchitecture);
-  }, [osImages, versions, values.openshiftVersion]);
+    const highlyAvailableSupported = toNumber(version?.version?.split('.')?.[1]) >= 18;
+    return [
+      isMulti ? cpuArchitectures : version?.cpuArchitectures,
+      highlyAvailableSupported && !isMulti,
+    ];
+  }, [allVersions, values.openshiftVersion]);
 
   return (
     <>
@@ -146,6 +142,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
           extensionAfter={extensionAfter}
           isNutanix={isNutanix}
           cpuArchitectures={cpuArchitectures}
+          allowHighlyAvailable={allowHighlyAvailable}
         />
       </StackItem>
     </>

Diff for: libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx

@@ -24,6 +24,7 @@ export type ClusterDetailsFormFieldsProps = {
   allVersions: OpenshiftVersionOptionType[];
   isNutanix?: boolean;
   cpuArchitectures?: string[];
+  allowHighlyAvailable?: boolean;
 };
 
 export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string }> = ({
@@ -52,6 +53,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   extensionAfter,
   isNutanix,
   cpuArchitectures,
+  allowHighlyAvailable,
 }) => {
   const { values } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain } = values;
@@ -146,7 +148,10 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
           )}
         </>
       )}
-      <ControlPlaneNodesDropdown isNutanix={isNutanix} isDisabled={isEditFlow} />
+      <ControlPlaneNodesDropdown
+        isDisabled={isEditFlow}
+        allowHighlyAvailable={allowHighlyAvailable}
+      />
       {!isNutanix && (
         <CpuArchitectureDropdown cpuArchitectures={cpuArchitectures} isDisabled={isEditFlow} />
       )}

Diff for: libs/ui-lib/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -11,21 +11,17 @@ interface ControlPlaneNodesOption {
   label: string;
 }
 
-const isDropdownItemEnabled = (controlPlaneNodeCount: number, isNutanix?: boolean): boolean => {
-  return (controlPlaneNodeCount === 1 && !isNutanix) || controlPlaneNodeCount !== 1;
-};
-
 const ControlPlaneNodesDropdown = ({
   isDisabled = false,
-  isNutanix,
+  allowHighlyAvailable,
 }: {
   isDisabled?: boolean;
-  isNutanix?: boolean;
+  allowHighlyAvailable?: boolean;
 }) => {
   const { t } = useTranslation();
-  const [{ name, value: selectedValue }, , { setValue }] = useField<number | 3>(
-    'controlPlaneCount',
-  );
+  const [{ name, value: selectedValue }, , { setValue }] = useField<number>('controlPlaneCount');
+  const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
 
   const options: ControlPlaneNodesOption[] = [
     { value: 1, label: t('ai:1 (Single Node OpenShift - not highly available cluster)') },
@@ -34,14 +30,21 @@ const ControlPlaneNodesDropdown = ({
     { value: 5, label: t('ai:5 (highly available cluster++)') },
   ];
 
+  React.useEffect(() => {
+    if (!allowHighlyAvailable && [4, 5].includes(selectedValue)) {
+      setValue(3);
+    }
+  }, [allowHighlyAvailable, selectedValue, setValue]);
+
   const dropdownItems = options.map(({ value, label }) => {
-    const isItemEnabled = isDropdownItemEnabled(value, isNutanix);
-    const disabledReason = t('ai:This option is not available for Nutanix platform');
+    const isItemEnabled = [1, 3].includes(value) || allowHighlyAvailable;
+    const disabledReason = t('ai:This option is not available with the selected OpenShift version');
     return (
       <DropdownItem
         key={value}
         id={value.toString()}
         isAriaDisabled={!isItemEnabled}
+        isDisabled={!isItemEnabled}
         selected={selectedValue === value}
         value={value}
       >
@@ -52,9 +55,6 @@ const ControlPlaneNodesDropdown = ({
     );
   });
 
-  const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
-  const fieldId = getFieldId(name, 'input');
-
   const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
     const val = e?.currentTarget.id as string;
     setValue(toNumber(val));