@openshift-assisted/ui-lib 2.14.7-cim → 2.15.1-cim

package/lib/ocm/components/clusterConfiguration/OcmOperatorProgressItem.tsx

@@ -12,14 +12,12 @@ import { TFunction } from 'i18next';
 import './OcmOperatorsProgressItem.css';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import ClusterProgressItem from '../../../common/components/clusterDetail/ClusterProgressItem';
-import { operatorLabels, OperatorName } from '../../../common';
-import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import {
-  Cluster,
   MonitoredOperator,
   MonitoredOperatorsList,
   OperatorStatus,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
 
 export function getAggregatedStatus(operators: MonitoredOperatorsList) {
   const operatorStates: (OperatorStatus | 'pending')[] = operators.map(
@@ -74,7 +72,6 @@ export function getOperatorsIcon(status: OperatorStatus | 'pending') {
 
 type OperatorListProps = {
   operators: MonitoredOperatorsList;
-  openshiftVersion: Cluster['openshiftVersion'];
 };
 
 type OperatorsPopoverProps = OperatorListProps & {
@@ -83,7 +80,7 @@ type OperatorsPopoverProps = OperatorListProps & {
 
 const OperatorsPopover = ({ operators, children }: OperatorsPopoverProps) => {
   const { t } = useTranslation();
-  const featureSupportLevel = useNewFeatureSupportLevel();
+  const opSpecs = useOperatorSpecs();
 
   return (
     <Popover
@@ -95,9 +92,7 @@ const OperatorsPopover = ({ operators, children }: OperatorsPopoverProps) => {
             if (operator.status === 'available') {
               status = 'installed';
             }
-            const name =
-              operatorLabels(t, featureSupportLevel)[operator.name as OperatorName] ||
-              operator.name;
+            const name = opSpecs[operator.name as string]?.title || operator.name;
             return (
               <ListItem key={operator.name} title={operator.statusInfo}>
                 {name} {status}
@@ -114,14 +109,14 @@ const OperatorsPopover = ({ operators, children }: OperatorsPopoverProps) => {
   );
 };
 
-const OcmOperatorsProgressItem = ({ operators, openshiftVersion }: OperatorListProps) => {
+const OcmOperatorsProgressItem = ({ operators }: OperatorListProps) => {
   const { t } = useTranslation();
   const icon = getOperatorsIcon(getAggregatedStatus(operators));
   const label = getOperatorsLabel(operators, t);
   return (
     <ClusterProgressItem icon={icon}>
       <>
-        <OperatorsPopover operators={operators} openshiftVersion={openshiftVersion}>
+        <OperatorsPopover operators={operators}>
           <Button variant={ButtonVariant.link} isInline data-testid="operators-progress-item">
             {t('ai:Operators')}
           </Button>

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/FolderDropdown.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
-import { HelperText, FormGroup } from '@patternfly/react-core';
-import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import {
+  HelperText,
+  FormGroup,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import { getFieldId } from '../../../../../common/components/ui/formik';
 import { PopoverIcon } from '../../../../../common';
@@ -40,40 +45,34 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
   const [isOpen, setOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      setValue(event?.currentTarget.id as string);
-      setOpen(false);
-    },
-    [setOpen, setValue],
-  );
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
+    setValue(event?.currentTarget.id as string);
+    setOpen(false);
+  };
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {value || 'manifests'}
-      </DropdownToggle>
-    ),
-    [setOpen, value],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      className="pf-v5-u-w-100"
+    >
+      {value || 'manifests'}
+    </MenuToggle>
   );
 
   return (
     <FormGroup fieldId={fieldId} label={<FolderLabel />} isRequired>
       <Dropdown
         {...field}
-        name={name}
         id={fieldId}
+        onOpenChange={() => setOpen(!isOpen)}
         onSelect={onSelect}
-        dropdownItems={dropdownItems}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
-      />
+      >
+        {dropdownItems}
+      </Dropdown>
       <HelperText style={{ display: 'inherit' }}>
         {'Manifests can be placed in "manifests" or "openshift" directories.'}
       </HelperText>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationForm.tsx

@@ -16,6 +16,7 @@ import {
   SecurityFields,
   useAlerts,
   useFormikAutoSave,
+  ClustersAPI,
 } from '../../../../common';
 import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
@@ -45,6 +46,7 @@ import {
   V2ClusterUpdateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import { useFeature } from '../../../hooks/use-feature';
 
 const NetworkConfigurationForm: React.FC<{
   cluster: Cluster;
@@ -65,6 +67,9 @@ const NetworkConfigurationForm: React.FC<{
     useFormikContext<NetworkConfigurationValues>();
   const isAutoSaveRunning = useFormikAutoSave();
   const errorFields = getFormikErrorFields(errors, touched);
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const { addAlert } = useAlerts();
+  const dispatch = useDispatch();
 
   // DHCP allocation is currently not supported for Nutanix hosts
   // https://issues.redhat.com/browse/MGMT-12382
@@ -79,6 +84,29 @@ const NetworkConfigurationForm: React.FC<{
     }
   }, [isHostsPlatformTypeNutanix, setFieldValue, values.vipDhcpAllocation]);
 
+  const onNext = React.useCallback(async () => {
+    if (isSingleClusterFeatureEnabled) {
+      try {
+        await ClustersAPI.updateInstallConfig(
+          cluster.id,
+          JSON.stringify(JSON.stringify({ featureSet: 'TechPreviewNoUpgrade' })),
+        );
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({
+            title: 'Failed to update install-config',
+            message: getApiErrorMessage(e),
+          }),
+        );
+        if (isUnknownServerError(e as Error)) {
+          dispatch(setServerUpdateError());
+        }
+        return;
+      }
+    }
+    clusterWizardContext.moveNext();
+  }, [addAlert, cluster.id, clusterWizardContext, dispatch, isSingleClusterFeatureEnabled]);
+
   const footer = (
     <ClusterWizardFooter
       cluster={cluster}
@@ -91,7 +119,7 @@ const NetworkConfigurationForm: React.FC<{
         !isValid ||
         !canNextNetwork({ cluster })
       }
-      onNext={() => clusterWizardContext.moveNext()}
+      onNext={() => void onNext()}
       onBack={() => clusterWizardContext.moveBack()}
       isBackDisabled={isSubmitting || isAutoSaveRunning}
     />

package/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
 
@@ -64,46 +63,42 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
   }, []);
 
   const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
-    <DropdownItem key={value} id={value} isDisabled={isDisabled}>
+    <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
       {label}
     </DropdownItem>
   ));
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const currentValue = event?.currentTarget.innerText ?? currentDisplayValue;
-      setCurrentDisplayValue(currentValue);
-      setValue(event?.currentTarget.id);
-      setOpen(false);
-    },
-    [currentDisplayValue, setValue],
-  );
+  const onSelect = (
+    event?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ): void => {
+    setCurrentDisplayValue(value as string);
+    setValue(event?.currentTarget.id);
+    setOpen(false);
+  };
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(!isDisabled && val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {currentDisplayValue}
-      </DropdownToggle>
-    ),
-    [setOpen, currentDisplayValue, isDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      className="pf-v5-u-w-100"
+    >
+      {currentDisplayValue}
+    </MenuToggle>
   );
 
   return (
     <Dropdown
       {...field}
-      name={name}
       id={fieldId}
+      onOpenChange={() => setOpen(!isOpen)}
       onSelect={onSelect}
-      dropdownItems={dropdownItems}
       toggle={toggle}
       isOpen={isOpen}
-      className="pf-v5-u-w-100"
-    />
+    >
+      {dropdownItems}
+    </Dropdown>
   );
 };

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

@@ -0,0 +1,210 @@
+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} CPU cores
+                  {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} CPU cores
+                  {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>
+          )
+        }
+        data-testid={`operator-checkbox-${operatorId}`}
+      />
+    </FormGroup>
+  );
+};
+
+export default OperatorCheckbox;

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export type BundleSpec = {
+  noSNO?: boolean;
+  incompatibleBundles?: string[];
+  Description: React.ComponentType;
+  docsLink?: string;
+};
+
+export const bundleSpecs: { [key: string]: BundleSpec } = {
+  virtualization: {
+    noSNO: true,
+    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 CPU cores.
+        </ListItem>
+        <ListItem>
+          Each worker node requires an additional 1024 MiB of memory and 5 CPU cores.
+        </ListItem>
+        <ListItem>
+          Additional resources may be required to support the selected storage operator.
+        </ListItem>
+      </List>
+    ),
+  },
+  'openshift-ai': {
+    noSNO: true,
+    incompatibleBundles: [],
+    Description: () => (
+      <List>
+        <ListItem>
+          NVIDIA GPU, AMD GPU and Kernel Module Management may or may not be installed based on the
+          GPU discovered on your hosts.
+        </ListItem>
+      </List>
+    ),
+  },
+};

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));
 };