@openshift-assisted/ui-lib 2.37.3 → 2.38.0

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import CnvCheckbox from './CnvCheckbox';
+import MtvOperatorCheckbox from './MtvOperatorCheckbox';
+import MceCheckbox from './MceCheckbox';
+import LvmCheckbox from './LvmCheckbox';
+import OdfCheckbox from './OdfCheckbox';
+import OpenShiftAICheckbox from './OpenShiftAICheckbox';
+import OscCheckbox from './OscCheckbox';
+import LsoCheckbox from './LsoCheckbox';
+import NodeFeatureDiscoveryCheckbox from './NodeFeatureDiscoveryCheckbox';
+import NmstateCheckbox from './NmstateCheckbox';
+import ServerlessCheckbox from './ServerlessCheckbox';
+import AuthorinoCheckbox from './AuthorinoCheckbox';
+import PipelinesCheckbox from './PipelinesChekbox';
+import ServiceMeshCheckbox from './ServicemeshCheckbox';
+import NvidiaGpuCheckbox from './NvidiaGpuCheckbox';
+import {
+  FeatureId,
+  OPERATOR_NAME_AUTHORINO,
+  OPERATOR_NAME_CNV,
+  OPERATOR_NAME_LSO,
+  OPERATOR_NAME_LVM,
+  OPERATOR_NAME_MCE,
+  OPERATOR_NAME_MTV,
+  OPERATOR_NAME_NMSTATE,
+  OPERATOR_NAME_NODE_FEATURE_DISCOVERY,
+  OPERATOR_NAME_NVIDIA_GPU,
+  OPERATOR_NAME_ODF,
+  OPERATOR_NAME_OPENSHIFT_AI,
+  OPERATOR_NAME_OSC,
+  OPERATOR_NAME_PIPELINES,
+  OPERATOR_NAME_SERVERLESS,
+  OPERATOR_NAME_SERVICEMESH,
+} from '../../../../common';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+
+interface OperatorProps {
+  clusterId: string;
+  openshiftVersion?: string;
+  isVersionEqualsOrMajorThan4_15: boolean;
+  isSNO: boolean;
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}
+
+export interface ComponentItem {
+  component: JSX.Element;
+  label: string;
+}
+
+export const operatorComponentMap: Record<string, (props: OperatorProps) => JSX.Element> = {
+  cnv: (props) => (
+    <CnvCheckbox {...props} isVersionEqualsOrMajorThan4_15={props.isVersionEqualsOrMajorThan4_15} />
+  ),
+  mtv: (props) => <MtvOperatorCheckbox {...props} />,
+  mce: (props) => <MceCheckbox {...props} />,
+  lvm: (props) => <LvmCheckbox {...props} />,
+  odf: (props) => <OdfCheckbox {...props} />,
+  'openshift-ai': (props) => <OpenShiftAICheckbox {...props} />,
+  osc: (props) => <OscCheckbox {...props} />,
+  lso: (props) => <LsoCheckbox {...props} />,
+  'node-feature-discovery': (props) => <NodeFeatureDiscoveryCheckbox {...props} />,
+  nmstate: (props) => <NmstateCheckbox {...props} />,
+  serverless: (props) => <ServerlessCheckbox {...props} />,
+  authorino: (props) => <AuthorinoCheckbox {...props} />,
+  pipelines: (props) => <PipelinesCheckbox {...props} />,
+  servicemesh: (props) => <ServiceMeshCheckbox {...props} />,
+  'nvidia-gpu': (props) => <NvidiaGpuCheckbox {...props} />,
+};
+
+export const mapOperatorsToFieldIds: { [key: string]: string } = {
+  [OPERATOR_NAME_ODF]: 'useOpenShiftDataFoundation',
+  [OPERATOR_NAME_LVM]: 'useOdfLogicalVolumeManager',
+  [OPERATOR_NAME_CNV]: 'useContainerNativeVirtualization',
+  [OPERATOR_NAME_MCE]: 'useMultiClusterEngine',
+  [OPERATOR_NAME_MTV]: 'useMigrationToolkitforVirtualization',
+  [OPERATOR_NAME_OPENSHIFT_AI]: 'useOpenShiftAI',
+  [OPERATOR_NAME_OSC]: 'useOsc',
+  [OPERATOR_NAME_NODE_FEATURE_DISCOVERY]: 'useNodeFeatureDiscovery',
+  [OPERATOR_NAME_NMSTATE]: 'useNmstate',
+  [OPERATOR_NAME_LSO]: 'useLso',
+  [OPERATOR_NAME_SERVERLESS]: 'useServerless',
+  [OPERATOR_NAME_AUTHORINO]: 'useAuthorino',
+  [OPERATOR_NAME_PIPELINES]: 'usePipelines',
+  [OPERATOR_NAME_SERVICEMESH]: 'useServicemesh',
+  [OPERATOR_NAME_NVIDIA_GPU]: 'useNvidiaGpu',
+};
+
+export const mapOperatorIdToFeatureId: { [key: string]: FeatureId } = {
+  [OPERATOR_NAME_ODF]: 'ODF',
+  [OPERATOR_NAME_LVM]: 'LVM',
+  [OPERATOR_NAME_CNV]: 'CNV',
+  [OPERATOR_NAME_MCE]: 'MCE',
+  [OPERATOR_NAME_MTV]: 'MTV',
+  [OPERATOR_NAME_OPENSHIFT_AI]: 'OPENSHIFT_AI',
+  [OPERATOR_NAME_OSC]: 'OSC',
+  [OPERATOR_NAME_NODE_FEATURE_DISCOVERY]: 'NODE_FEATURE_DISCOVERY',
+  [OPERATOR_NAME_NMSTATE]: 'NMSTATE',
+  [OPERATOR_NAME_LSO]: 'LSO',
+  [OPERATOR_NAME_SERVERLESS]: 'SERVERLESS',
+  [OPERATOR_NAME_AUTHORINO]: 'AUTHORINO',
+  [OPERATOR_NAME_PIPELINES]: 'PIPELINES',
+  [OPERATOR_NAME_SERVICEMESH]: 'SERVICEMESH',
+  [OPERATOR_NAME_NVIDIA_GPU]: 'NVIDIA_GPU',
+};

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx

