@openshift-assisted/ui-lib 2.38.2 → 2.38.3

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

@@ -14,10 +14,14 @@ import AuthorinoCheckbox from './AuthorinoCheckbox';
 import PipelinesCheckbox from './PipelinesChekbox';
 import ServiceMeshCheckbox from './ServicemeshCheckbox';
 import NvidiaGpuCheckbox from './NvidiaGpuCheckbox';
+import AmdGpuCheckbox from './AmdGpuCheckbox';
+import KmmCheckbox from './KmmCheckbox';
 import {
   FeatureId,
+  OPERATOR_NAME_AMD_GPU,
   OPERATOR_NAME_AUTHORINO,
   OPERATOR_NAME_CNV,
+  OPERATOR_NAME_KMM,
   OPERATOR_NAME_LSO,
   OPERATOR_NAME_LVM,
   OPERATOR_NAME_MCE,
@@ -66,6 +70,8 @@ export const operatorComponentMap: Record<string, (props: OperatorProps) => JSX.
   pipelines: (props) => <PipelinesCheckbox {...props} />,
   servicemesh: (props) => <ServiceMeshCheckbox {...props} />,
   'nvidia-gpu': (props) => <NvidiaGpuCheckbox {...props} />,
+  'amd-gpu': (props) => <AmdGpuCheckbox {...props} />,
+  kmm: (props) => <KmmCheckbox {...props} />,
 };
 
 export const mapOperatorsToFieldIds: { [key: string]: string } = {
@@ -84,6 +90,8 @@ export const mapOperatorsToFieldIds: { [key: string]: string } = {
   [OPERATOR_NAME_PIPELINES]: 'usePipelines',
   [OPERATOR_NAME_SERVICEMESH]: 'useServicemesh',
   [OPERATOR_NAME_NVIDIA_GPU]: 'useNvidiaGpu',
+  [OPERATOR_NAME_AMD_GPU]: 'useAmdGpu',
+  [OPERATOR_NAME_KMM]: 'useKmm',
 };
 
 export const mapOperatorIdToFeatureId: { [key: string]: FeatureId } = {

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

@@ -5,8 +5,10 @@ import { Formik, FormikConfig, useFormikContext } from 'formik';
 import {
   ClusterWizardStep,
   getFormikErrorFields,
+  OPERATOR_NAME_AMD_GPU,
   OPERATOR_NAME_AUTHORINO,
   OPERATOR_NAME_CNV,
+  OPERATOR_NAME_KMM,
   OPERATOR_NAME_LSO,
   OPERATOR_NAME_LVM,
   OPERATOR_NAME_MCE,
@@ -56,6 +58,8 @@ export const getOperatorsInitialValues = (
     usePipelines: isOperatorEnabled([OPERATOR_NAME_PIPELINES]),
     useServicemesh: isOperatorEnabled([OPERATOR_NAME_SERVICEMESH]),
     useNvidiaGpu: isOperatorEnabled([OPERATOR_NAME_NVIDIA_GPU]),
+    useAmdGpu: isOperatorEnabled([OPERATOR_NAME_AMD_GPU]),
+    useKmm: isOperatorEnabled([OPERATOR_NAME_KMM]),
   };
 };
 

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

@@ -49,6 +49,7 @@ import {
   getOpenShiftAIIncompatibleWithLvmsReason,
 } from '../featureSupportLevels/featureStateUtils';
 import OpenshiftAINvidiaRequirements from '../clusterConfiguration/operators/OpenshiftAINvidiaRequirements';
+import OpenshiftAIAmdRequirements from '../clusterConfiguration/operators/OpenshiftAIAmdRequirements';
 import VirtualizationRequirements from '../clusterConfiguration/operators/VirtualizationRequirements';
 
 const operatorsThatCanNotBeInstalledAlone = [
@@ -78,8 +79,6 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
   const { updateUISettings, uiSettings } = useClusterWizardContext();
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
   const featureSupportLevelData = useNewFeatureSupportLevel();
-  const [hasUnsupportedOperators, setHasUnsupportedOperators] = useState<boolean>(false);
-  const [hasIncompatibleOperators, setHasIncompatibleOperators] = useState<boolean>(false);
 
   useEffect(() => {
     const fetchBundles = async () => {
@@ -191,23 +190,34 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
     setBundleOperators(newBundleOperators);
   };
 
-  const getBundleLabel = (title: string | undefined) => {
+  const getBundleLabel = (bundle: Bundle) => {
+    let requirements: React.ReactElement | null = null;
+    switch (bundle.id) {
+      case 'virtualization':
+        requirements = <VirtualizationRequirements />;
+        break;
+      case 'openshift-ai-nvidia':
+        requirements = <OpenshiftAINvidiaRequirements />;
+        break;
+      case 'openshift-ai-amd':
+        requirements = <OpenshiftAIAmdRequirements />;
+        break;
+    }
+
     return (
       <>
-        <span>{title} </span>
-        <PopoverIcon
-          component={'a'}
-          bodyContent={
-            <>
-              <span style={{ fontSize: '1.1em' }}>{'Requirements and dependencies'}</span>
-              {title === 'Virtualization' ? (
-                <VirtualizationRequirements />
-              ) : (
-                <OpenshiftAINvidiaRequirements />
-              )}
-            </>
-          }
-        />
+        <span>{bundle.title} </span>
+        {requirements && (
+          <PopoverIcon
+            component={'a'}
+            bodyContent={
+              <>
+                <span style={{ fontSize: '1.1em' }}>{'Requirements and dependencies'}</span>
+                {requirements}
+              </>
+            }
+          />
+        )}
       </>
     );
   };
@@ -265,28 +275,20 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
   );
 
   const bundleHasOperatorsNotCompatibles = React.useCallback(
-    (operators: string[] | undefined, values: OperatorsValues) => {
-      return (
-        operators?.some((operatorKey) => {
-          const disabledReason = getDisabledReasonForOperator(operatorKey, values);
-          console.log(disabledReason);
-          return disabledReason !== undefined;
-        }) ?? false
-      );
+    (operators: string[] | undefined, values: OperatorsValues, isSelected: boolean) => {
+      if (!isSelected) {
+        return (
+          operators?.some((operatorKey) => {
+            const disabledReason = getDisabledReasonForOperator(operatorKey, values);
+            console.log(disabledReason);
+            return disabledReason !== undefined;
+          }) ?? false
+        );
+      } else return false;
     },
     [getDisabledReasonForOperator],
   );
 
-  useEffect(() => {
-    setHasUnsupportedOperators(
-      bundles.some((bundle) => bundleHasOperatorsNotSupported(bundle.operators)),
-    );
-
-    setHasIncompatibleOperators(
-      bundles.some((bundle) => bundleHasOperatorsNotCompatibles(bundle.operators, values)),
-    );
-  }, [values, bundles, bundleHasOperatorsNotSupported, bundleHasOperatorsNotCompatibles]);
-
   return (
     <Stack hasGutter data-testid={'operators-page'}>
       <StackItem>
@@ -316,14 +318,20 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
       {/* Mostrar bundles como tarjetas */}
       <Gallery hasGutter minWidths={{ default: '350px' }} maxWidths={{ default: '2fr' }}>
         {filteredBundles.map((bundle) => {
-          const isSnoAndBlockedBundle = isSNO && bundle.id === 'openshift-ai-nvidia';
-
+          const isSnoAndBlockedBundle =
+            isSNO && (bundle.id === 'openshift-ai-nvidia' || bundle.id === 'openshift-ai-amd');
+          const hasUnsupportedOperators = bundleHasOperatorsNotSupported(bundle.operators);
+          const hasIncompatibleOperators = bundleHasOperatorsNotCompatibles(
+            bundle.operators,
+            values,
+            bundle.id ? selectedBundles[bundle.id] : false,
+          );
           const tooltipContent = hasUnsupportedOperators
             ? 'Some operators in this bundle are not supported with the current configuration.'
-            : hasIncompatibleOperators
-            ? 'Some operators in this bundle can not be installed with some single operators selected.'
             : isSnoAndBlockedBundle
             ? 'This bundle is not available when deploying a Single Node OpenShift.'
+            : hasIncompatibleOperators
+            ? 'Some operators in this bundle can not be installed with some single operators selected.'
             : '';
 
           return (
@@ -352,7 +360,7 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
                     }}
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      {getBundleLabel(bundle.title)}
+                      {getBundleLabel(bundle)}
                     </div>
                     <Checkbox
                       id={`bundle-${bundle.id || ''}`}
@@ -377,7 +385,8 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
 
                     {/* Badge aligned to the bottom-left */}
                     <div style={{ marginTop: '10px', alignSelf: 'flex-end', height: '25px' }}>
-                      {bundle.id === 'openshift-ai-nvidia' && (
+                      {(bundle.id === 'openshift-ai-nvidia' ||
+                        bundle.id === 'openshift-ai-amd') && (
                         <NewFeatureSupportLevelBadge
                           featureId="OPENSHIFT_AI"
                           supportLevel="dev-preview"

package/lib/ocm/components/clusterWizard/_wizardTransition.test.ts

@@ -92,6 +92,11 @@ const validationInfoHostsDisovery: ValidationsInfo = {
       message: 'a validation unrelated to the canNextHostDiscovery',
       status: 'error',
     },
+    {
+      id: 'amd-gpu-requirements-satisfied',
+      message: 'a validation message',
+      status: 'success',
+    },
   ],
 };
 
@@ -205,6 +210,11 @@ const flatValidationHostsDiscovery: HostValidation[] = [
     message: 'a host validation message',
     status: 'success',
   },
+  {
+    id: 'amd-gpu-requirements-satisfied',
+    message: 'a host validation message',
+    status: 'success',
+  },
 ];
 
 const flatValidationHostsStorage: HostValidation[] = [

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

@@ -174,6 +174,7 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
       'nvidia-gpu-requirements-satisfied',
       'openshift-ai-requirements-satisfied',
       'osc-requirements-satisfied',
+      'amd-gpu-requirements-satisfied',
     ],
   },
   host: {
@@ -189,6 +190,7 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
       'nvidia-gpu-requirements-satisfied',
       'openshift-ai-requirements-satisfied',
       'osc-requirements-satisfied',
+      'amd-gpu-requirements-satisfied',
     ],
   },
   softValidationIds: ['no-skip-installation-disk', 'no-skip-missing-disk', 'compatible-agent'],

package/lib/ocm/services/OperatorsService.tsx

@@ -16,6 +16,8 @@ import {
   OPERATOR_NAME_PIPELINES,
   OPERATOR_NAME_SERVICEMESH,
   OPERATOR_NAME_NVIDIA_GPU,
+  OPERATOR_NAME_AMD_GPU,
+  OPERATOR_NAME_KMM,
 } from '../../common';
 import { getOlmOperatorCreateParamsByName } from '../components/clusters/utils';
 import {
@@ -52,6 +54,8 @@ const OperatorsService = {
     setOperator(OPERATOR_NAME_PIPELINES, values.usePipelines);
     setOperator(OPERATOR_NAME_SERVICEMESH, values.useServicemesh);
     setOperator(OPERATOR_NAME_NVIDIA_GPU, values.useNvidiaGpu);
+    setOperator(OPERATOR_NAME_AMD_GPU, values.useAmdGpu);
+    setOperator(OPERATOR_NAME_KMM, values.useKmm);
 
     return Object.values(enabledOlmOperatorsByName);
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.38.2",
-    "@openshift-assisted/types": "2.38.2",
+    "@openshift-assisted/locales": "2.38.3",
+    "@openshift-assisted/types": "2.38.3",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
     "@patternfly/patternfly": "5.2.0",
     "@patternfly/react-code-editor": "5.2.0",
@@ -139,5 +139,5 @@
       ]
     }
   },
-  "version": "2.38.2"
+  "version": "2.38.3"
 }