@openshift-assisted/ui-lib 2.37.3 → 2.38.1

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, PIPELINES_OPERATOR_LINK, PopoverIcon } from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+const PIPELINES_FIELD_NAME = 'usePipelines';
+
+const PipelinesLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install Pipelines </span>
+      </Tooltip>
+      <PopoverIcon
+        id={PIPELINES_FIELD_NAME}
+        component={'a'}
+        bodyContent={'No additional requirements needed'}
+      />
+      <NewFeatureSupportLevelBadge featureId="PIPELINES" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const PipelinesHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Cloud-native continuous integration and delivery (CI/CD) solution for building pipelines
+        using Tekton.{' '}
+        <a href={PIPELINES_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const PipelinesCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const fieldId = getFieldId(PIPELINES_FIELD_NAME, 'input');
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={PIPELINES_FIELD_NAME}
+        label={<PipelinesLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
+        helperText={<PipelinesHelperText />}
+        isDisabled={!!disabledReason}
+      />
+    </FormGroup>
+  );
+};
+
+export default PipelinesCheckbox;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, PopoverIcon, SERVERLESS_OPERATOR_LINK } from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+const SERVERLESS_FIELD_NAME = 'useServerless';
+
+const ServerlessLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install Serverless </span>
+      </Tooltip>
+      <PopoverIcon
+        id={SERVERLESS_FIELD_NAME}
+        component={'a'}
+        bodyContent={'No additional requirements needed'}
+      />
+      <NewFeatureSupportLevelBadge featureId="SERVERLESS" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const ServerlessHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Deploy workflow applications based on the CNCF Serverless Workflow specification.{' '}
+        <a href={SERVERLESS_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const ServerlessCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const fieldId = getFieldId(SERVERLESS_FIELD_NAME, 'input');
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={SERVERLESS_FIELD_NAME}
+        label={<ServerlessLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
+        helperText={<ServerlessHelperText />}
+        isDisabled={!!disabledReason}
+      />
+    </FormGroup>
+  );
+};
+
+export default ServerlessCheckbox;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, PopoverIcon, SERVICE_MESH_OPERATOR_LINK } from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+const SERVICEMESH_FIELD_NAME = 'useServicemesh';
+
+const ServiceMeshLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install Service Mesh </span>
+      </Tooltip>
+      <PopoverIcon
+        id={SERVICEMESH_FIELD_NAME}
+        component={'a'}
+        bodyContent={'No additional requirements needed'}
+      />
+      <NewFeatureSupportLevelBadge featureId="SERVICEMESH" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const ServiceMeshHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Platform that provides behavioral insight and operational control over a service mesh.{' '}
+        <a href={SERVICE_MESH_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const ServiceMeshCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const fieldId = getFieldId(SERVICEMESH_FIELD_NAME, 'input');
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={SERVICEMESH_FIELD_NAME}
+        label={<ServiceMeshLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
+        helperText={<ServiceMeshHelperText />}
+        isDisabled={!!disabledReason}
+      />
+    </FormGroup>
+  );
+};
+
+export default ServiceMeshCheckbox;

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import CnvCheckbox from './CnvCheckbox';
+import MtvOperatorCheckbox from './MtvOperatorCheckbox';
+import MceCheckbox from './MceCheckbox';
+import LvmCheckbox from './LvmCheckbox';
+import OdfCheckbox from './OdfCheckbox';
+import OpenShiftAICheckbox from './OpenShiftAICheckbox';
+import OscCheckbox from './OscCheckbox';
+import LsoCheckbox from './LsoCheckbox';
+import NodeFeatureDiscoveryCheckbox from './NodeFeatureDiscoveryCheckbox';
+import NmstateCheckbox from './NmstateCheckbox';
+import ServerlessCheckbox from './ServerlessCheckbox';
+import AuthorinoCheckbox from './AuthorinoCheckbox';
+import PipelinesCheckbox from './PipelinesChekbox';
+import ServiceMeshCheckbox from './ServicemeshCheckbox';
+import NvidiaGpuCheckbox from './NvidiaGpuCheckbox';
+import {
+  FeatureId,
+  OPERATOR_NAME_AUTHORINO,
+  OPERATOR_NAME_CNV,
+  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,
+} from '../../../../common';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+
+interface OperatorProps {
+  clusterId: string;
+  openshiftVersion?: string;
+  isVersionEqualsOrMajorThan4_15: boolean;
+  isSNO: boolean;
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}
+
+export interface ComponentItem {
+  component: JSX.Element;
+  label: string;
+}
+
+export const operatorComponentMap: Record<string, (props: OperatorProps) => JSX.Element> = {
+  cnv: (props) => (
+    <CnvCheckbox {...props} isVersionEqualsOrMajorThan4_15={props.isVersionEqualsOrMajorThan4_15} />
+  ),
+  mtv: (props) => <MtvOperatorCheckbox {...props} />,
+  mce: (props) => <MceCheckbox {...props} />,
+  lvm: (props) => <LvmCheckbox {...props} />,
+  odf: (props) => <OdfCheckbox {...props} />,
+  'openshift-ai': (props) => <OpenShiftAICheckbox {...props} />,
+  osc: (props) => <OscCheckbox {...props} />,
+  lso: (props) => <LsoCheckbox {...props} />,
+  'node-feature-discovery': (props) => <NodeFeatureDiscoveryCheckbox {...props} />,
+  nmstate: (props) => <NmstateCheckbox {...props} />,
+  serverless: (props) => <ServerlessCheckbox {...props} />,
+  authorino: (props) => <AuthorinoCheckbox {...props} />,
+  pipelines: (props) => <PipelinesCheckbox {...props} />,
+  servicemesh: (props) => <ServiceMeshCheckbox {...props} />,
+  'nvidia-gpu': (props) => <NvidiaGpuCheckbox {...props} />,
+};
+
+export const mapOperatorsToFieldIds: { [key: string]: string } = {
+  [OPERATOR_NAME_ODF]: 'useOpenShiftDataFoundation',
+  [OPERATOR_NAME_LVM]: 'useOdfLogicalVolumeManager',
+  [OPERATOR_NAME_CNV]: 'useContainerNativeVirtualization',
+  [OPERATOR_NAME_MCE]: 'useMultiClusterEngine',
+  [OPERATOR_NAME_MTV]: 'useMigrationToolkitforVirtualization',
+  [OPERATOR_NAME_OPENSHIFT_AI]: 'useOpenShiftAI',
+  [OPERATOR_NAME_OSC]: 'useOsc',
+  [OPERATOR_NAME_NODE_FEATURE_DISCOVERY]: 'useNodeFeatureDiscovery',
+  [OPERATOR_NAME_NMSTATE]: 'useNmstate',
+  [OPERATOR_NAME_LSO]: 'useLso',
+  [OPERATOR_NAME_SERVERLESS]: 'useServerless',
+  [OPERATOR_NAME_AUTHORINO]: 'useAuthorino',
+  [OPERATOR_NAME_PIPELINES]: 'usePipelines',
+  [OPERATOR_NAME_SERVICEMESH]: 'useServicemesh',
+  [OPERATOR_NAME_NVIDIA_GPU]: 'useNvidiaGpu',
+};
+
+export const mapOperatorIdToFeatureId: { [key: string]: FeatureId } = {
+  [OPERATOR_NAME_ODF]: 'ODF',
+  [OPERATOR_NAME_LVM]: 'LVM',
+  [OPERATOR_NAME_CNV]: 'CNV',
+  [OPERATOR_NAME_MCE]: 'MCE',
+  [OPERATOR_NAME_MTV]: 'MTV',
+  [OPERATOR_NAME_OPENSHIFT_AI]: 'OPENSHIFT_AI',
+  [OPERATOR_NAME_OSC]: 'OSC',
+  [OPERATOR_NAME_NODE_FEATURE_DISCOVERY]: 'NODE_FEATURE_DISCOVERY',
+  [OPERATOR_NAME_NMSTATE]: 'NMSTATE',
+  [OPERATOR_NAME_LSO]: 'LSO',
+  [OPERATOR_NAME_SERVERLESS]: 'SERVERLESS',
+  [OPERATOR_NAME_AUTHORINO]: 'AUTHORINO',
+  [OPERATOR_NAME_PIPELINES]: 'PIPELINES',
+  [OPERATOR_NAME_SERVICEMESH]: 'SERVICEMESH',
+  [OPERATOR_NAME_NVIDIA_GPU]: 'NVIDIA_GPU',
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+const VirtualizationRequirements = () => {
+  return (
+    <>
+      <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>
+      </List>
+      Bundle operators:
+      <List>
+        <ListItem>OpenShift Virtualization</ListItem>
+        <ListItem>Migration Toolkit for Virtualization</ListItem>
+        <ListItem>Nmstate</ListItem>
+      </List>
+    </>
+  );
+};
+
+export default VirtualizationRequirements;

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx

@@ -76,7 +76,7 @@ const getExpandedHostComponent = (protocolType: StaticProtocolType) => {
               />{' '}
               <OcmInputField
                 name={`${fieldName}.bondSecondaryInterface`}
-                label="Port 2 MAC Adddress"
+                label="Port 2 MAC Address"
                 data-testid={`bond-secondary-interface-${hostIdx}`}
                 isRequired
               />

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

@@ -78,6 +78,10 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         const cluster = await ClustersService.create(params, isAssistedMigration);
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
         await UISettingService.update(cluster.id, { addCustomManifests });
+        //TO-DO: Assisted-Migration. Provisional code. Needs to be removed when MTV integration be finished
+        if (isAssistedMigration) {
+          await ClustersService.createClusterManifestsForAssistedMigration(cluster.id);
+        }
       } catch (e) {
         handleApiError(e, () =>
           addAlert({ title: 'Failed to create new cluster', message: getApiErrorMessage(e) }),

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

@@ -5,13 +5,21 @@ import { Formik, FormikConfig, useFormikContext } from 'formik';
 import {
   ClusterWizardStep,
   getFormikErrorFields,
+  OPERATOR_NAME_AUTHORINO,
   OPERATOR_NAME_CNV,
+  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,
   OperatorsValues,
   selectMonitoredOperators,
   useAlerts,
@@ -40,6 +48,14 @@ export const getOperatorsInitialValues = (
     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]),
   };
 };
 
@@ -80,7 +96,11 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
         />
       }
     >
-      <OperatorsStep clusterId={cluster.id} openshiftVersion={cluster.openshiftVersion} />
+      <OperatorsStep
+        clusterId={cluster.id}
+        openshiftVersion={cluster.openshiftVersion}
+        monitoredOperators={cluster.monitoredOperators}
+      />
     </ClusterWizardStep>
   );
 };