@openshift-assisted/ui-lib 2.38.0 → 2.38.2

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, getLsoLink, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const LSO_FIELD_NAME = 'useLso';
 
@@ -29,11 +30,14 @@ const LsoLabel = ({
   );
 };
 
-const LsoHelperText = () => {
+const LsoHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Allows provisioning of persistent storage by using local volumes.{' '}
+        <a href={getLsoLink(openshiftVersion)} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );
@@ -42,9 +46,11 @@ const LsoHelperText = () => {
 const LsoCheckbox = ({
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(LSO_FIELD_NAME, 'input');
 
@@ -53,7 +59,7 @@ const LsoCheckbox = ({
       <OcmCheckboxField
         name={LSO_FIELD_NAME}
         label={<LsoLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
-        helperText={<LsoHelperText />}
+        helperText={<LsoHelperText openshiftVersion={openshiftVersion || '4.17'} />}
         isDisabled={!!disabledReason}
       />
     </FormGroup>

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

@@ -13,6 +13,7 @@ import { useFormikContext } from 'formik';
 import MtvRequirements from './MtvRequirements';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 
 const Mtv_FIELD_NAME = 'useMigrationToolkitforVirtualization';
 
@@ -64,9 +65,11 @@ const MtvCheckbox = ({
 }) => {
   const { setFieldValue } = useFormikContext<OperatorsValues>();
   const fieldId = getFieldId(Mtv_FIELD_NAME, 'input');
+  const featureSupportLevelData = useNewFeatureSupportLevel();
 
   const selectCNVOperator = (checked: boolean) => {
-    setFieldValue('useContainerNativeVirtualization', checked);
+    if (featureSupportLevelData.isFeatureSupported('CNV'))
+      setFieldValue('useContainerNativeVirtualization', checked);
   };
 
   return (

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon, ClusterOperatorProps } from '../../../../common';
+import { getFieldId, PopoverIcon, ClusterOperatorProps, getNmstateLink } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NmstateRequirements from './NmstateRequirements';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const NMSTATE_FIELD_NAME = 'useNmstate';
 
@@ -33,12 +34,15 @@ const NmstateLabel = ({
   );
 };
 
-const NmstateHelperText = () => {
+const NmstateHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Provides users with functionality to configure various network interface types, DNS, and
         routing on cluster nodes.{' '}
+        <a href={getNmstateLink(openshiftVersion)} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );
@@ -48,10 +52,12 @@ const NmstateCheckbox = ({
   clusterId,
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   clusterId: ClusterOperatorProps['clusterId'];
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(NMSTATE_FIELD_NAME, 'input');
 
@@ -66,7 +72,7 @@ const NmstateCheckbox = ({
             supportLevel={supportLevel}
           />
         }
-        helperText={<NmstateHelperText />}
+        helperText={<NmstateHelperText openshiftVersion={openshiftVersion || '4.17'} />}
         isDisabled={!!disabledReason}
       />
     </FormGroup>

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, getNodeFeatureDiscoveryLink, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const NODEFEATUREDISCOVERY_FIELD_NAME = 'useNodeFeatureDiscovery';
 
@@ -29,12 +30,19 @@ const NodeFeatureDiscoveryLabel = ({
   );
 };
 
-const NodeFeatureDiscoveryHelperText = () => {
+const NodeFeatureDiscoveryHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Manage the detection of hardware features and configuration by labeling nodes with
         hardware-specific information.{' '}
+        <a
+          href={getNodeFeatureDiscoveryLink(openshiftVersion)}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );
@@ -43,9 +51,11 @@ const NodeFeatureDiscoveryHelperText = () => {
 const NodeFeatureDiscoveryCheckbox = ({
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(NODEFEATUREDISCOVERY_FIELD_NAME, 'input');
 
@@ -56,7 +66,9 @@ const NodeFeatureDiscoveryCheckbox = ({
         label={
           <NodeFeatureDiscoveryLabel disabledReason={disabledReason} supportLevel={supportLevel} />
         }
-        helperText={<NodeFeatureDiscoveryHelperText />}
+        helperText={
+          <NodeFeatureDiscoveryHelperText openshiftVersion={openshiftVersion || '4.17'} />
+        }
         isDisabled={!!disabledReason}
       />
     </FormGroup>

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, getNvidiaGpuLink, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const NVIDIAGPU_FIELD_NAME = 'useNvidiaGpu';
 
@@ -29,11 +30,14 @@ const NvidiaGpuLabel = ({
   );
 };
 
-const NvidiaGpuHelperText = () => {
+const NvidiaGpuHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Automate the management of NVIDIA software components needed to provision and monitor GPUs.{' '}
+        <a href={getNvidiaGpuLink(openshiftVersion)} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );
@@ -42,9 +46,11 @@ const NvidiaGpuHelperText = () => {
 const NvidiaGpuCheckbox = ({
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(NVIDIAGPU_FIELD_NAME, 'input');
 
@@ -53,7 +59,7 @@ const NvidiaGpuCheckbox = ({
       <OcmCheckboxField
         name={NVIDIAGPU_FIELD_NAME}
         label={<NvidiaGpuLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
-        helperText={<NvidiaGpuHelperText />}
+        helperText={<NvidiaGpuHelperText openshiftVersion={openshiftVersion || '4.17'} />}
         isDisabled={!!disabledReason}
       />
     </FormGroup>

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

@@ -1,10 +1,18 @@
 import React 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, ODF_REQUIREMENTS_LINK, ODF_LINK } from '../../../../common';
+import {
+  getFieldId,
+  PopoverIcon,
+  ODF_REQUIREMENTS_LINK,
+  ODF_LINK,
+  OperatorsValues,
+} from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import { useFormikContext } from 'formik';
+import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 
 const ODF_FIELD_NAME = 'useOpenShiftDataFoundation';
 
@@ -52,8 +60,12 @@ const OdfCheckbox = ({
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
 }) => {
+  const { setFieldValue } = useFormikContext<OperatorsValues>();
+  const featureSupportLevelData = useNewFeatureSupportLevel();
   const fieldId = getFieldId(ODF_FIELD_NAME, 'input');
-
+  const selectLsoOperator = (checked: boolean) => {
+    if (featureSupportLevelData.isFeatureSupported('LSO')) setFieldValue('useLso', checked);
+  };
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
@@ -61,6 +73,7 @@ const OdfCheckbox = ({
         label={<OdfLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
         isDisabled={!!disabledReason}
         helperText={<OdfHelperText />}
+        onChange={selectLsoOperator}
       />
     </FormGroup>
   );

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

@@ -11,20 +11,6 @@ const OpenShiftAIRequirements = () => {
         <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 />.

package/lib/ocm/components/clusterConfiguration/operators/OpenshiftAINvidiaRequirements.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 OpenshiftAINvidiaRequirements = () => {
+  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 AI</ListItem>
+        <ListItem>OpenShift Data Foundation</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 OpenshiftAINvidiaRequirements;

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, PIPELINES_OPERATOR_LINK, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const PIPELINES_FIELD_NAME = 'usePipelines';
 
@@ -35,6 +36,9 @@ const PipelinesHelperText = () => {
       <HelperTextItem variant="indeterminate">
         Cloud-native continuous integration and delivery (CI/CD) solution for building pipelines
         using Tekton.{' '}
+        <a href={PIPELINES_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, PopoverIcon, SERVERLESS_OPERATOR_LINK } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const SERVERLESS_FIELD_NAME = 'useServerless';
 
@@ -34,6 +35,9 @@ const ServerlessHelperText = () => {
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Deploy workflow applications based on the CNCF Serverless Workflow specification.{' '}
+        <a href={SERVERLESS_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, getServiceMeshLink, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
-const SERVICEMESH_FIELD_NAME = 'useServiceMesh';
+const SERVICEMESH_FIELD_NAME = 'useServicemesh';
 
 const ServiceMeshLabel = ({
   disabledReason,
@@ -29,11 +30,14 @@ const ServiceMeshLabel = ({
   );
 };
 
-const ServiceMeshHelperText = () => {
+const ServiceMeshHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Platform that provides behavioral insight and operational control over a service mesh.{' '}
+        <a href={getServiceMeshLink(openshiftVersion)} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );
@@ -42,9 +46,11 @@ const ServiceMeshHelperText = () => {
 const ServiceMeshCheckbox = ({
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(SERVICEMESH_FIELD_NAME, 'input');
 
@@ -53,7 +59,7 @@ const ServiceMeshCheckbox = ({
       <OcmCheckboxField
         name={SERVICEMESH_FIELD_NAME}
         label={<ServiceMeshLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
-        helperText={<ServiceMeshHelperText />}
+        helperText={<ServiceMeshHelperText openshiftVersion={openshiftVersion || '4.17'} />}
         isDisabled={!!disabledReason}
       />
     </FormGroup>

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+const VirtualizationRequirements = () => {
+  return (
+    <>
+      <List>
+        <ListItem>
+          Enabled CPU virtualization support in BIOS (Intel-VT / AMD-V) on all nodes.
+        </ListItem>
+        <ListItem>
+          Each control plane node requires an additional 1024 MiB of memory and 3 CPUs.
+        </ListItem>
+        <ListItem>Each worker node requires an additional 1024 MiB of memory and 5 CPUs.</ListItem>
+      </List>
+      Bundle operators:
+      <List>
+        <ListItem>OpenShift Virtualization</ListItem>
+        <ListItem>Migration Toolkit for Virtualization</ListItem>
+        <ListItem>Nmstate</ListItem>
+      </List>
+    </>
+  );
+};
+
+export default VirtualizationRequirements;