Change controlPlaneCount to number in CIM and OCM dropdowns

openshift-assisted · Dec 23, 2024 · 0c0d0ef · 0c0d0ef
1 parent 8750641
commit 0c0d0ef
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 76 deletions.
diff --git a/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx b/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx
@@ -110,12 +110,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
           }}
         />
       )}
-      <ControlPlaneNodesDropdown
-        isNutanix={isNutanix}
-        isDisabled={isEditFlow}
-        cpuArchitecture={cpuArchitecture}
-        openshiftVersion={openshiftVersion}
-      />
+      <ControlPlaneNodesDropdown isNutanix={isNutanix} isDisabled={isEditFlow} />
       {!isNutanix && (
         <CpuArchitectureDropdown cpuArchitectures={cpuArchitectures} isDisabled={isEditFlow} />
       )}

diff --git a/libs/ui-lib/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx b/libs/ui-lib/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx
@@ -1,61 +1,31 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle, FormGroup, Tooltip } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { FormGroup, Tooltip } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getFieldId, StaticField } from '../..';
 import { useField } from 'formik';
 import toNumber from 'lodash-es/toNumber';
-import { TFunction } from 'react-i18next';
 
 interface ControlPlaneNodesOption {
   value: number;
   label: string;
 }
 
-const isDropdownItemEnabled = (
-  controlPlaneNodeCount: number,
-  isNutanix?: boolean,
-  openshiftVersion?: string,
-  cpuArch?: string,
-): boolean => {
-  if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
-    return parseFloat(openshiftVersion || '') >= 4.18 && cpuArch === 'x86_64';
-  } else if (controlPlaneNodeCount === 1) {
-    return !isNutanix;
-  }
-  return true;
+const isDropdownItemEnabled = (controlPlaneNodeCount: number, isNutanix?: boolean): boolean => {
+  return (controlPlaneNodeCount === 1 && !isNutanix) || controlPlaneNodeCount !== 1;
 };
 
