ACM-13728: Missing s390x arch option in Cpu architecture in InfraEnv

libs/locales/lib/en/translation.json

@@ -50,7 +50,7 @@
   "ai:Add host using Baseboard Management Controller (BMC)": "Add host using Baseboard Management Controller (BMC)",
   "ai:Add hosts": "Add hosts",
   "ai:Add hosts by uploading YAML (BMC)": "Add hosts by uploading YAML (BMC)",
-  "ai:Add hosts with {{cpuArchitecture}} architecture to an <4>infrastructure environment</4>": "Add hosts with {{cpuArchitecture}} architecture to an <4>infrastructure environment</4>",
+  "ai:Add hosts with {{cpuArchitecture}} architecture to an <6>infrastructure environment</6>": "Add hosts with {{cpuArchitecture}} architecture to an <6>infrastructure environment</6>",
   "ai:Add label": "Add label",
   "ai:Add more": "Add more",
   "ai:Add Nodepool": "Add nodepool",
@@ -142,7 +142,6 @@
   "ai:Check assisted-installer logs": "Check assisted-installer logs",
   "ai:Check bootkube logs": "Check bootkube logs",
   "ai:Check the proxy settings and verify that the assisted installer service is connected to a network. You can use <code>nmcli</code> to get additional information about your network configuration.": "Check the proxy settings and verify that the assisted installer service is connected to a network. You can use <code>nmcli</code> to get additional information about your network configuration.",
-  "ai:Check this option if you want to use the arm64 CPU architecture instead of the default x86_64 CPU architecture. Please note that some features will not be available.": "Select this option if you want to use the arm64 CPU architecture instead of the default x86_64 CPU architecture. Note that some features will not be available.",
   "ai:Check your VM reboot configuration": "Check your VM reboot configuration.",
   "ai:Choose a namespace from your existing host inventory in order to select hosts for your node pools. The namespace will be composed of 1 or more infrastructure environments. After the cluster is created, a host will become a worker node.": "Select a namespace from your existing host inventory in order to select hosts for your node pools. The namespace will contain 1 or more infrastructure environments. After the cluster is created, a host becomes a worker node.",
   "ai:Clear": "Clear",
@@ -491,7 +490,6 @@
   "ai:Machine CIDR": "Machine CIDR",
   "ai:Machine CIDR conforms expected": "Machine CIDR conforms expected",
   "ai:Machine networks": "Machine networks",
-  "ai:Make sure all the hosts are using arm64 CPU architecture.": "Make sure all the hosts are using arm64 CPU architecture.",
   "ai:Make sure that the VIP is unique and not used by any other device on your network.": "Make sure that the VIP is unique and not used by any other device on your network.",
   "ai:Make sure that you expect and recognize the host before approving.": "Make sure that you expect and recognize the host before approving.",
   "ai:Manage hosts": "Manage hosts",
@@ -846,7 +844,6 @@
   "ai:Use a comma to separate each listed domain. Preface a domain with <bold>.</bold> to include its subdomains. Use <bold>*</bold> to bypass the proxy for all destinations.": "Use a comma to separate each listed domain. Preface a domain with <bold>.</bold> to include its subdomains. Use <bold>*</bold> to bypass the proxy for all destinations.",
   "ai:Use advanced networking": "Use advanced networking",
   "ai:Use alphanumeric characters, dot (.), underscore (_) or hyphen (-)": "Use alphanumeric characters, dot (.), underscore (_) or hyphen (-)",
-  "ai:Use arm64 CPU architecture": "Use arm64 CPU architecture",
   "ai:Use autoscaling": "Use autoscaling",
   "ai:Use lowercase alphanumeric characters or hyphen (-)": "Use lowercase alphanumeric characters or hyphen (-)",
   "ai:Use lowercase alphanumeric characters, dot (.) or hyphen (-)": "Use lowercase alphanumeric characters, dot (.) or hyphen (-)",

libs/ui-lib/lib/cim/components/Agent/NoAgentsAlert.tsx

@@ -3,27 +3,31 @@ import { Alert, AlertVariant, List, ListComponent, ListItem } from '@patternfly/
 import { Link } from 'react-router-dom-v5-compat';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
