@openshift-assisted/ui-lib 2.38.2 → 2.38.4

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, PopoverIcon } from '../../../../common';
+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';
+
+const KMM_FIELD_NAME = 'useKmm';
+
+const KmmLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install Kernel Module Management </span>
+      </Tooltip>
+      <PopoverIcon
+        id={KMM_FIELD_NAME}
+        component={'a'}
+        bodyContent={'No additional requirements needed'}
+      />
+      <NewFeatureSupportLevelBadge featureId="KMM" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const KmmHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">Management of kernel modules. </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const KmmCheckbox = ({ disabledReason }: { disabledReason?: string }) => {
+  const fieldId = getFieldId(KMM_FIELD_NAME, 'input');
+  const featureSupportLevel = useNewFeatureSupportLevel();
+  const [disabledReasonKmm, setDisabledReason] = useState<string | undefined>();
+
+  React.useEffect(() => {
+    const reason = featureSupportLevel.getFeatureDisabledReason('KMM');
+    setDisabledReason(reason);
+  }, [featureSupportLevel]);
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={KMM_FIELD_NAME}
+        label={
+          <KmmLabel
+            disabledReason={disabledReason ? disabledReason : disabledReasonKmm}
+            supportLevel={featureSupportLevel.getFeatureSupportLevel('KMM')}
+          />
+        }
+        helperText={<KmmHelperText />}
+        isDisabled={!!disabledReason || !!disabledReasonKmm}
+      />
+    </FormGroup>
+  );
+};
+
+export default KmmCheckbox;

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

@@ -70,6 +70,7 @@ const MtvCheckbox = ({
   const selectCNVOperator = (checked: boolean) => {
     if (featureSupportLevelData.isFeatureSupported('CNV'))
       setFieldValue('useContainerNativeVirtualization', checked);
+    if (featureSupportLevelData.isFeatureSupported('LSO')) setFieldValue('useLso', checked);
   };
 
   return (

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

@@ -23,7 +23,7 @@ const NvidiaGpuLabel = ({
       <PopoverIcon
         id={NVIDIAGPU_FIELD_NAME}
         component={'a'}
-        bodyContent={'No additional requirements needed'}
+        bodyContent={'Requires at least one supported NVIDIA GPU'}
       />
       <NewFeatureSupportLevelBadge featureId="NVIDIA_GPU" supportLevel={supportLevel} />
     </>

package/lib/ocm/components/clusterConfiguration/operators/OpenshiftAIAmdRequirements.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 OpenshiftAIAmdRequirements = () => {
+  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 AMD GPU.</ListItem>
+        <ListItem>Nodes that have AMD GPUs installed need to have secure boot disabled.</ListItem>
+      </List>
+      Bundle operators:
+      <List>
+        <ListItem>Openshift AI</ListItem>
+        <ListItem>OpenShift Data Foundation</ListItem>
+        <ListItem>AMD GPU</ListItem>
+        <ListItem>Node Feature Discovery</ListItem>
+        <ListItem>Kernel Module Management</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 OpenshiftAIAmdRequirements;

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

@@ -11,7 +11,7 @@ const OpenshiftAINvidiaRequirements = () => {
         <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>At least one supported NVIDIA GPU.</ListItem>
         <ListItem>
           Nodes that have NVIDIA GPUs installed need to have secure boot disabled.
         </ListItem>
@@ -21,6 +21,7 @@ const OpenshiftAINvidiaRequirements = () => {
         <ListItem>Openshift AI</ListItem>
         <ListItem>OpenShift Data Foundation</ListItem>
         <ListItem>NVIDIA GPU</ListItem>
+        <ListItem>Node Feature Discovery</ListItem>
         <ListItem>Pipelines</ListItem>
         <ListItem>Service Mesh</ListItem>
         <ListItem>Serverless</ListItem>

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 } = {
@@ -102,4 +110,6 @@ export const mapOperatorIdToFeatureId: { [key: string]: FeatureId } = {
   [OPERATOR_NAME_PIPELINES]: 'PIPELINES',
   [OPERATOR_NAME_SERVICEMESH]: 'SERVICEMESH',
   [OPERATOR_NAME_NVIDIA_GPU]: 'NVIDIA_GPU',
+  [OPERATOR_NAME_AMD_GPU]: 'AMD_GPU',
+  [OPERATOR_NAME_KMM]: 'KMM',
 };

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
@@ -49,6 +48,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 +78,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 () => {
@@ -89,7 +87,7 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
         setBundles(fetchedBundles);
       } catch (error) {
         // eslint-disable-next-line no-console
-        console.error('Error al obtener los bundles:', error);
+        console.error('Error getting bundles:', error);
       }
     };
 
@@ -105,7 +103,7 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
         setSupportedOperators(sortedOperators);
       } catch (error) {
         // eslint-disable-next-line no-console
-        console.error('Error al obtener los operators:', error);
+        console.error('Error getting operators:', error);
       }
     };
 
@@ -191,23 +189,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 +274,19 @@ 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);
+            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,22 +316,36 @@ 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 hasAnotherAIBundleSelected =
+            (bundle.id === 'openshift-ai-nvidia' && selectedBundles['openshift-ai-amd']) ||
+            (bundle.id === 'openshift-ai-amd' && selectedBundles['openshift-ai-nvidia']);
 
           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.'
+            : hasAnotherAIBundleSelected
+            ? 'This bundle cannot be selected because you already have another Openshift AI bundle selected.'
             : '';
-
           return (
             <GalleryItem key={bundle.id}>
               <Tooltip
                 content={tooltipContent}
                 hidden={
-                  !hasUnsupportedOperators && !hasIncompatibleOperators && !isSnoAndBlockedBundle
+                  !hasUnsupportedOperators &&
+                  !hasIncompatibleOperators &&
+                  !isSnoAndBlockedBundle &&
+                  !hasAnotherAIBundleSelected
                 }
               >
                 <Card
@@ -341,7 +355,10 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
                       : { height: '200px' }
                   }
                   isDisabled={
-                    hasUnsupportedOperators || hasIncompatibleOperators || isSnoAndBlockedBundle
+                    hasUnsupportedOperators ||
+                    hasIncompatibleOperators ||
+                    isSnoAndBlockedBundle ||
+                    hasAnotherAIBundleSelected
                   }
                 >
                   <CardTitle
@@ -352,7 +369,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 || ''}`}
@@ -361,7 +378,10 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
                         void handleBundleSelection(bundle.id || '', bundle.operators || [], checked)
                       }
                       isDisabled={
-                        hasUnsupportedOperators || hasIncompatibleOperators || isSnoAndBlockedBundle
+                        hasUnsupportedOperators ||
+                        hasIncompatibleOperators ||
+                        isSnoAndBlockedBundle ||
+                        hasAnotherAIBundleSelected
                       }
                     />
                   </CardTitle>
@@ -377,7 +397,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/components/featureSupportLevels/featureStateUtils.ts

@@ -289,6 +289,11 @@ export const getNewFeatureDisabledReason = (
         return `Service mesh is not available with the selected CPU architecture.`;
       }
     }
+    case 'AMD_GPU': {
+      if (!isSupported) {
+        return `AMD GPU is not available with the selected CPU architecture.`;
+      }
+    }
     default: {
       return undefined;
     }

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.4",
+    "@openshift-assisted/types": "2.38.4",
     "@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.4"
 }