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

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

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Popover, Button, Content, FlexItem, Flex, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Popover,
+  Button,
+  Text,
+  TextContent,
+  FlexItem,
+  Flex,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
 import hdate from 'human-date';
 
@@ -50,38 +59,38 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   const { t } = useTranslation();
   if (['installing-in-progress'].includes(status)) {
     return (
-      <Content>
+      <TextContent>
         <HostProgress host={host} />
-      </Content>
+      </TextContent>
     );
   }
 
   if (['error', 'cancelled', 'installing-pending-user-action'].includes(status)) {
     return (
-      <Content>
-        <Content component="p">
+      <TextContent>
+        <Text>
           {details}
           <br />
           {toSentence(statusInfo)}
-        </Content>
+        </Text>
         <HostProgress host={host} />
-      </Content>
+      </TextContent>
     );
   }
 
   if (['installed'].includes(status)) {
     return (
-      <Content>
-        <Content component="p">{details}</Content>
+      <TextContent>
+        <Text>{details}</Text>
         <HostProgress host={host} />
-      </Content>
+      </TextContent>
     );
   }
 
   if (['added-to-existing-cluster'].includes(status)) {
     return (
-      <Content>
-        <Content component="p">{details}</Content>
+      <TextContent>
+        <Text>{details}</Text>
         {!autoCSR && (
           <>
             <br />
@@ -98,7 +107,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
           </>
         )}
         <HostProgress host={host} />
-      </Content>
+      </TextContent>
     );
   }
 