@@ -76,7 +76,7 @@ const getExpandedHostComponent = (protocolType: StaticProtocolType) => {
               />{' '}
               <OcmInputField
                 name={`${fieldName}.bondSecondaryInterface`}
-                label="Port 2 MAC Adddress"
+                label="Port 2 MAC Address"
                 data-testid={`bond-secondary-interface-${hostIdx}`}
                 isRequired
               />

package/lib/ocm/components/clusterWizard/ClusterDetails.tsx

@@ -78,6 +78,10 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         const cluster = await ClustersService.create(params, isAssistedMigration);
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
         await UISettingService.update(cluster.id, { addCustomManifests });
+        //TO-DO: Assisted-Migration. Provisional code. Needs to be removed when MTV integration be finished
+        if (isAssistedMigration) {
+          await ClustersService.createClusterManifestsForAssistedMigration(cluster.id);
+        }
       } catch (e) {
         handleApiError(e, () =>
           addAlert({ title: 'Failed to create new cluster', message: getApiErrorMessage(e) }),

package/lib/ocm/components/clusterWizard/Operators.tsx

@@ -5,13 +5,21 @@ import { Formik, FormikConfig, useFormikContext } from 'formik';
 import {
   ClusterWizardStep,
   getFormikErrorFields,
+  OPERATOR_NAME_AUTHORINO,
   OPERATOR_NAME_CNV,
+  OPERATOR_NAME_LSO,
   OPERATOR_NAME_LVM,
   OPERATOR_NAME_MCE,
   OPERATOR_NAME_MTV,
+  OPERATOR_NAME_NMSTATE,
+  OPERATOR_NAME_NODE_FEATURE_DISCOVERY,
+  OPERATOR_NAME_NVIDIA_GPU,
   OPERATOR_NAME_ODF,
   OPERATOR_NAME_OPENSHIFT_AI,
   OPERATOR_NAME_OSC,
+  OPERATOR_NAME_PIPELINES,
+  OPERATOR_NAME_SERVERLESS,
+  OPERATOR_NAME_SERVICEMESH,
   OperatorsValues,
   selectMonitoredOperators,
   useAlerts,
@@ -40,6 +48,14 @@ export const getOperatorsInitialValues = (
     useMigrationToolkitforVirtualization: isOperatorEnabled([OPERATOR_NAME_MTV]),
     useOpenShiftAI: isOperatorEnabled([OPERATOR_NAME_OPENSHIFT_AI]),
     useOsc: isOperatorEnabled([OPERATOR_NAME_OSC]),
+    useNodeFeatureDiscovery: isOperatorEnabled([OPERATOR_NAME_NODE_FEATURE_DISCOVERY]),
+    useNmstate: isOperatorEnabled([OPERATOR_NAME_NMSTATE]),
+    useLso: isOperatorEnabled([OPERATOR_NAME_LSO]),
+    useServerless: isOperatorEnabled([OPERATOR_NAME_SERVERLESS]),
+    useAuthorino: isOperatorEnabled([OPERATOR_NAME_AUTHORINO]),
+    usePipelines: isOperatorEnabled([OPERATOR_NAME_PIPELINES]),
+    useServicemesh: isOperatorEnabled([OPERATOR_NAME_SERVICEMESH]),
+    useNvidiaGpu: isOperatorEnabled([OPERATOR_NAME_NVIDIA_GPU]),
   };
 };
 
@@ -80,7 +96,11 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
         />
       }
     >
-      <OperatorsStep clusterId={cluster.id} openshiftVersion={cluster.openshiftVersion} />
+      <OperatorsStep
+        clusterId={cluster.id}
+        openshiftVersion={cluster.openshiftVersion}
+        monitoredOperators={cluster.monitoredOperators}
+      />
     </ClusterWizardStep>
   );
 };

