@openshift-assisted/ui-lib 2.37.2 → 2.38.0

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

@@ -1,16 +1,59 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Stack, StackItem } from '@patternfly/react-core';
-import { ClusterOperatorProps, ClusterWizardStepHeader } from '../../../common';
-import CnvCheckbox from '../clusterConfiguration/operators/CnvCheckbox';
-import OdfCheckbox from '../clusterConfiguration/operators/OdfCheckbox';
-import LvmCheckbox from '../clusterConfiguration/operators/LvmCheckbox';
-import MceCheckbox from '../clusterConfiguration/operators/MceCheckbox';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Checkbox,
+  ExpandableSection,
+  Flex,
+  FlexItem,
+  Gallery,
+  GalleryItem,
+  Stack,
+  StackItem,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@patternfly/react-core';
+import {
+  ClusterOperatorProps,
+  ClusterWizardStepHeader,
+  numberOfEnabledOperators,
+  OperatorsValues,
+  PopoverIcon,
+} from '../../../common';
 import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
 import { isOCPVersionEqualsOrMajor } from '../utils';
-import MtvOperatorCheckbox from '../clusterConfiguration/operators/MtvOperatorCheckbox';
-import OpenShiftAICheckbox from '../clusterConfiguration/operators/OpenShiftAICheckbox';
-import OscCheckbox from '../clusterConfiguration/operators/OscCheckbox';
+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';
+
+const operatorsThatCanNotBeInstalledAlone = [
+  'nvdia-gpu',
+  'pipelines',
+  'servicemesh',
+  'serverless',
+  'authorino',
+  'lso',
+];
 
 export const OperatorsStep = (props: ClusterOperatorProps) => {
   const isSNO = useSelector(selectIsCurrentClusterSNO);
@@ -18,39 +61,332 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
     props.openshiftVersion || '',
     '4.15',
   );
+
+  const [bundles, setBundles] = useState<Bundle[]>([]);
+  const [isExpanded, setIsExpanded] = useState(true);
+  // 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(() => {
+    const fetchBundles = async () => {
+      try {
+        const fetchedBundles = await BundleService.listBundles();
+
+        setBundles(fetchedBundles);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error al obtener los bundles:', error);
+      }
+    };
+
+    void fetchBundles();
+  }, []);
+
+  useEffect(() => {
+    const fetchSupportedOperators = async () => {
+      try {
+        const fetchedOperators = await OperatorsService.getSupportedOperators();
+        const sortedOperators = fetchedOperators.sort((a, b) => a.localeCompare(b));
+
+        setSupportedOperators(sortedOperators);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error al obtener los 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);
+        }
+      });
+    } 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);
+      });
+    }
+
+    await updateUISettings({ bundlesSelected });
+
+    setSelectedBundles((prev) => ({
+      ...prev,
+      [bundleId]: checked,
+    }));
+
+    setBundleOperators(newBundleOperators);
+  };
+
+  const getBundleLabel = (title: string | undefined, operators: 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>
+              ) : (
+                <p>No operators available</p>
+              )}
+            </>
+          }
+        />
+      </>
+    );
+  };
+  const bundleHasOperatorsNotSupported = (operators: string[] | undefined) => {
+    return (
+      operators?.some(
+        (operator) =>
+          !featureSupportLevelData.isFeatureSupported(mapOperatorIdToFeatureId[operator]),
+      ) ?? false
+    );
+  };
+
+  const getDisabledReasonForOperator = (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) {
+        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;
+  };
+
   return (
-    <Stack hasGutter data-testid={'operators-form'}>
-      <StackItem>
-        <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
-      </StackItem>
-      <StackItem>
-        <CnvCheckbox {...props} isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15} />
-      </StackItem>
+    <Stack hasGutter data-testid={'operators-page'}>
       <StackItem>
-        <MtvOperatorCheckbox clusterId={props.clusterId} />
+        <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>
       </StackItem>
       <StackItem>
-        <MceCheckbox
-          clusterId={props.clusterId}
-          isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
-          openshiftVersion={props.openshiftVersion}
-        />
+        <Title headingLevel="h2" size="lg">
+          Bundles
+        </Title>
       </StackItem>
