@openshift-assisted/ui-lib 2.48.6 → 2.50.0

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

@@ -1,366 +1,9 @@
 import * as React from 'react';
-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,
-  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 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,
-    };
-  },
-});
+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/hosts/utils.ts

@@ -205,6 +205,10 @@ export const getInventory = (host: Host) => {
   return stringToJSON<Inventory>(inventoryString) || {};
 };
 
+export const getHostLabels = (host: Host) => {
+  return host.nodeLabels ? (JSON.parse(host.nodeLabels) as { [key: string]: string }) : {};
+};
+
 export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefined) => {
   if (!hostnameFilter) {
     return { hosts, sorted: false };

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;