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

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

@@ -1,412 +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
-        modifier: 'breakWord',
-      },
-      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: (
-        <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/operators/operatorDescriptions.tsx

@@ -60,6 +60,12 @@ 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,6 +24,8 @@ 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,
@@ -36,6 +38,7 @@ import {
   getClusterObservabilityLink,
   getKmmDocsLink,
   getKubeDeschedulerLink,
+  getLokiLink,
   getLsoLink,
   getLvmsDocsLink,
   getMceDocsLink,
@@ -45,6 +48,7 @@ import {
   getNumaResourcesLink,
   getNvidiaGpuLink,
   getOadpLink,
+  getOpenShiftLoggingLink,
   MTV_LINK,
   NODE_HEALTHCHECK_LINK,
   NODE_MAINTENANCE_LINK,
@@ -83,6 +87,8 @@ import {
   DESCRIPTION_SERVICEMESH,
   DESCRIPTION_LVM,
   DESCRIPTION_CLUSTER_OBSERVABILITY,
+  DESCRIPTION_LOKI,
+  DESCRIPTION_OPENSHIFT_LOGGING,
   DESCRIPTION_NUMA_RESOURCES,
   DESCRIPTION_OADP,
   DESCRIPTION_METALLB,
@@ -473,9 +479,36 @@ export const getOperatorSpecs = (
             </ExternalLink>
           </>
         ),
-        notStandalone: true,
         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'),
+      },
     ],
     [categories[Category.SCHEDULING]]: [
       {

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

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

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

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

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

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