@openshift-assisted/ui-lib 2.13.0-cim → 2.14.0-cim

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

@@ -0,0 +1,123 @@
+import React from 'react';
+import {
+  ActionsColumn,
+  ExpandableRowContent,
+  IAction,
+  InnerScrollContainer,
+  ISeparator,
+  ISortBy,
+  OnCollapse,
+  OnSort,
+  Table,
+  TableProps,
+  Tbody,
+  Td,
+  TdProps,
+  Th,
+  Thead,
+  ThProps,
+  Tr,
+} from '@patternfly/react-table';
+import classnames from 'classnames';
+
+import { WithTestID } from '../../types';
+import './HostsTable.css';
+
+export type ActionsResolver<R> = (obj: R) => (IAction | ISeparator)[];
+
+type TableMemoRowType = {
+  cells: { title: string | React.ReactNode; props?: Omit<TdProps, 'ref'> }[];
+  actions: IAction[];
+  nestedComponent?: React.ReactNode;
+  isOpen?: boolean;
+};
+
+export type TableMemoColType = {
+  title: string | React.ReactNode;
+  props?: Omit<ThProps, 'ref'>;
+  sort?: boolean;
+};
+
+export type TableMemoProps = {
+  rows: TableMemoRowType[];
+  cols: TableMemoColType[];
+  sortBy: ISortBy;
+  onSort: OnSort;
+  onCollapse?: OnCollapse;
+  className: TableProps['className'];
+  variant?: TableProps['variant'];
+} & WithTestID;
+
+export const AITableMemo = React.memo(
+  ({ rows, cols, onCollapse, className, variant, onSort, sortBy, testId }: TableMemoProps) => {
+    const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+      sortBy,
+      onSort,
+      columnIndex,
+    });
+
+    return (
+      <InnerScrollContainer>
+        <Table
+          aria-label="Hosts table"
+          className={classnames(className, 'hosts-table')}
+          data-testid={testId}
+          variant={variant}
+        >
+          <Thead>
+            <Tr>
+              {onCollapse && <Th />}
+              {cols.map((col, i) => (
+                <Th key={`col-${i}`} {...col.props} sort={col.sort ? getSortParams(i) : undefined}>
+                  {col.title}
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {rows.map((row, i) => (
+              <React.Fragment key={`row-wrapper-${i}`}>
+                <Tr key={`row-${i}`} data-testid={`host-row-${Number(i)}`}>
+                  {row.nestedComponent && (
+                    <Td
+                      expand={{
+                        rowIndex: i,
+                        isExpanded: !!row.isOpen,
+                        onToggle: onCollapse as OnCollapse,
+                      }}
+                    />
+                  )}
+
+                  {row.cells.map((cell, j) => (
+                    <Td key={`cell-${i}-${j}`} {...cell.props}>
+                      {cell.title}
+                    </Td>
+                  ))}
+
+                  {row.actions && (
+                    <Td isActionCell>
+                      <ActionsColumn
+                        items={row.actions}
+                        popperProps={{ appendTo: () => document.body, position: 'end' }}
+                      />
+                    </Td>
+                  )}
+                </Tr>
+
+                {row.nestedComponent && (
+                  <Tr key={`nested-row-${i}`} isExpanded={row.isOpen}>
+                    <Td colSpan={Object.keys(cols).length + 1}>
+                      <ExpandableRowContent>{row.nestedComponent}</ExpandableRowContent>
+                    </Td>
+                  </Tr>
+                )}
+              </React.Fragment>
+            ))}
+          </Tbody>
+        </Table>
+      </InnerScrollContainer>
+    );
+  },
+);
+
+AITableMemo.displayName = 'tableMemo';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import {
   Disk,
@@ -101,10 +101,10 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
   const toggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val) => setOpen(val)}
+        onToggle={(_event, val) => setOpen(val)}
         toggleIndicator={CaretDownIcon}
         isDisabled={isDisabled}
-        className="pf-c-button pf-m-link pf-m-inline"
+        className="pf-v5-c-button pf-m-link pf-m-inline"
       >
         {currentRoleLabel}
       </DropdownToggle>

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

