@openshift-assisted/ui-lib 2.14.5-cim → 2.15.0-cim

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import { useClusterPreflightRequirements } from '../../../hooks';
-import {
-  ClusterOperatorProps,
-  ErrorState,
-  LoadingState,
-  OPERATOR_NAME_LVM,
-} from '../../../../common';
-import { HostTypeHardwareRequirements } from '@openshift-assisted/types/assisted-installer-service';
-
-const LvmHostRequirements = ({ clusterId }: { clusterId: ClusterOperatorProps['clusterId'] }) => {
-  const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
-
-  if (isLoading) {
-    return <LoadingState content="Loading hardware requirements ..." />;
-  }
-  if (error) {
-    return <ErrorState />;
-  }
-
-  const lvmRequirements = preflightRequirements?.operators?.find(
-    (operatorRequirements) => operatorRequirements.operatorName === OPERATOR_NAME_LVM,
-  );
-
-  const { qualitative = [] } = lvmRequirements?.requirements
-    ?.master as HostTypeHardwareRequirements;
-
-  return (
-    <List>
-      {qualitative.map((qualitativeItem, index) => (
-        <ListItem key={index}>{qualitativeItem}</ListItem>
-      ))}
-    </List>
-  );
-};
-
-export default LvmHostRequirements;

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

@@ -1,83 +0,0 @@
-import React from 'react';
-import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { getFieldId, PopoverIcon, getMceDocsLink, ClusterOperatorProps } from '../../../../common';
-import { OcmCheckboxField } from '../../ui/OcmFormFields';
-import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
-import MceRequirements from './MceRequirements';
-
-const MCE_FIELD_NAME = 'useMultiClusterEngine';
-
-const MceLabel = ({
-  disabledReason,
-  isVersionEqualsOrMajorThan4_15,
-  clusterId,
-}: {
-  disabledReason?: string;
-  isVersionEqualsOrMajorThan4_15: boolean;
-  clusterId: ClusterOperatorProps['clusterId'];
-}) => {
-  return (
-    <>
-      <Tooltip hidden={!disabledReason} content={disabledReason}>
-        <span>Install multicluster engine </span>
-      </Tooltip>
-      <PopoverIcon
-        id={MCE_FIELD_NAME}
-        component={'a'}
-        headerContent="Additional requirements"
-        bodyContent={
-          <MceRequirements
-            clusterId={clusterId}
-            isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
-          />
-        }
-      />
-    </>
-  );
-};
-
-const MceHelperText = ({ docsVersion }: { docsVersion: string }) => {
-  return (
-    <HelperText>
-      <HelperTextItem variant="indeterminate">
-        Create, import, and manage multiple clusters from this cluster.{' '}
-        <a href={getMceDocsLink(docsVersion)} target="_blank" rel="noopener noreferrer">
-          {'Learn more'} <ExternalLinkAltIcon />
-        </a>
-      </HelperTextItem>
-    </HelperText>
-  );
-};
-
-const MceCheckbox = ({
-  clusterId,
-  isVersionEqualsOrMajorThan4_15,
-  openshiftVersion,
-}: {
-  isVersionEqualsOrMajorThan4_15: boolean;
-  openshiftVersion?: string;
-  clusterId: ClusterOperatorProps['clusterId'];
-}) => {
-  const featureSupportLevelContext = useNewFeatureSupportLevel();
-  const fieldId = getFieldId(MCE_FIELD_NAME, 'input');
-  const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('MCE');
-  return (
-    <FormGroup isInline fieldId={fieldId}>
-      <OcmCheckboxField
-        name={MCE_FIELD_NAME}
-        label={
-          <MceLabel
-            disabledReason={disabledReason}
-            isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
-            clusterId={clusterId}
-          />
-        }
-        isDisabled={!!disabledReason}
-        helperText={<MceHelperText docsVersion={openshiftVersion || ''} />}
-      />
-    </FormGroup>
-  );
-};
-
-export default MceCheckbox;

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

@@ -1,61 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { List, ListItem } from '@patternfly/react-core';
-import { useClusterPreflightRequirements } from '../../../hooks';
-import { ErrorState, LoadingState, OPERATOR_NAME_MCE, RenderIf } from '../../../../common';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { selectIsCurrentClusterSNO } from '../../../store/slices/current-cluster/selectors';
-import { getOdfLvmsText } from './utils';
-
-const MceRequirements = ({
-  clusterId,
-  isVersionEqualsOrMajorThan4_15,
-}: {
-  clusterId: Cluster['id'];
-  isVersionEqualsOrMajorThan4_15: boolean;
-}) => {
-  const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
-  const isSingleNode = useSelector(selectIsCurrentClusterSNO);
-
-  if (isLoading) {
-    return <LoadingState content="Loading hardware requirements ..." />;
-  }
-  if (error) {
-    return <ErrorState />;
-  }
-
-  const mceRequirements = preflightRequirements?.operators?.find(
-    (operatorRequirements) => operatorRequirements.operatorName === OPERATOR_NAME_MCE,
-  );
-
-  const workerRequirements = mceRequirements?.requirements?.worker?.quantitative;
-  const masterRequirements = mceRequirements?.requirements?.master?.quantitative;
-  const odfLvmsText = getOdfLvmsText(isSingleNode, isVersionEqualsOrMajorThan4_15);
-  return (
-    <>
-      <List>
-        <RenderIf condition={!isSingleNode}>
-          <ListItem>
-            Each worker node requires an additional {workerRequirements?.ramMib || 360} MiB of
-            memory {workerRequirements?.diskSizeGb ? ',' : ' and'}{' '}
-            {workerRequirements?.cpuCores || 2} CPUs
-            {workerRequirements?.diskSizeGb
-              ? ` and ${workerRequirements?.diskSizeGb} storage space`
-              : ''}
-          </ListItem>
-        </RenderIf>
-        <ListItem>
-          Each control plane node requires an additional {masterRequirements?.ramMib || 150} MiB of
-          memory {masterRequirements?.diskSizeGb ? ',' : ' and'} {masterRequirements?.cpuCores || 4}{' '}
-          CPUs
-          {masterRequirements?.diskSizeGb
-            ? ` and ${masterRequirements?.diskSizeGb} storage space`
-            : ''}
-        </ListItem>
-        <ListItem>{odfLvmsText}</ListItem>
-      </List>
-    </>
-  );
-};
-
-export default MceRequirements;

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

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import {
-  getFieldId,
-  PopoverIcon,
-  MTV_LINK,
-  OperatorsValues,
-  ClusterOperatorProps,
-} from '../../../../common';
-import { OcmCheckboxField } from '../../ui/OcmFormFields';
-import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
-import { useFormikContext } from 'formik';
-import MtvRequirements from './MtvRequirements';
-
-const Mtv_FIELD_NAME = 'useMigrationToolkitforVirtualization';
-
-const MtvLabel = ({
-  disabledReason,
-  clusterId,
-}: {
-  disabledReason?: string;
-  clusterId: string;
-}) => (
-  <>
-    <Tooltip hidden={!disabledReason} content={disabledReason}>
-      <span>Install Migration Toolkit for Virtualization </span>
-    </Tooltip>
-    <PopoverIcon
-      component={'a'}
-      headerContent="Additional requirements"
-      bodyContent={<MtvRequirements clusterId={clusterId} />}
-    />
-  </>
-);
-
-const MtvHelperText = () => {
-  return (
-    <HelperText>
-      <HelperTextItem variant="indeterminate">
-        The Migration Toolkit for Virtualization (MTV) enables you to migrate virtual machines from
-        VMware vSphere, Red Hat Virtualization, or OpenStack to OpenShift Virtualization running on
-        Red Hat OpenShift.{' '}
-        <a href={MTV_LINK} target="_blank" rel="noopener noreferrer">
-          {'Learn more'} <ExternalLinkAltIcon />
-        </a>
-      </HelperTextItem>
-    </HelperText>
-  );
-};
-
-const MtvCheckbox = ({ clusterId }: { clusterId: ClusterOperatorProps['clusterId'] }) => {
-  const featureSupportLevelContext = useNewFeatureSupportLevel();
-  const { values, setFieldValue } = useFormikContext<OperatorsValues>();
-  const fieldId = getFieldId(Mtv_FIELD_NAME, 'input');
-  const [disabledReason, setDisabledReason] = useState<string | undefined>();
-
-  const selectCNVOperator = (checked: boolean) =>
-    setFieldValue('useContainerNativeVirtualization', checked);
-
-  React.useEffect(() => {
-    const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('MTV');
-    setDisabledReason(disabledReason);
-  }, [values, featureSupportLevelContext]);
-
-  return (
-    <FormGroup isInline fieldId={fieldId}>
-      <OcmCheckboxField
-        name={Mtv_FIELD_NAME}
-        label={<MtvLabel disabledReason={disabledReason} clusterId={clusterId} />}
-        isDisabled={!!disabledReason}
-        helperText={<MtvHelperText />}
-        onChange={selectCNVOperator}
-      />
-    </FormGroup>
-  );
-};
-
-export default MtvCheckbox;

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { List, ListItem } from '@patternfly/react-core';
-import { useClusterPreflightRequirements } from '../../../hooks';
-import { ErrorState, LoadingState, OPERATOR_NAME_MTV, RenderIf } from '../../../../common';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { selectIsCurrentClusterSNO } from '../../../store/slices/current-cluster/selectors';
-
-const MtvRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
-  const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
-  const isSingleNode = useSelector(selectIsCurrentClusterSNO);
-
-  if (isLoading) {
-    return <LoadingState content="Loading hardware requirements ..." />;
-  }
-  if (error) {
-    return <ErrorState />;
-  }
-
-  const mtvRequirements = preflightRequirements?.operators?.find(
-    (operatorRequirements) => operatorRequirements.operatorName === OPERATOR_NAME_MTV,
-  );
-
-  const workerRequirements = mtvRequirements?.requirements?.worker?.quantitative;
-  const masterRequirements = mtvRequirements?.requirements?.master?.quantitative;
-  return (
-    <>
-      <List>
-        <RenderIf condition={!isSingleNode}>
-          <ListItem>
-            Each worker node requires an additional {workerRequirements?.ramMib || 360} MiB of
-            memory {workerRequirements?.diskSizeGb ? ',' : ' and'}{' '}
-            {workerRequirements?.cpuCores || 2} CPUs
-            {workerRequirements?.diskSizeGb
-              ? ` and ${workerRequirements?.diskSizeGb} storage space`
-              : ''}
-          </ListItem>
-        </RenderIf>
-        <ListItem>
-          Each control plane node requires an additional {masterRequirements?.ramMib || 150} MiB of
-          memory {masterRequirements?.diskSizeGb ? ',' : ' and'} {masterRequirements?.cpuCores || 4}{' '}
-          CPUs
-          {masterRequirements?.diskSizeGb
-            ? ` and ${masterRequirements?.diskSizeGb} storage space`
-            : ''}
-        </ListItem>
-      </List>
-    </>
-  );
-};
-
-export default MtvRequirements;

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

@@ -1,74 +0,0 @@
-import React, { useState } from 'react';
-import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import {
-  getFieldId,
-  PopoverIcon,
-  ODF_REQUIREMENTS_LINK,
-  ODF_LINK,
-  OperatorsValues,
-} from '../../../../common';
-import { OcmCheckboxField } from '../../ui/OcmFormFields';
-import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
-import { useFormikContext } from 'formik';
-import { getOdfIncompatibleWithLvmsReason } from '../../featureSupportLevels/featureStateUtils';
-
-const ODF_FIELD_NAME = 'useOpenShiftDataFoundation';
-
-const OdfLabel = ({ disabledReason }: { disabledReason?: string }) => (
-  <>
-    <Tooltip hidden={!disabledReason} content={disabledReason}>
-      <span>Install OpenShift Data Foundation </span>
-    </Tooltip>
-    <PopoverIcon
-      component={'a'}
-      headerContent="Additional requirements"
-      bodyContent={
-        <a href={ODF_REQUIREMENTS_LINK} target="_blank" rel="noopener noreferrer">
-          Learn more about the requirements for OpenShift Data Foundation <ExternalLinkAltIcon />.
-        </a>
-      }
-    />
-  </>
-);
-
-const OdfHelperText = () => {
-  return (
-    <HelperText>
-      <HelperTextItem variant="indeterminate">
-        Persistent software-defined storage for hybrid applications.{' '}
-        <a href={ODF_LINK} target="_blank" rel="noopener noreferrer">
-          {'Learn more'} <ExternalLinkAltIcon />
-        </a>
-      </HelperTextItem>
-    </HelperText>
-  );
-};
-
-const OdfCheckbox = () => {
-  const featureSupportLevelContext = useNewFeatureSupportLevel();
-  const { values } = useFormikContext<OperatorsValues>();
-  const fieldId = getFieldId(ODF_FIELD_NAME, 'input');
-  const [disabledReason, setDisabledReason] = useState<string | undefined>();
-
-  React.useEffect(() => {
-    let disabledReason = featureSupportLevelContext.getFeatureDisabledReason('ODF');
-    if (!disabledReason) {
-      disabledReason = getOdfIncompatibleWithLvmsReason(values);
-    }
-    setDisabledReason(disabledReason);
-  }, [values, featureSupportLevelContext]);
-
-  return (
-    <FormGroup isInline fieldId={fieldId}>
-      <OcmCheckboxField
-        name={ODF_FIELD_NAME}
-        label={<OdfLabel disabledReason={disabledReason} />}
-        isDisabled={!!disabledReason}
-        helperText={<OdfHelperText />}
-      />
-    </FormGroup>
-  );
-};
-
-export default OdfCheckbox;

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

@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { useFormikContext } from 'formik';
-import { getFieldId, PopoverIcon, OPENSHIFT_AI_LINK, OperatorsValues } from '../../../../common';
-import OpenShiftAIRequirements from './OpenShiftAIRequirements';
-import { OcmCheckboxField } from '../../ui/OcmFormFields';
-import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
-import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
-import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
-import { getOpenShiftAIIncompatibleWithLvmsReason } from '../../featureSupportLevels/featureStateUtils';
-
-const OPENSHIFT_AI_FIELD_NAME = 'useOpenShiftAI';
-
-type OpenShiftAILabelProps = {
-  disabledReason?: string;
-  supportLevel?: SupportLevel;
-};
-
-const OpenShiftAILabel = ({ disabledReason, supportLevel }: OpenShiftAILabelProps) => {
-  return (
-    <>
-      <Tooltip hidden={!disabledReason} content={disabledReason}>
-        <span>Install OpenShift AI bundle </span>
-      </Tooltip>
-      <PopoverIcon
-        component={'a'}
-        headerContent="Requirements and dependencies"
-        bodyContent={<OpenShiftAIRequirements />}
-      />
-      <NewFeatureSupportLevelBadge featureId="OPENSHIFT_AI" supportLevel={supportLevel} />
-    </>
-  );
-};
-
-const OpenShiftAIHelperText = () => {
-  return (
-    <HelperText>
-      <HelperTextItem variant="indeterminate">
-        Train, serve, monitor and manage AI/ML models and applications.{' '}
-        <a href={OPENSHIFT_AI_LINK} target="_blank" rel="noopener noreferrer">
-          {'Learn more'} <ExternalLinkAltIcon />
-        </a>
-      </HelperTextItem>
-    </HelperText>
-  );
-};
-
-const OpenShiftAICheckbox = () => {
-  const featureSupportLevel = useNewFeatureSupportLevel();
-  const { values } = useFormikContext<OperatorsValues>();
-  const fieldId = getFieldId(OPENSHIFT_AI_FIELD_NAME, 'input');
-  const [disabledReason, setDisabledReason] = useState<string | undefined>();
-
-  React.useEffect(() => {
-    let disabledReason = featureSupportLevel.getFeatureDisabledReason('OPENSHIFT_AI');
-    if (!disabledReason) {
-      disabledReason = getOpenShiftAIIncompatibleWithLvmsReason(values);
-    }
-    setDisabledReason(disabledReason);
-  }, [values, featureSupportLevel]);
-
-  return (
-    <FormGroup isInline fieldId={fieldId}>
-      <OcmCheckboxField
-        name={OPENSHIFT_AI_FIELD_NAME}
-        label={
-          <OpenShiftAILabel
-            disabledReason={disabledReason}
-            supportLevel={featureSupportLevel.getFeatureSupportLevel('OPENSHIFT_AI')}
-          />
-        }
-        isDisabled={!!disabledReason}
-        helperText={<OpenShiftAIHelperText />}
-      />
-    </FormGroup>
-  );
-};
-
-export default OpenShiftAICheckbox;

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { OPENSHIFT_AI_REQUIREMENTS_LINK } from '../../../../common';
-
-const OpenShiftAIRequirements = () => {
-  return (
-    <>
-      <List>
-        <ListItem>At least two worker nodes.</ListItem>
-        <ListItem>
-          Each worker node requires 32 additional GiB of memory and 8 additional CPUs.
-        </ListItem>
-        <ListItem>At least one supported GPU. Currently only NVIDIA GPUs are supported.</ListItem>
-        <ListItem>
-          Nodes that have NVIDIA GPUs installed need to have secure boot disabled.
-        </ListItem>
-      </List>
-      Bundle operators:
-      <List>
-        <ListItem>OpenShift Data Foundation</ListItem>
-        <ListItem>Node Feature Discovery</ListItem>
-        <ListItem>NVIDIA GPU</ListItem>
-        <ListItem>Pipelines</ListItem>
-        <ListItem>Service Mesh</ListItem>
-        <ListItem>Serverless</ListItem>
-        <ListItem>Authorino</ListItem>
-      </List>
-      <a href={OPENSHIFT_AI_REQUIREMENTS_LINK} target="_blank" rel="noopener noreferrer">
-        Learn more <ExternalLinkAltIcon />.
-      </a>
-    </>
-  );
-};
-
-export default OpenShiftAIRequirements;

package/lib/ocm/components/clusterDetail/RebootNodeZeroModal.css

@@ -1,7 +0,0 @@
-.ai-reboot-modal .detail-list dt {
-  margin-top: var(--pf-v5-global--spacer--lg);
-}
-
-.ai-reboot-modal__item {
-  margin-top: var(--pf-v5-global--spacer--lg);
-}

package/lib/ocm/components/clusterDetail/RebootNodeZeroModal.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { Button, Checkbox, Modal, ModalVariant, Text, TextContent } from '@patternfly/react-core';
-
-import { useClusterStatusVarieties } from './ClusterDetailStatusVarieties';
-import { KubeconfigDownload, ClusterCredentials } from '../../../common';
-
-import './RebootNodeZeroModal.css';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-
-// TODO(mlibra): Following will be reimplemented based on future decisions in https://issues.redhat.com/browse/AGENT-522
-export const RebootNodeZeroModal: React.FC<{ cluster: Cluster }> = ({ cluster }) => {
-  const [rebootConfirmed, setRebootCofirmed] = React.useState(false);
-  const clusterVarieties = useClusterStatusVarieties(cluster);
-  const { credentials, credentialsError, fetchCredentials } = clusterVarieties;
-
-  const onReboot = () => {
-    // console.error('onReboot handler to be implemented');
-    // TODO(mlibra): Make HTTP Rest call to the assisted-service to restart the node, such endpoint is not yet implemented
-  };
-
-  // Do not merge, development only:
-  // credentials = credentials || {
-  //   username: 'mock-user',
-  //   password: 'mock-password',
-  //   consoleUrl: 'https://www.google.com/search?q=mock',
-  // };
-
-  return (
-    <Modal
-      title="Reboot node?"
-      className="ai-reboot-modal"
-      isOpen={true}
-      variant={ModalVariant.medium}
-      actions={[
-        <Button key="reboot" onClick={onReboot} isDisabled={!rebootConfirmed}>
-          Reboot
-        </Button>,
-      ]}
-    >
-      <TextContent>
-        <Text>
-          This node is about to reboot. Make sure you have downloaded the kubeconfig before you
-          proceed to reboot.
-        </Text>
-      </TextContent>
-      <KubeconfigDownload
-        status={cluster.status}
-        clusterId={cluster.id}
-        className="ai-reboot-modal__item"
-        data-testid="button-download-kubeconfig"
-      />
-      <ClusterCredentials
-        cluster={cluster}
-        credentials={credentials}
-        error={!!credentialsError}
-        retry={fetchCredentials}
-        credentialsError={credentialsError}
-      />
-      <Checkbox
-        label="I have downloaded the kubeconfig, saved the credentials and the node is ready to reboot"
-        className="ai-reboot-modal__item"
-        isChecked={rebootConfirmed}
-        onChange={() => setRebootCofirmed(!rebootConfirmed)}
-        id="checkbox-confirm-reboot"
-        name="confirm-reboot"
-      />
-    </Modal>
-  );
-};