@openshift-assisted/ui-lib 2.39.1 → 2.39.2

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

@@ -0,0 +1,209 @@
+import * as React from 'react';
+import {
+  Checkbox,
+  FormGroup,
+  HelperText,
+  HelperTextItem,
+  List,
+  ListItem,
+  Stack,
+  StackItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+import { useSelector } from 'react-redux';
+import {
+  Bundle,
+  Cluster,
+  PreflightHardwareRequirements,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  selectCurrentClusterPermissionsState,
+  selectIsCurrentClusterSNO,
+} from '../../../store/slices/current-cluster/selectors';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { getFieldId, OperatorsValues, PopoverIcon } from '../../../../common';
+import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import { getNewOperators } from './utils';
+import {
+  OperatorSpec,
+  useOperatorSpecs,
+} from '../../../../common/components/operators/operatorSpecs';
+
+const OperatorRequirements = ({
+  operatorId,
+  preflightRequirements,
+  Requirements,
+  cluster,
+}: {
+  cluster: Cluster;
+  operatorId: string;
+  preflightRequirements: PreflightHardwareRequirements | undefined;
+  Requirements?: React.ComponentType<{
+    cluster: Cluster;
+  }>;
+}) => {
+  const isSingleNode = useSelector(selectIsCurrentClusterSNO);
+
+  const operator = preflightRequirements?.operators?.find(
+    (operatorRequirements) => operatorRequirements.operatorName === operatorId,
+  );
+
+  const workerRequirements = operator?.requirements?.worker?.quantitative;
+  const masterRequirements = operator?.requirements?.master?.quantitative;
+
+  const hasWorkerRequirements = !!Object.keys(workerRequirements || {}).length;
+  const hasMasterRequirements = !!Object.keys(masterRequirements || {}).length;
+
+  if (!hasWorkerRequirements && !hasMasterRequirements && !Requirements) {
+    return (
+      <PopoverIcon
+        component={'a'}
+        id={operatorId}
+        bodyContent="No additional requirements needed"
+      />
+    );
+  }
+
+  return (
+    <PopoverIcon
+      component={'a'}
+      headerContent="Additional requirements"
+      id={operatorId}
+      bodyContent={
+        <Stack hasGutter>
+          {Requirements && (
+            <StackItem>
+              <Requirements cluster={cluster} />
+            </StackItem>
+          )}
+          <StackItem>
+            <List>
+              {!isSingleNode && hasWorkerRequirements && (
+                <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>
+              )}
+              {hasMasterRequirements && (
+                <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>
+          </StackItem>
+        </Stack>
+      }
+    />
+  );
+};
+
+const OperatorCheckbox = ({
+  bundles,
+  cluster,
+  operatorId,
+  title,
+  featureId,
+  notStandalone,
+  Description,
+  Requirements,
+  openshiftVersion,
+  preflightRequirements,
+}: {
+  bundles: Bundle[];
+  cluster: Cluster;
+  operatorId: string;
+  openshiftVersion?: string;
+  preflightRequirements: PreflightHardwareRequirements | undefined;
+} & OperatorSpec) => {
+  const { getFeatureSupportLevel, getFeatureDisabledReason } = useNewFeatureSupportLevel();
+  const opSpecs = useOperatorSpecs();
+
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const { values, setFieldValue } = useFormikContext<OperatorsValues>();
+  const fieldId = getFieldId(operatorId, 'input');
+  const supportLevel = getFeatureSupportLevel(featureId);
+
+  const isInBundle = values.selectedBundles.some(
+    (sb) => !!bundles.find((b) => b.id === sb)?.operators?.includes(operatorId),
+  );
+
+  const isChecked = values.selectedOperators.includes(operatorId) || isInBundle;
+
+  const parentOperator = preflightRequirements?.operators?.find((op) =>
+    op.dependencies?.includes(operatorId),
+  );
+
+  let parentOperatorName = '';
+  if (
+    parentOperator?.operatorName &&
+    values.selectedOperators.includes(parentOperator.operatorName)
+  ) {
+    parentOperatorName = opSpecs[parentOperator.operatorName]?.title || parentOperator.operatorName;
+  }
+
+  const disabledReason = isInBundle
+    ? 'This operator is part of a bundle and cannot be deselected.'
+    : notStandalone
+    ? 'This operator cannot be installed as a standalone'
+    : parentOperatorName
+    ? `This operator is a dependency of ${parentOperatorName}`
+    : getFeatureDisabledReason(featureId);
+
+  return (
+    <FormGroup fieldId={fieldId} id={`form-control__${fieldId}`}>
+      <Checkbox
+        id={fieldId}
+        label={
+          <>
+            <Tooltip hidden={!disabledReason} content={disabledReason}>
+              <span>{title} </span>
+            </Tooltip>
+            <OperatorRequirements
+              operatorId={operatorId}
+              preflightRequirements={preflightRequirements}
+              Requirements={Requirements}
+              cluster={cluster}
+            />
+            <NewFeatureSupportLevelBadge featureId={featureId} supportLevel={supportLevel} />
+          </>
+        }
+        aria-describedby={`${fieldId}-helper`}
+        isChecked={isChecked}
+        onChange={(_, checked) => {
+          setFieldValue(
+            'selectedOperators',
+            getNewOperators(
+              values.selectedOperators,
+              operatorId,
+              preflightRequirements,
+              checked,
+              opSpecs,
+            ),
+          );
+        }}
+        isDisabled={isViewerMode || !!disabledReason}
+        description={
+          !!Description && (
+            <HelperText>
+              <HelperTextItem variant="indeterminate">
+                <Description openshiftVersion={openshiftVersion} />
+              </HelperTextItem>
+            </HelperText>
+          )
+        }
+      />
+    </FormGroup>
+  );
+};
+
+export default OperatorCheckbox;

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import { FeatureId, OPENSHIFT_AI_REQUIREMENTS_LINK } from '../../../../common';
+
+export type BundleSpec = {
+  featureId?: FeatureId;
+  noSNO?: boolean;
+  incompatibleBundles?: string[];
+  Description: React.ComponentType;
+  docsLink?: string;
+};
+
+export const bundleSpecs: { [key: string]: BundleSpec } = {
+  virtualization: {
+    Description: () => (
+      <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>
+        <ListItem>
+          Additional resources may be required to support the selected storage operator.
+        </ListItem>
+      </List>
+    ),
+  },
+  'openshift-ai-nvidia': {
+    featureId: 'OPENSHIFT_AI',
+    noSNO: true,
+    incompatibleBundles: ['openshift-ai-amd'],
+    Description: () => (
+      <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 NVIDIA GPU.</ListItem>
+        <ListItem>
+          Nodes that have NVIDIA GPUs installed need to have secure boot disabled.
+        </ListItem>
+      </List>
+    ),
+    docsLink: OPENSHIFT_AI_REQUIREMENTS_LINK,
+  },
+  'openshift-ai-amd': {
+    featureId: 'OPENSHIFT_AI',
+    noSNO: true,
+    incompatibleBundles: ['openshift-ai-nvidia'],
+    Description: () => (
+      <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>
+    ),
+    docsLink: OPENSHIFT_AI_REQUIREMENTS_LINK,
+  },
+};

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

@@ -1,38 +1,95 @@
 import {
-  OPERATOR_NAME_LVM,
-  FeatureSupportLevelData,
-  ExposedOperatorName,
-  OPERATOR_NAME_LVMS,
-} from '../../../../common';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-
-export const getActualLVMOperatorName = ({
-  openshiftVersion,
-  featureSupportLevel,
-  operator = OPERATOR_NAME_LVM,
-}: {
-  openshiftVersion: Cluster['openshiftVersion'];
-  featureSupportLevel: FeatureSupportLevelData;
-  operator?: ExposedOperatorName;
-}) => {
-  if (
-    operator === OPERATOR_NAME_LVM &&
-    featureSupportLevel.getFeatureSupportLevel(openshiftVersion || '', 'LVM') === 'supported'
-  ) {
-    return OPERATOR_NAME_LVMS;
+  Bundle,
+  PreflightHardwareRequirements,
+} from '@openshift-assisted/types/assisted-installer-service';
+import { OperatorSpec } from '../../../../common/components/operators/operatorSpecs';
+
+const getOperatorDependencies = (
+  operatorId: string,
+  preflightRequirements: PreflightHardwareRequirements | undefined,
+  dependencies: Set<string> = new Set(),
+) => {
+  const originalSize = dependencies.size;
+  const deps =
+    preflightRequirements?.operators?.find(({ operatorName }) => operatorName === operatorId)
+      ?.dependencies || [];
+
+  deps.forEach((dep) => dependencies.add(dep));
+
+  if (originalSize !== dependencies.size) {
+    // add deps of new deps
+    deps.forEach((op) => {
+      getOperatorDependencies(op, preflightRequirements, dependencies);
+    });
+  }
+  return [...dependencies];
+};
+
+export const getNewOperators = (
+  currentOperators: string[],
+  operatorId: string,
+  preflightRequirements: PreflightHardwareRequirements | undefined,
+  add: boolean,
+  opSpecs: { [key: string]: OperatorSpec },
+): string[] => {
+  const dependencies = getOperatorDependencies(operatorId, preflightRequirements);
+
+  if (add) {
+    return [...new Set([...currentOperators, ...dependencies, operatorId])];
   }
 
-  return operator;
+  const newOperators = currentOperators.filter((op) => op !== operatorId);
+  // uncheck unneeded not-standalone dependencies too
+  const notStandaloneDeps = dependencies
+    .filter((dep) => opSpecs[dep]?.notStandalone)
+    .filter((dep) =>
+      // some other operator may still depend on the not-standalone operator
+      newOperators.every((op) => !getOperatorDependencies(op, preflightRequirements).includes(dep)),
+    );
+
+  return currentOperators.filter((op) => op !== operatorId && !notStandaloneDeps.includes(op));
+};
+
+const getBundleOperators = (
+  bundle: Bundle,
+  preflightRequirements: PreflightHardwareRequirements | undefined,
+) => {
+  const bundleOperators = new Set(bundle.operators || []);
+  bundle.operators?.forEach((op) => {
+    getOperatorDependencies(op, preflightRequirements).forEach((dep) => bundleOperators.add(dep));
+  });
+  return [...bundleOperators];
 };
 
-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';
-    }
+export const getNewBundleOperators = (
+  currentOperators: string[],
+  currentBundles: string[],
+  allBundles: Bundle[],
+  newBundle: Bundle,
+  preflightRequirements: PreflightHardwareRequirements | undefined,
+  add: boolean,
+): string[] => {
+  const newBundleOperators = getBundleOperators(newBundle, preflightRequirements);
+
+  if (add) {
+    return [...new Set([...currentOperators, ...newBundleOperators])];
   }
+
+  const newBundles = currentBundles.filter((b) => b !== newBundle.id);
+  const operatorsToKeep = [
+    ...newBundles.reduce((acc, bundleId) => {
+      const bundle = allBundles.find(({ id }) => id === bundleId);
+      if (bundle) {
+        const bundleOperators = getBundleOperators(bundle, preflightRequirements);
+        bundleOperators.forEach((op) => {
+          acc.add(op);
+        });
+      }
+      return acc;
+    }, new Set<string>()),
+  ];
+
+  const operatorsToRemove = newBundleOperators.filter((op) => !operatorsToKeep.includes(op));
+
+  return currentOperators.filter((op) => !operatorsToRemove.includes(op));
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewOperatorsTable.tsx

@@ -1,53 +1,56 @@
 import React from 'react';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
-import {
-  ExposedOperatorNames,
-  hasEnabledOperators,
-  genericTableRowKey,
-  operatorLabels,
-} from '../../../../common';
-import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import { genericTableRowKey } from '../../../../common';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { TableSummaryExpandable } from './TableSummaryExpandable';
+import { useOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
 
 export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
-  const { t } = useTranslation();
-  const featureSupportLevel = useNewFeatureSupportLevel();
-  const operatorNames = operatorLabels(t, featureSupportLevel);
+  const opSpecs = useOperatorSpecs();
+  const rows = React.useMemo(
+    () =>
+      cluster.monitoredOperators
+        ?.filter(({ name }) => !!name && !!opSpecs[name])
+        .map((op) => {
+          const opId = op.name as string;
+          return {
+            rowId: `operator-${opId}`,
+            cells: [
+              { title: opSpecs[opId].title },
+              {
+                title: 'Enabled',
+                props: { 'data-testid': `operator-${opId}` },
+              },
+            ],
+          };
+        }),
+    [cluster.monitoredOperators, opSpecs],
+  );
 
-  const rows = React.useMemo(() => {
-    return ExposedOperatorNames.filter((operator) =>
-      hasEnabledOperators(cluster.monitoredOperators, operator),
-    ).map((operator) => ({
-      rowId: `operator-${operator}`,
-      cells: [
-        { title: operatorNames[operator] },
-        {
-          title: 'Enabled',
-          props: { 'data-testid': `operator-${operator}` },
-        },
-      ],
-    }));
-  }, [cluster.monitoredOperators, operatorNames]);
+  if (!rows?.length) {
+    return null;
+  }
 
   return (
-    <Table
-      variant={TableVariant.compact}
-      borders={false}
-      aria-label={'Operators review table'}
-      className="review-table"
-    >
-      <Tbody>
-        {rows.map((row, i) => (
-          <Tr key={genericTableRowKey(row.rowId)}>
-            {row.cells.map((cell, j) => (
-              <Td key={`cell-${i}-${j}`} {...cell.props}>
-                {cell.title}
-              </Td>
-            ))}
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
+    <TableSummaryExpandable title={'Operators'} id={'operators-expandable'}>
+      <Table
+        variant={TableVariant.compact}
+        borders={false}
+        aria-label={'Operators review table'}
+        className="review-table"
+      >
+        <Tbody>
+          {rows.map((row, i) => (
+            <Tr key={genericTableRowKey(row.rowId)}>
+              {row.cells.map((cell, j) => (
+                <Td key={`cell-${i}-${j}`} {...cell.props}>
+                  {cell.title}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableSummaryExpandable>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx

@@ -3,15 +3,10 @@ import { ExpandableSection } from '@patternfly/react-core';
 import {
   DetailItem,
   DetailList,
-  hasEnabledOperators,
   isClusterPlatformTypeVM,
-  OPERATOR_NAME_CNV,
-  OPERATOR_NAME_LVM,
-  OPERATOR_NAME_ODF,
   ReviewHostsInventory,
   SupportedPlatformType,
   RenderIf,
-  OPERATOR_NAME_MCE,
 } from '../../../../common';
 import {
   ReviewClusterDetailTable,
@@ -26,11 +21,6 @@ import useClusterCustomManifests from '../../../hooks/useClusterCustomManifests'
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
-  const showOperatorsSummary =
-    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_CNV) ||
-    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_ODF) ||
-    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_LVM) ||
-    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_MCE);
   const { customManifests } = useClusterCustomManifests(cluster.id, false);
   return (
     <>
@@ -38,11 +28,7 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
         <ReviewClusterDetailTable cluster={cluster} />
       </TableSummaryExpandable>
 
-      {showOperatorsSummary && (
-        <TableSummaryExpandable title={'Operators'} id={'operators-expandable'}>
-          <ReviewOperatorsTable cluster={cluster} />
-        </TableSummaryExpandable>
-      )}
+      <ReviewOperatorsTable cluster={cluster} />
 
       <TableSummaryExpandable title={'Host inventory'} id={'host-inventory-expandable'}>
         <>

package/lib/ocm/components/clusterDetail/ProgressBarAlerts.tsx

@@ -1,25 +1,18 @@
 import React from 'react';
 import { Alert, AlertActionLink, Text, TextContent } from '@patternfly/react-core';
 import { pluralize } from 'humanize-plus';
-import { TFunction } from 'i18next';
 import {
   RenderIf,
   toSentence,
   canDownloadClusterLogs,
   getReportIssueLink,
-  operatorLabels,
   useAlerts,
-  OperatorName,
 } from '../../../common';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { downloadClusterInstallationLogs } from './utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
 import { isInOcm } from '../../../common/api';
-import {
-  NewFeatureSupportLevelData,
-  useNewFeatureSupportLevel,
-} from '../../../common/components/newFeatureSupportLevels';
 import { Cluster, MonitoredOperator } from '@openshift-assisted/types/assisted-installer-service';
+import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
 
 type InstallationProgressWarningProps = {
   cluster: Cluster;
@@ -32,26 +25,6 @@ type InstallationProgressWarningProps = {
   isCriticalNumberOfWorkersFailed?: boolean;
 };
 
-const getFailedOperatorsNames = (
-  failedOperators: MonitoredOperator[],
-  openshiftVersion: Cluster['openshiftVersion'],
-  featureSupportLevel: NewFeatureSupportLevelData,
-  t: TFunction,
-): string => {
-  let failedOperatorsNames = '';
-  const translatedOperatorLabels = operatorLabels(t, featureSupportLevel);
-  for (let i = 0; i < failedOperators.length; i++) {
-    const operatorName = (failedOperators[i].name as OperatorName) || '';
-    const operatorLabel: string = (operatorName && translatedOperatorLabels[operatorName]) || '';
-    if (i > 0) {
-      if (i === failedOperators.length - 1) failedOperatorsNames += ' and ';
-      else failedOperatorsNames += ', ';
-    }
-    failedOperatorsNames += `${operatorLabel} (${operatorName.toUpperCase()})`;
-  }
-  return failedOperatorsNames;
-};
-
 const getFailedHostsMessage = (
   failedHosts: number,
   totalHosts: number,
@@ -93,8 +66,7 @@ export const HostInstallationWarning = ({
   message,
 }: InstallationProgressWarningProps) => {
   const { addAlert, clearAlerts } = useAlerts();
-  const { t } = useTranslation();
-  const featureSupportLevel = useNewFeatureSupportLevel();
+  const opSpecs = useOperatorSpecs();
 
   return (
     <>
@@ -121,12 +93,7 @@ export const HostInstallationWarning = ({
         </RenderIf>
         <RenderIf condition={failedOperators?.length > 0}>
           <p>
-            {getFailedOperatorsNames(
-              failedOperators,
-              cluster.openshiftVersion,
-              featureSupportLevel,
-              t,
-            )}{' '}
+            {failedOperators.map(({ name }) => opSpecs[name || '']?.title || name).join(' and ')}{' '}
             failed to install. Due to this, the cluster will be degraded, but you can try to install
             the operator from the Operator Hub. Please check the installation log for more
             information.

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

@@ -114,7 +114,6 @@ const ClusterWizardContextProvider = ({
         staticIpInfo,
         cluster?.status,
         cluster?.hosts,
-        isSingleClusterFeatureEnabled,
         customManifestsStepNeedsToBeFilled,
       );