@openshift-assisted/ui-lib 2.55.0 → 2.56.0

package/lib/ocm/components/hosts/ModalDialogsContext.tsx

@@ -1,146 +0,0 @@
-import React from 'react';
-import { dialogsSlice } from '../../../common';
-import { Cluster, Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
-
-const { openDialog: openDialogAction, closeDialog: closeDialogAction } = dialogsSlice.actions;
-const dialogsReducer = dialogsSlice.reducer;
-
-type HostIdAndHostname = {
-  hostId: Host['id'];
-  hostname: string;
-};
-
-type EditHostProps = {
-  host: Host;
-  inventory: Inventory;
-};
-
-type ResetClusterProps = {
-  cluster: Cluster;
-};
-
-type CancelInstallationProps = {
-  clusterId: Cluster['id'];
-};
-
-type DiscoveryImageDialogProps = {
-  cluster: Cluster;
-};
-
-type MassUpdateHostnameDialogProps = {
-  cluster: Cluster;
-  hostIDs: string[];
-  reloadCluster: VoidFunction;
-};
-
-type MassDeleteHostDialogProps = {
-  hosts: Host[];
-  // eslint-disable-next-line
-  onDelete: (host: Host) => Promise<any>;
-  reloadCluster: VoidFunction;
-};
-
-type ResetSingleClusterDialogProps = {
-  cluster?: Cluster;
-};
-
-type ModalDialogsDataTypes = {
-  eventsDialog: HostIdAndHostname;
-  editHostDialog: EditHostProps;
-  deleteHostDialog: HostIdAndHostname;
-  resetHostDialog: HostIdAndHostname;
-  additionalNTPSourcesDialog: void;
-  resetClusterDialog: ResetClusterProps;
-  cancelInstallationDialog: CancelInstallationProps;
-  discoveryImageDialog: DiscoveryImageDialogProps;
-  day2DiscoveryImageDialog: DiscoveryImageDialogProps;
-  UpdateDay2ApiVipDialog: void;
-  massUpdateHostnameDialog: MassUpdateHostnameDialogProps;
-  massDeleteHostDialog: MassDeleteHostDialogProps;
-  resetSingleClusterDialog: ResetSingleClusterDialogProps;
-};
-
-type DialogId =
-  | 'eventsDialog'
-  | 'editHostDialog'
-  | 'deleteHostDialog'
-  | 'resetHostDialog'
-  | 'additionalNTPSourcesDialog'
-  | 'resetClusterDialog'
-  | 'cancelInstallationDialog'
-  | 'discoveryImageDialog'
-  | 'day2DiscoveryImageDialog'
-  | 'UpdateDay2ApiVipDialog'
-  | 'massUpdateHostnameDialog'
-  | 'massDeleteHostDialog'
-  | 'resetSingleClusterDialog';
-
-export type ModalDialogsContextType = {
-  [key in DialogId]: {
-    isOpen: boolean;
-    open: (data: ModalDialogsDataTypes[key]) => void;
-    close: () => void;
-    data: ModalDialogsDataTypes[key];
-  };
-};
-
-const dialogIds: DialogId[] = [
-  'eventsDialog',
-  'editHostDialog',
-  'deleteHostDialog',
-  'resetHostDialog',
-  'additionalNTPSourcesDialog',
-  'resetClusterDialog',
-  'cancelInstallationDialog',
-  'discoveryImageDialog',
-  'day2DiscoveryImageDialog',
-  'UpdateDay2ApiVipDialog',
-  'massUpdateHostnameDialog',
-  'massDeleteHostDialog',
-  'resetSingleClusterDialog',
-];
-
-const ModalDialogsContext = React.createContext<ModalDialogsContextType | undefined>(undefined);
-
-type DialogStoreType = Partial<Record<DialogId, unknown>>;
-
-const ModalDialogsContextProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const [dialogsState, dispatchDialogsAction] = React.useReducer(
-    dialogsReducer,
-    {} as DialogStoreType,
-  );
-
-  function getOpenDialog<DataType>(dialogId: DialogId) {
-    return (data: DataType) => dispatchDialogsAction(openDialogAction({ dialogId, data }));
-  }
-
-  const getCloseDialog = (dialogId: DialogId) => () =>
-    dispatchDialogsAction(closeDialogAction({ dialogId }));
-
-  const context = dialogIds.reduce((context, dialogId) => {
-    const dialogData = dialogsState[dialogId] as ModalDialogsDataTypes[typeof dialogId];
-    context[dialogId] = {
-      isOpen: !!dialogData,
-      open: (data: ModalDialogsDataTypes[typeof dialogId]) =>
-        getOpenDialog<ModalDialogsDataTypes[typeof dialogId]>(dialogId)(data),
-      close: () => getCloseDialog(dialogId)(),
-      data: dialogData,
-    };
-    return context;
-  }, {} as DialogStoreType);
-  return (
-    <ModalDialogsContext.Provider value={context as ModalDialogsContextType}>
-      {children}
-    </ModalDialogsContext.Provider>
-  );
-};
-
-const useModalDialogsContext = () => {
-  const context = React.useContext(ModalDialogsContext);
-  if (context === undefined) {
-    throw new Error('useModalDialogsContext must be used within a ModalDialogsContextProvider');
-  }
-  return context;
-};
-
-export { ModalDialogsContextProvider, useModalDialogsContext };