@@ -116,21 +125,21 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   ) {
     // No additional error messages shown
     return (
-      <Content>
-        <Content component="p">{details}</Content>
-      </Content>
+      <TextContent>
+        <Text>{details}</Text>
+      </TextContent>
     );
   }
 
   return (
     <Stack hasGutter>
       {additionalPopoverContent}
-      {details && (
-        <StackItem>
-          <Content component="p">{details}</Content>
-        </StackItem>
-      )}
       <StackItem>
+        {details && (
+          <TextContent>
+            <Text>{details}</Text>
+          </TextContent>
+        )}
         <HostValidationGroups openshiftVersion={openshiftVersion} {...props} />
       </StackItem>
     </Stack>
@@ -285,8 +294,8 @@ const HostStatus: React.FC<HostStatusProps> = ({
         {children && <FlexItem>{children}</FlexItem>}
         {sublabel && (
           <FlexItem
-            className="pf-v6-u-font-size-xs"
-            style={{ marginTop: 'calc(-1 * var(--pf-v6-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/HostValidationGroups.css

@@ -1,4 +1,4 @@
 .host-validation-groups__validation-group {
-  margin-top: var(--pf-v6-global--spacer--md) !important;
-  margin-bottom: var(--pf-v6-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

@@ -1,7 +1,7 @@
 import React, { Fragment, ReactElement } from 'react';
 import { Alert, AlertGroup, AlertVariant, Level, LevelItem } from '@patternfly/react-core';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, ButtonVariant, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import type { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { getHostname } from './utils';
 import { DASH } from '../constants';
@@ -43,7 +43,7 @@ const Hostname: React.FC<HostnameProps> = ({
   const body = (
     <Flex alignItems={{ default: 'alignItemsCenter' }}>
       {onEditHostname && !isValid && (
-        <FlexItem className={'pf-v6-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-v6-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-v6-global--spacer--lg) !important;
+  padding-top: var(--pf-v5-global--spacer--lg) !important;
 }
 
-.hosts-table .pf-v6-c-dropdown__toggle-text {
-  color: var(--pf-v6-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-v6-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-v6-global--BackgroundColor--200);
-  padding: var(--pf-v6-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

@@ -7,9 +7,8 @@ import {
   HelperText,
   HelperTextItem,
   Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
+  ModalBoxBody,
+  ModalBoxFooter,
   Popover,
   Split,
   SplitItem,
@@ -18,7 +17,7 @@ import {
 } from '@patternfly/react-core';
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
+import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TFunction } from 'i18next';
 
@@ -178,7 +177,7 @@ const MassChangeHostnameForm = ({
   const { t } = useTranslation();
   return (
     <Form onSubmit={handleSubmit}>
-      <ModalBody>
+      <ModalBoxBody>
         <Stack hasGutter>
           <StackItem>
             <div>{t('ai:Rename hostnames using the custom template:')}</div>
@@ -194,10 +193,7 @@ const MassChangeHostnameForm = ({
               richValidationMessages={hostnameValidationMessages(t)}
             />
             <HelperText>
-              <HelperTextItem
-                variant="indeterminate"
-                data-testid="mass-change-hostname-helper-text"
-              >
+              <HelperTextItem variant="indeterminate">
                 {t('ai:For example: host-{{n}}', {
                   interpolation: { suffix: '###', prefix: '###' },
                 })}
@@ -253,8 +249,8 @@ const MassChangeHostnameForm = ({
             />
           </StackItem>
         </Stack>
-      </ModalBody>
-      <ModalFooter>
+      </ModalBoxBody>
+      <ModalBoxFooter>
         <Button
           key="submit"
           type={ButtonType.submit}
@@ -265,7 +261,7 @@ const MassChangeHostnameForm = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={isSubmitting}>
           {t('ai:Cancel')}
         </Button>
-      </ModalFooter>
+      </ModalBoxFooter>
     </Form>
   );
 };
@@ -299,12 +295,13 @@ const MassChangeHostnameModal = ({
   return (
     <Modal
       aria-label={t('ai:Change hostnames dialog')}
+      title={t('ai:Change hostnames')}
       isOpen={isOpen}
       onClose={onClose}
+      hasNoBodyWrapper
       id="mass-change-hostname-modal"
       variant="small"
     >
-      <ModalHeader title={t('ai:Change hostnames')} />
       <Formik
         initialValues={initialValues}
         validate={withTemplate(

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

@@ -3,9 +3,8 @@ import {
   Button,
   ButtonVariant,
   Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
+  ModalBoxBody,
+  ModalBoxFooter,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -59,13 +58,15 @@ const MassDeleteHostModal = ({
   return (
     <Modal
       aria-label={t('ai:Remove hosts dialog')}
+      title={t('ai:Remove hosts?')}
       isOpen={isOpen}
       onClose={onClose}
+      hasNoBodyWrapper
       id="mass-delete-modal"
       variant="medium"
+      titleIconVariant="warning"
     >
-      <ModalHeader title={t('ai:Remove hosts?')} titleIconVariant="warning" />
-      <ModalBody>
+      <ModalBoxBody>
         <Stack hasGutter>
           <StackItem>{t('ai:All of the listed hosts will be removed.')}</StackItem>
           <StackItem>{children}</StackItem>
@@ -73,8 +74,8 @@ const MassDeleteHostModal = ({
             <ModalProgress error={error} progress={progress} />
           </StackItem>
         </Stack>
-      </ModalBody>
-      <ModalFooter>
+      </ModalBoxBody>
+      <ModalBoxFooter>
         <Button
           onClick={() => void onClick()}
           isDisabled={progress !== null}
@@ -85,7 +86,7 @@ const MassDeleteHostModal = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={progress !== null}>
           {t('ai:Cancel')}
         </Button>
-      </ModalFooter>
+      </ModalBoxFooter>
     </Modal>
   );
 };

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

@@ -14,14 +14,13 @@ const OcpConsoleNodesSectionLink: React.FC<{
   }
   return (
     <Button
-      icon={<ExternalLinkAltIcon />}
       variant={ButtonVariant.link}
       onClick={() =>
         window.open(getOcpConsoleNodesPage(ocpConsoleUrl), '_blank', 'noopener noreferrer')
       }
       id={id}
     >
-      {title}
+      {title} <ExternalLinkAltIcon />
     </Button>
   );
 };

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

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

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

@@ -80,7 +80,6 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
           onClick={onActionsToggle}
           isExpanded={actionsOpen}
           isDisabled={isActionsDisabled}
-          data-testid="actions-dropdown-toggle"
         >
           {t('ai:Actions')}
         </MenuToggle>
@@ -101,19 +100,20 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
           isFullWidth
           onClick={onSelectToggle}
           isExpanded={selectOpen}
-          data-testid="select-dropdown-toggle"
-        >
-          <MenuToggleCheckbox
-            id="select-checkbox"
-            key="select-checkbox"
-            aria-label="Select all"
-            onChange={(checked, _event) => (checked ? onSelectAll() : onSelectNone())}
-            isChecked={isChecked}
-            data-testid="select-checkbox"
-          >
-            {selectedIDs.length} {t('ai:selected')}
-          </MenuToggleCheckbox>
-        </MenuToggle>
+          splitButtonOptions={{
+            items: [
+              <MenuToggleCheckbox
+                id="select-checkbox"
+                key="select-checkbox"
+                aria-label="Select all"
+                onChange={(checked, _event) => (checked ? onSelectAll() : onSelectNone())}
+                isChecked={isChecked}
+              >
+                {selectedIDs.length} {t('ai:selected')}
+              </MenuToggleCheckbox>,
+            ],
+          }}
+        />
       )}
       isOpen={selectOpen}
     >

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

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Button, ButtonVariant, Popover, Content, ContentVariants } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  Popover,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Trans } from 'react-i18next';
 import { PrismCode, UiIcon } from '../../../common/components/ui';
@@ -8,18 +15,18 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 export const VMRebootConfigurationContent = () => {
   const { t } = useTranslation();
   return (
-    <Content>
-      <Content component={ContentVariants.p}>
+    <TextContent>
+      <Text component={TextVariants.p}>
         {t(
           'ai:Your libvirt virtual machines should be configured to restart automatically after a reboot. You can check this by running:',
         )}
-      </Content>
+      </Text>
       <PrismCode code="virsh dumpxml <name> | grep on_reboot" />
-      <Content component={ContentVariants.p}>{t('ai:And verify that this is the output:')}</Content>
+      <Text component={TextVariants.p}>{t('ai:And verify that this is the output:')}</Text>
       <PrismCode code="<on_reboot>restart</on_reboot>" />
-      <Content component={ContentVariants.p}>
+      <Text component={TextVariants.p}>
         {t('ai:If not, please start your VMs with the following configuration:')}
-      </Content>
+      </Text>
       <PrismCode code="--events on_reboot=restart" />
       <Trans
         t={t}
@@ -28,10 +35,10 @@ export const VMRebootConfigurationContent = () => {
         values={{ executionCommand: 'virt-install' }}
       />
       <PrismCode code="virt-install --wait -1 <rest of the command>" />
-      <Content component={ContentVariants.p}>
+      <Text component={TextVariants.p}>
         {t('ai:Otherwise, the VMs will not be able to reboot during the installation process.')}
-      </Content>
-    </Content>
+      </Text>
+    </TextContent>
   );
 };
 
@@ -39,7 +46,7 @@ const VMRebootConfigurationInfo = () => {
   const { t } = useTranslation();
 
   return (
-    <Content component="p">
+    <Text component="p">
       <Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
         <Button variant={ButtonVariant.link} isInline>
           <>
@@ -49,7 +56,7 @@ const VMRebootConfigurationInfo = () => {
           {t('ai:Check your VM reboot configuration')}
         </Button>
       </Popover>
-    </Content>
+    </Text>
   );
 };
 

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

@@ -9,9 +9,9 @@ import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progres
 import { LinkIcon } from '@patternfly/react-icons/dist/js/icons/link-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
 import { PlusIcon } from '@patternfly/react-icons/dist/js/icons/plus-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 import { chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from './types';

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,31 @@ 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: (
+        <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 = (