@@ -99,7 +99,7 @@ const FormatDiskCheckbox = ({
         id={`select-formatted-${host.id}-${index}`}
         isChecked={isFormatDiskChecked(host, diskId, installationDiskId)}
         isDisabled={isFormatDiskDisabled(host, diskId, installationDiskId)}
-        onChange={(checked: boolean) =>
+        onChange={(_event, checked: boolean) =>
           onSelectFormattingDisk(checked, host.id, diskId, updateDiskSkipFormatting)
         }
       />

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import ExternalLink from '../ui/ExternalLink';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { fileSize } from '../../utils';
+import { HOST_REQUIREMENTS_LINK } from '../../config/docs_links';
 
 type HWRequirements = {
   cpuCores?: number;
@@ -75,9 +76,7 @@ export const HostRequirementsList: React.FC<HostRequirementsListProps> = ({
         {t(
           "ai:Also note that each host's disk write speed should meet the minimum requirements to run OpenShift. ",
         )}
-        <ExternalLink href={'https://access.redhat.com/solutions/4885641'}>
-          {t('ai:Learn more')}
-        </ExternalLink>
+        <ExternalLink href={HOST_REQUIREMENTS_LINK}>{t('ai:Learn more')}</ExternalLink>
       </ListItem>
     </List>
   );

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

@@ -1,15 +1,6 @@
 import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableVariant,
-  RowWrapperProps,
-  RowWrapper,
-  IRow,
-} from '@patternfly/react-table';
-import { ExtraParamsType } from '@patternfly/react-table/dist/js/components/Table/base';
+import { TableVariant, Tbody, Thead, Table, Th, Tr, Td } from '@patternfly/react-table';
 import { DetailItem, DetailList, DetailListProps } from '../ui';
 import type { Disk, Host, Interface } from '@openshift-assisted/types/assisted-installer-service';
 import type { ValidationsInfo } from '../../types/hosts';
@@ -63,16 +54,9 @@ const nicsColumns = (t: TFunction) => [
   // { title: 'Product' },
 ];
 
-// eslint-disable-next-line
-const nicsRowKey = ({ rowData }: ExtraParamsType) => rowData?.name?.title;
-
-const NICsTableRowWrapper = (props: RowWrapperProps) => (
-  <RowWrapper {...props} data-testid={`nic-row:${(props?.row?.key as string) || ''}`} />
-);
-
 const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }) => {
   const { t } = useTranslation();
-  const rows: IRow[] = interfaces
+  const rows = interfaces
     .sort((nicA, nicB) => nicA.name?.localeCompare(nicB.name || '') || 0)
     .map((nic) => ({
       cells: [
@@ -92,20 +76,33 @@ const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }
         },
       ],
       key: nic.name,
-    }));
+    })) as { cells: { title: string | React.ReactNode; props?: object }[]; key: string }[];
 
   return (
     <Table
       data-testid={testId}
-      rows={rows}
-      cells={nicsColumns(t)}
       variant={TableVariant.compact}
       aria-label={t("ai:Host's network interfaces table")}
       borders={false}
-      rowWrapper={NICsTableRowWrapper}
     >
-      <TableHeader />
-      <TableBody rowKey={nicsRowKey} />
+      <Thead>
+        <Tr>
+          {nicsColumns(t).map((col, i) => (
+            <Th key={`col-${i}`}>{col.title}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={`nic-row:${row.key}`}>
+            {row.cells?.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`} {...cell.props}>
+                {cell.title}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
     </Table>
   );
 };

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

@@ -6,16 +6,15 @@ import {
   TextContent,
   FlexItem,
   Flex,
-  ButtonProps,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
 import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
 import hdate from 'human-date';
 
-import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { Host, HostProgressInfo } from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationsInfo } from '../../types/hosts';
-import { ExternalLink, getHumanizedDateTime } from '../ui';
+import { ExternalLink, UiIcon, getHumanizedDateTime } from '../ui';
 
 import HostProgress from './HostProgress';
 import { getHostProgressStageNumber, getHostProgressStages } from './utils';
@@ -30,8 +29,9 @@ import { HostStatusProps } from './types';
 import { UpdateDay2ApiVipPropsType } from './HostValidationGroups';
 import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { APPROVE_NODES_IN_CL_LINK } from '../../config';
 import { hostStatus } from './status';
+import { getApproveNodesInClLink } from '../../config';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
 const getTitleWithProgress = (host: Host, status: HostStatusProps['status']) => {
   const stages = getHostProgressStages(host);
@@ -44,12 +44,14 @@ type HostStatusPopoverContentProps = ValidationInfoActionProps & {
   validationsInfo: ValidationsInfo;
   autoCSR?: boolean;
   additionalPopoverContent?: React.ReactNode;
+  openshiftVersion?: string;
 };
 
 const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   details,
   autoCSR,
   additionalPopoverContent,
+  openshiftVersion,
   ...props
 }) => {
   const { host } = props;
@@ -100,7 +102,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
             {t('ai:It may take a few minutes for the join request to appear.')}
             <br />
             {t('ai:If you prefer using the CLI, follow the instructions in')}&nbsp;
-            <ExternalLink href={APPROVE_NODES_IN_CL_LINK}>
+            <ExternalLink href={getApproveNodesInClLink(openshiftVersion)}>
               {t('ai:How to approve nodes using the CLI')}
             </ExternalLink>
           </>
@@ -184,11 +186,11 @@ type WithHostStatusPopoverProps = AdditionNtpSourcePropsType &
     onEditHostname: HostStatusPopoverContentProps['onEditHostname'];
     title: string;
     validationsInfo: ValidationsInfo;
-    isSmall?: ButtonProps['isSmall'];
     details?: string;
     zIndex?: number;
     autoCSR?: boolean;
     additionalPopoverContent?: React.ReactNode;
+    openshiftVersion?: string;
   };
 
 const WithHostStatusPopover: React.FC<WithHostStatusPopoverProps> = (props) => (
@@ -204,13 +206,36 @@ const WithHostStatusPopover: React.FC<WithHostStatusPopoverProps> = (props) => (
     maxWidth="50rem"
     hideOnOutsideClick={props.hideOnOutsideClick}
     zIndex={props.zIndex || 300}
+    closeBtnAriaLabel={`close-popover-${props.host.requestedHostname ?? ''}`}
   >
-    <Button variant={'link'} isInline isSmall={props.isSmall}>
+    <Button variant={'link'} isInline size="sm">
       {props.children}
     </Button>
   </Popover>
 );
 
+const getHostStatusIcon = (
+  icon: React.ReactNode,
+  progress: HostProgressInfo | undefined,
+  status: HostStatusProps['status'],
+) => {
+  if (progress?.stageTimedOut !== undefined && status.title !== 'Error') {
+    return (
+      <Popover
+        bodyContent={
+          <small>
+            Waiting for control plane has been active more than the expected completion time.
+          </small>
+        }
+        minWidth="20rem"
+        maxWidth="30rem"
+      >
+        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+      </Popover>
+    );
+  } else return icon;
+};
+
 const HostStatus: React.FC<HostStatusProps> = ({
   host,
   validationsInfo,
@@ -222,6 +247,7 @@ const HostStatus: React.FC<HostStatusProps> = ({
   zIndex,
   autoCSR,
   additionalPopoverContent,
+  openshiftVersion,
 }) => {
   const [keepOnOutsideClick, onValidationActionToggle] = React.useState(false);
 
@@ -246,15 +272,17 @@ const HostStatus: React.FC<HostStatusProps> = ({
     zIndex,
     autoCSR,
     additionalPopoverContent,
+    openshiftVersion,
   };
 
+  const hostIcon = getHostStatusIcon(icon, host.progress, status);
   return (
     <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsXs' }}>
       {
         <FlexItem>
           {(autoCSR && status.key === 'added-to-existing-cluster'
             ? hostStatus(t).installed.icon
-            : icon) || <UnknownIcon />}
+            : hostIcon) || <UnknownIcon />}
         </FlexItem>
       }
 
@@ -267,8 +295,8 @@ const HostStatus: React.FC<HostStatusProps> = ({
         {children && <FlexItem>{children}</FlexItem>}
         {sublabel && (
           <FlexItem
-            className="pf-u-font-size-xs"
-            style={{ marginTop: 'calc(-1 * var(--pf-l-flex--spacer--xs))' }}
+            className="pf-v5-u-font-size-xs"
+            style={{ marginTop: 'calc(-1 * var(--pf-v5-l-flex--spacer--xs))' }}
           >
             <WithHostStatusPopover {...popoverProps}>{sublabel}</WithHostStatusPopover>
           </FlexItem>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem } from '@patternfly/react-core';
+import { DropdownItem } from '@patternfly/react-core/deprecated';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ChangeHostnameActionProps = {

package/lib/common/components/hosts/HostValidationGroups.css

@@ -1,4 +1,4 @@
 .host-validation-groups__validation-group {
-  margin-top: var(--pf-global--spacer--md) !important;
-  margin-bottom: var(--pf-global--spacer--sm) !important;
+  margin-top: var(--pf-v5-global--spacer--md) !important;
+  margin-bottom: var(--pf-v5-global--spacer--sm) !important;
 }

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

@@ -64,7 +64,8 @@ const ValidationsAlert = ({
       <ul>
         {validations.map((v) => (
           <li key={v.id}>
-            <strong>{hostValidationLabels(t)[v.id] || v.id}:</strong>&nbsp;{toSentence(v.message)}{' '}
+            <strong>{hostValidationLabels(t)[v.id] || v.id}:</strong>&nbsp;
+            {toSentence(v.message.replace(/\\n/, ' '))}{' '}
             {v.status === 'failure' && hostValidationFailureHints(t)[v.id]}
           </li>
         ))}

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

@@ -43,7 +43,7 @@ const Hostname: React.FC<HostnameProps> = ({
   const body = (
     <Flex alignItems={{ default: 'alignItemsCenter' }}>
       {onEditHostname && !isValid && (
-        <FlexItem className={'pf-u-mr-xs'}>
+        <FlexItem className={'pf-v5-u-mr-xs'}>
           <ExclamationTriangleIcon color={warningColor.value} />
         </FlexItem>
       )}
@@ -60,7 +60,7 @@ const Hostname: React.FC<HostnameProps> = ({
       <Popover
         headerContent={
           <Flex alignItems={{ default: 'alignItemsCenter' }}>
-            <FlexItem className={'pf-u-mr-xs'}>
+            <FlexItem className={'pf-v5-u-mr-xs'}>
               <ExclamationTriangleIcon color={warningColor.value} />
             </FlexItem>
             <FlexItem>{t('ai:Hostname is not valid')}</FlexItem>

package/lib/common/components/hosts/HostsTable.css

@@ -1,13 +1,13 @@
 .host-table-alerts {
-  padding-top: var(--pf-global--spacer--lg) !important;
+  padding-top: var(--pf-v5-global--spacer--lg) !important;
 }
 
-.hosts-table .pf-c-dropdown__toggle-text {
-  color: var(--pf-global--Color--100) !important;
+.hosts-table .pf-v5-c-dropdown__toggle-text {
+  color: var(--pf-v5-global--Color--100) !important;
 }
 
 .hosts-table button {
-  font-size: var(--pf-c-table-cell--FontSize);
+  font-size: var(--pf-v5-c-table-cell--FontSize);
 }
 
 .hosts-table {

package/lib/common/components/hosts/MassChangeHostnameModal.css

@@ -1,6 +1,6 @@
 .hostname-preview {
-  background-color: var(--pf-global--BackgroundColor--200);
-  padding: var(--pf-global--spacer--sm);
+  background-color: var(--pf-v5-global--BackgroundColor--200);
+  padding: var(--pf-v5-global--spacer--sm);
   max-height: 10rem;
   overflow-y: auto;
 }

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

@@ -251,7 +251,11 @@ const MassChangeHostnameForm = ({
         </Stack>
       </ModalBoxBody>
       <ModalBoxFooter>
-        <Button key="submit" type={ButtonType.submit} isDisabled={isSubmitting || !isValid}>
+        <Button
+          key="submit"
+          type={ButtonType.submit}
+          isDisabled={isSubmitting || !isValid || !hostnameInputRef.current?.value.trim()}
+        >
           {t('ai:Change')}
         </Button>
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={isSubmitting}>

package/lib/common/components/hosts/TableToolbar.css

@@ -6,6 +6,6 @@
   padding: 0;
 }
 
-.table-toolbar .pf-c-toolbar__content {
+.table-toolbar .pf-v5-c-toolbar__content {
   padding: 0;
 }

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

@@ -1,9 +1,5 @@
 import * as React from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  DropdownToggleCheckbox,
   OnPerPageSelect,
   OnSetPage,
   Pagination,
@@ -16,6 +12,12 @@ import {
   ToolbarProps,
   Tooltip,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
@@ -101,7 +103,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
                         id="select-checkbox"
                         key="select-checkbox"
                         aria-label={t('ai:Select all')}
-                        onChange={(checked) => (checked ? onSelectAll() : onSelectNone())}
+                        onChange={(_event, checked) => (checked ? onSelectAll() : onSelectNone())}
                         isChecked={isChecked}
                       >
                         {selectedIDs.length} {t('ai:selected')}

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

@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Trans } from 'react-i18next';
-import { PrismCode } from '../../../common/components/ui';
+import { PrismCode, UiIcon } from '../../../common/components/ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const VMRebootConfigurationContent = () => {
@@ -50,7 +50,7 @@ const VMRebootConfigurationInfo = () => {
       <Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
         <Button variant={ButtonVariant.link} isInline>
           <>
-            <InfoCircleIcon size="sm" />
+            <UiIcon size="sm" icon={<InfoCircleIcon />} />
             &nbsp;
           </>
           {t('ai:Check your VM reboot configuration')}

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

@@ -1,4 +1,3 @@
-import { breakWord, expandable, sortable } from '@patternfly/react-table';
 import * as React from 'react';
 import { Address4, Address6 } from 'ip-address';
 import type {
@@ -66,10 +65,9 @@ export const hostnameColumn = (
       title: t('ai:Hostname'),
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
+        modifier: 'breakWord',
       },
-      transforms: [sortable],
-      cellFormatters: [expandable],
-      cellTransforms: [breakWord],
+      sort: true,
     },
     cell: (host) => {
       const inventory = getInventory(host);
@@ -105,7 +103,7 @@ export const roleColumn = (
       props: {
         id: 'col-header-role',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const editRole = onEditRole
@@ -137,7 +135,7 @@ export const statusColumn = (
       props: {
         id: 'col-header-status',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
@@ -174,7 +172,7 @@ export const discoveredAtColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-discoveredat',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const { createdAt } = host;
@@ -193,7 +191,7 @@ export const cpuArchitectureColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-cpuarchitecture',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -211,7 +209,7 @@ export const cpuCoresColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-cpucores',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -238,7 +236,7 @@ export const memoryColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-memory',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -263,7 +261,7 @@ export const disksColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-disk',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -287,7 +285,10 @@ export const countColumn = (cluster: Cluster): TableRow<Host> => ({
 });
 
 export const activeNICColumn = (cluster: Cluster, t: TFunction): TableRow<Host> => ({
-  header: { title: t('ai:Active NIC'), transforms: [sortable] },
+  header: {
+    title: t('ai:Active NIC'),
+    sort: true,
+  },
   cell: (host) => {
     const inventory = getInventory(host);
     const nics = inventory.interfaces || [];
@@ -303,7 +304,10 @@ export const activeNICColumn = (cluster: Cluster, t: TFunction): TableRow<Host>
 });
 
 export const ipv4Column = (cluster: Cluster): TableRow<Host> => ({
-  header: { title: 'IPv4 address', transforms: [sortable] },
+  header: {
+    title: 'IPv4 address',
+    sort: true,
+  },
   cell: (host) => {
     const inventory = getInventory(host);
     const nics = inventory.interfaces || [];
@@ -320,7 +324,10 @@ export const ipv4Column = (cluster: Cluster): TableRow<Host> => ({
 });
 
 export const ipv6Column = (cluster: Cluster): TableRow<Host> => ({
-  header: { title: 'IPv6 address', transforms: [sortable] },
+  header: {
+    title: 'IPv6 address',
+    sort: true,
+  },
   cell: (host) => {
     const inventory = getInventory(host);
     const nics = inventory.interfaces || [];
@@ -337,7 +344,10 @@ export const ipv6Column = (cluster: Cluster): TableRow<Host> => ({
 });
 
 export const macAddressColumn = (cluster: Cluster): TableRow<Host> => ({
-  header: { title: 'MAC address', transforms: [sortable] },
+  header: {
+    title: 'MAC address',
+    sort: true,
+  },
   cell: (host) => {
     const inventory = getInventory(host);
     const nics = inventory.interfaces || [];

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

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