package/lib/ocm/components/hosts/NetworkingStatus.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import {
-  areOnlySoftValidationsOfWizardStepFailing,
-  getWizardStepHostStatus,
-  getWizardStepHostValidationsInfo,
-  HostNetworkingStatusComponentProps,
-  hostStatus,
-  HostStatus,
-} from '../../../common';
-import { wizardStepsValidationsMap } from '../clusterWizard/wizardTransition';
-import { AdditionalNTPSourcesDialogToggle } from './AdditionaNTPSourceDialogToggle';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-
-const NetworkingStatus: React.FC<HostNetworkingStatusComponentProps> = (props) => {
-  const { t } = useTranslation();
-  const networkingStatus = getWizardStepHostStatus(
-    'networking',
-    wizardStepsValidationsMap,
-    props.host,
-  );
-  const status = hostStatus(t)[networkingStatus];
-  const validationsInfo = getWizardStepHostValidationsInfo(
-    props.validationsInfo,
-    'networking',
-    wizardStepsValidationsMap,
-  );
-  const sublabel = areOnlySoftValidationsOfWizardStepFailing(
-    validationsInfo,
-    'networking',
-    wizardStepsValidationsMap,
-  )
-    ? 'Some validations failed'
-    : undefined;
-
-  return (
-    <HostStatus
-      {...props}
-      status={{ ...status, sublabel }}
-      validationsInfo={validationsInfo}
-      AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggle}
-    />
-  );
-};
-
-export default NetworkingStatus;

package/lib/ocm/components/hosts/OdfLvmDisksManualFormattingHint.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Alert, AlertVariant } from '@patternfly/react-core';
-
-const OdfLvmDisksManualFormattingHint = () => {
-  return (
-    <Alert
-      variant={AlertVariant.warning}
-      isInline
-      title="Make sure you format all non-installation disks"
-    >
-      All non-installation disks will be used for local storage and must be formatted before the
-      storage operator's installation.
-    </Alert>
-  );
-};
-
-export default OdfLvmDisksManualFormattingHint;

package/lib/ocm/components/hosts/ResetHostModal.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalVariant,
-} from '@patternfly/react-core';
-
-type ResetHostModalProps = {
-  hostname?: string;
-  isOpen: boolean;
-  onClose: () => void;
-  onReset: () => void;
-};
-
-const ResetHostModal: React.FC<ResetHostModalProps> = ({ isOpen, hostname, onClose, onReset }) => (
-  <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.small}>
-    <ModalHeader title="Reset Host" />
-    <ModalBody>Are you sure you want to reset host{` ${hostname || ''}`} ?</ModalBody>
-    <ModalFooter>
-      <Button
-        data-testid="reset-host-submit"
-        key="confirm"
-        variant={ButtonVariant.danger}
-        onClick={onReset}
-      >
-        Reset
-      </Button>
-      <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
-        Cancel
-      </Button>
-    </ModalFooter>
-  </Modal>
-);
-
-export default ResetHostModal;

