@openshift-assisted/ui-lib 2.49.0 → 2.50.1

package/lib/common/components/hosts/tableUtils.tsx

@@ -1,414 +1,9 @@
 import * as React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import { Address4, Address6 } from 'ip-address';
-import type {
-  Cluster,
-  Host,
-  HostUpdateParams,
-  Interface,
-} from '@openshift-assisted/types/assisted-installer-service';
-import type { ValidationsInfo as HostValidationsInfo } from '../../types/hosts';
-import { getSubnet } from '../clusterConfiguration';
-import { DASH } from '../constants';
-import { getDateTimeCell } from '../ui';
-import { ActionsResolver, TableRow } from './AITable';
-import { getHostRowHardwareInfo } from './hardwareInfo';
-import Hostname from './Hostname';
-import HostPropertyValidationPopover from './HostPropertyValidationPopover';
-import HostsCount from './HostsCount';
-import { HostsTableActions } from './types';
-import HostStatus from './HostStatus';
-import RoleCell from './RoleCell';
-import {
-  areOnlySoftValidationsFailing,
-  getHostLabels,
-  getHostname,
-  getHostRole,
-  getHostStatus,
-  getInventory,
-} from './utils';
-import { selectMachineNetworkCIDR } from '../../selectors/clusterSelectors';
-import { hostStatus } from './status';
 import { TFunction } from 'i18next';