-import { CpuArchitecture } from '../../../common';
+import { architectureData, CpuArchitecture, SupportedCpuArchitecture } from '../../../common';
 
 const NoAgentsAlert = ({ cpuArchitecture }: { cpuArchitecture: CpuArchitecture }) => {
   const { t } = useTranslation();
   return (
     <Alert
       variant={AlertVariant.warning}
       title={t('ai:No available hosts with {{cpuArchitecture}} architecture were found', {
-        cpuArchitecture,
+        cpuArchitecture: architectureData[cpuArchitecture as SupportedCpuArchitecture].label,
       })}
       isInline
     >
       {t(
         'ai:The cluster can not be installed yet because there are no available hosts with {{cpuArchitecture}} architecture found. To continue:',
-        { cpuArchitecture },
+        { cpuArchitecture: architectureData[cpuArchitecture as SupportedCpuArchitecture].label },
       )}
       <br />
       <List component={ListComponent.ol}>
         <ListItem>
           <Trans t={t} cpuArchitecture={cpuArchitecture}>
-            ai:Add hosts with {{ cpuArchitecture }} architecture to an{' '}
+            ai:Add hosts with{' '}
+            {{
+              cpuArchitecture: architectureData[cpuArchitecture as SupportedCpuArchitecture].label,
+            }}{' '}
+            architecture to an{' '}
             <Link to="/multicloud/infrastructure/environments">infrastructure environment</Link>
           </Trans>
         </ListItem>

libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx

@@ -13,7 +13,7 @@ import {
 } from '../../../common/components/ui/formik';
 import { ClusterDetailsValues } from '../../../common/components/clusterWizard/types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import ArmCheckbox from './ArmCheckbox';
+import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
 import { SNOControlGroup } from '../../../common';
 import { getNetworkType } from '../helpers';
 
@@ -52,6 +52,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
 }) => {
   const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain, highAvailabilityMode } = values;
