Adding requirements and operators in bundle popover content (#2810) (#2811)

Author: ammont82

libs/ui-lib/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 />.

libs/ui-lib/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;

libs/ui-lib/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;

libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx

@@ -48,6 +48,8 @@ import {
   getOdfIncompatibleWithLvmsReason,
   getOpenShiftAIIncompatibleWithLvmsReason,
 } from '../featureSupportLevels/featureStateUtils';
+import OpenshiftAINvidiaRequirements from '../clusterConfiguration/operators/OpenshiftAINvidiaRequirements';
+import VirtualizationRequirements from '../clusterConfiguration/operators/VirtualizationRequirements';
 
 const operatorsThatCanNotBeInstalledAlone = [
   'nvdia-gpu',
@@ -189,23 +191,19 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
     setBundleOperators(newBundleOperators);
   };
 
-  const getBundleLabel = (title: string | undefined, operators: string[] | undefined) => {
+  const getBundleLabel = (title: 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>
+              <span style={{ fontSize: '1.1em' }}>{'Requirements and dependencies'}</span>
+              {title === 'Virtualization' ? (
+                <VirtualizationRequirements />
               ) : (
-                <p>No operators available</p>
+                <OpenshiftAINvidiaRequirements />
               )}
             </>
           }
@@ -352,7 +350,7 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
                     }}
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      {getBundleLabel(bundle.title, bundle.operators)}
+                      {getBundleLabel(bundle.title)}
                     </div>
                     <Checkbox
                       id={`bundle-${bundle.id || ''}`}