@openshift-assisted/ui-lib 2.39.0 → 2.39.2

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

@@ -1,468 +1,63 @@
-import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import {
-  Card,
-  CardBody,
-  CardTitle,
-  Checkbox,
-  ExpandableSection,
-  Flex,
-  FlexItem,
-  Gallery,
-  GalleryItem,
-  Stack,
-  StackItem,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@patternfly/react-core';
+import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import { Bundle } from '@openshift-assisted/types/assisted-installer-service';
 import {
   ClusterOperatorProps,
   ClusterWizardStepHeader,
-  numberOfEnabledOperators,
-  OPERATOR_NAME_CNV,
-  OPERATOR_NAME_ODF,
-  OperatorsValues,
-  PopoverIcon,
+  getApiErrorMessage,
+  handleApiError,
+  LoadingState,
+  useAlerts,
 } from '../../../common';
-import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
-import { isOCPVersionEqualsOrMajor } from '../utils';
+import OperatorsBundle from './OperatorsBundle';
+import OperatorsSelect from './OperatorsSelect';
 import BundleService from '../../services/BundleService';
-import { Bundle } from '@openshift-assisted/types/./assisted-installer-service';
-import { OperatorsService } from '../../services';
-import {
-  mapOperatorIdToFeatureId,
-  mapOperatorsToFieldIds,
-  operatorComponentMap,
-} from '../clusterConfiguration/operators/SupportedOperators';
-import { useClusterWizardContext } from './ClusterWizardContext';
-import { useFormikContext } from 'formik';
-import NewFeatureSupportLevelBadge from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
-import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
-import {
-  getCnvDisabledWithMtvReason,
-  getCnvIncompatibleWithLvmReason,
-  getLvmIncompatibleWithCnvReason,
-  getLvmsIncompatibleWithOdfReason,
-  getOdfIncompatibleWithLvmsReason,
-  getOpenShiftAIIncompatibleWithLvmsReason,
-} from '../featureSupportLevels/featureStateUtils';
-import OpenshiftAINvidiaRequirements from '../clusterConfiguration/operators/OpenshiftAINvidiaRequirements';
-import VirtualizationRequirements from '../clusterConfiguration/operators/VirtualizationRequirements';
-import OpenshiftAIAmdRequirements from '../clusterConfiguration/operators/OpenshiftAIAmdRequirements';
-
-const operatorsThatCanNotBeInstalledAlone = [
-  'nvdia-gpu',
-  'pipelines',
-  'servicemesh',
-  'serverless',
-  'authorino',
-  'lso',
-  'amd-gpu',
-  'nvidia-gpu',
-  'node-healthcheck',
-  'self-node-remediation',
-  'fence-agents-remediation',
-  'node-maintenance',
-  'kube-descheduler',
-];
-
-export const OperatorsStep = (props: ClusterOperatorProps) => {
-  const isSNO = useSelector(selectIsCurrentClusterSNO);
-  const isVersionEqualsOrMajorThan4_15 = isOCPVersionEqualsOrMajor(
-    props.openshiftVersion || '',
-    '4.15',
-  );
-
-  const [bundles, setBundles] = useState<Bundle[]>([]);
-  const [isExpanded, setIsExpanded] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [supportedOperators, setSupportedOperators] = useState<string[]>([]);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [selectedOperators, setSelectedOperators] = useState<string[]>([]);
-  const [selectedBundles, setSelectedBundles] = useState<{ [key: string]: boolean }>({});
-  const [bundleOperators, setBundleOperators] = useState<string[]>([]);
-  const { updateUISettings, uiSettings } = useClusterWizardContext();
-  const { values, setFieldValue } = useFormikContext<OperatorsValues>();
-  const featureSupportLevelData = useNewFeatureSupportLevel();
-
-  useEffect(() => {
+import { useClusterPreflightRequirements } from '../../hooks';
+
+export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
+  const { addAlert } = useAlerts();
+  const [bundlesLoading, setBundlesLoading] = React.useState(true);
+  const [bundles, setBundles] = React.useState<Bundle[]>([]);
+  const { preflightRequirements, isLoading } = useClusterPreflightRequirements(cluster.id);
+  React.useEffect(() => {
     const fetchBundles = async () => {
       try {
         const fetchedBundles = await BundleService.listBundles();
-
         setBundles(fetchedBundles);
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error('Error getting bundles:', error);
+        handleApiError(error, () =>
+          addAlert({
+            title: 'Failed to fetch operator bundles',
+            message: getApiErrorMessage(error),
+          }),
+        );
+      } finally {
+        setBundlesLoading(false);
       }
     };
 
     void fetchBundles();
-  }, []);
-
-  useEffect(() => {
-    const fetchSupportedOperators = async () => {
-      try {
-        const fetchedOperators = await OperatorsService.getSupportedOperators();
-        const sortedOperators = fetchedOperators.sort((a, b) => a.localeCompare(b));
+  }, [addAlert]);
 
-        setSupportedOperators(sortedOperators);
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error('Error getting operators:', error);
-      }
-    };
-
-    void fetchSupportedOperators();
-  }, []);
-
-  const filteredBundles = bundles.filter(
-    (bundle) =>
-      bundle.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      bundle.description?.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
-  useEffect(() => {
-    if (uiSettings?.bundlesSelected) {
-      setSelectedBundles(
-        uiSettings.bundlesSelected.reduce((acc, id) => ({ ...acc, [id]: true }), {}),
-      );
-
-      setBundleOperators(() => {
-        const newSelection: string[] = [];
-        bundles
-          .filter((bundle) => uiSettings?.bundlesSelected?.includes(bundle.id ?? ''))
-          .forEach((bundle) => {
-            bundle.operators?.forEach((op) => {
-              newSelection.push(op);
-            });
-          });
-
-        return newSelection;
-      });
-    }
-  }, [bundles, uiSettings?.bundlesSelected]);
-
-  useEffect(() => {
-    const newSelection: string[] = [];
-
-    props.monitoredOperators?.forEach((operator) => {
-      if (operator.operatorType === 'olm') {
-        newSelection.push(operator.name ?? '');
-      }
-    });
-
-    setSelectedOperators(newSelection);
-  }, [props.monitoredOperators]);
-
-  const handleBundleSelection = async (bundleId: string, operators: string[], checked: boolean) => {
-    let bundlesSelected = uiSettings?.bundlesSelected ? [...uiSettings.bundlesSelected] : [];
-    let newBundleOperators = [...bundleOperators];
-
-    if (checked) {
-      // Agregar el bundle si se marca
-      bundlesSelected.push(bundleId);
-      operators.forEach((op) => {
-        if (!newBundleOperators.includes(op)) {
-          newBundleOperators.push(op);
-          const fieldId = mapOperatorsToFieldIds[op]; // Obtener el ID del campo correspondiente
-          setFieldValue(fieldId, checked);
-          if (op === OPERATOR_NAME_CNV || op === OPERATOR_NAME_ODF) {
-            if (featureSupportLevelData.isFeatureSupported('LSO')) setFieldValue('useLso', checked);
-          }
-        }
-      });
-    } else {
-      // Eliminar el bundle si se desmarca
-      bundlesSelected = bundlesSelected.filter((id) => id !== bundleId);
-      newBundleOperators = newBundleOperators.filter((op) => !operators.includes(op));
-      operators.forEach((op) => {
-        const fieldId = mapOperatorsToFieldIds[op]; // Obtener el ID del campo correspondiente
-        setFieldValue(fieldId, checked);
-        if (op === OPERATOR_NAME_CNV || op === OPERATOR_NAME_ODF) {
-          if (featureSupportLevelData.isFeatureSupported('LSO')) setFieldValue('useLso', checked);
-        }
-      });
-    }
-
-    await updateUISettings({ bundlesSelected });
-
-    setSelectedBundles((prev) => ({
-      ...prev,
-      [bundleId]: checked,
-    }));
-
-    setBundleOperators(newBundleOperators);
-  };
-
-  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>{bundle.title} </span>
-        {requirements && (
-          <PopoverIcon
-            component={'a'}
-            bodyContent={
-              <>
-                <span style={{ fontSize: '1.1em' }}>{'Requirements and dependencies'}</span>
-                {requirements}
-              </>
-            }
-          />
-        )}
-      </>
-    );
-  };
-
-  const bundleHasOperatorsNotSupported = React.useCallback(
-    (operators: string[] | undefined) => {
-      return (
-        operators?.some(
-          (operator) =>
-            !featureSupportLevelData.isFeatureSupported(mapOperatorIdToFeatureId[operator]),
-        ) ?? false
-      );
-    },
-    [featureSupportLevelData],
-  );
-
-  const getDisabledReasonForOperator = React.useCallback(
-    (operatorKey: string, values: OperatorsValues) => {
-      let disabledReason = featureSupportLevelData.getFeatureDisabledReason(
-        mapOperatorIdToFeatureId[operatorKey],
-      );
-      if (operatorKey === 'cnv') {
-        if (!disabledReason) {
-          const lvmSupport = featureSupportLevelData.getFeatureSupportLevel('LVM');
-          disabledReason = getCnvIncompatibleWithLvmReason(values, lvmSupport);
-        }
-        if (!disabledReason) {
-          if (featureSupportLevelData.isFeatureSupported('MTV')) {
-            disabledReason = getCnvDisabledWithMtvReason(values);
-          }
-        }
-      }
-      if (operatorKey === 'lvm') {
-        if (!disabledReason) {
-          const lvmSupport = featureSupportLevelData.getFeatureSupportLevel('LVM');
-          disabledReason = getLvmIncompatibleWithCnvReason(values, lvmSupport);
-          if (!disabledReason) {
-            disabledReason = getLvmsIncompatibleWithOdfReason(values);
-          }
-        }
-      }
-      if (operatorKey === 'odf') {
-        if (!disabledReason) {
-          disabledReason = getOdfIncompatibleWithLvmsReason(values);
-        }
-      }
-      if (operatorKey === 'openshift-ai') {
-        if (!disabledReason) {
-          disabledReason = getOpenShiftAIIncompatibleWithLvmsReason(values);
-        }
-      }
-      return disabledReason;
-    },
-    [featureSupportLevelData],
-  );
-
-  const bundleHasOperatorsNotCompatibles = React.useCallback(
-    (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],
-  );
+  if (isLoading || bundlesLoading) {
+    return <LoadingState />;
+  }
 
   return (
     <Stack hasGutter data-testid={'operators-page'}>
       <StackItem>
-        <Flex
-          justifyContent={{ default: 'justifyContentSpaceBetween' }}
-          alignItems={{ default: 'alignItemsCenter' }}
-        >
-          <FlexItem>
-            <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
-          </FlexItem>
-          <FlexItem hidden>
-            <TextInput
-              value={searchTerm}
-              type="text"
-              onChange={(_event, value) => setSearchTerm(value)}
-              placeholder="Search"
-              style={{ width: '400px' }}
-            />
-          </FlexItem>
-        </Flex>
+        <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
       </StackItem>
       <StackItem>
-        <Title headingLevel="h2" size="lg">
-          Bundles
-        </Title>
+        <OperatorsBundle bundles={bundles} preflightRequirements={preflightRequirements} />
+      </StackItem>
+      <StackItem>
+        <OperatorsSelect
+          bundles={bundles}
+          cluster={cluster}
+          preflightRequirements={preflightRequirements}
+        />
       </StackItem>
-      {/* Mostrar bundles como tarjetas */}
-      <Gallery hasGutter minWidths={{ default: '350px' }} maxWidths={{ default: '2fr' }}>
-        {filteredBundles.map((bundle) => {
-          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.'
-            : 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 &&
-                  !hasAnotherAIBundleSelected
-                }
-              >
-                <Card
-                  style={
-                    bundle.id && selectedBundles[bundle.id]
-                      ? { border: '1px solid #004080', height: '200px' }
-                      : { height: '200px' }
-                  }
-                  isDisabled={
-                    hasUnsupportedOperators ||
-                    hasIncompatibleOperators ||
-                    isSnoAndBlockedBundle ||
-                    hasAnotherAIBundleSelected
-                  }
-                >
-                  <CardTitle
-                    style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                    }}
-                  >
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      {getBundleLabel(bundle)}
-                    </div>
-                    <Checkbox
-                      id={`bundle-${bundle.id || ''}`}
-                      isChecked={bundle.id ? selectedBundles[bundle.id] : false}
-                      onChange={(_event, checked) =>
-                        void handleBundleSelection(bundle.id || '', bundle.operators || [], checked)
-                      }
-                      isDisabled={
-                        hasUnsupportedOperators ||
-                        hasIncompatibleOperators ||
-                        isSnoAndBlockedBundle ||
-                        hasAnotherAIBundleSelected
-                      }
-                    />
-                  </CardTitle>
-                  <CardBody
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      justifyContent: 'space-between',
-                      height: '100%',
-                    }}
-                  >
-                    <div>{bundle.description}</div>
-
-                    {/* Badge aligned to the bottom-left */}
-                    <div style={{ marginTop: '10px', alignSelf: 'flex-end', height: '25px' }}>
-                      {(bundle.id === 'openshift-ai-nvidia' ||
-                        bundle.id === 'openshift-ai-amd') && (
-                        <NewFeatureSupportLevelBadge
-                          featureId="OPENSHIFT_AI"
-                          supportLevel="dev-preview"
-                        />
-                      )}
-                    </div>
-                  </CardBody>
-                </Card>
-              </Tooltip>
-            </GalleryItem>
-          );
-        })}
-      </Gallery>
-      <ExpandableSection
-        toggleText={`Single Operators (${supportedOperators.length} | ${
-          props.monitoredOperators
-            ? numberOfEnabledOperators(props.monitoredOperators)
-            : selectedOperators.length
-        } selected)`}
-        onToggle={() => setIsExpanded(!isExpanded)}
-        isExpanded={isExpanded}
-        data-testid="single-operators-section"
-      >
-        <Stack hasGutter data-testid={'operators-form'}>
-          {supportedOperators.map((operatorKey) => {
-            const isOperatorSelected = bundleOperators.includes(operatorKey);
-            const isOperatorNotAllowedAlone =
-              operatorsThatCanNotBeInstalledAlone.includes(operatorKey);
-            const disabledReason = getDisabledReasonForOperator(operatorKey, values);
-            const featureSupportLevel = featureSupportLevelData.getFeatureSupportLevel(
-              mapOperatorIdToFeatureId[operatorKey],
-            );
-            const OperatorComponent = operatorComponentMap[operatorKey];
-            if (!OperatorComponent) {
-              return null;
-            }
-            return (
-              <StackItem key={operatorKey}>
-                <OperatorComponent
-                  clusterId={props.clusterId}
-                  openshiftVersion={props.openshiftVersion}
-                  isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
-                  isSNO={isSNO}
-                  disabledReason={
-                    isOperatorSelected
-                      ? 'This operator is part of a bundle and cannot be deselected.'
-                      : isOperatorNotAllowedAlone
-                      ? 'This operator cannot be installed as a standalone'
-                      : disabledReason
-                  }
-                  supportLevel={featureSupportLevel}
-                />
-              </StackItem>
-            );
-          })}
-        </Stack>
-      </ExpandableSection>
     </Stack>
   );
 };

