@openshift-assisted/ui-lib 2.55.2 → 2.56.1

package/lib/common/components/storage/DiskLimitations.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  ButtonVariant,
+  List,
+  ListItem,
+  Popover,
+} from '@patternfly/react-core';
+import { Disk } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../hooks';
+
+type DiskLimitationsPopoverContentProps = {
+  eligible?: boolean;
+  notEligibleReasons?: string[];
+};
+
+const DiskLimitationsPopoverContent: React.FC<DiskLimitationsPopoverContentProps> = ({
+  eligible,
+  notEligibleReasons,
+}) => {
+  const alerts = [];
+  const { t } = useTranslation();
+  if (!eligible) {
+    alerts.push(
+      <Alert
+        key="install-eligibility"
+        variant={AlertVariant.warning}
+        title={t('ai:Disk is not eligible for installation')}
+        isInline
+      >
+        {notEligibleReasons && (
+          <List>
+            {notEligibleReasons.map((reason: string) => (
+              <ListItem key={reason}>{reason}</ListItem>
+            ))}
+          </List>
+        )}
+      </Alert>,
+    );
+  }
+  return <>{alerts}</>;
+};
+
+type DiskLimitationsProps = {
+  disk: Disk;
+};
+
+export const DiskLimitations: React.FC<DiskLimitationsProps> = ({ disk }) => {
+  if (!disk.installationEligibility?.eligible) {
+    const limitationsCount = disk.installationEligibility?.notEligibleReasons?.length || 0;
+    return (
+      <Popover
+        headerContent={<div>Disk limitations</div>}
+        bodyContent={<DiskLimitationsPopoverContent {...disk.installationEligibility} />}
+        minWidth="30rem"
+        maxWidth="50rem"
+      >
+        <Button variant={ButtonVariant.link} isInline>
+          {limitationsCount}
+        </Button>
+      </Popover>
+    );
+  }
+  return null;
+};

package/lib/common/components/storage/DiskRole.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { TFunction } from 'i18next';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import {
+  Disk,
+  DiskRole as DiskRoleValue,
+  Host,
+} from '@openshift-assisted/types/assisted-installer-service';
+import { useStateSafely, useTranslation } from '../../hooks';
+import { diskRoleLabels } from '../../config';
+import { OnDiskRoleType } from '../hosts';
+
+export const getCurrentDiskRoleLabel = (
+  disk: Disk,
+  installationDiskId: Host['installationDiskId'],
+  t: TFunction,
+) => (disk.id === installationDiskId ? diskRoleLabels(t).install : diskRoleLabels(t).none);
+
+export type DiskRoleProps = {
+  host: Host;
+  disk: Disk;
+  installationDiskId: Host['installationDiskId'];
+  isEditable: boolean;
+  onDiskRole?: OnDiskRoleType;
+};
+
+export const DiskRole: React.FC<DiskRoleProps> = ({
+  host,
+  disk,
+  installationDiskId,
+  isEditable,
+  onDiskRole,
+}) => {
+  const { t } = useTranslation();
+  const currentRoleLabel = getCurrentDiskRoleLabel(disk, installationDiskId, t);
+  if (isEditable && disk.id !== installationDiskId && onDiskRole) {
+    return (
+      <DiskRoleDropdown
+        host={host}
+        disk={disk}
+        installationDiskId={installationDiskId}
+        onDiskRole={onDiskRole}
+      />
+    );
+  }
+  return <>{currentRoleLabel}</>;
+};
+
+type DiskRoleDropdownProps = {
+  host: Host;
+  disk: Disk;
+  installationDiskId: Host['installationDiskId'];
+  onDiskRole: OnDiskRoleType;
+};
+
+const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
+  host,
+  disk,
+  installationDiskId,
+  onDiskRole,
+}) => {
+  const [isOpen, setOpen] = useStateSafely(false);
+  const [isDisabled, setDisabled] = useStateSafely(false);
+  const { t } = useTranslation();
+  const dropdownItems = [
+    <DropdownItem
+      key="install"
+      id="install"
+      isDisabled={!disk.installationEligibility?.eligible}
+      description={
+        !disk.installationEligibility?.eligible && t('ai:Disk is not eligible for installation')
+      }
+    >
+      {diskRoleLabels(t).install}
+    </DropdownItem>,
+  ];
+
+  const onSelect = React.useCallback(
+    (event?: React.MouseEvent<Element, MouseEvent>) => {
+      const asyncFunc = async () => {
+        if (event?.currentTarget.id) {
+          setDisabled(true);
+          await onDiskRole(host.id, disk.id, event.currentTarget.id as DiskRoleValue);
+          setDisabled(false);
+        }
+        setOpen(false);
+      };
+      void asyncFunc();
+    },
+    [setOpen, setDisabled, onDiskRole, host.id, disk.id],
+  );
+
+  const currentRoleLabel = getCurrentDiskRoleLabel(disk, installationDiskId, t);
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      variant="plainText"
+      ref={toggleRef}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      data-testid="disk-role-dropdown-toggle"
+    >
+      {currentRoleLabel}
+    </MenuToggle>
+  );
+
+  return (
+    <Dropdown
+      onOpenChange={() => setOpen(!isOpen)}
+      onSelect={onSelect}
+      toggle={toggle}
+      isOpen={isOpen}
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
+  );
+};