-import { stringToJSON } from '../../utils';
-
-export const getSelectedNic = (nics: Interface[], currentSubnet: Address4 | Address6) => {
-  return nics.find((nic) => {
-    const ipv4Addresses = (nic.ipv4Addresses || []).reduce<Address4[]>((addresses, address) => {
-      if (Address4.isValid(address)) {
-        addresses.push(new Address4(address));
-      }
-      return addresses;
-    }, []);
-
-    if (ipv4Addresses.find((address) => address.isInSubnet(currentSubnet))) {
-      return true;
-    }
-
-    const ipv6Addresses = (nic.ipv6Addresses || []).reduce<Address6[]>((addresses, address) => {
-      if (Address6.isValid(address)) {
-        addresses.push(new Address6(address));
-      }
-      return addresses;
-    }, []);
-
-    return ipv6Addresses.find((address) => address.isInSubnet(currentSubnet));
-  });
-};
-
-export const hostnameColumn = (
-  t: TFunction,
-  onEditHostname?: HostsTableActions['onEditHost'],
-  hosts?: Host[],
-  canEditHostname?: HostsTableActions['canEditHostname'],
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Hostname'),
-      props: {
-        id: 'col-header-hostname', // ACM jest tests require id over testId
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const inventory = getInventory(host);
-      const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
-      const computedHostname = getHostname(host, inventory);
-      return {
-        title: (
-          <Hostname
-            host={host}
-            inventory={inventory}
-            onEditHostname={editHostname}
-            hosts={hosts}
-            readonly={canEditHostname ? !canEditHostname(host) : false}
-          />
-        ),
-        props: { 'data-testid': 'host-name' },
-        sortableValue: computedHostname || '',
-      };
-    },
-  };
-};
-
-export const roleColumn = (
-  t: TFunction,
-  canEditRole?: HostsTableActions['canEditRole'],
-  onEditRole?: HostsTableActions['onEditRole'],
-  schedulableMasters?: boolean,
-  clusterKind?: Cluster['kind'],
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Role'),
-      props: {
-        id: 'col-header-role',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const editRole = onEditRole
-        ? (role: HostUpdateParams['hostRole']) => onEditRole(host, role)
-        : undefined;
-      const isRoleEditable = canEditRole?.(host);
-      const hostRole = getHostRole(host, t, schedulableMasters, clusterKind);
-      return {
-        title: (
-          <RoleCell host={host} readonly={!isRoleEditable} role={hostRole} onEditRole={editRole} />
-        ),
-        props: { 'data-testid': 'host-role' },
-        sortableValue: hostRole,
-      };
-    },
-  };
-};
-
-export const statusColumn = (
-  t: TFunction,
-  clusterStatus: Cluster['status'],
-  AdditionalNTPSourcesDialogToggleComponent?: React.FC,
-  onEditHostname?: HostsTableActions['onEditHost'],
-  UpdateDay2ApiVipDialogToggleComponent?: React.FC,
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Status'),
-      props: {
-        id: 'col-header-status',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
-      const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
-      const sublabel =
-        areOnlySoftValidationsFailing(validationsInfo) &&
-        ['known', 'known-unbound'].includes(host.status)
-          ? t('ai:Some validations failed')
-          : undefined;
-
-      const actualHostStatus = getHostStatus(host.status, clusterStatus);
-
-      return {
-        title: (
-          <HostStatus
-            host={host}
-            status={{ ...hostStatus(t)[actualHostStatus], sublabel }}
-            onEditHostname={editHostname}
-            validationsInfo={validationsInfo}
-            AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggleComponent}
-            UpdateDay2ApiVipDialogToggleComponent={UpdateDay2ApiVipDialogToggleComponent}
-          />
-        ),
-        props: { 'data-testid': 'host-status' },
-        sortableValue: host.status,
-      };
-    },
-  };
-};
-
-export const discoveredAtColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Discovered on'),
-    props: {
-      id: 'col-header-discoveredat',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const { createdAt } = host;
-    const dateTimeCell = getDateTimeCell(createdAt);
-    return {
-      title: dateTimeCell.title,
-      props: { 'data-testid': 'host-discovered-time' },
-      sortableValue: dateTimeCell.sortableValue,
-    };
-  },
-});
-
-export const cpuArchitectureColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:CPU Architecture'),
-    props: {
-      id: 'col-header-cpuarchitecture',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    return {
-      title: inventory.cpu?.architecture,
-      props: { 'data-testid': 'host-cpu-architecture' },
-      sortableValue: inventory.cpu?.architecture,
-    };
-  },
-});
-
-export const cpuCoresColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:CPU Cores'),
-    props: {
-      id: 'col-header-cpucores',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const { cores } = getHostRowHardwareInfo(inventory);
-    const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
-    const cpuCoresValidation = validationsInfo?.hardware?.find(
-      (v) => v.id === 'has-cpu-cores-for-role',
-    );
-    return {
-      title: (
-        <HostPropertyValidationPopover validation={cpuCoresValidation}>
-          {cores.title}
-        </HostPropertyValidationPopover>
-      ),
-      props: { 'data-testid': 'host-cpu-cores' },
-      sortableValue: cores.sortableValue,
-    };
-  },
-});
-
-export const memoryColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Memory'),
-    props: {
-      id: 'col-header-memory',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const { memory } = getHostRowHardwareInfo(inventory);
-    const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
-    const memoryValidation = validationsInfo?.hardware?.find((v) => v.id === 'has-memory-for-role');
-    return {
-      title: (
-        <HostPropertyValidationPopover validation={memoryValidation}>
-          {memory.title}
-        </HostPropertyValidationPopover>
-      ),
-      props: { 'data-testid': 'host-memory' },
-      sortableValue: memory.sortableValue,
-    };
-  },
-});
-
-export const disksColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Total storage'),
-    props: {
-      id: 'col-header-disk',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const { disk } = getHostRowHardwareInfo(inventory);
-    const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
-    const diskValidation = validationsInfo?.hardware?.find((v) => v.id === 'has-min-valid-disks');
-    return {
-      title: (
-        <HostPropertyValidationPopover validation={diskValidation}>
-          {disk.title}
-        </HostPropertyValidationPopover>
-      ),
-      props: { 'data-testid': 'host-disks' },
-      sortableValue: disk.sortableValue,
-    };
-  },
-});
-
-export const gpusColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:GPUs'),
-    props: {
-      id: 'col-header-gpus',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const { gpus } = getInventory(host);
-    return {
-      title: <>{gpus?.length ?? '--'}</>,
-      props: { 'data-testid': 'host-gpus' },
-      sortableValue: gpus?.length ?? 0,
-    };
-  },
-});
-
-export const countColumn = (cluster: Cluster): TableRow<Host> => ({
-  header: { title: <HostsCount cluster={cluster} inParenthesis /> },
-});
-
-export const activeNICColumn = (cluster: Cluster, t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Active NIC'),
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const nics = inventory.interfaces || [];
-    const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
-    const currentSubnet = machineNetworkCidr ? getSubnet(machineNetworkCidr) : null;
-    const selectedNic = currentSubnet ? getSelectedNic(nics, currentSubnet) : null;
-    return {
-      title: selectedNic?.name || DASH,
-      props: { 'data-testid': 'nic-name' },
-      sortableValue: selectedNic?.name || DASH,
-    };
-  },
-});
-
-export const ipv4Column = (cluster: Cluster): TableRow<Host> => ({
-  header: {
-    title: 'IPv4 address',
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const nics = inventory.interfaces || [];
-
-    const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
-    const currentSubnet = machineNetworkCidr ? getSubnet(machineNetworkCidr) : null;
-    const selectedNic = currentSubnet ? getSelectedNic(nics, currentSubnet) : null;
-    return {
-      title: (selectedNic?.ipv4Addresses || []).join(', ') || DASH,
-      props: { 'data-testid': 'nic-ipv4' },
-      sortableValue: (selectedNic?.ipv4Addresses || []).join(', ') || DASH,
-    };
-  },
-});
-
-export const ipv6Column = (cluster: Cluster): TableRow<Host> => ({
-  header: {
-    title: 'IPv6 address',
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const nics = inventory.interfaces || [];
-
-    const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
-    const currentSubnet = machineNetworkCidr ? getSubnet(machineNetworkCidr) : null;
-    const selectedNic = currentSubnet ? getSelectedNic(nics, currentSubnet) : null;
-    return {
-      title: (selectedNic?.ipv6Addresses || []).join(', ') || DASH,
-      props: { 'data-testid': 'nic-ipv6' },
-      sortableValue: (selectedNic?.ipv6Addresses || []).join(', ') || DASH,
-    };
-  },
-});
-
-export const macAddressColumn = (cluster: Cluster): TableRow<Host> => ({
-  header: {
-    title: 'MAC address',
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const nics = inventory.interfaces || [];
-
-    const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
-    const currentSubnet = machineNetworkCidr ? getSubnet(machineNetworkCidr) : null;
-    const selectedNic = currentSubnet ? getSelectedNic(nics, currentSubnet) : null;
-    return {
-      title: selectedNic?.macAddress || DASH,
-      props: { 'data-testid': 'nic-mac-address' },
-      sortableValue: selectedNic?.macAddress || DASH,
-    };
-  },
-});
-
-export const labelsColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Labels'),
-    props: {
-      id: 'col-header-labels',
-    },
-    sort: false,
-  },
-  cell: (host) => {
-    const labels = getHostLabels(host);
-    return {
-      title:
-        Object.entries(labels).length > 0 ? (
-          <LabelGroup>
-            {Object.entries(labels).map(([key, value], index) => (
-              <Label key={`${host.id}-host-label-${index}`} isCompact>
-                {key} = {value}
-              </Label>
-            ))}
-          </LabelGroup>
-        ) : (
-          '--'
-        ),
-      props: { 'data-testid': 'host-labels' },
-    };
-  },
-});
+import type { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { ActionsResolver } from './AITable';
+import { HostsTableActions } from './types';
+import { getHostname, getInventory } from './utils';
 
 const ActionTitle: React.FC<{ disabled: boolean; description?: string; title: string }> = ({
   title,

package/lib/common/components/hosts/types.ts

@@ -91,5 +91,6 @@ export type HostStatusProps = AdditionNtpSourcePropsType &
     zIndex?: number;
     autoCSR?: boolean;
     additionalPopoverContent?: React.ReactNode;
+    additionalBMHInfo?: React.ReactNode;
     openshiftVersion?: string;
   };

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

@@ -39,7 +39,9 @@ const diskColumns = (t: TFunction, showFormat: boolean) =>
       title: (
         <>
           WWN{' '}
-          <PopoverIcon bodyContent={t('ai:World Wide Name (WWN) is a unique disk identifier.')} />
+          <PopoverIcon
+            bodyContent={t<string>('ai:World Wide Name (WWN) is a unique disk identifier.')}
+          />
         </>
       ),
     },

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

@@ -115,10 +115,12 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {labelGroupContentRef &&
-            labelGroupContentRef.current !== null &&
-            labelGroupContentRef.current.firstElementChild !== null &&
-            ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
+          {labelGroupContentRef?.current?.firstElementChild
+            ? (ReactDOM.createPortal(
+                labelGroup,
+                labelGroupContentRef.current.firstElementChild,
+              ) as React.ReactElement)
+            : null}
         </React.Fragment>
       );
     }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Label } from '@patternfly/react-core';