+
   const nameInputRef = React.useRef<HTMLInputElement>();
   React.useEffect(() => {
     nameInputRef.current?.focus();
@@ -111,7 +112,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
       {!isNutanix && (
         <>
           <SNOControlGroup versions={versions} highAvailabilityMode={highAvailabilityMode} />
-          <ArmCheckbox versions={versions} />
+          <CpuArchitectureDropdown isDisabled={isEditFlow} />
         </>
       )}
       {extensionAfter?.['openshiftVersion'] && extensionAfter['openshiftVersion']}

libs/ui-lib/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -20,7 +20,12 @@ import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 
-import { CpuArchitecture, LabelValue } from '../../../common';
+import {
+  architectureData,
+  CpuArchitecture,
+  LabelValue,
+  SupportedCpuArchitecture,
+} from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { AGENT_LOCATION_LABEL_KEY } from '../common';
 import EditPullSecretModal, { EditPullSecretModalProps } from '../modals/EditPullSecretModal';
@@ -160,7 +165,8 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:CPU architecture')}</DescriptionListTerm>
               <DescriptionListDescription>
-                {infraEnv.spec?.cpuArchitecture ?? CpuArchitecture.x86}
+                {architectureData[infraEnv.spec?.cpuArchitecture as SupportedCpuArchitecture]
+                  .label ?? CpuArchitecture.x86}
               </DescriptionListDescription>
             </DescriptionListGroup>
             <DescriptionListGroup>

libs/ui-lib/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -48,6 +48,7 @@ import './infra-env.css';
 import { getErrorMessage } from '../../../common/utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
+import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
 
 export type EnvironmentStepFormValues = {
   name: string;
@@ -60,7 +61,10 @@ export type EnvironmentStepFormValues = {
   enableProxy: boolean;
   labels: string[];
   networkType: 'dhcp' | 'static';
-  cpuArchitecture: CpuArchitecture;
+  cpuArchitecture: Extract<
+    CpuArchitecture,
+    CpuArchitecture.x86 | CpuArchitecture.ARM | CpuArchitecture.s390x
+  >;
   enableNtpSources: boolean;
   additionalNtpSources: string;
 };
@@ -136,6 +140,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
     setFieldValue('sshPublicKey', sshPublicKey);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pullSecret, sshPublicKey]);
+
   return (
     <Stack hasGutter>
       <StackItem>
@@ -216,27 +221,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
               </FlexItem>
             </Flex>
           </FormGroup>
-          <FormGroup fieldId="cpuArchitecture" label={t('ai:CPU architecture')}>
-            <Flex justifyContent={{ default: 'justifyContentFlexStart' }}>
-              <FlexItem>
-                <RadioField
-                  name="cpuArchitecture"
-                  id="x86_64"
-                  value="x86_64"
-                  label={t('ai:x86_64')}
-                />
-              </FlexItem>
-              <FlexItem spacer={{ default: 'spacer4xl' }} />
-              <FlexItem>
-                <RadioField
-                  name="cpuArchitecture"
-                  id="arm64"
-                  value="arm64"
-                  label={<>{t('ai:arm64')}&nbsp;</>}
-                />
-              </FlexItem>
-            </Flex>
-          </FormGroup>
+          <CpuArchitectureDropdown />
           <RichInputField
             label={t('ai:Location')}
             name="location"

libs/ui-lib/lib/cim/components/common/CpuArchitectureDropdown.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Dropdown, DropdownItem, DropdownToggle, FormGroup } from '@patternfly/react-core';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import {
+  architectureData,
+  CpuArchitecture,
+  getFieldId,
+  StaticField,
+  SupportedCpuArchitecture,
+} from '../../../common';
+import { useField } from 'formik';
+import { useFormikHelpers } from '../../../common/hooks/useFormikHelpers';
+
+const CpuArchitectureDropdown = ({ isDisabled = false }: { isDisabled?: boolean }) => {
+  const { t } = useTranslation();
+  const [{ name, value }, , { setValue }] = useField<SupportedCpuArchitecture>('cpuArchitecture');
+  const [cpuArchOpen, setCpuArchOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
+  const { setValue: setUserManagedNetworking } = useFormikHelpers<boolean>('userManagedNetworking');
+
+  const onCpuArchSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
+    const val = e?.currentTarget.id as SupportedCpuArchitecture;
+    setValue(val);
+    setUserManagedNetworking(val === CpuArchitecture.s390x);
+
+    setCpuArchOpen(false);
+  };
+
+  return !isDisabled ? (
+    <FormGroup isInline fieldId={fieldId} label={t('ai:CPU architecture')} required>
+      <Dropdown
+        toggle={
+          <DropdownToggle onToggle={() => setCpuArchOpen(!cpuArchOpen)} className="pf-u-w-100">
+            {value ? architectureData[value].label : t('ai:CPU architecture')}
+          </DropdownToggle>
+        }
+        name="cpuArchitecture"
+        isOpen={cpuArchOpen}
+        onSelect={onCpuArchSelect}
+        dropdownItems={[
+          <DropdownItem
+            key={'x86_64'}
+            id="x86_64"
+            description={architectureData['x86_64'].description}
+          >
+            {architectureData['x86_64'].label}
+          </DropdownItem>,
+          <DropdownItem
+            key={'arm64'}
+            id="arm64"
+            description={architectureData['arm64'].description}
+          >
+            {architectureData['arm64'].label}
+          </DropdownItem>,
+          <DropdownItem
+            key={'s390x'}
+            id="s390x"
+            description={architectureData['s390x'].description}
+          >
+            {architectureData['s390x'].label}
+          </DropdownItem>,
+        ]}
+        className="pf-u-w-100"
+      />
+    </FormGroup>
+  ) : (
+    <StaticField name={'cpuArchitecture'} label={t('ai:CPU architecture')} isRequired>
+      {architectureData[value].label}
+    </StaticField>
+  );
+};
+
+export default CpuArchitectureDropdown;

libs/ui-lib/lib/cim/components/helpers/clusterDeployment.ts

@@ -234,5 +234,12 @@ export const getClusterDeploymentCpuArchitecture = (
     arch = clusterDeployment.metadata?.annotations?.[CPU_ARCHITECTURE_ANNOTATION_KEY];
   }
 
-  return arch === CpuArchitecture.ARM ? CpuArchitecture.ARM : CpuArchitecture.x86;
+  switch (arch) {
+    case CpuArchitecture.ARM:
+      return CpuArchitecture.ARM;
+    case CpuArchitecture.s390x:
+      return CpuArchitecture.s390x;
+    default:
+      return CpuArchitecture.x86;
+  }
 };

libs/ui-lib/lib/cim/types/k8s/infra-env-k8s-resource.ts

@@ -23,7 +23,7 @@ export type InfraEnvK8sResource = K8sResourceCommon & {
     };
     nmStateConfigLabelSelector?: Selector;
     additionalNTPSources?: string[];
-    cpuArchitecture?: 'x86_64' | 'arm64';
+    cpuArchitecture?: 'x86_64' | 'arm64' | 's390x';
   };
   status?: {
     agentLabelSelector?: Selector;

libs/ui-lib/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -76,6 +76,7 @@ export const getClusterDetailsInitialValues = ({
     diskEncryption: cluster?.diskEncryption ?? {},
     cpuArchitecture: cluster?.cpuArchitecture || getDefaultCpuArchitecture(),
     platform: cluster?.platform?.type || 'none',
+    userManagedNetworking: cluster?.userManagedNetworking || false,
   };
 };
 

libs/ui-lib/lib/common/components/clusterWizard/types.ts

@@ -31,6 +31,7 @@ export type ClusterDetailsValues = {
   diskEncryption: DiskEncryption;
   cpuArchitecture: string;
   platform: PlatformType;
+  userManagedNetworking: boolean;
 };
 
 export type HostsValidationsProps<S extends string, V extends string[]> = {