-const getDisabledReason = (
-  controlPlaneNodeCount: number,
-  t: TFunction<string, undefined>,
-): string => {
-  if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
-    return t(
-      'ai:This option is not available with the current configurations. Make sure that OpenShift version is 4.18 or newer and CPU architecture is x86_64. ',
-    );
-  } else if (controlPlaneNodeCount === 1) {
-    return t('ai:This option is not available for Nutanix platform');
-  } else {
-    return '';
-  }
-};
-
-interface ControlPlaneNodesDropdownProps {
-  isDisabled?: boolean;
-  isNutanix?: boolean;
-  cpuArchitecture?: string;
-  openshiftVersion?: string;
-}
-
 const ControlPlaneNodesDropdown = ({
   isDisabled = false,
   isNutanix,
-  cpuArchitecture,
-  openshiftVersion,
-}: ControlPlaneNodesDropdownProps) => {
+}: {
+  isDisabled?: boolean;
+  isNutanix?: boolean;
+}) => {
   const { t } = useTranslation();
-  const [{ name, value }, , { setValue }] = useField<number>('controlPlaneAgents');
-  const [current, setCurrent] = React.useState<number>(3);
+  const [{ name, value: selectedValue }, , { setValue }] = useField<number | 3>(
+    'controlPlaneAgents',
+  );
 
   const options: ControlPlaneNodesOption[] = [
     { value: 1, label: t('ai:1 (Single Node OpenShift - not highly available cluster)') },
@@ -65,19 +35,15 @@ const ControlPlaneNodesDropdown = ({
   ];
 
   const dropdownItems = options.map(({ value, label }) => {
-    const isItemEnabled = isDropdownItemEnabled(
-      value,
-      isNutanix,
-      openshiftVersion,
-      cpuArchitecture,
-    );
-    const disabledReason = getDisabledReason(value, t);
+    const isItemEnabled = isDropdownItemEnabled(value, isNutanix);
+    const disabledReason = t('ai:This option is not available for Nutanix platform');
     return (
       <DropdownItem
         key={value}
         id={value.toString()}
         isAriaDisabled={!isItemEnabled}
-        selected={current === value}
+        selected={selectedValue === value}
+        value={value}
       >
         <Tooltip hidden={isItemEnabled} content={disabledReason} position="top">
           <div>{label}</div>
@@ -92,7 +58,6 @@ const ControlPlaneNodesDropdown = ({
   const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
     const val = e?.currentTarget.id as string;
     setValue(toNumber(val));
-    setCurrent(toNumber(val));
     setControlPlanelOpen(false);
   };
 
@@ -104,7 +69,7 @@ const ControlPlaneNodesDropdown = ({
             onToggle={() => setControlPlanelOpen(!controlPlanelOpen)}
             className="pf-u-w-100"
           >
-            {value ? value : '3'}
+            {selectedValue ? selectedValue : '3'}
           </DropdownToggle>
         }
         name="controlPlaneAgents"
@@ -120,7 +85,7 @@ const ControlPlaneNodesDropdown = ({
       label={t('ai:Number of control plane nodes')}
       isRequired
     >
-      {value}
+      {selectedValue}
     </StaticField>
   );
 };

diff --git a/libs/ui-lib/lib/common/components/clusterWizard/clusterDetailsValidation.ts b/libs/ui-lib/lib/common/components/clusterWizard/clusterDetailsValidation.ts
@@ -81,7 +81,7 @@ export const getClusterDetailsInitialValues = ({
     platform: cluster?.platform?.type || 'none',
     customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
-    controlPlaneCount: cluster?.controlPlaneCount?.toString() || '3',
+    controlPlaneCount: cluster?.controlPlaneCount || 3,
   };
 };
 

diff --git a/libs/ui-lib/lib/common/components/clusterWizard/types.ts b/libs/ui-lib/lib/common/components/clusterWizard/types.ts
@@ -34,7 +34,7 @@ export type ClusterDetailsValues = {
   platform: PlatformType;
   customOpenshiftSelect: OpenshiftVersionOptionType | null;
   userManagedNetworking: boolean;
-  controlPlaneCount: string;
+  controlPlaneCount: number;
 };
 
 export type HostsValidationsProps<S extends string, V extends string[]> = {

diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx
@@ -8,10 +8,11 @@ import {
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
 import OcmSNODisclaimer from './OcmSNODisclaimer';
+import toNumber from 'lodash-es/toNumber';
 
 const INPUT_NAME = 'controlPlaneCount';
 const fieldId = getFieldId(INPUT_NAME, 'input');
-const DEFAULT_VALUE = '3';
+const DEFAULT_VALUE = 3;
 
 export const ControlPlaneNodesLabel = () => {
   return (
@@ -31,7 +32,7 @@ export const ControlPlaneNodesLabel = () => {
 };
 
 interface ControlPlaneNodesOption {
-  value: string;
+  value: number;
   label: string;
 }
 
@@ -40,10 +41,10 @@ interface ControlPlaneNodesDropdownProps {
 }
 
 const isDropdownItemEnabled = (
-  controlPlaneNodeCount: string,
+  controlPlaneNodeCount: number,
   isNonStandardControlPlaneEnabled: boolean,
 ): boolean => {
-  if (controlPlaneNodeCount === '4' || controlPlaneNodeCount === '5') {
+  if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
     return isNonStandardControlPlaneEnabled;
   }
   return true;
@@ -52,7 +53,7 @@ const isDropdownItemEnabled = (
 const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   featureSupportLevelData,
 }) => {
-  const [field, , { setValue }] = useField<string>(INPUT_NAME);
+  const [field, , { setValue }] = useField<number>(INPUT_NAME);
   const [isOpen, setOpen] = React.useState<boolean>(false);
   const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
 
@@ -78,10 +79,10 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   );
 
   const options: ControlPlaneNodesOption[] = [
-    { value: '1', label: '1 (Single Node OpenShift - not highly available cluster)' },
-    { value: '3', label: '3 (highly available cluster)' },
-    { value: '4', label: '4 (highly available cluster+)' },
-    { value: '5', label: '5 (highly available cluster++)' },
+    { value: 1, label: '1 (Single Node OpenShift - not highly available cluster)' },
+    { value: 3, label: '3 (highly available cluster)' },
+    { value: 4, label: '4 (highly available cluster+)' },
+    { value: 5, label: '5 (highly available cluster++)' },
   ];
 
   React.useEffect(() => {
@@ -92,14 +93,14 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
 
   const onSelect = (event?: React.SyntheticEvent<HTMLDivElement>): void => {
     const selectedValue = event?.currentTarget.id as string;
-    setValue(selectedValue);
+    setValue(toNumber(selectedValue));
     setOpen(false);
   };
 
   const dropdownItems = options.map(({ value, label }) => {
     const isItemEnabled = isDropdownItemEnabled(value, isNonStandardControlPlaneEnabled);
     return (
-      <DropdownItem key={value} id={value} isAriaDisabled={!isItemEnabled}>
+      <DropdownItem key={value} id={value.toString()} isAriaDisabled={!isItemEnabled}>
         <Tooltip hidden={isItemEnabled} content={disabledReason} position="top">
           <div>{label}</div>
         </Tooltip>
@@ -128,7 +129,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
           onSelect={onSelect}
         />
       </FormGroup>
-      {field.value === '1' && (
+      {field.value === 1 && (
         <OcmSNODisclaimer
           isDisabled={isDisabled}
           snoSupportLevel={snoSupportLevel || 'supported'}

diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx
@@ -171,7 +171,7 @@ export const OcmClusterDetailsFormFields = ({
           onChange={handleExternalPartnerIntegrationsChange}
           cpuArchitecture={values.cpuArchitecture as SupportedCpuArchitecture}
           featureSupportLevelData={featureSupportLevelData}
-          isSNO={values.controlPlaneCount === '1'}
+          isSNO={values.controlPlaneCount === 1}
         />
       )}
 
@@ -197,7 +197,7 @@ export const OcmClusterDetailsFormFields = ({
       <DiskEncryptionControlGroup
         values={values}
         isDisabled={isPullSecretSet}
-        isSNO={values.controlPlaneCount === '1'}
+        isSNO={values.controlPlaneCount === 1}
         docVersion={openshiftVersion}
       />
     </Form>

diff --git a/libs/ui-lib/lib/ocm/services/ClusterDetailsService.ts b/libs/ui-lib/lib/ocm/services/ClusterDetailsService.ts
@@ -21,7 +21,6 @@ import {
   ManagedDomain,
   PlatformType,
 } from '@openshift-assisted/types/assisted-installer-service';
-import toNumber from 'lodash-es/toNumber';
 
 const getNewClusterCpuArchitecture = (urlSearchParams: string) => {
   const params = new URLSearchParams(urlSearchParams);
@@ -37,7 +36,7 @@ const ClusterDetailsService = {
   getClusterCreateParams(values: OcmClusterDetailsValues): ClusterCreateParamsWithStaticNetworking {
     const params: ClusterCreateParamsWithStaticNetworking = {
       name: values.name,
-      controlPlaneCount: toNumber(values.controlPlaneCount),
+      controlPlaneCount: values.controlPlaneCount,
       openshiftVersion: values.openshiftVersion,
       pullSecret: values.pullSecret,
       baseDnsDomain: values.baseDnsDomain,