+import { Button, ButtonVariant, Content, Label } from '@patternfly/react-core';
 import { Table, TableText, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
@@ -71,7 +71,9 @@ const EventsList = ({ events, resetFilters }: EventsListProps) => {
       {
         title: (
           <TableText wrapModifier="fitContent" cellPadding={0}>
-            <strong>{getHumanizedDateTime(event.eventTime)}</strong>
+            <Content className="pf-v6-u-font-weight-bold">
+              {getHumanizedDateTime(event.eventTime)}
+            </Content>
           </TableText>
         ),
       },

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

@@ -4,6 +4,8 @@ import React from 'react';
  * This component allows to maintain grid gap behaviour of PF Form by wrapping
  * FormGroup components which are inside of Grid
  */
-const GridGap: React.FC = (props) => <div {...props} className="pf-v6-c-form" />;
+const GridGap: React.FC<React.PropsWithChildren> = (props) => (
+  <div {...props} className="pf-v6-c-form" />
+);
 
 export default GridGap;

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { SelectOptionProps } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { OpenshiftVersionOptionType } from '../../types';
 import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useTranslation } from '../../hooks';
 import { SelectFieldWithSearch } from './formik';
 import { ClusterDetailsValues } from '../clusterWizard';
+import { getVersionLabel } from './utils';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
@@ -19,62 +19,41 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
   const { t } = useTranslation();
   const [{ value }] =
     useField<ClusterDetailsValues['customOpenshiftSelect']>('customOpenshiftSelect');
-  const initialSelectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        children:
-          version.supportLevel === 'beta'
-            ? version.label + ' - ' + 'Developer preview release'
-            : version.label,
-        value: version.value,
-      })),
-    [versions],
-  );
 
   const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] =