package/lib/ocm/components/clusterWizard/wizardTransition.ts

@@ -73,14 +73,10 @@ export const getClusterWizardFirstStep = (
   staticIpInfo: StaticIpInfo | undefined,
   state?: ClusterWizardFlowStateType,
   hosts?: Host[] | undefined,
-  isSingleClusterFeatureEnabled?: boolean,
   customManifestsStepNeedsToBeFilled?: boolean,
 ): ClusterWizardStepsType => {
   // Just for the first time when the cluster is created
   if (locationState === ClusterWizardFlowStateNew && !staticIpInfo) {
-    if (isSingleClusterFeatureEnabled) {
-      return 'host-discovery';
-    }
     return 'operators';
   }
 

package/lib/ocm/components/clusters/utils.ts

@@ -3,9 +3,7 @@ import {
   LogsState,
   MonitoredOperator,
   MonitoredOperatorsList,
-  OperatorCreateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
-import { selectOlmOperators } from '../../../common';
 
 // The Day2 cluster
 export const isAddHostsCluster = (cluster: Cluster) => cluster.kind === 'AddHostsCluster';
@@ -24,23 +22,6 @@ export const calculateCollectedLogsCount = (cluster: Cluster) => {
 export const getBuiltInOperators = (monitoredOperators: MonitoredOperatorsList = []) =>
   monitoredOperators.filter((operator: MonitoredOperator) => operator.operatorType === 'builtin');
 
-export const getOlmOperatorCreateParams = (cluster?: Cluster): OperatorCreateParams[] =>
-  selectOlmOperators(cluster).map((operator) => ({
-    name: operator.name,
-    properties: operator.properties,
-  }));
-
-export const getOlmOperatorCreateParamsByName = (cluster?: Cluster) =>
-  getOlmOperatorCreateParams(cluster).reduce(
-    (result: { [key: string]: OperatorCreateParams }, operator) => {
-      if (operator.name) {
-        result[operator.name] = operator;
-      }
-      return result;
-    },
-    {},
-  );
-
 export const canAbortInstallation = (cluster: Cluster) => {
   const allowedClusterStates: Cluster['status'][] = [
     'preparing-for-installation',

package/lib/ocm/components/featureSupportLevels/FeatureSupportLevelProvider.tsx

@@ -90,7 +90,6 @@ export const NewFeatureSupportLevelProvider: React.FC<NewSupportLevelProviderPro
       featureId: FeatureId,
       supportLevelDataNew?: NewFeatureSupportLevelMap,
     ): SupportLevel | undefined => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       if (supportLevelDataNew) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore