@openshift-assisted/ui-lib 2.39.1 → 2.39.2

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

@@ -2,33 +2,13 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import {
   ClusterWizardStep,
   getFormikErrorFields,
-  OPERATOR_NAME_AMD_GPU,
-  OPERATOR_NAME_AUTHORINO,
-  OPERATOR_NAME_CNV,
-  OPERATOR_NAME_KMM,
-  OPERATOR_NAME_LSO,
-  OPERATOR_NAME_LVM,
-  OPERATOR_NAME_MCE,
-  OPERATOR_NAME_MTV,
-  OPERATOR_NAME_NMSTATE,
-  OPERATOR_NAME_NODE_FEATURE_DISCOVERY,
-  OPERATOR_NAME_NVIDIA_GPU,
-  OPERATOR_NAME_ODF,
-  OPERATOR_NAME_OPENSHIFT_AI,
-  OPERATOR_NAME_OSC,
-  OPERATOR_NAME_PIPELINES,
-  OPERATOR_NAME_SERVERLESS,
-  OPERATOR_NAME_SERVICEMESH,
-  OPERATOR_NAME_NODE_HEALTHCHECK,
-  OPERATOR_NAME_SELF_NODE_REMEDIATION,
-  OPERATOR_NAME_FENCE_AGENTS_REMEDIATION,
-  OPERATOR_NAME_NODE_MAINTENANCE,
-  OPERATOR_NAME_KUBE_DESCHEDULER,
   OperatorsValues,
-  selectMonitoredOperators,
+  selectOlmOperators,
+  UISettingsValues,
   useAlerts,
   useFormikAutoSave,
 } from '../../../common';
@@ -36,40 +16,18 @@ import { useClusterWizardContext } from './ClusterWizardContext';
 import ClusterWizardFooter from '../clusterWizard/ClusterWizardFooter';
 import ClusterWizardNavigation from '../clusterWizard/ClusterWizardNavigation';
 import { OperatorsStep } from './OperatorsStep';
-import { ClustersService, OperatorsService } from '../../services';
+import { ClustersService } from '../../services';
 import { setServerUpdateError, updateCluster } from '../../store/slices/current-cluster/slice';
 import { getApiErrorMessage, handleApiError, isUnknownServerError } from '../../../common/api';
 import { canNextOperators } from './wizardTransition';
-import { Cluster, MonitoredOperator } from '@openshift-assisted/types/assisted-installer-service';
 
-export const getOperatorsInitialValues = (
-  monitoredOperators: MonitoredOperator[],
+const getOperatorsInitialValues = (
+  uiSettings: UISettingsValues | undefined,
+  cluster: Cluster,
 ): OperatorsValues => {
-  const isOperatorEnabled = (operatorNames: string[]) =>
-    !!monitoredOperators.find((operator) => operatorNames.includes(operator.name || ''));
   return {
-    useOpenShiftDataFoundation: isOperatorEnabled([OPERATOR_NAME_ODF]),
-    useOdfLogicalVolumeManager: isOperatorEnabled([OPERATOR_NAME_LVM]),
-    useContainerNativeVirtualization: isOperatorEnabled([OPERATOR_NAME_CNV]),
-    useMultiClusterEngine: isOperatorEnabled([OPERATOR_NAME_MCE]),
-    useMigrationToolkitforVirtualization: isOperatorEnabled([OPERATOR_NAME_MTV]),
-    useOpenShiftAI: isOperatorEnabled([OPERATOR_NAME_OPENSHIFT_AI]),
-    useOsc: isOperatorEnabled([OPERATOR_NAME_OSC]),
-    useNodeFeatureDiscovery: isOperatorEnabled([OPERATOR_NAME_NODE_FEATURE_DISCOVERY]),
-    useNmstate: isOperatorEnabled([OPERATOR_NAME_NMSTATE]),
-    useLso: isOperatorEnabled([OPERATOR_NAME_LSO]),
-    useServerless: isOperatorEnabled([OPERATOR_NAME_SERVERLESS]),
-    useAuthorino: isOperatorEnabled([OPERATOR_NAME_AUTHORINO]),
-    usePipelines: isOperatorEnabled([OPERATOR_NAME_PIPELINES]),
-    useServicemesh: isOperatorEnabled([OPERATOR_NAME_SERVICEMESH]),
-    useNvidiaGpu: isOperatorEnabled([OPERATOR_NAME_NVIDIA_GPU]),
-    useAmdGpu: isOperatorEnabled([OPERATOR_NAME_AMD_GPU]),
-    useKmm: isOperatorEnabled([OPERATOR_NAME_KMM]),
-    useNodeHealthcheck: isOperatorEnabled([OPERATOR_NAME_NODE_HEALTHCHECK]),
-    useSelfNodeRemediation: isOperatorEnabled([OPERATOR_NAME_SELF_NODE_REMEDIATION]),
-    useFenceAgentsRemediation: isOperatorEnabled([OPERATOR_NAME_FENCE_AGENTS_REMEDIATION]),
-    useNodeMaintenance: isOperatorEnabled([OPERATOR_NAME_NODE_MAINTENANCE]),
-    useKubeDescheduler: isOperatorEnabled([OPERATOR_NAME_KUBE_DESCHEDULER]),
+    selectedBundles: uiSettings?.bundlesSelected || [],
+    selectedOperators: selectOlmOperators(cluster).map((o) => o.name || ''),
   };
 };
 
@@ -110,47 +68,29 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
         />
       }
     >