package/lib/ocm/components/hosts/StorageAlerts.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import { Alert, AlertVariant, List, ListItem, Stack, StackItem } from '@patternfly/react-core';
-import {
-  FormatDiskWarning,
-  getInventory,
-  hasEnabledOperators,
-  OPERATOR_NAME_LVM,
-  OPERATOR_NAME_ODF,
-} from '../../../common';
-import { isAddHostsCluster, isSomeDisksSkipFormatting } from '../clusters/utils';
-import OdfLvmDisksManualFormattingHint from './OdfLvmDisksManualFormattingHint';
-import { getDiskLimitation } from '../../../common/components/storage/DisksTable';
-import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
-
-const StorageAlerts = ({ cluster }: { cluster: Cluster }) => {
-  const showFormattingHint =
-    (hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_ODF) ||
-      hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_LVM)) &&
-    !isAddHostsCluster(cluster);
-  const someDisksAreSkipFormatting = isSomeDisksSkipFormatting(cluster);
-
-  const diskLimitations = [...(cluster.hosts as Host[])]
-    ?.sort(
-      (a, b) =>
-        (a.requestedHostname && a.requestedHostname.localeCompare(b.requestedHostname as string)) ||
-        0,
-    )
-    ?.map((host) => {
-      const disks = getInventory(host).disks || [];
-      const installationDisk = disks.find((disk) => disk.id === host.installationDiskId);
-      if (installationDisk) {
-        const holder = disks.find((d) =>
-          installationDisk.holders?.split(',').includes(d.name as string),
-        );
-
-        if (holder) {
-          return getDiskLimitation(installationDisk.name, host.requestedHostname, holder);
-        }
-      }
-    })
-    .filter(Boolean);
-
-  return (
-    <Stack hasGutter>
-      {!!diskLimitations.length && (
-        <StackItem>
-          {diskLimitations?.length === 1 ? (
-            <Alert
-              title={diskLimitations[0]}
-              isInline
-              variant={AlertVariant.warning}
-              data-testid="diskLimitationsAlert"
-            />
-          ) : (
-            <Alert
-              title="Installation disk limitations"
-              isInline
-              variant={AlertVariant.warning}
-              data-testid="diskLimitationsAlert"
-            >
-              <List>
-                {diskLimitations.map((warning, index) => (
-                  <ListItem key={`installationWarning-${index}`}>{warning}</ListItem>
-                ))}
-              </List>
-            </Alert>
-          )}
-        </StackItem>
-      )}
-      {showFormattingHint && (
-        <StackItem>
-          <OdfLvmDisksManualFormattingHint />
-        </StackItem>
-      )}
-      <StackItem>
-        <FormatDiskWarning someDisksAreSkipFormatting={someDisksAreSkipFormatting} />
-      </StackItem>
-    </Stack>
-  );
-};
-
-export default StorageAlerts;

package/lib/ocm/components/hosts/UpdateDay2ApiVipDialogToggle.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { AlertActionLink } from '@patternfly/react-core';
-import { useModalDialogsContext } from './ModalDialogsContext';
-import { AddHostsContext } from '../../../common';
-
-export const UpdateDay2ApiVipDialogToggle: React.FC = () => {
-  const {
-    UpdateDay2ApiVipDialog: { open },
-  } = useModalDialogsContext();
-  const { canEdit } = React.useContext(AddHostsContext);
-
-  return (
-    <>
-      Check your DNS and network configuration, or{' '}
-      {canEdit ? (
-        <AlertActionLink onClick={() => open()} isInline>
-          set the IP or domain used to reach the cluster.
-        </AlertActionLink>
-      ) : (
-        'set the IP or domain used to reach the cluster.'
-      )}
-    </>
-  );
-};