package/lib/ocm/components/clusterWizard/OperatorsStep.tsx

@@ -1,16 +1,59 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Stack, StackItem } from '@patternfly/react-core';
-import { ClusterOperatorProps, ClusterWizardStepHeader } from '../../../common';
-import CnvCheckbox from '../clusterConfiguration/operators/CnvCheckbox';
-import OdfCheckbox from '../clusterConfiguration/operators/OdfCheckbox';
-import LvmCheckbox from '../clusterConfiguration/operators/LvmCheckbox';
-import MceCheckbox from '../clusterConfiguration/operators/MceCheckbox';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Checkbox,
+  ExpandableSection,
+  Flex,
+  FlexItem,
+  Gallery,
+  GalleryItem,
+  Stack,
+  StackItem,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@patternfly/react-core';
+import {
+  ClusterOperatorProps,
+  ClusterWizardStepHeader,
+  numberOfEnabledOperators,
+  OperatorsValues,
+  PopoverIcon,
+} from '../../../common';
 import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
 import { isOCPVersionEqualsOrMajor } from '../utils';
-import MtvOperatorCheckbox from '../clusterConfiguration/operators/MtvOperatorCheckbox';
-import OpenShiftAICheckbox from '../clusterConfiguration/operators/OpenShiftAICheckbox';
-import OscCheckbox from '../clusterConfiguration/operators/OscCheckbox';
+import BundleService from '../../services/BundleService';
+import { Bundle } from '@openshift-assisted/types/./assisted-installer-service';
+import { OperatorsService } from '../../services';
+import {
+  mapOperatorIdToFeatureId,
+  mapOperatorsToFieldIds,
+  operatorComponentMap,
+} from '../clusterConfiguration/operators/SupportedOperators';
+import { useClusterWizardContext } from './ClusterWizardContext';
+import { useFormikContext } from 'formik';
+import NewFeatureSupportLevelBadge from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
+import {
+  getCnvDisabledWithMtvReason,
+  getCnvIncompatibleWithLvmReason,
+  getLvmIncompatibleWithCnvReason,
+  getLvmsIncompatibleWithOdfReason,
+  getOdfIncompatibleWithLvmsReason,
+  getOpenShiftAIIncompatibleWithLvmsReason,
+} from '../featureSupportLevels/featureStateUtils';
+
+const operatorsThatCanNotBeInstalledAlone = [
+  'nvdia-gpu',
+  'pipelines',
+  'servicemesh',
+  'serverless',
+  'authorino',
+  'lso',
+];
 
 export const OperatorsStep = (props: ClusterOperatorProps) => {
   const isSNO = useSelector(selectIsCurrentClusterSNO);
@@ -18,39 +61,332 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
     props.openshiftVersion || '',
     '4.15',
   );