-    React.useState<SelectOptionProps[]>(initialSelectOptions);
-
-  const helperText = getHelperText && getHelperText(value, true);
-
-  React.useEffect(() => {
-    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
-    // Filter menu items based on the text input value when one exists
-    if (filterValue) {
-      newSelectOptions = initialSelectOptions.filter((menuItem) =>
-        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase()),
+  const selectOptions = React.useMemo(() => {
+    const options = versions
+      .map((version) => ({
+        children: getVersionLabel(version, t),
+        value: version.value,
+      }))
+      .filter((v) =>
+        filterValue ? String(v.children).toLowerCase().includes(filterValue.toLowerCase()) : true,
       );
 
-      // When no options are found after filtering, display 'No results found'
-      if (!newSelectOptions.length) {
-        newSelectOptions = [
-          {
-            isDisabled: true,
-            children: t('ai:No results found for {{filter}}', { filter: filterValue }),
-            value: 'no_results',
-          },
-        ];
-      }
+    if (!options.length) {
+      return [
+        {
+          isDisabled: true,
+          children: t('ai:No results found for {{filter}}', { filter: filterValue }),
+          value: 'no_results',
+        },
+      ];
     }
-
-    const selectOptionsWithDividers = newSelectOptions.map((option, index) => {
-      const match = (option.value as string).match(/\d+\.(\d+)\.\d+/);
+    return options.map((option, index) => {
+      const match = option.value.match(/\d+\.(\d+)\.\d+/);
       const y = match ? match[1] : null;
 
       const previousY =
-        index > 0
-          ? ((newSelectOptions[index - 1].value as string).match(/\d+\.(\d+)\.\d+/) || [])[1]
-          : null;
+        index > 0 ? (options[index - 1].value.match(/\d+\.(\d+)\.\d+/) || [])[1] : null;
 
       return {
         ...option,
         showDivider: previousY !== null && y !== previousY,
       };
     });
-
-    setSelectOptions(selectOptionsWithDividers);
-  }, [filterValue, initialSelectOptions, t]);
+  }, [filterValue, versions, t]);
 
   return (
     <SelectFieldWithSearch
@@ -83,7 +62,7 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
       setFilterValue={setFilterValue}
       name={'customOpenshiftSelect'}
       helperText={
-        helperText ??
+        getHelperText?.(value, true) ??
         t(
           'ai:Select an OpenShift version from the list or use the type ahead to narrow down the list.',
         )