package/lib/common/components/storage/DisksTable.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TFunction } from 'i18next';
 import {
   Content,
   ContentVariants,
@@ -8,20 +9,19 @@ import {
   Icon,
 } from '@patternfly/react-core';
 import { TableVariant, Thead, Tbody, Table, Th, Tr, Td } from '@patternfly/react-table';
-import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
-import type { WithTestID } from '../../types/index';
-import DiskRole, { OnDiskRoleType } from '../hosts/DiskRole';
-import DiskLimitations from '../hosts/DiskLimitations';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
-import FormatDiskCheckbox, {
-  DiskFormattingType,
-  isInDiskSkipFormattingList,
-} from '../hosts/FormatDiskCheckbox';
+import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
+import { WithTestID } from '../../types';
 import { fileSize } from '../../utils';
+import { useTranslation } from '../../hooks';
+import { OnDiskRoleType } from '../hosts';
 import { PopoverIcon } from '../ui';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { TFunction } from 'i18next';
+import { FormatDiskCheckbox } from './FormatDiskCheckbox';
+import { DiskLimitations } from './DiskLimitations';
+import { getDiskLimitation, isInDiskSkipFormattingList } from './utils';
+import { DiskRole } from './DiskRole';
+import { DiskFormattingType } from './types';
 
 interface DisksTableProps extends WithTestID {
   canEditDisks?: (host: Host) => boolean;
@@ -58,31 +58,6 @@ const SkipFormattingDisk = () => (
   <Content component={ContentVariants.p}>This bootable disk will skip formatting</Content>
 );
 
-const getDiskLimitation = (
-  diskName: Disk['name'],
-  hostName: Host['requestedHostname'],
-  holder: Disk,
-) => {
-  if (holder.driveType) {
-    switch (holder.driveType) {
-      case 'LVM':
-        return `LVM logical volumes were found on the installation disk ${
-          diskName as string
-        } selected for host ${hostName as string} and will be deleted during installation.`;
-      case 'RAID':
-        return `The installation disk ${diskName as string} selected for host ${
-          hostName as string
-        }, is part of a software RAID that will be deleted during the installation.`;
-      case 'Multipath':
-        return `The installation disk ${diskName as string} selected for host ${
-          hostName as string
-        } is managed by multipath. We strongly recommend using the multipath device ${
-          holder.name as string
-        } to improve reliability.`;
-    }
-  }
-};
-
 const DiskName = ({
   disk,
   disks,
@@ -136,7 +111,7 @@ const DiskName = ({
   );
 };
 
-const DisksTable = ({
+export const DisksTable = ({
   canEditDisks,
   host,
   disks,
@@ -233,5 +208,3 @@ const DisksTable = ({
     </Table>
   );
 };
-
-export { DisksTable, getDiskLimitation };

package/lib/common/components/storage/FormatDiskCheckbox.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Checkbox, Tooltip } from '@patternfly/react-core';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { DiskFormattingType } from './types';
+import { isFormatDiskChecked, isFormatDiskDisabled } from './utils';
+
+type FormatDiskProps = {
+  host: Host;
+  index: number;
+  updateDiskSkipFormatting?: DiskFormattingType;
+  diskId?: string;
+  installationDiskId?: string;
+};
+
+const onSelectFormattingDisk = (
+  shouldFormatDisk: boolean,
+  hostId: string,
+  diskId?: string,
+  updateDiskSkipFormatting?: DiskFormattingType,
+) => {
+  updateDiskSkipFormatting ? updateDiskSkipFormatting(shouldFormatDisk, hostId, diskId) : '';
+};
+
+export const FormatDiskCheckbox = ({
+  host,
+  diskId,
+  installationDiskId,
+  index,
+  updateDiskSkipFormatting,
+}: FormatDiskProps) => {
+  return (
+    <Tooltip
+      hidden={!isFormatDiskDisabled(host, diskId, installationDiskId)}
+      content={
+        isFormatDiskChecked(host, diskId, installationDiskId)
+          ? 'Installation disks are always being formatted.'
+          : 'This disk is not bootable and will not be formatted.'
+      }
+    >
+      <Checkbox
+        id={`select-formatted-${host.id}-${index}`}
+        isChecked={isFormatDiskChecked(host, diskId, installationDiskId)}
+        isDisabled={isFormatDiskDisabled(host, diskId, installationDiskId)}
+        onChange={(_event, checked: boolean) =>
+          onSelectFormattingDisk(checked, host.id, diskId, updateDiskSkipFormatting)
+        }
+      />
+    </Tooltip>
+  );
+};

package/lib/common/components/storage/StorageDetail.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
-import { getInventory } from '../../index';
-import { OnDiskRoleType } from '../hosts/DiskRole';
-import { DiskFormattingType } from '../hosts/FormatDiskCheckbox';
-import { DisksTable } from './DisksTable';
-import SectionTitle from '../ui/SectionTitle';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { useTranslation } from '../../hooks';
+import { getInventory } from '../hosts/utils';
+import { OnDiskRoleType } from '../hosts/HostsTableDetailContext';
+import { SectionTitle } from '../ui';
+import { DisksTable } from './DisksTable';
+import { DiskFormattingType } from './types';
 
 type StorageDetailProps = {
   host: Host;
@@ -15,7 +15,7 @@ type StorageDetailProps = {
   updateDiskSkipFormatting?: DiskFormattingType;
 };
 
-const StorageDetail = ({
+export const StorageDetail = ({
   host,
   canEditDisks,
   onDiskRole,
@@ -46,5 +46,3 @@ const StorageDetail = ({
     </Grid>
   );
 };
-
-export default StorageDetail;

package/lib/common/components/storage/index.tsx

@@ -0,0 +1,3 @@
+export * from './DisksTable';
+export * from './StorageDetail';
+export * from './utils';

package/lib/common/components/storage/types.tsx

@@ -0,0 +1,7 @@
+import { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
+
+export type DiskFormattingType = (
+  shouldFormatDisk: boolean,
+  hostId: Host['id'],
+  diskId: Disk['id'],
+) => void;

package/lib/common/components/storage/utils.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { Popover, Content, ContentVariants, Icon } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+
+import { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
+import { getInventory } from '../hosts/utils';
+import type { TableRow } from '../hosts/AITable';
+import { trimCommaSeparatedList } from '../ui';
+
+export const numberOfDisksColumn: TableRow<Host> = {
+  header: {
+    title: 'Number of disks',
+    props: {
+      id: 'col-header-num-disks',
+    },
+    sort: true,
+  },
+  cell: (host) => {
+    const inventory = getInventory(host);
+    const disks = inventory.disks || [];
+    return {
+      title: (
+        <>
+          {' '}
+          {disks.length}
+          {'   '}
+          {host.skipFormattingDisks && (
+            <Popover
+              bodyContent={
+                <Content component={ContentVariants.p}>
+                  Some bootable disks will skip formatting
+                </Content>
+              }
+              minWidth="20rem"
+              maxWidth="30rem"
+            >
+              <Icon size="sm" status="warning">
+                <ExclamationTriangleIcon />
+              </Icon>
+            </Popover>
+          )}
+        </>
+      ),
+      props: { 'data-testid': 'disk-number' },
+      sortableValue: disks.length,
+    };
+  },
+};
+
+export const odfUsageColumn = (excludeMasters: boolean): TableRow<Host> => {
+  return {
+    header: {
+      title: 'ODF Usage',
+      props: {
+        id: 'col-header-odf',
+      },
+      sort: true,
+    },
+    cell: (host) => {
+      const isMaster = host.role === 'master' || host.suggestedRole === 'master';
+      const isExcluded = excludeMasters && isMaster;
+      return {
+        title: isExcluded ? (
+          <div
+            style={{
+              color: 'var(--pf-t--global--icon--color--disabled)',
+            }}
+          >
+            Excluded for ODF
+          </div>
+        ) : (
+          'Use ODF'
+        ),
+        props: { 'data-testid': 'use-odf' },
+        sortableValue: Number(isExcluded),
+      };
+    },
+  };
+};
+
+export const getDiskLimitation = (
+  diskName: Disk['name'],
+  hostName: Host['requestedHostname'],
+  holder: Disk,
+) => {
+  if (holder.driveType) {
+    switch (holder.driveType) {
+      case 'LVM':
+        return `LVM logical volumes were found on the installation disk ${
+          diskName as string
+        } selected for host ${hostName as string} and will be deleted during installation.`;
+      case 'RAID':
+        return `The installation disk ${diskName as string} selected for host ${
+          hostName as string
+        }, is part of a software RAID that will be deleted during the installation.`;
+      case 'Multipath':
+        return `The installation disk ${diskName as string} selected for host ${
+          hostName as string
+        } is managed by multipath. We strongly recommend using the multipath device ${
+          holder.name as string
+        } to improve reliability.`;
+    }
+  }
+};
+
+export const isInstallationDisk = (diskId?: string, installationDiskId?: string) =>
+  diskId === installationDiskId;
+
+export const isInDiskSkipFormattingList = (host: Host, diskId: string | undefined) => {
+  return (
+    trimCommaSeparatedList(host.skipFormattingDisks ? host.skipFormattingDisks : '')
+      .split(',')
+      .filter((diskSkipFormatting) => diskSkipFormatting === diskId).length > 0
+  );
+};
+
+export const isInDiskToBeFormattedList = (host: Host, diskId: string | undefined) => {
+  return (
+    trimCommaSeparatedList(host.disksToBeFormatted ? host.disksToBeFormatted : '')
+      .split(',')
+      .filter((diskToBeFormatted) => diskToBeFormatted === diskId).length > 0
+  );
+};
+
+export const isInvalidInstallationDisk = (
+  host: Host,
+  diskId: string | undefined,
+  installationDiskId: Host['installationDiskId'],
+) => {
+  // If it's an installation disk that somehow is set to skip formatting, enable the checkbox to let the user fix it
+  if (isInstallationDisk(diskId, installationDiskId)) {
+    return isInDiskSkipFormattingList(host, diskId);
+  }
+  return false;
+};
+
+export const isFormatDiskChecked = (
+  host: Host,
+  diskId: string | undefined,
+  installationDiskId: Host['installationDiskId'],
+) => {
+  if (isInstallationDisk(diskId, installationDiskId)) {
+    return !isInDiskSkipFormattingList(host, diskId);
+  }
+  return isInDiskToBeFormattedList(host, diskId) && !isInDiskSkipFormattingList(host, diskId);
+};
+
+export const isFormatDiskDisabled = (
+  host: Host,
+  diskId: string | undefined,
+  installationDiskId: Host['installationDiskId'],
+) => {
+  if (isInstallationDisk(diskId, installationDiskId)) {
+    // If it's an installation disk that somehow is set to skip formatting, enable the checkbox to let the user fix it
+    return !isInvalidInstallationDisk(host, diskId, installationDiskId);
+  }
+  return !isInDiskToBeFormattedList(host, diskId);
+};

package/lib/common/components/ui/ConfirmationModal.tsx

@@ -21,7 +21,7 @@ type ConfirmationModalProps = {
   onConfirm: () => void;
 };
 
-const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   title,
   titleIconVariant,
   content,
@@ -51,5 +51,3 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
     </Modal>
   );
 };
-
-export default ConfirmationModal;

package/lib/common/components/ui/SectionTitle.tsx

@@ -6,12 +6,10 @@ interface SectionTitleProps extends WithTestID {
   title: string;
 }
 
-const SectionTitle = ({ title, testId }: SectionTitleProps) => (
+export const SectionTitle = ({ title, testId }: SectionTitleProps) => (
   <GridItem>
     <Content data-testid={testId} component={ContentVariants.h3}>
       {title}
     </Content>
   </GridItem>
 );
-
-export default SectionTitle;

package/lib/common/components/ui/ViewClusterEventsButton.tsx

@@ -11,7 +11,7 @@ type ViewClusterEventsProps = {
   onFetchEvents: EventListFetchProps['onFetchEvents'];
 };
 
-const ViewClusterEventsButton = ({ cluster, onFetchEvents }: ViewClusterEventsProps) => {
+export const ViewClusterEventsButton = ({ cluster, onFetchEvents }: ViewClusterEventsProps) => {
   const { t } = useTranslation();
   return (
     <EventsModalButton
@@ -27,5 +27,3 @@ const ViewClusterEventsButton = ({ cluster, onFetchEvents }: ViewClusterEventsPr
     </EventsModalButton>
   );
 };
-
-export default ViewClusterEventsButton;

package/lib/common/components/ui/WizardFooter.tsx

@@ -14,7 +14,7 @@ import {
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { EventListFetchProps } from '../../types/events';
-import ViewClusterEventsButton from './ViewClusterEventsButton';
+import { ViewClusterEventsButton } from './ViewClusterEventsButton';
 
 export type WizardFooterGenericProps = {
   onNext?: () => void;

package/lib/common/components/ui/formik/AdditionalNTPSourcesField.tsx

@@ -11,7 +11,7 @@ type AdditionalNTPSourcesFieldProps = {
   helperText?: string;
 };
 
-const AdditionalNTPSourcesField: React.FC<AdditionalNTPSourcesFieldProps> = ({
+export const AdditionalNTPSourcesField: React.FC<AdditionalNTPSourcesFieldProps> = ({
   name,
   label,
   isRequired,
@@ -37,5 +37,3 @@ const AdditionalNTPSourcesField: React.FC<AdditionalNTPSourcesFieldProps> = ({
     />
   );
 };
-
-export default AdditionalNTPSourcesField;

package/lib/common/components/ui/formik/CertificatesUploadField.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useField } from 'formik';
+import { FileRejection } from 'react-dropzone';
 import {
   FormGroup,
   FileUpload,
@@ -7,14 +9,12 @@ import {
   HelperTextItem,
   DropEvent,
 } from '@patternfly/react-core';
-import { UploadFieldProps } from './types';
-import { getFieldId } from './utils';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
-import { useField } from 'formik';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { FileRejection } from 'react-dropzone';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+import { getFieldId } from './utils';
+import { UploadFieldProps } from './types';
 
-const CertificatesUploadField: React.FC<React.PropsWithChildren<UploadFieldProps>> = ({
+export const CertificatesUploadField: React.FC<React.PropsWithChildren<UploadFieldProps>> = ({
   label,
   labelIcon,
   helperText,
@@ -135,5 +135,3 @@ const CertificatesUploadField: React.FC<React.PropsWithChildren<UploadFieldProps
     </FormGroup>
   );
 };
-
-export default CertificatesUploadField;

package/lib/common/components/ui/formik/SelectFieldWithSearch.tsx

@@ -38,6 +38,7 @@ const SelectFieldWithSearch = ({
   isLoading = false,
   placeholder,
   helperText,
+  onClear,
 }: {
   selectOptions: (SelectOptionProps & { showDivider?: boolean })[];
   filterValue: string;
@@ -46,6 +47,7 @@ const SelectFieldWithSearch = ({
   isLoading?: boolean;
   placeholder?: string;
   helperText?: React.ReactNode;
+  onClear?: VoidFunction;
 } & FieldProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [{ value }, , { setValue }] = useField<unknown | unknown[]>(name);
@@ -185,6 +187,7 @@ const SelectFieldWithSearch = ({
 
   const onClearButtonClick = () => {
     setFilterValue('');
+    onClear?.();
     resetActiveAndFocusedItem();
     textInputRef?.current?.focus();
   };

package/lib/common/components/ui/formik/index.tsx

@@ -12,7 +12,6 @@ export { default as RadioField } from './RadioField';
 export { default as NumberInputField } from './NumberInputField';
 export { default as CodeField } from './CodeField';
 export { default as RichInputField } from './RichInputField';
-export { default as AdditionalNTPSourcesField } from './AdditionalNTPSourcesField';
 export { default as RemovableField } from './RemovableField';
 export { default as AddButton } from './AddButton';
 export { default as PencilEditField } from './PencilEditField';
@@ -22,3 +21,6 @@ export { default as SelectFieldWithSearch } from './SelectFieldWithSearch';
 export * from './utils';
 export * from './PullSecretField';
 export * from './LabelField';
+export * from './types';
+export * from './AdditionalNTPSourcesField';
+export * from './CertificatesUploadField';