+
+  const [bundles, setBundles] = useState<Bundle[]>([]);
+  const [isExpanded, setIsExpanded] = useState(true);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [supportedOperators, setSupportedOperators] = useState<string[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedOperators, setSelectedOperators] = useState<string[]>([]);
+  const [selectedBundles, setSelectedBundles] = useState<{ [key: string]: boolean }>({});
+  const [bundleOperators, setBundleOperators] = useState<string[]>([]);
+  const { updateUISettings, uiSettings } = useClusterWizardContext();
+  const { values, setFieldValue } = useFormikContext<OperatorsValues>();
+  const featureSupportLevelData = useNewFeatureSupportLevel();
+
+  useEffect(() => {
+    const fetchBundles = async () => {
+      try {
+        const fetchedBundles = await BundleService.listBundles();
+
+        setBundles(fetchedBundles);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error al obtener los bundles:', error);
+      }
+    };
+
+    void fetchBundles();
+  }, []);
+
+  useEffect(() => {
+    const fetchSupportedOperators = async () => {
+      try {
+        const fetchedOperators = await OperatorsService.getSupportedOperators();
+        const sortedOperators = fetchedOperators.sort((a, b) => a.localeCompare(b));
+
+        setSupportedOperators(sortedOperators);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error al obtener los operators:', error);
+      }
+    };
+
+    void fetchSupportedOperators();
+  }, []);
+
+  const filteredBundles = bundles.filter(
+    (bundle) =>
+      bundle.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      bundle.description?.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  useEffect(() => {
+    if (uiSettings?.bundlesSelected) {
+      setSelectedBundles(
+        uiSettings.bundlesSelected.reduce((acc, id) => ({ ...acc, [id]: true }), {}),
+      );
+
+      setBundleOperators(() => {
+        const newSelection: string[] = [];
+        bundles
+          .filter((bundle) => uiSettings?.bundlesSelected?.includes(bundle.id ?? ''))
+          .forEach((bundle) => {
+            bundle.operators?.forEach((op) => {
+              newSelection.push(op);
+            });
+          });
+
+        return newSelection;
+      });
+    }
+  }, [bundles, uiSettings?.bundlesSelected]);
+
+  useEffect(() => {
+    const newSelection: string[] = [];
+
+    props.monitoredOperators?.forEach((operator) => {
+      if (operator.operatorType === 'olm') {
+        newSelection.push(operator.name ?? '');
+      }
+    });
+
+    setSelectedOperators(newSelection);
+  }, [props.monitoredOperators]);
+
+  const handleBundleSelection = async (bundleId: string, operators: string[], checked: boolean) => {
+    let bundlesSelected = uiSettings?.bundlesSelected ? [...uiSettings.bundlesSelected] : [];
+    let newBundleOperators = [...bundleOperators];
+
+    if (checked) {
+      // Agregar el bundle si se marca
+      bundlesSelected.push(bundleId);
+      operators.forEach((op) => {
+        if (!newBundleOperators.includes(op)) {
+          newBundleOperators.push(op);
+          const fieldId = mapOperatorsToFieldIds[op]; // Obtener el ID del campo correspondiente
+          setFieldValue(fieldId, checked);
+        }
+      });
+    } else {
+      // Eliminar el bundle si se desmarca
+      bundlesSelected = bundlesSelected.filter((id) => id !== bundleId);
+      newBundleOperators = newBundleOperators.filter((op) => !operators.includes(op));
+      operators.forEach((op) => {
+        const fieldId = mapOperatorsToFieldIds[op]; // Obtener el ID del campo correspondiente
+        setFieldValue(fieldId, checked);
+      });
+    }
+
+    await updateUISettings({ bundlesSelected });
+
+    setSelectedBundles((prev) => ({
+      ...prev,
+      [bundleId]: checked,
+    }));
+
+    setBundleOperators(newBundleOperators);
+  };
+
+  const getBundleLabel = (title: string | undefined, operators: string[] | undefined) => {
+    return (
+      <>
+        <span>{title} </span>
+        <PopoverIcon
+          component={'a'}
+          bodyContent={
+            <>
+              <h3>{'Bundle operators'}</h3>
+              {operators && operators.length > 0 ? (
+                <ul>
+                  {operators.map((operator, index) => (
+                    <li key={index}>{operator}</li>
+                  ))}
+                </ul>
+              ) : (
+                <p>No operators available</p>
+              )}
+            </>
+          }
+        />
+      </>
+    );
+  };
+  const bundleHasOperatorsNotSupported = (operators: string[] | undefined) => {
+    return (
+      operators?.some(
+        (operator) =>
+          !featureSupportLevelData.isFeatureSupported(mapOperatorIdToFeatureId[operator]),
+      ) ?? false
+    );
+  };
+
+  const getDisabledReasonForOperator = (operatorKey: string, values: OperatorsValues) => {
+    let disabledReason = featureSupportLevelData.getFeatureDisabledReason(
+      mapOperatorIdToFeatureId[operatorKey],
+    );
+    if (operatorKey === 'cnv') {
+      if (!disabledReason) {
+        const lvmSupport = featureSupportLevelData.getFeatureSupportLevel('LVM');
+        disabledReason = getCnvIncompatibleWithLvmReason(values, lvmSupport);
+      }
+      if (!disabledReason) {
+        disabledReason = getCnvDisabledWithMtvReason(values);
+      }
+    }
+    if (operatorKey === 'lvm') {
+      if (!disabledReason) {
+        const lvmSupport = featureSupportLevelData.getFeatureSupportLevel('LVM');
+        disabledReason = getLvmIncompatibleWithCnvReason(values, lvmSupport);
+        if (!disabledReason) {
+          disabledReason = getLvmsIncompatibleWithOdfReason(values);
+        }
+      }
+    }
+    if (operatorKey === 'odf') {
+      if (!disabledReason) {
+        disabledReason = getOdfIncompatibleWithLvmsReason(values);
+      }
+    }
+    if (operatorKey === 'openshift-ai') {
+      if (!disabledReason) {
+        disabledReason = getOpenShiftAIIncompatibleWithLvmsReason(values);
+      }
+    }
+    return disabledReason;
+  };
+
   return (
-    <Stack hasGutter data-testid={'operators-form'}>
-      <StackItem>
-        <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
-      </StackItem>
-      <StackItem>
-        <CnvCheckbox {...props} isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15} />
-      </StackItem>
+    <Stack hasGutter data-testid={'operators-page'}>
       <StackItem>
-        <MtvOperatorCheckbox clusterId={props.clusterId} />
+        <Flex
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+        >
+          <FlexItem>
+            <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
+          </FlexItem>
+          <FlexItem hidden>
+            <TextInput
+              value={searchTerm}
+              type="text"
+              onChange={(_event, value) => setSearchTerm(value)}
+              placeholder="Search"
+              style={{ width: '400px' }}
+            />
+          </FlexItem>
+        </Flex>
       </StackItem>
       <StackItem>
-        <MceCheckbox
-          clusterId={props.clusterId}
-          isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
-          openshiftVersion={props.openshiftVersion}
-        />
+        <Title headingLevel="h2" size="lg">
+          Bundles
+        </Title>
       </StackItem>
-      {isVersionEqualsOrMajorThan4_15 ? (
-        <>
-          <StackItem>
-            <LvmCheckbox {...props} />
-          </StackItem>
-          <StackItem>
-            <OdfCheckbox />
-          </StackItem>
-        </>
-      ) : (
-        <StackItem>{isSNO ? <LvmCheckbox {...props} /> : <OdfCheckbox />}</StackItem>
-      )}
-
-      <OpenShiftAICheckbox />
-      <OscCheckbox />
+      {/* Mostrar bundles como tarjetas */}
+      <Gallery hasGutter minWidths={{ default: '350px' }} maxWidths={{ default: '2fr' }}>
+        {filteredBundles.map((bundle) => (
+          <GalleryItem key={bundle.id}>
+            <Tooltip
+              content={
+                bundleHasOperatorsNotSupported(bundle.operators)
+                  ? 'Some operators in this bundle are not supported with the current configuration.'
+                  : isSNO && bundle.id === 'openshift-ai-nvidia'
+                  ? 'This bundle is not available when deploying a Single Node OpenShift.'
+                  : ''
+              }
+              hidden={
+                !bundleHasOperatorsNotSupported(bundle.operators) &&
+                !(isSNO && bundle.id === 'openshift-ai-nvidia')
+              }
+            >
+              <Card
+                style={
+                  bundle.id && selectedBundles[bundle.id]
+                    ? { border: '1px solid #004080', height: '200px' }
+                    : { height: '200px' }
+                }
+                isDisabled={
+                  bundleHasOperatorsNotSupported(bundle.operators) ||
+                  (isSNO && bundle.id === 'openshift-ai-nvidia')
+                }
+              >
+                <CardTitle
+                  style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    {getBundleLabel(bundle.title, bundle.operators)}
+                  </div>
+                  <Checkbox
+                    id={`bundle-${bundle.id || ''}`}
+                    isChecked={bundle.id ? selectedBundles[bundle.id] : false}
+                    onChange={(_event, checked) =>
+                      void handleBundleSelection(bundle.id || '', bundle.operators || [], checked)
+                    }
+                    isDisabled={
+                      bundleHasOperatorsNotSupported(bundle.operators) ||
+                      (isSNO && bundle.id === 'openshift-ai-nvidia')
+                    }
+                  />
+                </CardTitle>
+                <CardBody
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    height: '100%',
+                  }}
+                >
+                  <div>{bundle.description}</div>
+
+                  {/* Badge aligned to the bottom-left */}
+
+                  <div style={{ marginTop: '10px', alignSelf: 'flex-end', height: '25px' }}>
+                    {bundle.id === 'openshift-ai-nvidia' && (
+                      <NewFeatureSupportLevelBadge
+                        featureId="OPENSHIFT_AI"
+                        supportLevel="dev-preview"
+                      />
+                    )}
+                  </div>
+                </CardBody>
+              </Card>
+            </Tooltip>
+          </GalleryItem>
+        ))}
+      </Gallery>
+      <ExpandableSection
+        toggleText={`Single Operators (${supportedOperators.length} | ${
+          props.monitoredOperators
+            ? numberOfEnabledOperators(props.monitoredOperators)
+            : selectedOperators.length
+        } selected)`}
+        onToggle={() => setIsExpanded(!isExpanded)}
+        isExpanded={isExpanded}
+      >
+        <Stack hasGutter data-testid={'operators-form'}>
+          {supportedOperators.map((operatorKey) => {
+            const isOperatorSelected = bundleOperators.includes(operatorKey);
+            const isOperatorPartOfAIBundle =
+              operatorsThatCanNotBeInstalledAlone.includes(operatorKey);
+            const disabledReason = getDisabledReasonForOperator(operatorKey, values);
+            const featureSupportLevel = featureSupportLevelData.getFeatureSupportLevel(
+              mapOperatorIdToFeatureId[operatorKey],
+            );
+            const OperatorComponent = operatorComponentMap[operatorKey];
+            if (!OperatorComponent) {
+              return null;
+            }
+            return (
+              <StackItem key={operatorKey}>
+                <OperatorComponent
+                  clusterId={props.clusterId}
+                  openshiftVersion={props.openshiftVersion}
+                  isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
+                  isSNO={isSNO}
+                  disabledReason={
+                    isOperatorSelected
+                      ? 'This operator is part of a bundle and cannot be deselected.'
+                      : isOperatorPartOfAIBundle
+                      ? 'This operator cannot be installed as a standalone'
+                      : disabledReason
+                  }
+                  supportLevel={featureSupportLevel}
+                />
+              </StackItem>
+            );
+          })}
+        </Stack>
+      </ExpandableSection>
     </Stack>
   );
 };

