@openshift-assisted/ui-lib 2.16.4-cim → 2.16.6-cim

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
 import { Address4, Address6 } from 'ip-address';
 import type {
   Cluster,
@@ -20,6 +21,7 @@ import HostStatus from './HostStatus';
 import RoleCell from './RoleCell';
 import {
   areOnlySoftValidationsFailing,
+  getHostLabels,
   getHostname,
   getHostRole,
   getHostStatus,
@@ -65,6 +67,7 @@ export const hostnameColumn = (
       title: t('ai:Hostname'),
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
+        modifier: 'breakWord',
       },
       sort: true,
     },
@@ -279,6 +282,24 @@ export const disksColumn = (t: TFunction): TableRow<Host> => ({
   },
 });
 
+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 /> },
 });
@@ -362,6 +383,34 @@ export const macAddressColumn = (cluster: Cluster): TableRow<Host> => ({
   },
 });
 
+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' },
+    };
+  },
+});
+
 const ActionTitle: React.FC<{ disabled: boolean; description?: string; title: string }> = ({
   title,
   description,

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/operators/operatorDescriptions.tsx

@@ -60,12 +60,6 @@ export const DESCRIPTION_LVM =
 export const DESCRIPTION_CLUSTER_OBSERVABILITY =
   'Provides observability and monitoring capabilities for your OpenShift cluster.';
 
-export const DESCRIPTION_LOKI =
-  'Provides a log aggregation system designed to store and query logs from all applications and infrastructure components.';
-
-export const DESCRIPTION_OPENSHIFT_LOGGING =
-  'Collects, stores, and visualizes logs from OpenShift Container Platform components and applications.';
-
 export const DESCRIPTION_NUMA_RESOURCES =
   'Provides NUMA-aware scheduling to improve workload performance on NUMA systems.';
 

package/lib/common/components/operators/operatorSpecs.tsx

@@ -24,8 +24,6 @@ import {
   OPERATOR_NAME_NODE_MAINTENANCE,
   OPERATOR_NAME_KUBE_DESCHEDULER,
   OPERATOR_NAME_CLUSTER_OBSERVABILITY,
-  OPERATOR_NAME_LOKI,
-  OPERATOR_NAME_OPENSHIFT_LOGGING,
   OPERATOR_NAME_NUMA_RESOURCES,
   OPERATOR_NAME_OADP,
   OPERATOR_NAME_METALLB,
@@ -38,7 +36,6 @@ import {
   getClusterObservabilityLink,
   getKmmDocsLink,
   getKubeDeschedulerLink,
-  getLokiLink,
   getLsoLink,
   getLvmsDocsLink,
   getMceDocsLink,
@@ -48,7 +45,6 @@ import {
   getNumaResourcesLink,
   getNvidiaGpuLink,
   getOadpLink,
-  getOpenShiftLoggingLink,
   MTV_LINK,
   NODE_HEALTHCHECK_LINK,
   NODE_MAINTENANCE_LINK,
@@ -87,8 +83,6 @@ import {
   DESCRIPTION_SERVICEMESH,
   DESCRIPTION_LVM,
   DESCRIPTION_CLUSTER_OBSERVABILITY,
-  DESCRIPTION_LOKI,
-  DESCRIPTION_OPENSHIFT_LOGGING,
   DESCRIPTION_NUMA_RESOURCES,
   DESCRIPTION_OADP,
   DESCRIPTION_METALLB,
@@ -479,35 +473,8 @@ export const getOperatorSpecs = (
             </ExternalLink>
           </>
         ),
-        supportLevel: getFeatureSupportLevel('CLUSTER_OBSERVABILITY'),
-      },
-      {
-        operatorKey: OPERATOR_NAME_LOKI,
-        title: 'Loki Operator',
-        featureId: 'CLUSTER_OBSERVABILITY',
-        descriptionText: DESCRIPTION_LOKI,
-        Description: ({ openshiftVersion, searchTerm }) => (
-          <>
-            <HighlightedText text={DESCRIPTION_LOKI} searchTerm={searchTerm} />{' '}
-            <ExternalLink href={getLokiLink(openshiftVersion)}>Learn more</ExternalLink>
-          </>
-        ),
         notStandalone: true,
-        supportLevel: getFeatureSupportLevel('LOKI'),
-      },
-      {
-        operatorKey: OPERATOR_NAME_OPENSHIFT_LOGGING,
-        title: 'OpenShift Logging',
-        featureId: 'CLUSTER_OBSERVABILITY',
-        descriptionText: DESCRIPTION_OPENSHIFT_LOGGING,
-        Description: ({ openshiftVersion, searchTerm }) => (
-          <>
-            <HighlightedText text={DESCRIPTION_OPENSHIFT_LOGGING} searchTerm={searchTerm} />{' '}
-            <ExternalLink href={getOpenShiftLoggingLink(openshiftVersion)}>Learn more</ExternalLink>
-          </>
-        ),
-        notStandalone: true,
-        supportLevel: getFeatureSupportLevel('OPENSHIFT_LOGGING'),
+        supportLevel: getFeatureSupportLevel('CLUSTER_OBSERVABILITY'),
       },
     ],
     [categories[Category.SCHEDULING]]: [

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

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Content, ContentVariants, Popover, Alert, AlertVariant } from '@patternfly/react-core';
+import {
+  TextContent,
+  Text,
+  TextVariants,
+  Popover,
+  Alert,
+  AlertVariant,
+} 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';
@@ -46,7 +53,9 @@ const diskColumns = (t: TFunction, showFormat: boolean) =>
   ].filter(Boolean) as { title: string | React.ReactNode }[];
 
 const SkipFormattingDisk = () => (
-  <Content component={ContentVariants.p}>This bootable disk will skip formatting</Content>
+  <TextContent>
+    <Text component={TextVariants.p}>This bootable disk will skip formatting</Text>
+  </TextContent>
 );
 
 const getDiskLimitation = (

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

@@ -2,12 +2,14 @@ import * as React from 'react';
 import { TFunction } from 'i18next';
 import { getHostRole, getInventory, RoleCell, UiIcon } from '../../index';
 import { TableRow } from '../hosts/AITable';
-import { Popover, Content, ContentVariants } from '@patternfly/react-core';
+import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const SkipFormattingDisks = () => (
-  <Content component={ContentVariants.p}>Some bootable disks will skip formatting</Content>
+  <TextContent>
+    <Text component={TextVariants.p}>Some bootable disks will skip formatting</Text>
+  </TextContent>
 );
 
 export const roleColumn = (t: TFunction, schedulableMasters: boolean): TableRow<Host> => {
@@ -74,13 +76,7 @@ export const odfUsageColumn = (excludeMasters: boolean): TableRow<Host> => {
       const isExcluded = excludeMasters && isMaster;
       return {
         title: isExcluded ? (
-          <div
-            style={{
-              color: 'var(--pf-t--global--icon--color--disabled)',
-            }}
-          >
-            Excluded for ODF
-          </div>
+          <div style={{ color: 'var(--pf-v5-global--disabled-color--100)' }}>Excluded for ODF</div>
         ) : (
           'Use ODF'
         ),

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

@@ -5,7 +5,7 @@ import {
   ToolbarItem,
   ToolbarContent,
   ToolbarFilter,
-  ToolbarLabel,
+  ToolbarChip,
   Button,
   ButtonVariant,
   InputGroup,
@@ -83,19 +83,19 @@ export const getInitialClusterEventsFilters = (
   deletedHosts: false,
 });
 
-const mapHostsLabels = (
+const mapHostsChips = (
   t: TFunction,
   filters: ClusterEventsFiltersType,
   hosts: { id: string; hostname?: string }[],
-): ToolbarLabel[] => {
-  const labels = [
+): ToolbarChip[] => {
+  const chips = [
     filters.deletedHosts && { key: DELETED_HOSTS, node: t('ai:Deleted hosts') },
     filters.clusterLevel && { key: CLUSTER_LEVEL, node: t('ai:Cluster-level events') },
     ...(hosts || [])
       .filter((host) => filters.hostIds?.includes(host.id))
-      .map((host): ToolbarLabel => ({ key: host.id, node: host.hostname })),
+      .map((host): ToolbarChip => ({ key: host.id, node: host.hostname })),
   ];
-  return labels.filter(Boolean) as ToolbarLabel[];
+  return chips.filter(Boolean) as ToolbarChip[];
 };
 
 const ClusterEventsToolbar = ({
@@ -178,7 +178,7 @@ const ClusterEventsToolbar = ({
     setTimer(newTimer);
   };
 
-  const onDeleteLabelGroup: ToolbarFilterProps['deleteLabelGroup'] = (type) => {
+  const onDeleteChipGroup: ToolbarFilterProps['deleteChipGroup'] = (type) => {
     if (type === 'Severity') {
       setFilters({
         ...filters,
@@ -209,7 +209,7 @@ const ClusterEventsToolbar = ({
     a.hostname && b.hostname && a.hostname < b.hostname ? -1 : 1,
   );
 
-  const hostLabels = mapHostsLabels(t, filters, sortedHosts);
+  const hostChips = mapHostsChips(t, filters, sortedHosts);
 
   return (
     <Toolbar
@@ -225,11 +225,11 @@ const ClusterEventsToolbar = ({
         {entityKind === 'cluster' && (
           <CustomToolbarFilter
             categoryName="Hosts"
-            labels={hostLabels}
-            deleteLabel={(_, label) =>
-              onHostSelect(typeof label === 'string' ? label : label.key, false)
+            chips={hostChips}
+            deleteChip={(_, chip) =>
+              onHostSelect(typeof chip === 'string' ? chip : chip.key, false)
             }
-            deleteLabelGroup={onDeleteLabelGroup}
+            deleteChipGroup={onDeleteChipGroup}
           >
             <Dropdown
               isOpen={isHostExpanded}
@@ -243,8 +243,8 @@ const ClusterEventsToolbar = ({
                   isFullWidth
                   onClick={onHostToggle}
                   isExpanded={isHostExpanded}
-                  badge={hostLabels.length && <Badge isRead>{hostLabels.length}</Badge>}
-                  data-testid="hosts-dropdown-toggle"
+                  badge={hostChips.length && <Badge isRead>{hostChips.length}</Badge>}
+                  data-testid="cluster-events-hosts-dropdown-button"
                 >
                   <Placeholder text="Hosts" />
                 </MenuToggle>
@@ -290,16 +290,16 @@ const ClusterEventsToolbar = ({
         )}
 
         <ToolbarFilter
-          labels={filters.severities?.map(
-            (severity): ToolbarLabel => ({
+          chips={filters.severities?.map(
+            (severity): ToolbarChip => ({
               key: severity,
               node: capitalize(severity),
             }),
           )}
-          deleteLabel={(_, label) =>
-            onSeveritySelect(typeof label === 'string' ? label : label.key, false)
+          deleteChip={(_, chip) =>
+            onSeveritySelect(typeof chip === 'string' ? chip : chip.key, false)
           }
-          deleteLabelGroup={onDeleteLabelGroup}
+          deleteChipGroup={onDeleteChipGroup}
           categoryName="Severity"
         >
           <Dropdown
@@ -318,7 +318,7 @@ const ClusterEventsToolbar = ({
                 badge={
                   filters.severities?.length && <Badge isRead>{filters.severities.length}</Badge>
                 }
-                data-testid="severity-dropdown-toggle"
+                data-testid="cluster-events-severity-dropdown-button"
               >
                 <Placeholder text="Severity" />
               </MenuToggle>
@@ -355,11 +355,9 @@ const ClusterEventsToolbar = ({
               />
             </InputGroupItem>
             <InputGroupItem>
-              <Button
-                icon={<SearchIcon />}
-                variant={ButtonVariant.control}
-                aria-label="search text button"
-              />
+              <Button variant={ButtonVariant.control} aria-label="search text button">
+                <SearchIcon />
+              </Button>
             </InputGroupItem>
           </InputGroup>
         </ToolbarItem>

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

@@ -1,19 +1,10 @@
 import * as React from 'react';
-import {
-  Button,
-  ButtonProps,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalHeaderProps,
-  ModalVariant,
-} from '@patternfly/react-core';
+import { Modal, Button, ModalVariant, ButtonProps, ModalProps } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ConfirmationModalProps = {
   title: string;
-  titleIconVariant?: ModalHeaderProps['titleIconVariant'];
+  titleIconVariant?: ModalProps['titleIconVariant'];
   content: React.ReactNode;
   confirmationButtonVariant?: ButtonProps['variant'];
   confirmationButtonText?: string;
@@ -32,10 +23,13 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <Modal isOpen={true} onClose={onClose} variant={ModalVariant.small}>
-      <ModalHeader title={title} titleIconVariant={titleIconVariant} />
-      <ModalBody>{content}</ModalBody>
-      <ModalFooter>
+    <Modal
+      title={title}
+      titleIconVariant={titleIconVariant}
+      isOpen={true}
+      onClose={onClose}
+      variant={ModalVariant.small}
+      actions={[
         <Button
           data-testid="confirm-modal-submit"
           key="confirm"
@@ -43,11 +37,13 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
           onClick={onConfirm}
         >
           {confirmationButtonText}
-        </Button>
+        </Button>,
         <Button key="cancel" variant="link" onClick={onClose}>
           {t('ai:Cancel')}
-        </Button>
-      </ModalFooter>
+        </Button>,
+      ]}
+    >
+      {content}
     </Modal>
   );
 };

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

@@ -2,16 +2,15 @@
 // Once this issues is addressed in PatternFly, this component should be removed.
 
 import {
-  Label,
-  LabelGroup,
+  Chip,
+  ChipGroup,
   PickOptional,
-  ToolbarLabel,
+  ToolbarChip,
   ToolbarContentContext,
   ToolbarContext,
   ToolbarFilterProps,
   ToolbarItem,
 } from '@patternfly/react-core';
-
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
@@ -24,7 +23,7 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
   static defaultProps: PickOptional<ToolbarFilterProps> = {
-    labels: [] as (string | ToolbarLabel)[],
+    chips: [] as (string | ToolbarChip)[],
     showToolbarItem: true,
   };
 
@@ -36,78 +35,70 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
   }
 
   componentDidMount() {
-    const { categoryName, labels } = this.props;
+    const { categoryName, chips } = this.props;
     this.context.updateNumberFilters(
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString(),
-      labels ? labels.length : 0,
+      chips ? chips.length : 0,
     );
     this.setState({ isMounted: true });
   }
 
   componentDidUpdate() {
-    const { categoryName, labels } = this.props;
+    const { categoryName, chips } = this.props;
     this.context.updateNumberFilters(
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString(),
-      labels ? labels.length : 0,
+      chips ? chips.length : 0,
     );
   }
 
   render() {
     const {
       children,
-      labels,
-      deleteLabelGroup,
-      deleteLabel,
-      labelGroupExpandedText,
-      labelGroupCollapsedText,
+      chips,
+      deleteChipGroup,
+      deleteChip,
+      chipGroupExpandedText,
+      chipGroupCollapsedText,
       categoryName,
       showToolbarItem,
       isExpanded,
-      expandableLabelContainerRef,
+      expandableChipContainerRef,
       ...props
     } = this.props;
-    const { isExpanded: managedIsExpanded, labelGroupContentRef } = this.context;
+    const { isExpanded: managedIsExpanded, chipGroupContentRef } = this.context;
     const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
     const categoryKey =
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString();
 
-    const labelGroup =
-      labels !== undefined && labels.length ? (
-        <ToolbarItem variant="label-group">
-          <LabelGroup
+    const chipGroup =
+      chips !== undefined && chips.length ? (
+        <ToolbarItem variant="chip-group">
+          <ChipGroup
             key={categoryKey}
             categoryName={typeof categoryName === 'string' ? categoryName : categoryName.name}
-            isClosable={deleteLabelGroup !== undefined}
-            onClick={() => deleteLabelGroup && deleteLabelGroup(categoryName)}
-            collapsedText={labelGroupCollapsedText}
-            expandedText={labelGroupExpandedText}
+            isClosable={deleteChipGroup !== undefined}
+            onClick={() => deleteChipGroup && deleteChipGroup(categoryName)}
+            collapsedText={chipGroupCollapsedText}
+            expandedText={chipGroupExpandedText}
           >
-            {labels.map((label) =>
-              typeof label === 'string' ? (
-                <Label
-                  variant="outline"
-                  key={label}
-                  onClose={() => deleteLabel && deleteLabel(categoryKey, label)}
-                >
-                  {label}
-                </Label>
+            {chips.map((chip) =>
+              typeof chip === 'string' ? (
+                <Chip key={chip} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
+                  {chip}
+                </Chip>
               ) : (
-                <Label
-                  variant="outline"
-                  key={label.key}
-                  onClose={() => deleteLabel && deleteLabel(categoryKey, label)}
-                >
-                  {label.node}
-                </Label>
+                <Chip key={chip.key} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
+                  {chip.node}
+                </Chip>
               ),
             )}
-          </LabelGroup>
+          </ChipGroup>
         </ToolbarItem>
       ) : null;
 
@@ -115,24 +106,24 @@ 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)}
+          {chipGroupContentRef &&
+            chipGroupContentRef.current !== null &&
+            chipGroupContentRef.current.firstElementChild !== null &&
+            ReactDOM.createPortal(chipGroup, chipGroupContentRef.current.firstElementChild)}
         </React.Fragment>
       );
     }
 
     return (
       <ToolbarContentContext.Consumer>
-        {({ labelContainerRef }) => (
+        {({ chipContainerRef }) => (
           <React.Fragment>
             {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-            {labelContainerRef.current &&
-              ReactDOM.createPortal(labelGroup, labelContainerRef.current as Element)}
-            {expandableLabelContainerRef &&
-              expandableLabelContainerRef.current &&
-              ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
+            {chipContainerRef.current &&
+              ReactDOM.createPortal(chipGroup, chipContainerRef.current as Element)}
+            {expandableChipContainerRef &&
+              expandableChipContainerRef.current &&
+              ReactDOM.createPortal(chipGroup, expandableChipContainerRef.current)}
           </React.Fragment>
         )}
       </ToolbarContentContext.Consumer>

package/lib/common/components/ui/DetailList.css

@@ -3,10 +3,10 @@
 }
 
 .detail-list dd {
-  margin-bottom: var(--pf-v6-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .detail-list ul ul,
 .detail-list ul li {
-  margin-top: var(--pf-v6-c-content--dt--sm--MarginTop);
+  margin-top: var(--pf-v5-c-content--dt--sm--MarginTop);
 }