@openshift-assisted/ui-lib 2.12.1-cim → 2.14.0-cim

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

@@ -5,8 +5,15 @@ import { useClusterPreflightRequirements } from '../../../hooks';
 import { ErrorState, LoadingState, OPERATOR_NAME_CNV, RenderIf } from '../../../../common';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { selectIsCurrentClusterSNO } from '../../../store/slices/current-cluster/selectors';
+import { getOdfLvmsText } from './utils';
 
-const CnvHostRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
+const CnvHostRequirements = ({
+  clusterId,
+  isVersionEqualsOrMajorThan4_15,
+}: {
+  clusterId: Cluster['id'];
+  isVersionEqualsOrMajorThan4_15: boolean;
+}) => {
   const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
   const isSingleNode = useSelector(selectIsCurrentClusterSNO);
 
@@ -23,7 +30,7 @@ const CnvHostRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
 
   const workerRequirements = cnvRequirements?.requirements?.worker?.quantitative;
   const masterRequirements = cnvRequirements?.requirements?.master?.quantitative;
-
+  const odfLvmsText = getOdfLvmsText(isSingleNode, isVersionEqualsOrMajorThan4_15);
   return (
     <>
       <List>
@@ -48,12 +55,7 @@ const CnvHostRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
             ? ` and ${masterRequirements?.diskSizeGb} storage space`
             : ''}
         </ListItem>
-        <RenderIf condition={!isSingleNode}>
-          <ListItem>
-            OpenShift Data Foundation (recommended for full functionality) or another persistent
-            storage service
-          </ListItem>
-        </RenderIf>
+        <ListItem>{odfLvmsText}</ListItem>
       </List>
     </>
   );

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import {
   ClusterOperatorProps,
@@ -10,8 +10,8 @@ import {
   OPERATOR_NAME_LVM,
   ExposedOperatorName,
   ExternalLink,
-  LVMS_LINK,
   OPERATOR_NAME_LVMS,
+  getLvmsDocsLink,
 } from '../../../../common';
 import LvmHostRequirements from './LvmHostRequirements';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
@@ -32,14 +32,22 @@ type LvmLabelProps = ClusterOperatorProps & {
   supportLevel?: SupportLevel;
 };
 
-const LvmHelperText = ({ operatorName }: { operatorName: ExposedOperatorName }) => {
+const LvmHelperText = ({
+  operatorName,
+  docsVersion,
+}: {
+  operatorName: ExposedOperatorName;
+  docsVersion: string;
+}) => {
   return (
-    <>
-      Storage virtualization that offers a more flexible approach for disk space management.{' '}
-      {operatorName === OPERATOR_NAME_LVMS && (
-        <ExternalLink href={LVMS_LINK}>Learn more</ExternalLink>
-      )}
-    </>
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Storage virtualization that offers a more flexible approach for disk space management.{' '}
+        {operatorName === OPERATOR_NAME_LVMS && (
+          <ExternalLink href={getLvmsDocsLink(docsVersion)}>Learn more</ExternalLink>
+        )}
+      </HelperTextItem>
+    </HelperText>
   );
 };
 
@@ -59,7 +67,13 @@ const LvmLabel = ({ clusterId, operatorLabel, disabledReason, supportLevel }: Lv
   );
 };
 
-const LvmCheckbox = ({ clusterId }: ClusterOperatorProps) => {
+const LvmCheckbox = ({
+  clusterId,
+  openshiftVersion,
+}: {
+  clusterId: ClusterOperatorProps['clusterId'];
+  openshiftVersion?: ClusterOperatorProps['openshiftVersion'];
+}) => {
   const fieldId = getFieldId(LVM_FIELD_NAME, 'input');
 
   const featureSupportLevel = useNewFeatureSupportLevel();
@@ -101,7 +115,12 @@ const LvmCheckbox = ({ clusterId }: ClusterOperatorProps) => {
             supportLevel={featureSupportLevel.getFeatureSupportLevel('LVM')}
           />
         }
-        helperText={<LvmHelperText operatorName={operatorInfo.operatorName} />}
+        helperText={
+          <LvmHelperText
+            operatorName={operatorInfo.operatorName}
+            docsVersion={openshiftVersion || ''}
+          />
+        }
         isDisabled={!!disabledReason}
       />
     </FormGroup>

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

@@ -23,18 +23,11 @@ const LvmHostRequirements = ({ clusterId }: { clusterId: ClusterOperatorProps['c
     (operatorRequirements) => operatorRequirements.operatorName === OPERATOR_NAME_LVM,
   );
 
-  const { qualitative = [], quantitative } = lvmRequirements?.requirements
+  const { qualitative = [] } = lvmRequirements?.requirements
     ?.master as HostTypeHardwareRequirements;
 
   return (
     <List>
-      {quantitative && (
-        <ListItem>
-          The host node requires an additional {quantitative.ramMib} MiB of memory{' '}
-          {quantitative.diskSizeGb ? ',' : ' and'} {quantitative.cpuCores} CPUs
-          {quantitative?.diskSizeGb ? ` and ${quantitative?.diskSizeGb} storage space` : ''}
-        </ListItem>
-      )}
       {qualitative.map((qualitativeItem, index) => (
         <ListItem key={index}>{qualitativeItem}</ListItem>
       ))}

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

@@ -1,43 +1,64 @@
 import React from 'react';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { getFieldId, PopoverIcon, MCE_LINK } from '../../../../common';
+import { getFieldId, PopoverIcon, getMceDocsLink, ClusterOperatorProps } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import MceRequirements from './MceRequirements';
 
 const MCE_FIELD_NAME = 'useMultiClusterEngine';
 
-const MceLabel = ({ disabledReason }: { disabledReason?: string }) => (
-  <>
-    <Tooltip hidden={!disabledReason} content={disabledReason}>
-      <span>Install multicluster engine </span>
-    </Tooltip>
-    <PopoverIcon
-      id={MCE_FIELD_NAME}
-      component={'a'}
-      headerContent="Additional requirements"
-      bodyContent={
-        <>
-          OpenShift Data Foundation (recommended for creating additional on-premise clusters) or
-          another persistent storage service
-        </>
-      }
-    />
-  </>
-);
-
-const MceHelperText = () => {
+const MceLabel = ({
+  disabledReason,
+  isVersionEqualsOrMajorThan4_15,
+  clusterId,
+}: {
+  disabledReason?: string;
+  isVersionEqualsOrMajorThan4_15: boolean;
+  clusterId: ClusterOperatorProps['clusterId'];
+}) => {
   return (
     <>
-      Create, import, and manage multiple clusters from this cluster.{' '}
-      <a href={MCE_LINK} target="_blank" rel="noopener noreferrer">
-        {'Learn more'} <ExternalLinkAltIcon />
-      </a>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install multicluster engine </span>
+      </Tooltip>
+      <PopoverIcon
+        id={MCE_FIELD_NAME}
+        component={'a'}
+        headerContent="Additional requirements"
+        bodyContent={
+          <MceRequirements
+            clusterId={clusterId}
+            isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
+          />
+        }
+      />
     </>
   );
 };
 
-const MceCheckbox = () => {
+const MceHelperText = ({ docsVersion }: { docsVersion: string }) => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Create, import, and manage multiple clusters from this cluster.{' '}
+        <a href={getMceDocsLink(docsVersion)} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const MceCheckbox = ({
+  clusterId,
+  isVersionEqualsOrMajorThan4_15,
+  openshiftVersion,
+}: {
+  isVersionEqualsOrMajorThan4_15: boolean;
+  openshiftVersion?: string;
+  clusterId: ClusterOperatorProps['clusterId'];
+}) => {
   const featureSupportLevelContext = useNewFeatureSupportLevel();
   const fieldId = getFieldId(MCE_FIELD_NAME, 'input');
   const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('MCE');
@@ -45,9 +66,15 @@ const MceCheckbox = () => {
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
         name={MCE_FIELD_NAME}
-        label={<MceLabel disabledReason={disabledReason} />}
+        label={
+          <MceLabel
+            disabledReason={disabledReason}
+            isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
+            clusterId={clusterId}
+          />
+        }
         isDisabled={!!disabledReason}
-        helperText={<MceHelperText />}
+        helperText={<MceHelperText docsVersion={openshiftVersion || ''} />}
       />
     </FormGroup>
   );

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { List, ListItem } from '@patternfly/react-core';
+import { useClusterPreflightRequirements } from '../../../hooks';
+import { ErrorState, LoadingState, OPERATOR_NAME_MCE, RenderIf } from '../../../../common';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { selectIsCurrentClusterSNO } from '../../../store/slices/current-cluster/selectors';
+import { getOdfLvmsText } from './utils';
+
+const MceRequirements = ({
+  clusterId,
+  isVersionEqualsOrMajorThan4_15,
+}: {
+  clusterId: Cluster['id'];
+  isVersionEqualsOrMajorThan4_15: boolean;
+}) => {
+  const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
+  const isSingleNode = useSelector(selectIsCurrentClusterSNO);
+
+  if (isLoading) {
+    return <LoadingState content="Loading hardware requirements ..." />;
+  }
+  if (error) {
+    return <ErrorState />;
+  }
+
+  const mceRequirements = preflightRequirements?.operators?.find(
+    (operatorRequirements) => operatorRequirements.operatorName === OPERATOR_NAME_MCE,
+  );
+
+  const workerRequirements = mceRequirements?.requirements?.worker?.quantitative;
+  const masterRequirements = mceRequirements?.requirements?.master?.quantitative;
+  const odfLvmsText = getOdfLvmsText(isSingleNode, isVersionEqualsOrMajorThan4_15);
+  return (
+    <>
+      <List>
+        <RenderIf condition={!isSingleNode}>
+          <ListItem>
+            Each worker node requires an additional {workerRequirements?.ramMib || 360} MiB of
+            memory {workerRequirements?.diskSizeGb ? ',' : ' and'}{' '}
+            {workerRequirements?.cpuCores || 2} CPUs
+            {workerRequirements?.diskSizeGb
+              ? ` and ${workerRequirements?.diskSizeGb} storage space`
+              : ''}
+          </ListItem>
+        </RenderIf>
+        <ListItem>
+          Each control plane node requires an additional {masterRequirements?.ramMib || 150} MiB of
+          memory {masterRequirements?.diskSizeGb ? ',' : ' and'} {masterRequirements?.cpuCores || 4}{' '}
+          CPUs
+          {masterRequirements?.diskSizeGb
+            ? ` and ${masterRequirements?.diskSizeGb} storage space`
+            : ''}
+        </ListItem>
+        <ListItem>{odfLvmsText}</ListItem>
+      </List>
+    </>
+  );
+};
+
+export default MceRequirements;

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

@@ -0,0 +1,79 @@
+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 {
+  getFieldId,
+  PopoverIcon,
+  MTV_LINK,
+  OperatorsValues,
+  ClusterOperatorProps,
+} from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import { useFormikContext } from 'formik';
+import MtvRequirements from './MtvRequirements';
+
+const Mtv_FIELD_NAME = 'useMigrationToolkitforVirtualization';
+
+const MtvLabel = ({
+  disabledReason,
+  clusterId,
+}: {
+  disabledReason?: string;
+  clusterId: string;
+}) => (
+  <>
+    <Tooltip hidden={!disabledReason} content={disabledReason}>
+      <span>Install Migration Toolkit for Virtualization </span>
+    </Tooltip>
+    <PopoverIcon
+      component={'a'}
+      headerContent="Additional requirements"
+      bodyContent={<MtvRequirements clusterId={clusterId} />}
+    />
+  </>
+);
+
+const MtvHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        The Migration Toolkit for Virtualization (MTV) enables you to migrate virtual machines from
+        VMware vSphere, Red Hat Virtualization, or OpenStack to OpenShift Virtualization running on
+        Red Hat OpenShift.{' '}
+        <a href={MTV_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const MtvCheckbox = ({ clusterId }: { clusterId: ClusterOperatorProps['clusterId'] }) => {
+  const featureSupportLevelContext = useNewFeatureSupportLevel();
+  const { values, setFieldValue } = useFormikContext<OperatorsValues>();
+  const fieldId = getFieldId(Mtv_FIELD_NAME, 'input');
+  const [disabledReason, setDisabledReason] = useState<string | undefined>();
+
+  const selectCNVOperator = (checked: boolean) =>
+    setFieldValue('useContainerNativeVirtualization', checked);
+
+  React.useEffect(() => {
+    const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('MTV');
+    setDisabledReason(disabledReason);
+  }, [values, featureSupportLevelContext]);
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={Mtv_FIELD_NAME}
+        label={<MtvLabel disabledReason={disabledReason} clusterId={clusterId} />}
+        isDisabled={!!disabledReason}
+        helperText={<MtvHelperText />}
+        onChange={selectCNVOperator}
+      />
+    </FormGroup>
+  );
+};
+
+export default MtvCheckbox;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { List, ListItem } from '@patternfly/react-core';
+import { useClusterPreflightRequirements } from '../../../hooks';
+import { ErrorState, LoadingState, OPERATOR_NAME_MTV, RenderIf } from '../../../../common';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { selectIsCurrentClusterSNO } from '../../../store/slices/current-cluster/selectors';
+
+const MtvRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
+  const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
+  const isSingleNode = useSelector(selectIsCurrentClusterSNO);
+
+  if (isLoading) {
+    return <LoadingState content="Loading hardware requirements ..." />;
+  }
+  if (error) {
+    return <ErrorState />;
+  }
+
+  const mtvRequirements = preflightRequirements?.operators?.find(
+    (operatorRequirements) => operatorRequirements.operatorName === OPERATOR_NAME_MTV,
+  );
+
+  const workerRequirements = mtvRequirements?.requirements?.worker?.quantitative;
+  const masterRequirements = mtvRequirements?.requirements?.master?.quantitative;
+  return (
+    <>
+      <List>
+        <RenderIf condition={!isSingleNode}>
+          <ListItem>
+            Each worker node requires an additional {workerRequirements?.ramMib || 360} MiB of
+            memory {workerRequirements?.diskSizeGb ? ',' : ' and'}{' '}
+            {workerRequirements?.cpuCores || 2} CPUs
+            {workerRequirements?.diskSizeGb
+              ? ` and ${workerRequirements?.diskSizeGb} storage space`
+              : ''}
+          </ListItem>
+        </RenderIf>
+        <ListItem>
+          Each control plane node requires an additional {masterRequirements?.ramMib || 150} MiB of
+          memory {masterRequirements?.diskSizeGb ? ',' : ' and'} {masterRequirements?.cpuCores || 4}{' '}
+          CPUs
+          {masterRequirements?.diskSizeGb
+            ? ` and ${masterRequirements?.diskSizeGb} storage space`
+            : ''}
+        </ListItem>
+      </List>
+    </>
+  );
+};
+
+export default MtvRequirements;

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import {
   getFieldId,
@@ -34,12 +34,14 @@ const OdfLabel = ({ disabledReason }: { disabledReason?: string }) => (
 
 const OdfHelperText = () => {
   return (
-    <>
-      Persistent software-defined storage for hybrid applications.{' '}
-      <a href={ODF_LINK} target="_blank" rel="noopener noreferrer">
-        {'Learn more'} <ExternalLinkAltIcon />
-      </a>
-    </>
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Persistent software-defined storage for hybrid applications.{' '}
+        <a href={ODF_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
   );
 };
 

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;

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

@@ -24,3 +24,15 @@ export const getActualLVMOperatorName = ({
 
   return operator;
 };
+
+export const getOdfLvmsText = (isSingleNode: boolean, OPCVersionGreaterThan4_15: boolean) => {
+  if (OPCVersionGreaterThan4_15) {
+    return 'OpenShift Data Foundation (recommended for creating additional on-premise clusters), Logical Volume Manager Storage or another persistent storage service';
+  } else {
+    if (isSingleNode) {
+      return 'Logical Volume Manager Storage or another persistent storage service';
+    } else {
+      return 'OpenShift Data Foundation (recommended for creating additional on-premise clusters)  or another persistent storage service';
+    }
+  }
+};