-      {isVersionEqualsOrMajorThan4_15 ? (
-        <>
-          <StackItem>
-            <LvmCheckbox {...props} />
-          </StackItem>
-          <StackItem>
-            <OdfCheckbox />
-          </StackItem>
-        </>
-      ) : (
-        <StackItem>{isSNO ? <LvmCheckbox {...props} /> : <OdfCheckbox />}</StackItem>
-      )}
-
-      <OpenShiftAICheckbox />
-      <OscCheckbox />
+      {/* Mostrar bundles como tarjetas */}
+      <Gallery hasGutter minWidths={{ default: '350px' }} maxWidths={{ default: '2fr' }}>
+        {filteredBundles.map((bundle) => (
+          <GalleryItem key={bundle.id}>
+            <Tooltip
+              content={
+                bundleHasOperatorsNotSupported(bundle.operators)
+                  ? 'Some operators in this bundle are not supported with the current configuration.'
+                  : isSNO && bundle.id === 'openshift-ai-nvidia'
+                  ? 'This bundle is not available when deploying a Single Node OpenShift.'
+                  : ''
+              }
+              hidden={
+                !bundleHasOperatorsNotSupported(bundle.operators) &&
+                !(isSNO && bundle.id === 'openshift-ai-nvidia')
+              }
+            >
+              <Card
+                style={
+                  bundle.id && selectedBundles[bundle.id]
+                    ? { border: '1px solid #004080', height: '200px' }
+                    : { height: '200px' }
+                }
+                isDisabled={
+                  bundleHasOperatorsNotSupported(bundle.operators) ||
+                  (isSNO && bundle.id === 'openshift-ai-nvidia')
+                }
+              >
+                <CardTitle
+                  style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    {getBundleLabel(bundle.title, bundle.operators)}
+                  </div>
+                  <Checkbox
+                    id={`bundle-${bundle.id || ''}`}
+                    isChecked={bundle.id ? selectedBundles[bundle.id] : false}
+                    onChange={(_event, checked) =>
+                      void handleBundleSelection(bundle.id || '', bundle.operators || [], checked)
+                    }
+                    isDisabled={
+                      bundleHasOperatorsNotSupported(bundle.operators) ||
+                      (isSNO && bundle.id === 'openshift-ai-nvidia')
+                    }
+                  />
+                </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' && (
+                      <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}
+      >
+        <Stack hasGutter data-testid={'operators-form'}>
+          {supportedOperators.map((operatorKey) => {
+            const isOperatorSelected = bundleOperators.includes(operatorKey);
+            const isOperatorPartOfAIBundle =
+              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.'
+                      : isOperatorPartOfAIBundle
+                      ? 'This operator cannot be installed as a standalone'
+                      : disabledReason
+                  }
+                  supportLevel={featureSupportLevel}
+                />
+              </StackItem>
+            );
+          })}
+        </Stack>
+      </ExpandableSection>
     </Stack>
   );
 };

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

@@ -191,7 +191,7 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
       'osc-requirements-satisfied',
     ],
   },
-  softValidationIds: ['no-skip-installation-disk', 'no-skip-missing-disk'],
+  softValidationIds: ['no-skip-installation-disk', 'no-skip-missing-disk', 'compatible-agent'],
 };
 
 const storageStepValidationsMap: WizardStepValidationMap = {

package/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -249,6 +249,46 @@ export const getNewFeatureDisabledReason = (
         return 'Migration Toolkit for Virtualization is not supported in this OpenShift version';
       }
     }
