@openshift-assisted/ui-lib 2.8.2-cim → 2.8.3-cim

package/lib/cim/components/ClusterDeployment/ClusterDeploymentHostSelectionStep.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import * as Yup from 'yup';
-import { TestOptionsMessage } from 'yup';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
 import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
 import { ClusterWizardStepHeader, useAlerts } from '../../../common';
@@ -74,19 +73,9 @@ const getInitialValues = ({
   };
 };
 
-const getMinHostsCount = (selectedHostsCount: number) => (selectedHostsCount === 4 ? 5 : 3);
-
 const getValidationSchema = (agentClusterInstall: AgentClusterInstallK8sResource, t: TFunction) => {
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
 
-  const getMinMessage: TestOptionsMessage<{ min: number }> = ({ min }) => {
-    const message = t('ai:Please select at least {{min}} hosts for the cluster', { min });
-    if (min === 5) {
-      return `${message} ${t('ai:or select just 3 hosts instead.')}`;
-    }
-    return `${message}.`;
-  };
-
   return Yup.lazy<ClusterDeploymentHostsSelectionValues>((values) => {
     return Yup.object<ClusterDeploymentHostsSelectionValues>().shape({
       hostCount: isSNOCluster ? Yup.number() : hostCountValidationSchema(t),
@@ -100,7 +89,7 @@ const getValidationSchema = (agentClusterInstall: AgentClusterInstallK8sResource
         ? Yup.array<string>()
             .min(1, t('ai:Please select one host for the cluster.'))
             .max(1, t('ai:Please select one host for the cluster.')) // TODO(jtomasek): replace this with Yup.array().length() after updating Yup
-        : Yup.array<string>().min(getMinHostsCount(values.selectedHostIds.length), getMinMessage),
+        : Yup.array<string>().min(3, t('ai:Please select at least 3 hosts for the cluster.')),
     });
   });
 };

package/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsDiscoveryStep.tsx

@@ -37,8 +37,7 @@ const ClusterDeploymentHostsDiscoveryStep: React.FC<ClusterDeploymentHostsDiscov
     infraEnvAgents.length > 1 &&
       errors.push(t('ai:Single node cluster cannot contain more than 1 host.'));
   } else {
-    (infraEnvAgents.length === 4 || infraEnvAgents.length < 3) &&
-      errors.push(t('ai:Cluster must have 3 or 5 and more hosts.'));
+    infraEnvAgents.length < 3 && errors.push(t('ai:Cluster must have at least 3 hosts.'));
   }
 
   if (infraEnvAgents.some((a) => !a.spec.approved)) {

package/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsSelectionBasic.tsx

@@ -25,9 +25,7 @@ const ClusterDeploymentHostsSelectionBasic: React.FC<ClusterDeploymentHostsSelec
   const { t } = useTranslation();
 
   React.useEffect(() => {
-    if (hostCount === 3) {
-      setFieldValue('useMastersAsWorkers', true);
-    }
+    setFieldValue('useMastersAsWorkers', hostCount === 3);
   }, [hostCount, setFieldValue]);
 
   return (
@@ -43,12 +41,6 @@ const ClusterDeploymentHostsSelectionBasic: React.FC<ClusterDeploymentHostsSelec
             minValue={isSNOCluster ? 1 : HOSTS_MIN_COUNT}
             maxValue={isSNOCluster ? 1 : HOSTS_MAX_COUNT}
             isDisabled={isSNOCluster}
-            formatValue={(newValue) => {
-              if (newValue === 4) {
-                return hostCount >= 4 ? 3 : 5;
-              }
-              return newValue;
-            }}
           />
         </GridItem>
 
@@ -58,7 +50,7 @@ const ClusterDeploymentHostsSelectionBasic: React.FC<ClusterDeploymentHostsSelec
             idPostfix="mastersasworkers"
             name="useMastersAsWorkers"
             label={t('ai:Run workloads on control plane hosts')}
-            isDisabled={hostCount < 5}
+            isDisabled={hostCount !== 3}
           />
         </GridItem>
 

package/lib/cim/components/ClusterDeployment/ClusterDeploymentWizardNavigation.tsx

@@ -19,7 +19,12 @@ const ClusterDeploymentWizardNavigation: React.FC<{
   const stepNames = wizardStepNames(t);
   return (
     <WizardNav>
-      <WizardNavItem key="installation-type" content="Installation type" step={0} isDisabled />
+      <WizardNavItem
+        key="installation-type"
+        content={t('ai:Installation type')}
+        step={0}
+        isDisabled
+      />
       <WizardNavItem
         key="cluster-details"
         content={stepNames['cluster-details']}
@@ -29,7 +34,7 @@ const ClusterDeploymentWizardNavigation: React.FC<{
         step={1}
         onNavItemClick={() => setCurrentStepId('cluster-details')}
       />
-      <WizardNavItem key="automation" content="Automation" step={2} isDisabled />
+      <WizardNavItem key="automation" content={t('ai:Automation')} step={2} isDisabled />
       {isCIMFlow(clusterDeployment) ? (
         <WizardNavItem
           key="hosts-selection"

package/lib/cim/components/ClusterDeployment/helpers.ts

@@ -15,6 +15,7 @@ import { ClusterDeploymentK8sResource, AgentK8sResource } from '../../types';
 import { INFRAENV_GENERATED_AI_FLOW, BMH_HOSTNAME_ANNOTATION } from '../common/constants';
 import { gridSpans } from '@patternfly/react-core';
 import { getErrorMessage } from '../../../common/utils';
+
 export const shouldShowClusterDeploymentValidationOverview = (
   agentClusterInstall?: AgentClusterInstallK8sResource,
 ) => {
@@ -111,9 +112,14 @@ export const getOnFetchEventsHandler =
   (
     fetchEvents: (url: string) => Promise<string>,
     aiNamespace: string,
+    agents: AgentK8sResource[],
     agentClusterInstall?: AgentClusterInstallK8sResource,
   ): EventListFetchProps['onFetchEvents'] =>
-  async (params, onSuccess, onError) => {
+  async (
+    { message, severities: severitiesFilter, hostIds, clusterLevel, deletedHosts },
+    onSuccess,
+    onError,
+  ) => {
     const eventsURL = getEventsURL(aiNamespace, agentClusterInstall);
     if (!eventsURL) {
       onError('Cannot determine events URL');
@@ -121,10 +127,51 @@ export const getOnFetchEventsHandler =
     }
     try {
       const result = await fetchEvents(eventsURL);
-      const data = formatEventsData(result);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      onSuccess(data);
+      let data = formatEventsData(result);
+      const allNames = data.filter((d) => d.hostId).map((d) => d.hostId);
+
+      const severities = {
+        critical: data.filter((d) => d.severity === 'critical').length,
+        error: data.filter((d) => d.severity === 'error').length,
+        info: data.filter((d) => d.severity === 'info').length,
+        warning: data.filter((d) => d.severity === 'warning').length,
+      };
+
+      if (message) {
+        data = data.filter((d) => d.message.includes(message));
+      }
+      if (severitiesFilter && severitiesFilter.length > 0) {
+        data = data.filter((d) => severitiesFilter.includes(d.severity));
+      }
+
+      if (clusterLevel || deletedHosts || (hostIds && hostIds.length > 0)) {
+        data = data.filter((d) => {
+          if (clusterLevel && d.clusterId && !d.hostId) {
+            return d;
+          }
+          if (hostIds && hostIds.length > 0) {
+            const names = agents
+              .filter((a) => a.metadata?.uid && hostIds.includes(a.metadata.uid))
+              .map((a) => a.metadata?.name);
+            if (d.hostId && names.includes(d.hostId)) {
+              return d;
+            }
+          }
+          if (deletedHosts) {
+            const deleted = allNames.filter((n) => !agents.some((a) => a.metadata?.name === n));
+            if (d.hostId && deleted.includes(d.hostId)) {
+              return d;
+            }
+          }
+          return false;
+        });
+      }
+
+      onSuccess({
+        data,
+        totalEvents: data.length,
+        severities,
+      });
     } catch (e) {
       onError(getErrorMessage(e));
     }

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -54,8 +54,8 @@ const getNetworkConfigurationValidationSchema = (
       ingressVip: vipValidationSchema(hostSubnets, values, initialValues.ingressVip),
       sshPublicKey: sshPublicKeyValidationSchema,
       hostSubnet: hostSubnetValidationSchema,
-      httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-      httpsProxy: httpProxyValidationSchema(values, 'httpProxy'), // share the schema, httpS is currently not supported
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
       noProxy: noProxyValidationSchema,
     }),
   );

package/lib/cim/components/ClusterDeployment/validationSchemas.ts

@@ -14,6 +14,5 @@ export const hostCountValidationSchema = (t: TFunction) => {
       HOSTS_MAX_COUNT,
       t('ai:Maximum hosts count {{HOSTS_MAX_COUNT}} reached.', { HOSTS_MAX_COUNT }),
     )
-    .test('not-four', t('ai:A cluster needs 2 or more worker nodes.'), (value) => value !== 4)
     .required(t('ai:Required field'));
 };

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkStep.tsx

@@ -28,8 +28,8 @@ const getValidationSchema = (t: TFunction) =>
       clusterNetworkHostPrefix: values.isAdvanced
         ? hostPrefixValidationSchema(values.clusterNetworkCidr)
         : Yup.number(),
-      httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-      httpsProxy: httpProxyValidationSchema(values, 'httpProxy'), // share the schema, httpS is currently not supported
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
       noProxy: noProxyValidationSchema,
       nodePortAddress:
         values.apiPublishingStrategy === 'NodePort'

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/types.ts

@@ -21,5 +21,4 @@ export type NetworkStepProps = {
   formRef: React.Ref<FormikProps<NetworkFormValues>>;
   onValuesChanged: (values: NetworkFormValues, initRender: boolean) => void;
   initialValues: NetworkFormValues;
-  count: number;
 };

package/lib/cim/components/Hypershift/modals/ManageHostsModal.tsx

@@ -14,7 +14,7 @@ import * as React from 'react';
 import { AgentK8sResource } from '../../../types';
 import { NodePoolK8sResource, HostedClusterK8sResource, AgentMachineK8sResource } from '../types';
 import NodePoolForm, { NodePoolFormValues } from './NodePoolForm';
-import { formikLabelsToLabels, labelsToFormikValue } from '../utils';
+import { labelsToFormikValue } from '../utils';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { getErrorMessage } from '../../../../common/utils';
 
@@ -57,11 +57,6 @@ const ManageHostsModal = ({
         path: '/spec/replicas',
       });
     }
-    patches.push({
-      op: 'replace',
-      value: formikLabelsToLabels(values.agentLabels),
-      path: '/spec/platform/agent/agentLabelSelector/matchLabels',
-    });
     try {
       await onSubmit(nodePool, patches);
       onClose();

package/lib/cim/components/Hypershift/utils/nodepool.ts

@@ -15,7 +15,7 @@ export const getNodepoolAgents = (
       (am) =>
         am.metadata?.namespace ===
           `${hostedCluster.metadata?.namespace || ''}-${hostedCluster.metadata?.name || ''}` &&
-        am.metadata?.labels?.[CLUSTER_NAME_LABEL] === hostedCluster.metadata?.name &&
+        am.metadata?.labels?.[CLUSTER_NAME_LABEL] === hostedCluster.spec.infraID &&
         am.metadata?.annotations?.[NODEPOOL_NAME_ANNOTATION] === nodePool.metadata?.name &&
         am.status?.agentRef?.name &&
         am.status?.agentRef?.namespace,

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -72,8 +72,16 @@ const validationSchema = (usedNames: string[], t: TFunction) =>
       location: locationValidationSchema(t).required(t('ai:Location is a required field.')),
       pullSecret: pullSecretValidationSchema.required(t('ai:Pull secret is a required field.')),
       sshPublicKey: sshPublicKeyValidationSchema,
-      httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-      httpsProxy: httpProxyValidationSchema(values, 'httpProxy'), // share the schema, httpS is currently not supported
+      httpProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpsProxy',
+        allowEmpty: true,
+      }),
+      httpsProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpProxy',
+        allowEmpty: true,
+      }), // share the schema, httpS is currently not supported
       noProxy: noProxyValidationSchema,
       labels: Yup.array()
         .of(Yup.string())

package/lib/cim/components/modals/AddHostModal.tsx

@@ -73,6 +73,7 @@ const AddHostModal: React.FC<AddHostModalProps> = ({
             noProxy={noProxy}
             hasDHCP={hasDHCP}
             isIPXE={isIPXE}
+            allowEmpty
           />
         )}
         {dialogType === 'download' && (

package/lib/cim/components/modals/EditProxyModal.tsx

@@ -27,8 +27,16 @@ import { getWarningMessage } from './utils';
 const validationSchema = () =>
   Yup.lazy<ProxyFieldsType>((values) =>
     Yup.object<ProxyFieldsType>().shape({
-      httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-      httpsProxy: httpProxyValidationSchema(values, 'httpProxy'),
+      httpProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpsProxy',
+        allowEmpty: true,
+      }),
+      httpsProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpProxy',
+        allowEmpty: true,
+      }),
       noProxy: noProxyValidationSchema,
     }),
   );
@@ -62,6 +70,10 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
   const { t } = useTranslation();
   const [error, setError] = React.useState<string>();
   const warningMsg = getWarningMessage(hasAgents, hasBMHs, t);
+  const enableProxy =
+    !!infraEnv.spec?.proxy?.httpProxy ||
+    !!infraEnv.spec?.proxy?.httpsProxy ||
+    !!infraEnv.spec?.proxy?.noProxy;
   return (
     <Modal
       aria-label={t('ai:Edit proxy settings')}
@@ -76,7 +88,7 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
           httpProxy: infraEnv.spec?.proxy?.httpProxy,
           httpsProxy: infraEnv.spec?.proxy?.httpsProxy,
           noProxy: infraEnv.spec?.proxy?.noProxy,
-          enableProxy: true,
+          enableProxy,
         }}
         validationSchema={validationSchema}
         onSubmit={async (values: ProxyFieldsType) => {

package/lib/common/components/clusterConfiguration/DiscoveryImageConfigForm.tsx

@@ -51,14 +51,15 @@ export const StaticIPInfo: React.FC = () => {
 
 export type DiscoveryImageFormValues = ImageCreateParams & ProxyFieldsType;
 
-const validationSchema = Yup.lazy<DiscoveryImageFormValues>((values) =>
-  Yup.object<DiscoveryImageFormValues>().shape({
-    sshPublicKey: sshPublicKeyValidationSchema,
-    httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-    httpsProxy: httpProxyValidationSchema(values, 'httpProxy'), // share the schema, httpS is currently not supported
-    noProxy: noProxyValidationSchema,
-  }),
-);
+const getValidationSchema = (allowEmpty: boolean) =>
+  Yup.lazy<DiscoveryImageFormValues>((values) =>
+    Yup.object<DiscoveryImageFormValues>().shape({
+      sshPublicKey: sshPublicKeyValidationSchema,
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', allowEmpty }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', allowEmpty }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema,
+    }),
+  );
 
 type DiscoveryImageConfigFormProps = Proxy & {
   onCancel: () => void;
@@ -71,6 +72,7 @@ type DiscoveryImageConfigFormProps = Proxy & {
   sshPublicKey?: string;
   imageType?: ImageType;
   isIPXE?: boolean;
+  allowEmpty?: boolean;
 };
 
 export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> = ({
@@ -84,6 +86,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
   hideDiscoveryImageType,
   hasDHCP,
   isIPXE,
+  allowEmpty,
 }) => {
   const initialValues: DiscoveryImageFormValues = {
     sshPublicKey: sshPublicKey || '',
@@ -99,7 +102,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
     <Formik
       initialValues={initialValues}
       initialStatus={{ error: null }}
-      validationSchema={validationSchema}
+      validationSchema={getValidationSchema(!!allowEmpty)}
       onSubmit={handleSubmit}
     >
       {({ submitForm, isSubmitting, status }) => {

package/lib/common/components/clusterWizard/ClusterWizardStep.tsx

@@ -10,7 +10,11 @@ type ClusterWizardStepProps = {
   navigation?: React.ReactNode;
 };
 
-const ClusterWizardStep: React.FC<ClusterWizardStepProps> = ({ navigation, footer, children }) => {
+const ClusterWizardStep = ({
+  navigation,
+  footer,
+  children,
+}: React.PropsWithChildren<ClusterWizardStepProps>) => {
   // activeStep is required, but we're not passing it. Using the cast to avoid TS error
   const activeStep = undefined as unknown as WizardBodyProps['activeStep'];
   return (

package/lib/common/components/clusterWizard/networkingSteps/ManagedNetworkingControlGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormGroup, TooltipProps } from '@patternfly/react-core';
-import { getFieldId } from '../../ui';
+import { PopoverIcon, getFieldId } from '../../ui';
 import RadioFieldWithTooltip from '../../ui/formik/RadioFieldWithTooltip';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
@@ -47,7 +47,16 @@ export const ManagedNetworkingControlGroup = ({
         name={GROUP_NAME}
         isDisabled={disabled}
         value={'userManaged'}
-        label={t('ai:User-Managed Networking')}
+        label={
+          <>
+            <span>{t('ai:User-Managed Networking')}</span>{' '}
+            <PopoverIcon
+              bodyContent={
+                "With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints."
+              }
+            />
+          </>
+        }
       />
     </FormGroup>
   );

package/lib/common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup.tsx

@@ -39,7 +39,7 @@ export const NetworkTypeControlGroup = ({
         <SplitItem>
           <PopoverIcon
             bodyContent={t(
-              "ai:The next generation networking type, select this when you're using new features and telco features",
+              "ai:OVN separates the physical network topology from the logical one and is recommended if you're using new or telco features.",
             )}
             buttonStyle={{ top: '-4px' }}
           />

package/lib/common/components/fetching/EventListFetch.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { AxiosResponseHeaders } from 'axios';
 import omit from 'lodash-es/omit.js';
 import { Pagination, PaginationVariant } from '@patternfly/react-core';
-import { Event, EventList } from '../../api';
-import { EVENTS_POLLING_INTERVAL, EVENT_SEVERITIES } from '../../config';
+import { EventList } from '../../api';
+import { EVENTS_POLLING_INTERVAL } from '../../config';
 import { ClusterEventsFiltersType, EventListFetchProps } from '../../types';
 import { useStateSafely } from '../../hooks';
 import { ErrorState, LoadingState } from '../ui/uiState';
@@ -20,12 +19,15 @@ const initialSeverityCounts = {
   warning: 0,
 };
 
-export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps) => {
-  const { cluster, hostId, className, entityKind } = props;
+export const EventListFetch = ({
+  onFetchEvents,
+  disablePagination,
+  ...props
+}: EventListFetchProps) => {
+  const { cluster, hostId, className, entityKind, setLoading } = props;
 
   const [lastPolling, setLastPolling] = useStateSafely(0);
   const [error, setError] = useStateSafely('');
-  const [isLoading, setLoading] = useStateSafely(true);
   const [events, setEvents] = useStateSafely<EventList | undefined>(undefined);
 
   const [pageNum, setPageNum] = useStateSafely(1);
@@ -53,43 +55,29 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
     setPageNum(newPage);
   };
 
-  const parseHeaders = React.useCallback(
-    (headers: AxiosResponseHeaders) => {
-      const severities: Record<Event['severity'], number> = {
-        error: 0,
-        info: 0,
-        warning: 0,
-        critical: 0,
-      };
-      EVENT_SEVERITIES.forEach((severity) => {
-        const count = Number(headers[`severity-count-${severity}`]);
-        severities[severity] = count;
-      });
-      setTotalEvents(Number(headers['event-count']));
-      setSeverityCount(severities as SeverityCountsType);
-    },
-    [setSeverityCount, setTotalEvents],
-  );
-
   React.useEffect(() => {
     let timer: ReturnType<typeof setTimeout>;
     setLoading(true);
 
-    void onFetchEvents(
+    onFetchEvents(
       {
         clusterId: cluster.id,
         ...omit(filters, 'selectAll'),
         offset: perPage * (pageNum - 1),
         limit: perPage,
       },
-      ({ data: newEvents, headers }) => {
+      ({ data: newEvents, severities, totalEvents }) => {
         setError('');
         setEvents(newEvents);
         setLoading(false);
-        parseHeaders(headers);
+        setTotalEvents(totalEvents);
+        setSeverityCount(severities);
         timer = setTimeout(() => setLastPolling(Date.now()), EVENTS_POLLING_INTERVAL);
       },
-      setError,
+      (err: string) => {
+        setError(err);
+        setLoading(false);
+      },
     );
 
     return () => clearTimeout(timer);
@@ -100,13 +88,13 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
     onFetchEvents,
     perPage,
     pageNum,
-    parseHeaders,
-    totalEvents,
     filters,
     setLoading,
     setError,
     setEvents,
     setLastPolling,
+    setTotalEvents,
+    setSeverityCount,
   ]);
 
   const forceRefetch = React.useCallback(() => {
@@ -125,7 +113,7 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
     eventList = <ErrorState title={error} fetchData={forceRefetch} />;
   }
 
-  if (isLoading || !events) {
+  if (!events) {
     eventList = <LoadingState />;
   }
 
@@ -144,16 +132,18 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
         severityCounts={severityCounts}
       />
       {eventList}
-      <Pagination
-        perPageComponent="button"
-        itemCount={totalEvents}
-        widgetId="events-pagination"
-        perPage={perPage}
-        page={pageNum}
-        variant={PaginationVariant.bottom}
-        onSetPage={onSetPage}
-        onPerPageSelect={onPerPageSelect}
-      />
+      {!disablePagination && (
+        <Pagination
+          perPageComponent="button"
+          itemCount={totalEvents}
+          widgetId="events-pagination"
+          perPage={perPage}
+          page={pageNum}
+          variant={PaginationVariant.bottom}
+          onSetPage={onSetPage}
+          onPerPageSelect={onPerPageSelect}
+        />
+      )}
     </>
   );
 };

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

@@ -17,9 +17,9 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import { CaretDownIcon } from '@patternfly/react-icons';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 import './TableToolbar.css';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type TableToolbarProps = {
   itemIDs: string[];
@@ -45,6 +45,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
   children,
   ...paginationProps
 }) => {
+  const { t } = useTranslation();
   const [actionsOpen, setActionsOpen] = React.useState(false);
   const [selectOpen, setSelectOpen] = React.useState(false);
   const onSelectToggle = React.useCallback(() => setSelectOpen(!selectOpen), [selectOpen]);
@@ -75,7 +76,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
           toggleIndicator={CaretDownIcon}
           isDisabled={isDisabled}
         >
-          Actions
+          {t('ai:Actions')}
         </DropdownToggle>
       }
       isOpen={actionsOpen}
@@ -85,7 +86,6 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
 
   const onSelectAll = () => setSelectedIDs(itemIDs);
   const onSelectNone = () => setSelectedIDs([]);
-  const { t } = useTranslation();
   return (
     <Split hasGutter>
       <SplitItem isFilled>

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

@@ -217,7 +217,7 @@ export const hostStatus: HostStatus<Host['status'] | 'finalizing'> = Object.free
     category: 'Installation related',
     icon: <ExclamationTriangleIcon color={warningColor.value} />,
     details:
-      'Host already booted from disk during previous installation. To finish resetting the installation please boot the host into Discovery ISO.',
+      'Host has already been booted from disk during the previous installation. To finish resetting the installation, boot the host into the discovery image',
   },
   finalizing: {
     key: 'finalizing',

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

@@ -226,6 +226,9 @@ const ClusterEventsToolbar = ({
               isOpen={isHostExpanded}
               placeholderText={<Placeholder text="Hosts" />}
               isDisabled={allHosts.length === 0}
+              maxHeight={280}
+              zIndex={600}
+              menuAppendTo={document.body}
             >
               {[
                 <SelectOption

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

@@ -5,7 +5,7 @@ import { getFieldId, HelperText } from './formik';
 
 export interface StaticFieldProps {
   name: string;
-  label: string;
+  label: React.ReactNode;
   helperText?: React.ReactNode;
   helperTextInvalid?: React.ReactNode;
   isRequired?: boolean;