package/lib/ocm/components/hosts/UpdateDay2ApiVipForm.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import * as Yup from 'yup';
-import {
-  Button,
-  ButtonVariant,
-  ButtonType,
-  Form,
-  ModalBody,
-  ModalFooter,
-} from '@patternfly/react-core';
-import { Formik } from 'formik';
-import { AlertFormikError, InputField } from '../../../common/components/ui';
-import GridGap from '../../../common/components/ui/GridGap';
-import { day2ApiVipValidationSchema, StatusErrorType } from '../../../common';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-
-export type UpdateDay2ApiVipFormProps = {
-  onClose: () => void;
-  onUpdateDay2ApiVip: (apiVip: string, onError: (message: string) => void) => Promise<void>;
-  currentApiVip?: string;
-};
-
-export type UpdateDay2ApiVipValues = {
-  apiVip?: string;
-};
-
-const UpdateDay2ApiVipForm: React.FC<UpdateDay2ApiVipFormProps> = ({
-  onUpdateDay2ApiVip,
-  onClose,
-  currentApiVip: originApiVip,
-}) => {
-  const { t } = useTranslation();
-
-  const apiVipInputRef = React.useRef<HTMLInputElement>();
-  React.useEffect(() => {
-    apiVipInputRef.current?.focus();
-    apiVipInputRef.current?.select();
-  }, []);
-  const initialValues = {
-    apiVip: originApiVip,
-  };
-  const validationSchema = React.useMemo(
-    () =>
-      Yup.object().shape({
-        apiVip: day2ApiVipValidationSchema(t).required(t('ai:Required field')),
-      }),
-    [t],
-  );
-
-  return (
-    <Formik
-      initialValues={initialValues}
-      validationSchema={validationSchema}
-      initialStatus={{ error: null }}
-      onSubmit={async (values, formikHelpers) => {
-        if (values.apiVip) {
-          const onError = (message: string) => {
-            const error: StatusErrorType = {
-              error: {
-                title: 'Failed to update API IP',
-                message,
-              },
-            };
-            formikHelpers.setStatus(error);
-          };
-          await onUpdateDay2ApiVip(values.apiVip, onError);
-          onClose();
-        }
-      }}
-    >
-      {({ handleSubmit, status, setStatus, isSubmitting, isValid, dirty }) => {
-        return (
-          <Form onSubmit={handleSubmit}>
-            <ModalBody>
-              <GridGap>
-                <AlertFormikError
-                  status={status as StatusErrorType}
-                  onClose={() => setStatus({ error: null })}
-                />
-
-                <InputField
-                  label="Set the IP or domain used to reach the cluster"
-                  name="apiVip"
-                  ref={apiVipInputRef}
-                  isRequired
-                />
-              </GridGap>
-            </ModalBody>
-            <ModalFooter>
-              <Button
-                key="submit"
-                type={ButtonType.submit}
-                isDisabled={isSubmitting || !isValid || !dirty}
-              >
-                Update
-              </Button>
-              <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
-                Cancel
-              </Button>
-            </ModalFooter>
-          </Form>
-        );
-      }}
-    </Formik>
-  );
-};
-
-export default UpdateDay2ApiVipForm;

package/lib/ocm/components/hosts/UpdateDay2ApiVipModal.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import UpdateDay2ApiVipForm, { UpdateDay2ApiVipFormProps } from './UpdateDay2ApiVipForm';
-import { Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
-
-type UpdateDay2ApiVipModalProps = {
-  isOpen: boolean;
-} & UpdateDay2ApiVipFormProps;
-
-const UpdateDay2ApiVipModal: React.FC<UpdateDay2ApiVipModalProps> = ({
-  isOpen,
-  onClose,
-  ...props
-}) => (
-  <Modal
-    aria-label="Update cluster hostname"
-    isOpen={isOpen}
-    variant={ModalVariant.small}
-    onClose={onClose}
-  >
-    <ModalHeader title="Update cluster hostname" />
-    <UpdateDay2ApiVipForm {...props} onClose={onClose} />
-  </Modal>
-);
-
-export default UpdateDay2ApiVipModal;

package/lib/ocm/components/hosts/VMRebootConfigurationLinkWithModal.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import InfoLinkWithModal from '../ui/InfoLinkWithModal';
-import { VMRebootConfigurationContent } from '../../../common/components/hosts/VMRebootConfigurationInfo';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-
-const VMRebootConfigurationLinkWithModal = () => {
-  const { t } = useTranslation();
-  const title = t('ai:Check your VM reboot configuration');
-  return (
-    <InfoLinkWithModal
-      linkText={title}
-      modalTitle={title}
-      modalVariant={'medium'}
-      isInline
-      linkId="check-reboot-configuration"
-      modalId="check-reboot-configuration"
-    >
-      <VMRebootConfigurationContent />
-    </InfoLinkWithModal>
-  );
-};
-
-export default VMRebootConfigurationLinkWithModal;