@openshift-assisted/ui-lib 2.36.5 → 2.37.0

package/lib/common/components/hosts/HostValidationGroups.tsx

@@ -9,6 +9,7 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/e
 import { Host, HostValidationId } from '@openshift-assisted/types/assisted-installer-service';
 import { Validation, ValidationsInfo } from '../../types/hosts';
 import {
+  getMtuLink,
   hostValidationFailureHints,
   hostValidationGroupLabels,
   hostValidationLabels,
@@ -19,6 +20,7 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getKeys } from '../../utils';
 
 import './HostValidationGroups.css';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 export type AdditionNtpSourcePropsType = {
   AdditionalNTPSourcesDialogToggleComponent?: React.FC;
@@ -39,6 +41,7 @@ export type ValidationInfoActionProps = AdditionNtpSourcePropsType &
 
 type HostValidationGroupsProps = ValidationInfoActionProps & {
   validationsInfo: ValidationsInfo;
+  openshiftVersion?: string;
 };
 
 type ValidationGroupAlertProps = ValidationInfoActionProps & {
@@ -145,6 +148,34 @@ const ApiVipConnectivityAlert = ({
   );
 };
 
+const MtuInfoLink = ({ docsVersion }: { docsVersion: string }) => {
+  const { t } = useTranslation();
+  return (
+    <a href={getMtuLink(docsVersion)} target="_blank" rel="noopener noreferrer">
+      {t('ai:Learn more about MTU (maximum transmission unit)')} <ExternalLinkAltIcon />.
+    </a>
+  );
+};
+
+const MtuSyncAlert = ({
+  variant,
+  validation,
+  docsVersion,
+}: {
+  variant: AlertVariant;
+  validation: Validation;
+  docsVersion: string;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Alert title={t('ai:MTU (maximum transmission unit) failure')} variant={variant} isInline>
+      {toSentence(validation.message)} {hostValidationFailureHints(t)[validation.id]}
+      <br />
+      {<MtuInfoLink docsVersion={docsVersion} />}
+    </Alert>
+  );
+};
+
 const ValidationGroupAlerts = ({
   validations,
   title,
@@ -153,7 +184,8 @@ const ValidationGroupAlerts = ({
   AdditionalNTPSourcesDialogToggleComponent,
   UpdateDay2ApiVipDialogToggleComponent,
   host,
-}: ValidationGroupAlertProps) => {
+  openshiftVersion,
+}: ValidationGroupAlertProps & { openshiftVersion?: string }) => {
   if (!validations.length) {
     return null;
   }
@@ -162,6 +194,7 @@ const ValidationGroupAlerts = ({
     ['hostname-valid']: undefined,
     ['ntp-synced']: undefined,
     ['ignition-downloadable']: undefined,
+    ['mtu-valid']: undefined,
   };
   const alerts = [];
   const validationsWithoutActions: Validation[] = [];
@@ -210,6 +243,16 @@ const ValidationGroupAlerts = ({
       />,
     );
   }
+  if (validationsWithActions['mtu-valid'] && AdditionalNTPSourcesDialogToggleComponent) {
+    alerts.push(
+      <MtuSyncAlert
+        validation={validationsWithActions['mtu-valid']}
+        variant={variant}
+        key="mtu-sync-alert"
+        docsVersion={openshiftVersion || '4.17'}
+      />,
+    );
+  }
   if (validationsWithoutActions.length > 0) {
     alerts.push(
       <ValidationsAlert
@@ -223,20 +266,22 @@ const ValidationGroupAlerts = ({
   return <AlertGroup>{alerts}</AlertGroup>;
 };
 
-export const HostValidationGroups = ({ validationsInfo, ...props }: HostValidationGroupsProps) => {
+export const HostValidationGroups = ({
+  validationsInfo,
+  openshiftVersion,
+  ...props
+}: HostValidationGroupsProps) => {
   const { t } = useTranslation();
   return (
     <>
       {getKeys(validationsInfo).map((groupName) => {
         const validations = validationsInfo[groupName] || [];
-
         const pendingValidations = validations.filter(
           (v) => v.status === 'pending' && v.id !== 'ntp-synced',
         );
         const failedValidations = validations.filter(
           (v) => (v.status === 'failure' || v.status === 'error') && v.id !== 'ntp-synced',
         );
-
         const softValidations = validations.filter(
           (v) => ['pending', 'failure', 'error'].includes(v.status) && v.id === 'ntp-synced',
         );
@@ -261,7 +306,6 @@ export const HostValidationGroups = ({ validationsInfo, ...props }: HostValidati
             </>
           );
         };
-
         const groupLabel = hostValidationGroupLabels(t)[groupName] as string;
         return (
           <Fragment key={groupName}>
@@ -279,11 +323,13 @@ export const HostValidationGroups = ({ validationsInfo, ...props }: HostValidati
                     variant={AlertVariant.info}
                     title={t('ai:Pending validations:')}
                     validations={pendingValidations}
+                    openshiftVersion={openshiftVersion}
                     {...props}
                   />
                   <ValidationGroupAlerts
                     variant={AlertVariant.info}
                     validations={softValidations}
+                    openshiftVersion={openshiftVersion}
                     title={''}
                     {...props}
                   />
@@ -294,6 +340,7 @@ export const HostValidationGroups = ({ validationsInfo, ...props }: HostValidati
               variant={AlertVariant.warning}
               title={t('ai:Failed validations:')}
               validations={failedValidations}
+              openshiftVersion={openshiftVersion}
               {...props}
             />
           </Fragment>

package/lib/common/components/hosts/utils.ts

@@ -232,7 +232,7 @@ export const areOnlySoftValidationsFailing = (validationsInfo: HostValidationsIn
   );
   if (!failingValidationIds.length) return false;
   for (const id of failingValidationIds) {
-    if (!['ntp-synced', 'container-images-available'].includes(id)) {
+    if (!['ntp-synced', 'container-images-available', 'mtu-valid'].includes(id)) {
       return false;
     }
   }

package/lib/common/components/ui/formik/LabelField.css

@@ -6,6 +6,11 @@
   border: 1px solid transparent;
   outline: none;
   width: 100%;
+  background-color: initial;
+}
+
+.label-field__input::placeholder {
+  color: var(--pf-v5-c-form-control--m-placeholder--Color);
 }
 
 .label-field .react-autosuggest__suggestions-list {

package/lib/common/config/constants.ts

@@ -127,6 +127,16 @@ export const hostValidationLabels = (t: TFunction): { [key in HostValidationId]:
   'no-ip-collisions-in-network': t('ai:No IP collisions in network'),
   'mce-requirements-satisfied': t('ai:Multicluster engine requirements'),
   'mtv-requirements-satisfied': t('ai:Migration toolkit for virtualization requirements'),
+  'no-iscsi-nic-belongs-to-machine-cidr': t('ai:iSCSI NIC belongs to machine CIDR'),
+  'node-feature-discovery-requirements-satisfied': t('ai:Node Feature Discovery requirements'),
+  'nvidia-gpu-requirements-satisfied': t('ai:NVIDIA GPU requirements'),
+  'pipelines-requirements-satisfied': t('ai:Pipelines requirements'),
+  'serverless-requirements-satisfied': t('ai:Serverless requirements'),
+  'servicemesh-requirements-satisfied': t('ai:Service Mesh requirements'),
+  'openshift-ai-requirements-satisfied': t('ai:OpenShift AI requirements'),
+  'osc-requirements-satisfied': t('ai:OpenShift sandboxed containers requirements'),
+  'mtu-valid': t('ai:MTU requirements'),
+  'authorino-requirements-satisfied': '',
 });
 
 export const hostValidationFailureHints = (
@@ -176,6 +186,16 @@ export const hostValidationFailureHints = (
   'no-ip-collisions-in-network': '',
   'mce-requirements-satisfied': '',
   'mtv-requirements-satisfied': '',
+  'no-iscsi-nic-belongs-to-machine-cidr': '',
+  'node-feature-discovery-requirements-satisfied': '',
+  'nvidia-gpu-requirements-satisfied': '',
+  'pipelines-requirements-satisfied': '',
+  'serverless-requirements-satisfied': '',
+  'servicemesh-requirements-satisfied': '',
+  'openshift-ai-requirements-satisfied': '',
+  'osc-requirements-satisfied': '',
+  'authorino-requirements-satisfied': '',
+  'mtu-valid': '',
 });
 
 export const clusterValidationLabels = (
@@ -270,6 +290,13 @@ export const OPERATOR_NAME_LVM = 'lvm';
 export const OPERATOR_NAME_LVMS = 'lvms';
 export const OPERATOR_NAME_MCE = 'mce';
 export const OPERATOR_NAME_MTV = 'mtv';
+export const OPERATOR_NAME_NODE_FEATURE_DISCOVERY = 'node-feature-discovery';
+export const OPERATOR_NAME_NVIDIA_GPU = 'nvidia-gpu';
+export const OPERATOR_NAME_PIPELINES = 'pipelines';
+export const OPERATOR_NAME_SERVICEMESH = 'servicemesh';
+export const OPERATOR_NAME_SERVERLESS = 'serverless';
+export const OPERATOR_NAME_OPENSHIFT_AI = 'openshift-ai';
+export const OPERATOR_NAME_OSC = 'osc';
 
 const OperatorNames = [
   OPERATOR_NAME_CNV,
@@ -279,6 +306,13 @@ const OperatorNames = [
   OPERATOR_NAME_LVMS,
   OPERATOR_NAME_MCE,
   OPERATOR_NAME_MTV,
+  OPERATOR_NAME_NODE_FEATURE_DISCOVERY,
+  OPERATOR_NAME_NVIDIA_GPU,
+  OPERATOR_NAME_PIPELINES,
+  OPERATOR_NAME_SERVICEMESH,
+  OPERATOR_NAME_SERVERLESS,
+  OPERATOR_NAME_OPENSHIFT_AI,
+  OPERATOR_NAME_OSC,
 ];
 export const ExposedOperatorNames = [
   OPERATOR_NAME_CNV,
@@ -287,6 +321,13 @@ export const ExposedOperatorNames = [
   OPERATOR_NAME_LVMS,
   OPERATOR_NAME_MCE,
   OPERATOR_NAME_MTV,
+  OPERATOR_NAME_NODE_FEATURE_DISCOVERY,
+  OPERATOR_NAME_NVIDIA_GPU,
+  OPERATOR_NAME_PIPELINES,
+  OPERATOR_NAME_SERVICEMESH,
+  OPERATOR_NAME_SERVERLESS,
+  OPERATOR_NAME_OPENSHIFT_AI,
+  OPERATOR_NAME_OSC,
 ];
 
 export type OperatorName = (typeof OperatorNames)[number];
@@ -322,6 +363,13 @@ export const operatorLabels = (
       ? t('ai:Logical Volume Manager Storage')
       : t('ai:Logical Volume Manager'),
     [OPERATOR_NAME_MCE]: t('ai:Multicluster engine'),
+    [OPERATOR_NAME_NODE_FEATURE_DISCOVERY]: t('ai:Node Feature Discovery'),
+    [OPERATOR_NAME_NVIDIA_GPU]: t('ai:NVIDIA GPU'),
+    [OPERATOR_NAME_PIPELINES]: t('ai:Pipelines'),
+    [OPERATOR_NAME_SERVICEMESH]: t('ai:Service Mesh'),
+    [OPERATOR_NAME_SERVERLESS]: t('ai:Serverless'),
+    [OPERATOR_NAME_OPENSHIFT_AI]: t('ai:OpenShift AI'),
+    [OPERATOR_NAME_OSC]: t('ai:OpenShift sandboxed containers'),
   };
 };
 

package/lib/common/config/docs_links.ts

@@ -67,6 +67,12 @@ export const HOST_REQUIREMENTS_LINK = 'https://access.redhat.com/solutions/48856
 export const ODF_REQUIREMENTS_LINK =
   'https://docs.redhat.com/en/documentation/red_hat_openshift_data_foundation';
 
+export const OPENSHIFT_AI_REQUIREMENTS_LINK =
+  'https://docs.redhat.com/en/documentation/red_hat_openshift_ai_cloud_service/1/html/installing_the_openshift_ai_cloud_service/requirements-for-openshift-ai_install#requirements-for-openshift-ai_install';
+
+export const OSC_REQUIREMENTS_LINK =
+  'https://docs.redhat.com/en/documentation/openshift_sandboxed_containers/1.8/html/user_guide/deploying-osc-bare-metal#osc-resource-requirements_deploying-bare-metal';
+
 export const CNV_LINK = 'https://cloud.redhat.com/learn/topics/virtualization/';
 
 export const ODF_LINK = 'https://www.redhat.com/en/resources/openshift-data-foundation-datasheet';
@@ -98,3 +104,13 @@ export const getCiscoIntersightLink = (downloadIsoUrl: string) =>
 
 export const MTV_LINK =
   'https://docs.redhat.com/en/documentation/migration_toolkit_for_virtualization/2.7/';
+
+export const OPENSHIFT_AI_LINK =
+  'https://www.redhat.com/en/technologies/cloud-computing/openshift/openshift-ai';
+
+export const OSC_LINK = 'https://docs.redhat.com/en/documentation/openshift_sandboxed_containers';
+
+export const getMtuLink = (ocpVersion?: string) =>
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
+    ocpVersion,
+  )}/html/networking/changing-cluster-network-mtu#nw-cluster-mtu-change-about_changing-cluster-network-mtu`;

package/lib/common/types/clusters.ts

@@ -64,6 +64,8 @@ export type OperatorsValues = V2ClusterUpdateParams & {
   useContainerNativeVirtualization: boolean;
   useMultiClusterEngine: boolean;
   useMigrationToolkitforVirtualization: boolean;
+  useOpenShiftAI: boolean;
+  useOsc: boolean;
 };
 
 export type SupportedPlatformType = Extract<PlatformType, 'vsphere' | 'nutanix' | 'external'>;

package/lib/ocm/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { FormGroup, Tooltip } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { useField } from 'formik';
+import { getFieldId, PopoverIcon } from '../../../common';
+import {
+  NewFeatureSupportLevelMap,
+  useNewFeatureSupportLevel,
+} from '../../../common/components/newFeatureSupportLevels';
+import OcmSNODisclaimer from './OcmSNODisclaimer';
+
+const INPUT_NAME = 'controlPlaneCount';
+const fieldId = getFieldId(INPUT_NAME, 'input');
+const DEFAULT_VALUE = '3';
+
+export const ControlPlaneNodesLabel = () => {
+  return (
+    <>
+      Number of control plane nodes{' '}
+      <PopoverIcon
+        bodyContent={
+          <>
+            Control plane nodes manage workloads, maintain cluster state, and ensure stability.
+            Using more than three nodes boosts fault tolerance and availability, reducing downtime
+            during failures.
+          </>
+        }
+      />
+    </>
+  );
+};
+
+interface ControlPlaneNodesOption {
+  value: string;
+  label: string;
+}
+
+interface ControlPlaneNodesDropdownProps {
+  featureSupportLevelData?: NewFeatureSupportLevelMap | null;
+}
+
+const isDropdownItemEnabled = (
+  controlPlaneNodeCount: string,
+  isNonStandardControlPlaneEnabled: boolean,
+): boolean => {
+  if (controlPlaneNodeCount === '4' || controlPlaneNodeCount === '5') {
+    return isNonStandardControlPlaneEnabled;
+  }
+  return true;
+};
+
+const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
+  featureSupportLevelData,
+}) => {
+  const [field, , { setValue }] = useField<string>(INPUT_NAME);
+  const [isOpen, setOpen] = React.useState<boolean>(false);
+  const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
+
+  const snoSupportLevel = newFeatureSupportLevelContext.getFeatureSupportLevel(
+    'SNO',
+    featureSupportLevelData ?? undefined,
+  );
+  const snoExpansion = newFeatureSupportLevelContext.isFeatureSupported(
+    'SINGLE_NODE_EXPANSION',
+    featureSupportLevelData ?? undefined,
+  );
+  const isDisabled = newFeatureSupportLevelContext.isFeatureDisabled(
+    'SNO',
+    featureSupportLevelData ?? undefined,
+  );
+
+  const disabledReason =
+    'This option is not available with the current configurations. Make sure that OpenShift version is 4.18 or newer, CPU architecture is x86_64 and no external platform integration is selected.';
+
+  const isNonStandardControlPlaneEnabled = newFeatureSupportLevelContext.isFeatureSupported(
+    'NON_STANDARD_HA_CONTROL_PLANE',
+    featureSupportLevelData ?? undefined,
+  );
+
+  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++)' },
+  ];
+
+  React.useEffect(() => {
+    if (!field.value) {
+      setValue(DEFAULT_VALUE);
+    }
+  }, [field.value, setValue]);
+
+  const onSelect = (event?: React.SyntheticEvent<HTMLDivElement>): void => {
+    const selectedValue = event?.currentTarget.id as string;
+    setValue(selectedValue);
+    setOpen(false);
+  };
+
+  const dropdownItems = options.map(({ value, label }) => {
+    const isItemEnabled = isDropdownItemEnabled(value, isNonStandardControlPlaneEnabled);
+    return (
+      <DropdownItem key={value} id={value} isAriaDisabled={!isItemEnabled}>
+        <Tooltip hidden={isItemEnabled} content={disabledReason} position="top">
+          <div>{label}</div>
+        </Tooltip>
+      </DropdownItem>
+    );
+  });
+
+  const toggle = (
+    <DropdownToggle onToggle={(_, val) => setOpen(val)}>
+      {options.find((opt) => opt.value === field.value)?.label || 'Select'}
+    </DropdownToggle>
+  );
+
+  return (
+    <>
+      <FormGroup
+        id={`form-control__${fieldId}`}
+        label={<ControlPlaneNodesLabel />}
+        fieldId={fieldId}
+      >
+        <Dropdown
+          id={fieldId}
+          isOpen={isOpen}
+          toggle={toggle}
+          dropdownItems={dropdownItems}
+          onSelect={onSelect}
+        />
+      </FormGroup>
+      {field.value === '1' && (
+        <OcmSNODisclaimer
+          isDisabled={isDisabled}
+          snoSupportLevel={snoSupportLevel || 'supported'}
+          snoExpansionSupported={snoExpansion}
+        />
+      )}
+    </>
+  );
+};
+
+export default ControlPlaneNodesDropdown;

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -5,7 +5,6 @@ import { useFormikContext } from 'formik';
 import { HostsNetworkConfigurationControlGroup } from './HostsNetworkConfigurationControlGroup';
 import {
   ClusterDetailsValues,
-  isSNO,
   OpenshiftVersionOptionType,
   PullSecret,
   ocmClusterNameValidationMessages,
@@ -24,7 +23,6 @@ import OcmOpenShiftVersionSelect from './OcmOpenShiftVersionSelect';
 import CustomManifestCheckbox from './CustomManifestCheckbox';
 import CpuArchitectureDropdown from './CpuArchitectureDropdown';
 import { OcmBaseDomainField } from './OcmBaseDomainField';
-import OcmSNOControlGroup from './OcmSNOControlGroup';
 import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
 import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
 import { ExternalPlatformDropdown } from './platformIntegration/ExternalPlatformDropdown';
@@ -34,6 +32,7 @@ import { ExternalPlatformLabels } from './platformIntegration/constants';
 import { ManagedDomain, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
 import { useFeature } from '../../hooks/use-feature';
+import ControlPlaneNodesDropdown, { ControlPlaneNodesLabel } from './ControlPlaneNodesDropdown';
 
 export type OcmClusterDetailsFormFieldsProps = {
   forceOpenshiftVersion?: string;
@@ -59,7 +58,7 @@ export const OcmClusterDetailsFormFields = ({
   clusterId,
 }: OcmClusterDetailsFormFieldsProps) => {
   const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
-  const { highAvailabilityMode, useRedHatDnsService } = values;
+  const { useRedHatDnsService } = values;
   const nameInputRef = React.useRef<HTMLInputElement>();
 
   const { t } = useTranslation();
@@ -156,10 +155,6 @@ export const OcmClusterDetailsFormFields = ({
           cpuArchitectures={cpuArchitectures}
         />
       )}
-      <OcmSNOControlGroup
-        highAvailabilityMode={highAvailabilityMode}
-        featureSupportLevelData={featureSupportLevelData ?? undefined}
-      />
 
       {!isPullSecretSet && <PullSecret isOcm={isOcm} defaultPullSecret={defaultPullSecret} />}
 
@@ -176,10 +171,17 @@ export const OcmClusterDetailsFormFields = ({
           onChange={handleExternalPartnerIntegrationsChange}
           cpuArchitecture={values.cpuArchitecture as SupportedCpuArchitecture}
           featureSupportLevelData={featureSupportLevelData}
-          isSNO={isSNO({ highAvailabilityMode })}
+          isSNO={values.controlPlaneCount === '1'}
         />
       )}
 
+      {clusterExists ? (
+        <StaticTextField name="controlPlaneCount" label={<ControlPlaneNodesLabel />}>
+          {values.controlPlaneCount}
+        </StaticTextField>
+      ) : (
+        <ControlPlaneNodesDropdown featureSupportLevelData={featureSupportLevelData} />
+      )}
       <CustomManifestCheckbox clusterId={clusterId || ''} isDisabled={platform === 'external'} />
 
       {
@@ -195,7 +197,7 @@ export const OcmClusterDetailsFormFields = ({
       <DiskEncryptionControlGroup
         values={values}
         isDisabled={isPullSecretSet}
-        isSNO={isSNO({ highAvailabilityMode })}
+        isSNO={values.controlPlaneCount === '1'}
         docVersion={openshiftVersion}
       />
     </Form>

package/lib/ocm/components/clusterConfiguration/operators/CnvCheckbox.tsx

@@ -10,7 +10,10 @@ import {
   PopoverIcon,
 } from '../../../../common';
 import CnvHostRequirements from './CnvHostRequirements';
-import { getCnvIncompatibleWithLvmReason } from '../../featureSupportLevels/featureStateUtils';
+import {
+  getCnvDisabledWithMtvReason,
+  getCnvIncompatibleWithLvmReason,
+} from '../../featureSupportLevels/featureStateUtils';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
@@ -83,6 +86,9 @@ const CnvCheckbox = ({
       const lvmSupport = featureSupportLevel.getFeatureSupportLevel('LVM');
       reason = getCnvIncompatibleWithLvmReason(values, lvmSupport);
     }
+    if (!reason) {
+      reason = getCnvDisabledWithMtvReason(values);
+    }
     setDisabledReason(reason);
   }, [values, featureSupportLevel]);
 

package/lib/ocm/components/clusterConfiguration/operators/MtvOperatorCheckbox.tsx

@@ -55,8 +55,9 @@ const MtvCheckbox = ({ clusterId }: { clusterId: ClusterOperatorProps['clusterId
   const fieldId = getFieldId(Mtv_FIELD_NAME, 'input');
   const [disabledReason, setDisabledReason] = useState<string | undefined>();
 
-  const selectCNVOperator = (checked: boolean) =>
+  const selectCNVOperator = (checked: boolean) => {
     setFieldValue('useContainerNativeVirtualization', checked);
+  };
 
   React.useEffect(() => {
     const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('MTV');

package/lib/ocm/components/clusterConfiguration/operators/OpenShiftAICheckbox.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { useFormikContext } from 'formik';
+import { getFieldId, PopoverIcon, OPENSHIFT_AI_LINK, OperatorsValues } from '../../../../common';
+import OpenShiftAIRequirements from './OpenShiftAIRequirements';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
+import { getOpenShiftAIIncompatibleWithLvmsReason } from '../../featureSupportLevels/featureStateUtils';
+
+const OPENSHIFT_AI_FIELD_NAME = 'useOpenShiftAI';
+
+type OpenShiftAILabelProps = {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+};
+
+const OpenShiftAILabel = ({ disabledReason, supportLevel }: OpenShiftAILabelProps) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install OpenShift AI bundle </span>
+      </Tooltip>
+      <PopoverIcon
+        component={'a'}
+        headerContent="Requirements and dependencies"
+        bodyContent={<OpenShiftAIRequirements />}
+      />
+      <NewFeatureSupportLevelBadge featureId="OPENSHIFT_AI" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const OpenShiftAIHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Train, serve, monitor and manage AI/ML models and applications.{' '}
+        <a href={OPENSHIFT_AI_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const OpenShiftAICheckbox = () => {
+  const featureSupportLevel = useNewFeatureSupportLevel();
+  const { values } = useFormikContext<OperatorsValues>();
+  const fieldId = getFieldId(OPENSHIFT_AI_FIELD_NAME, 'input');
+  const [disabledReason, setDisabledReason] = useState<string | undefined>();
+
+  React.useEffect(() => {
+    let disabledReason = featureSupportLevel.getFeatureDisabledReason('OPENSHIFT_AI');
+    if (!disabledReason) {
+      disabledReason = getOpenShiftAIIncompatibleWithLvmsReason(values);
+    }
+    setDisabledReason(disabledReason);
+  }, [values, featureSupportLevel]);
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={OPENSHIFT_AI_FIELD_NAME}
+        label={
+          <OpenShiftAILabel
+            disabledReason={disabledReason}
+            supportLevel={featureSupportLevel.getFeatureSupportLevel('OPENSHIFT_AI')}
+          />
+        }
+        isDisabled={!!disabledReason}
+        helperText={<OpenShiftAIHelperText />}
+      />
+    </FormGroup>
+  );
+};
+
+export default OpenShiftAICheckbox;

package/lib/ocm/components/clusterConfiguration/operators/OpenShiftAIRequirements.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { OPENSHIFT_AI_REQUIREMENTS_LINK } from '../../../../common';
+
+const OpenShiftAIRequirements = () => {
+  return (
+    <>
+      <List>
+        <ListItem>At least two worker nodes.</ListItem>
+        <ListItem>
+          Each worker node requires 32 additional GiB of memory and 8 additional CPUs.
+        </ListItem>
+        <ListItem>At least one supported GPU. Currently only NVIDIA GPUs are supported.</ListItem>
+        <ListItem>
+          Nodes that have NVIDIA GPUs installed need to have secure boot disabled.
+        </ListItem>
+      </List>
+      Bundle operators:
+      <List>
+        <ListItem>OpenShift Data Foundation</ListItem>
+        <ListItem>Node Feature Discovery</ListItem>
+        <ListItem>NVIDIA GPU</ListItem>
+        <ListItem>Pipelines</ListItem>
+        <ListItem>Service Mesh</ListItem>
+        <ListItem>Serverless</ListItem>
+        <ListItem>Authorino</ListItem>
+      </List>
+      <a href={OPENSHIFT_AI_REQUIREMENTS_LINK} target="_blank" rel="noopener noreferrer">
+        Learn more <ExternalLinkAltIcon />.
+      </a>
+    </>
+  );
+};
+
+export default OpenShiftAIRequirements;