-      <OperatorsStep
-        clusterId={cluster.id}
-        openshiftVersion={cluster.openshiftVersion}
-        monitoredOperators={cluster.monitoredOperators}
-      />
+      <OperatorsStep cluster={cluster} />
     </ClusterWizardStep>
   );
 };
 
 const Operators = ({ cluster }: { cluster: Cluster }) => {
   const dispatch = useDispatch();
+  const { updateUISettings, uiSettings } = useClusterWizardContext();
   const { addAlert, clearAlerts } = useAlerts();
 
-  const olmOperators = selectMonitoredOperators(cluster.monitoredOperators);
-
-  const initialValues = React.useMemo(
-    () => getOperatorsInitialValues(olmOperators),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [], // just once, Formik does not reinitialize
-  );
-
-  const handleSubmit: FormikConfig<OperatorsValues>['onSubmit'] = async (
-    values,
-    { setFieldValue },
-  ) => {
+  const handleSubmit: FormikConfig<OperatorsValues>['onSubmit'] = async (values) => {
     clearAlerts();
 
-    const enabledOperators = OperatorsService.getOLMOperators(values, cluster);
+    const enabledOperators = values.selectedOperators.map((so) => ({
+      name: so,
+    }));
 
     try {
       const { data: updatedCluster } = await ClustersService.update(cluster.id, cluster.tags, {
         olmOperators: enabledOperators,
       });
 
-      const needSyncOperators = OperatorsService.syncOperators(
-        enabledOperators,
-        updatedCluster.monitoredOperators,
-      );
-      Object.keys(needSyncOperators).forEach((operatorName) => {
-        setFieldValue(operatorName, true);
-      });
+      await updateUISettings({ bundlesSelected: values.selectedBundles });
 
       dispatch(updateCluster(updatedCluster));
     } catch (e) {
@@ -164,7 +104,7 @@ const Operators = ({ cluster }: { cluster: Cluster }) => {
   };
 
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+    <Formik initialValues={getOperatorsInitialValues(uiSettings, cluster)} onSubmit={handleSubmit}>
       <OperatorsForm cluster={cluster} />
     </Formik>
   );

package/lib/ocm/components/clusterWizard/OperatorsBundle.css

@@ -0,0 +1,6 @@
+.ai-bundle-card {
+  --pf-v5-c-card--m-selectable--m-selected--BackgroundColor: var(
+    --pf-v5-global--BackgroundColor--100
+  );
+  --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+}

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

@@ -0,0 +1,245 @@
+import * as React from 'react';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  Gallery,
+  GalleryItem,
+  List,
+  ListItem,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Title,
+  Tooltip,
+} from '@patternfly/react-core';
+import {
+  Bundle,
+  PreflightHardwareRequirements,
+} from '@openshift-assisted/types/assisted-installer-service';
+import NewFeatureSupportLevelBadge, {
+  NewSupportLevelBadgeProps,
+} from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { ExternalLink, OperatorsValues, PopoverIcon, singleClusterBundles } from '../../../common';
+import { useFormikContext } from 'formik';
+import {
+  GetFeatureSupportLevel,
+  useNewFeatureSupportLevel,
+} from '../../../common/components/newFeatureSupportLevels';
+import { useFeature } from '../../hooks/use-feature';
+import { useSelector } from 'react-redux';
+import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
+import { getNewBundleOperators } from '../clusterConfiguration/operators/utils';
+import { bundleSpecs } from '../clusterConfiguration/operators/bundleSpecs';
+import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
+
+import './OperatorsBundle.css';
+
+const BundleLabel = ({ bundle }: { bundle: Bundle }) => {
+  const opSpecs = useOperatorSpecs();
+  const bundleSpec = bundleSpecs[bundle.id || ''];
+
+  return (
+    <>
+      <span>{bundle.title} </span>
+      <PopoverIcon
+        component={'a'}
+        headerContent={<div>Requirements and dependencies</div>}
+        bodyContent={
+          <Stack hasGutter>
+            {bundleSpec?.Description && (
+              <StackItem>
+                <bundleSpec.Description />
+              </StackItem>
+            )}
+            {bundle.operators?.length && (
+              <>
+                <StackItem>Bundle operators:</StackItem>
+                <StackItem>
+                  <List>
+                    {bundle.operators.map((op) => (
+                      <ListItem key={op}>{opSpecs[op]?.title || op}</ListItem>
+                    ))}
+                  </List>
+                </StackItem>
+              </>
+            )}
+            {bundleSpec?.docsLink && (
+              <StackItem>
+                <ExternalLink href={bundleSpec.docsLink}>Learn more</ExternalLink>
+              </StackItem>
+            )}
+          </Stack>
+        }
+      />
+    </>
+  );
+};
+
+const getBundleSupportLevel = (
+  bundle: Bundle,
+  opSpecs: ReturnType<typeof useOperatorSpecs>,
+  getFeatureSupportLevel: GetFeatureSupportLevel,
+): NewSupportLevelBadgeProps['supportLevel'] => {
+  let supportLevel: NewSupportLevelBadgeProps['supportLevel'] = undefined;
+  if (bundle.operators) {
+    for (const op of bundle.operators) {
+      const operatorSpec = opSpecs[op];
+      if (operatorSpec) {
+        const opSupportLevel = getFeatureSupportLevel(operatorSpec.featureId);
+        if (opSupportLevel === 'dev-preview') {
+          supportLevel = 'dev-preview';
+          break;
+        } else if (opSupportLevel === 'tech-preview') {
+          supportLevel = 'tech-preview';
+        }
+      }
+    }
+  }
+  return supportLevel;
+};
+
+const BundleCard = ({
+  bundle,
+  bundles,
+  preflightRequirements,
+}: {
+  bundle: Bundle;
+  bundles: Bundle[];
+  preflightRequirements: PreflightHardwareRequirements | undefined;
+}) => {
+  const { values, setFieldValue } = useFormikContext<OperatorsValues>();
+  const isSNO = useSelector(selectIsCurrentClusterSNO);
+  const { isFeatureSupported, getFeatureSupportLevel } = useNewFeatureSupportLevel();
+  const opSpecs = useOperatorSpecs();
+
+  const supportLevel = getBundleSupportLevel(bundle, opSpecs, getFeatureSupportLevel);
+
+  const hasUnsupportedOperators = !!bundle.operators?.some((op) => {
+    const operatorSpec = opSpecs[op];
+    if (!operatorSpec) {
+      return false;
+    }
+    return !isFeatureSupported(operatorSpec.featureId);
+  });
+
+  const bundleSpec = bundleSpecs[bundle.id || ''];
+
+  const incompatibleBundle = bundleSpec?.incompatibleBundles?.find((b) =>
+    values.selectedBundles.includes(b),
+  );
+
+  const disabledReason = hasUnsupportedOperators
+    ? 'Some operators in this bundle are not supported with the current configuration.'
+    : isSNO && bundleSpec?.noSNO
+    ? 'This bundle is not available when deploying a Single Node OpenShift.'
+    : incompatibleBundle
+    ? `Bundle cannot be installed together with ${
+        bundles.find(({ id }) => id === incompatibleBundle)?.title || incompatibleBundle
+      }`
+    : undefined;
+
+  const onSelect = (checked: boolean) => {
+    const newBundles = checked
+      ? [...values.selectedBundles, bundle.id || '']
+      : values.selectedBundles.filter((sb) => sb !== bundle.id);
+    setFieldValue('selectedBundles', newBundles);
+    const newOperators = getNewBundleOperators(
+      values.selectedOperators,
+      newBundles,
+      bundles,
+      bundle,
+      preflightRequirements,
+      checked,
+    );
+    setFieldValue('selectedOperators', newOperators);
+  };
+
+  const isSelected = values.selectedBundles.includes(bundle.id || '');
+  const checkboxId = `bundle-${bundle.id || ''}`;
+  return (
+    <Tooltip content={disabledReason} hidden={!disabledReason}>
+      <Card
+        isDisabled={!!disabledReason}
+        isFullHeight
+        isSelectable
+        isSelected={isSelected}
+        className="ai-bundle-card"
+      >
+        <CardHeader
+          selectableActions={{
+            selectableActionId: checkboxId,
+            selectableActionAriaLabelledby: checkboxId,
+            name: checkboxId,
+            onChange: (_, checked) => onSelect(checked),
+            isChecked: isSelected,
+          }}
+        >
+          <CardTitle>
+            <BundleLabel bundle={bundle} />
+          </CardTitle>
+        </CardHeader>
+        <CardBody isFilled>
+          <Stack hasGutter>
+            <StackItem isFilled>
+              <div>{bundle.description}</div>
+            </StackItem>
+            {bundleSpec.featureId && (
+              <StackItem>
+                <Split>
+                  <SplitItem isFilled />
+                  <SplitItem>
+                    <NewFeatureSupportLevelBadge
+                      featureId={bundleSpec.featureId}
+                      supportLevel={supportLevel}
+                    />
+                  </SplitItem>
+                </Split>
+              </StackItem>
+            )}
+          </Stack>
+        </CardBody>
+      </Card>
+    </Tooltip>
+  );
+};
+
+const OperatorsBundle = ({
+  bundles,
+  preflightRequirements,
+}: {
+  bundles: Bundle[];
+  preflightRequirements: PreflightHardwareRequirements | undefined;
+}) => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Title headingLevel="h2" size="lg">
+          Bundles
+        </Title>
+      </StackItem>
+      <StackItem>
+        <Gallery hasGutter minWidths={{ default: '350px' }}>
+          {(isSingleClusterFeatureEnabled
+            ? bundles.filter((b) => b.id && singleClusterBundles.includes(b.id))
+            : bundles
+          ).map((bundle) => (
+            <GalleryItem key={bundle.id}>
+              <BundleCard
+                bundle={bundle}
+                bundles={bundles}
+                preflightRequirements={preflightRequirements}
+              />
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default OperatorsBundle;

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

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { ExpandableSection, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Bundle,
+  Cluster,
+  PreflightHardwareRequirements,
+} from '@openshift-assisted/types/assisted-installer-service';
+import { useFormikContext } from 'formik';
+import {
+  getApiErrorMessage,
+  handleApiError,
+  LoadingState,
+  OperatorsValues,
+  singleClusterOperators,
+  useAlerts,
+  useStateSafely,
+} from '../../../common';
+import { OperatorsService } from '../../services';
+import { useFeature } from '../../hooks/use-feature';
+import OperatorCheckbox from '../clusterConfiguration/operators/OperatorCheckbox';
+import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
+
+const OperatorsSelect = ({
+  cluster,
+  bundles,
+  preflightRequirements,
+}: {
+  cluster: Cluster;
+  bundles: Bundle[];
+  preflightRequirements: PreflightHardwareRequirements | undefined;
+}) => {
+  const [isLoading, setIsLoading] = useStateSafely(true);
+  const { addAlert } = useAlerts();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [supportedOperators, setSupportedOperators] = useStateSafely<string[]>([]);
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const { values } = useFormikContext<OperatorsValues>();
+
+  React.useEffect(() => {
+    const fetchSupportedOperators = async () => {
+      try {
+        const fetchedOperators = await OperatorsService.getSupportedOperators();
+        setSupportedOperators(fetchedOperators);
+      } catch (error) {
+        handleApiError(error, () =>
+          addAlert({ title: 'Failed to fetch operators', message: getApiErrorMessage(error) }),
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void fetchSupportedOperators();
+  }, [addAlert, setSupportedOperators, setIsLoading]);
+
+  const opSpecs = useOperatorSpecs();
+
+  const operators = React.useMemo(() => {
+    return supportedOperators
+      .sort((a, b) => {
+        const aTitle = opSpecs[a]?.title || a;
+        const bTitle = opSpecs[b]?.title || b;
+        return aTitle.localeCompare(bTitle);
+      })
+      .filter((op) => {
+        if (!isSingleClusterFeatureEnabled) {
+          return true;
+        }
+        return singleClusterOperators.includes(op);
+      });
+  }, [isSingleClusterFeatureEnabled, supportedOperators, opSpecs]);
+
+  if (isLoading) {
+    return <LoadingState />;
+  }
+
+  return (
+    <ExpandableSection
+      toggleText={`Single Operators (${operators.length} | ${values.selectedOperators.length} selected)`}
+      onToggle={() => setIsExpanded(!isExpanded)}
+      isExpanded={isExpanded}
+      data-testid="single-operators-section"
+    >
+      <Stack hasGutter data-testid={'operators-form'}>
+        {operators.map((operatorKey) => {
+          if (!opSpecs[operatorKey]) {
+            return null;
+          }
+
+          return (
+            <StackItem key={operatorKey}>
+              <OperatorCheckbox
+                bundles={bundles}
+                operatorId={operatorKey}
+                cluster={cluster}
+                openshiftVersion={cluster.openshiftVersion}
+                preflightRequirements={preflightRequirements}
+                {...opSpecs[operatorKey]}
+              />
+            </StackItem>
+          );
+        })}
+      </Stack>
+    </ExpandableSection>
+  );
+};
+
+export default OperatorsSelect;