+    case 'AUTHORINO': {
+      if (!isSupported) {
+        return `Authorino is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'LSO': {
+      if (!isSupported) {
+        return `Lso is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'NMSTATE': {
+      if (!isSupported) {
+        return `Nmstate is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'NODE_FEATURE_DISCOVERY': {
+      if (!isSupported) {
+        return `Node Feature Discovery is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'NVIDIA_GPU': {
+      if (!isSupported) {
+        return `NVIDIA GPU is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'PIPELINES': {
+      if (!isSupported) {
+        return `Pipelines is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'SERVERLESS': {
+      if (!isSupported) {
+        return `Serverless is not available with the selected CPU architecture.`;
+      }
+    }
+    case 'SERVICEMESH': {
+      if (!isSupported) {
+        return `Service mesh is not available with the selected CPU architecture.`;
+      }
+    }
     default: {
       return undefined;
     }

package/lib/ocm/config/constants.ts

@@ -39,3 +39,159 @@ export const ocmPermissionsToAIPermissions = (
   }
   return permissions;
 };
+
+//TO-DO: Assisted-Migration. Provisional code. Needs to be removed when MTV integration be finished
+export const yamlContentAssistedMigration1 = `apiVersion: v1
+kind: Namespace
+metadata:
+  name: openshift-gitops-operator
+---
+apiVersion: operators.coreos.com/v1
+kind: OperatorGroup
+metadata:
+  name: openshift-gitops-operator
+  namespace: openshift-gitops-operator
+spec:
+  upgradeStrategy: Default
+---
+apiVersion: operators.coreos.com/v1alpha1
+kind: Subscription
+metadata:
+  name: openshift-gitops-operator
+  namespace: openshift-gitops-operator
+spec:
+  channel: latest
+  installPlanApproval: Automatic
+  name: openshift-gitops-operator
+  source: redhat-operators
+  sourceNamespace: openshift-marketplace
+`;
+
+export const yamlContentAssistedMigration2 = `apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRole
+metadata:
+  name: namespace-manager
+rules:
+  - apiGroups: [""]
+    resources: ["namespaces"]
+    verbs: ["get", "create", "update", "delete"]
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRoleBinding
+metadata:
+  name: namespace-manager-binding
+subjects:
+  - kind: ServiceAccount
+    name: openshift-gitops-argocd-application-controller
+    namespace: openshift-gitops
+roleRef:
+  kind: ClusterRole
+  name: namespace-manager
+  apiGroup: rbac.authorization.k8s.io
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: Role
+metadata:
+  name: persistentvolumeclaim-manager
+  namespace: openshift-image-registry
+rules:
+  - apiGroups: [""]
+    resources: ["persistentvolumeclaims"]
+    verbs: ["get", "create", "update", "delete"]
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: RoleBinding
+metadata:
+  name: persistentvolumeclaim-manager-binding
+  namespace: openshift-image-registry
+subjects:
+  - kind: ServiceAccount
+    name: openshift-gitops-argocd-application-controller
+    namespace: openshift-gitops
+roleRef:
+  kind: Role
+  name: persistentvolumeclaim-manager
+  apiGroup: rbac.authorization.k8s.io
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRole
+metadata:
+  name: job-manager
+rules:
+  - apiGroups: ["batch"]
+    resources: ["jobs"]
+    verbs: ["get", "create", "update", "delete"]
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRoleBinding
+metadata:
+  name: job-manager-binding
+subjects:
+  - kind: ServiceAccount
+    name: openshift-gitops-argocd-application-controller
+    namespace: openshift-gitops
+roleRef:
+  kind: ClusterRole
+  name: job-manager
+  apiGroup: rbac.authorization.k8s.io
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRole
+metadata:
+  name: argocd-application-controller
+rules:
+  - apiGroups: [""]
+    resources: ["serviceaccounts", "services", "secrets"]
+    verbs: ["create", "get", "list", "update", "delete", "patch"]
+  - apiGroups: ["apps"]
+    resources: ["deployments"]
+    verbs: ["create", "get", "list", "update", "delete", "patch"]
+  - apiGroups: ["route.openshift.io"]
+    resources: ["routes"]
+    verbs: ["create", "get", "list", "update", "delete", "patch"]
+  - apiGroups: ["image.openshift.io"]
+    resources: ["imagestreams"]
+    verbs: ["create", "get", "list", "update", "delete", "patch"]
+  - apiGroups: ["build.openshift.io"]
+    resources: ["buildconfigs"]
+    verbs: ["create", "get", "list", "update", "delete", "patch"]
+
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRoleBinding
+metadata:
+  name: argocd-application-controller-binding
+subjects:
+  - kind: ServiceAccount
+    name: openshift-gitops-argocd-application-controller
+    namespace: openshift-gitops
+roleRef:
+  kind: ClusterRole
+  name: argocd-application-controller
+  apiGroup: rbac.authorization.k8s.io
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: Role
+metadata:
+  name: argocd-secrets-role
+  namespace: openshift-mtv
+rules:
+  - apiGroups: [""]
+    resources: ["secrets"]
+    verbs: ["create", "get", "list", "update", "delete", "patch"]
+
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: RoleBinding
+metadata:
+  name: argocd-secrets-rolebinding
+  namespace: openshift-mtv
+subjects:
+  - kind: ServiceAccount
+    name: openshift-gitops-argocd-application-controller
+    namespace: openshift-gitops
+roleRef:
+  kind: Role
+  name: argocd-secrets-role
+  apiGroup: rbac.authorization.k8s.io
+`;

package/lib/ocm/sentry.ts

@@ -1,11 +1,12 @@
 import * as Sentry from '@sentry/browser';
+import { SeverityLevel } from '@sentry/types';
 import { isInOcm } from '../common/api/axiosClient';
 
 export const captureException = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   error: any,
   message?: string,
-  severity: Sentry.Severity = Sentry.Severity.Error,
+  severity: SeverityLevel = 'error',
 ) => {
   if (isInOcm) {
     message && Sentry.captureMessage(message, severity);

package/lib/ocm/services/BundleService.ts

@@ -0,0 +1,14 @@
+import BundleAPI from '../../common/api/assisted-service/BundleAPI';
+
+const BundleService = {
+  async listBundles() {
+    const { data: bundles } = await BundleAPI.list();
+    return bundles;
+  },
+  async listOperatorsByBundle(bundleName: string) {
+    const { data } = await BundleAPI.listOperatorsForBundle(bundleName);
+    return data;
+  },
+};
+
+export default BundleService;