package/lib/ocm/components/clusterWizard/wizardTransition.ts

@@ -191,7 +191,7 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
       'osc-requirements-satisfied',
     ],
   },
-  softValidationIds: ['no-skip-installation-disk', 'no-skip-missing-disk'],
+  softValidationIds: ['no-skip-installation-disk', 'no-skip-missing-disk', 'compatible-agent'],
 };
 
 const storageStepValidationsMap: WizardStepValidationMap = {

package/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -249,6 +249,46 @@ export const getNewFeatureDisabledReason = (
         return 'Migration Toolkit for Virtualization is not supported in this OpenShift version';
       }
     }
+    case 'AUTHORINO': {
+      if (!isSupported) {
+        return `Authorino is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'LSO': {
+      if (!isSupported) {
+        return `Lso is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'NMSTATE': {
+      if (!isSupported) {
+        return `Nmstate is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'NODE_FEATURE_DISCOVERY': {
+      if (!isSupported) {
+        return `Node Feature Discovery is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'NVIDIA_GPU': {
+      if (!isSupported) {
+        return `NVIDIA GPU is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'PIPELINES': {
+      if (!isSupported) {
+        return `Pipelines is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'SERVERLESS': {
+      if (!isSupported) {
+        return `Serverless is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'SERVICEMESH': {
+      if (!isSupported) {
+        return `Service mesh is not available with the selected CPU architecture.`;
+      }
+    }
     default: {
       return undefined;
     }