katello 4.16.3 → 4.17.0.rc1

data/webpack/components/extensions/HostDetails/Tabs/DebsTab/DebInstallModal.scss

@@ -1,3 +1,3 @@
-#deb-install-modal .pf-c-input-group input {
+#deb-install-modal .pf-v5-c-input-group input {
   min-width: 15em;
 }

data/webpack/components/extensions/HostDetails/Tabs/DebsTab/DebsTab.js

@@ -3,6 +3,11 @@ import { useSelector, useDispatch } from 'react-redux';
 import {
   ActionList,
   ActionListItem,
+  Skeleton,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import {
   Dropdown,
   DropdownItem,
   DropdownSeparator,
@@ -12,10 +17,7 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  Skeleton,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText } from '@patternfly/react-table';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -74,7 +76,7 @@ const UpdateVersionsSelect = ({
           variant={SelectVariant.single}
           aria-label="upgradable-version-select"
           ouiaId="upgradable-version-select"
-          onToggle={isOpen => toggleUpgradableVersionSelect(isOpen, rowIndex)}
+          onToggle={(_event, isOpen) => toggleUpgradableVersionSelect(isOpen, rowIndex)}
           onSelect={(event, selected) => {
             onUpgradableVersionSelect(event, selected, rowIndex, packageName);
           }}
@@ -502,7 +504,7 @@ export const DebsTab = () => {
         >
           <Thead>
             <Tr ouiaId="row-header">
-              <Th key="select-all" />
+              <Th key="select-all" aria-label="Select all table header" />
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
                 pfSortParams={pfSortParams}
@@ -537,12 +539,7 @@ export const DebsTab = () => {
                     isDisabled: actionInProgress,
                   },
                   {
-                    title: __('Upgrade via customized remote execution'),
-                    component: 'a',
-                    href: katelloPackageUpdateUrl({
-                      hostname,
-                      packageName,
-                    }),
+                    title: <a href={katelloPackageUpdateUrl({ hostname, packageName })}>{__('Upgrade via customized remote execution')}</a>,
                   },
                 );
               }
@@ -552,7 +549,7 @@ export const DebsTab = () => {
                   {showActions ? (
                     <Td
                       select={{
-                        disable: actionInProgress,
+                        isDisabled: actionInProgress,
                         isSelected: isSelected(id),
                         onSelect: (event, selected) => selectOne(selected, id, pkg),
                         rowIndex,

data/webpack/components/extensions/HostDetails/Tabs/DebsTab/DebsTab.scss

@@ -6,7 +6,7 @@
   margin: 16px 24px;
 }
 
-#style-select-id .pf-c-select button.pf-c-select__toggle {
+#style-select-id .pf-v5-c-select button.pf-v5-c-select__toggle {
   font-size: 1em;
   margin-left: -0.5rem;
 }

data/webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.js

@@ -2,10 +2,22 @@ import React, { useCallback, useState, useMemo } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useSelector, useDispatch } from 'react-redux';
 import {
-  Split, SplitItem, ActionList, ActionListItem, Dropdown,
-  DropdownItem, KebabToggle, Skeleton, Tooltip, ToggleGroup,
-  DropdownToggle, DropdownToggleAction,
+  Split,
+  SplitItem,
+  ActionList,
+  ActionListItem,
+  Skeleton,
+  Tooltip,
+  ToggleGroup,
+  ToggleGroupItem,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+  DropdownToggle,
+  DropdownToggleAction,
+} from '@patternfly/react-core/deprecated';
 import { TimesIcon, CheckIcon } from '@patternfly/react-icons';
 import {
   TableVariant,
@@ -28,7 +40,7 @@ import { useSet, useBulkSelect, useUrlParams } from 'foremanReact/components/PF4
 import { useTableSort } from 'foremanReact/components/PF4/Helpers/useTableSort';
 import SelectableDropdown from '../../../../SelectableDropdown';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
-import { ErrataType, ErrataSeverity, ErrataToggleGroupItem } from '../../../../../components/Errata';
+import { ErrataType, ErrataSeverity } from '../../../../../components/Errata';
 import { getInstallableErrata } from './HostErrataActions';
 import ErratumExpansionDetail from './ErratumExpansionDetail';
 import ErratumExpansionContents from './ErratumExpansionContents';
@@ -38,13 +50,17 @@ import { installErrata } from '../RemoteExecutionActions';
 import { errataInstallUrl } from '../customizedRexUrlHelpers';
 import './ErrataTab.scss';
 import hostIdNotReady, { getHostDetails } from '../../HostDetailsActions';
-import { hasRequiredPermissions as can,
+import {
+  hasRequiredPermissions as can,
   missingRequiredPermissions as cannot,
-  userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
+  userPermissionsFromHostDetails,
+  hostIsImageMode,
+} from '../../hostDetailsHelpers';
 import SortableColumnHeaders from '../../../../Table/components/SortableColumnHeaders';
 import { useRexJobPolling } from '../RemoteExecutionHooks';
 import { errataStatusContemplation, friendlyErrataStatus } from '../../../../Errata/errataHelpers';
 import { runSubmanRepos } from '../../Cards/ContentViewDetailsCard/HostContentViewActions';
+import ImageModeHostAlert from '../../../Hosts/ImageModeHostAlert';
 
 const recalculateApplicability = ['edit_hosts'];
 const invokeRexJobs = ['create_job_invocations'];
@@ -250,7 +266,7 @@ export const ErrataTab = () => {
   const disabledReason = __('A remote execution job is in progress');
 
   const tdSelect = useCallback((errataId, rowIndex, rexJobInProgress) => ({
-    disable: rexJobInProgress || !isSelectable(errataId),
+    isDisabled: rexJobInProgress || !isSelectable(errataId),
     isSelected: isSelected(errataId),
     onSelect: (event, selected) => selectOne(selected, errataId),
     rowIndex,
@@ -388,7 +404,9 @@ export const ErrataTab = () => {
   ) : null;
 
   const hostIsNonLibrary = (
-    contentFacet?.contentViewDefault === false || contentFacet.lifecycleEnvironmentLibrary === false
+    (contentFacet?.contentViewDefault === false ||
+      contentFacet.lifecycleEnvironmentLibrary === false) &&
+    contentFacet.contentView.rolling === false
   );
   const toggleGroup = (
     <Split hasGutter>
@@ -417,23 +435,33 @@ export const ErrataTab = () => {
       {hostIsNonLibrary &&
         <SplitItem>
           <ToggleGroup aria-label="Installable Errata">
-            <ErrataToggleGroupItem
+            <ToggleGroupItem
               text={__('Applicable')}
-              tooltipText={__('Applicable errata apply to at least one package installed on the host.')}
               buttonId="applicableToggle"
               aria-label="Show applicable errata"
               isSelected={toggleGroupState === APPLICABLE}
               onChange={() => setToggleGroupState(APPLICABLE)}
             />
-            <ErrataToggleGroupItem
+            <ToggleGroupItem
               text={__('Installable')}
-              tooltipText={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
               buttonId="installableToggle"
               aria-label="Show installable errata"
               isSelected={toggleGroupState === INSTALLABLE}
               onChange={() => setToggleGroupState(INSTALLABLE)}
             />
           </ToggleGroup>
+          <Tooltip
+            content={__('Applicable errata apply to at least one package installed on the host.')}
+            position="top"
+            enableFlip
+            triggerRef={() => document.getElementById('applicableToggle')}
+          />
+          <Tooltip
+            content={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
+            position="top"
+            enableFlip
+            triggerRef={() => document.getElementById('installableToggle')}
+          />
         </SplitItem>
       }
     </Split>
@@ -442,6 +470,7 @@ export const ErrataTab = () => {
   return (
     <div>
       <div id="errata-tab">
+        {hostIsImageMode({ hostDetails }) && <ImageModeHostAlert />}
         <TableWrapper
           {...{
             metadata,
@@ -485,14 +514,14 @@ export const ErrataTab = () => {
         >
           <Thead>
             <Tr ouiaId="row-header">
-              <Th key="expand-carat" />
-              <Th key="select-all" />
+              <Th key="expand-carat" aria-label="expand table header" />
+              <Th key="select-all" aria-label="Select all table header" />
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
                 pfSortParams={pfSortParams}
                 columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
               />
-              <Th key="action-menu" />
+              <Th key="action-menu" aria-label="action menu table header" />
             </Tr>
           </Thead>
           <>
@@ -515,17 +544,13 @@ export const ErrataTab = () => {
                     isDisabled: actionInProgress,
                   },
                   {
-                    title: __('Apply via customized remote execution'),
-                    component: 'a',
-                    href: errataInstallUrl({ hostname, search: errataSearchQuery(errataId) }),
+                    title: <a href={errataInstallUrl({ hostname, search: errataSearchQuery(errataId) })}>{__('Apply via customized remote execution')}</a>,
                   },
                 ];
               } else {
                 rowActions = [
                   {
-                    title: __('Apply erratum'), // Incremental update
-                    component: 'a',
-                    href: urlBuilder(`errata/${id}/content-hosts`, ''),
+                    title: <a href={urlBuilder(`errata/${id}`, '')}>{__('View details')}</a>, // Incremental update
                   },
                 ];
               }

data/webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.scss

@@ -6,6 +6,6 @@
   margin: 16px 24px;
 }
 
-.pf-c-toggle-group__text {
+.pf-v5-c-toggle-group__text {
   color: black;
 }

data/webpack/components/extensions/HostDetails/Tabs/ModuleStreamsTab/ModuleStreamsTab.js

@@ -2,21 +2,26 @@ import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Skeleton,
+import {
+  Skeleton,
   Label,
   Button,
   Split,
   SplitItem,
   Checkbox,
-  Dropdown,
   Text,
   TextVariants,
+  Modal,
+  ModalVariant,
+  Icon,
+} from '@patternfly/react-core';
+import {
+  Dropdown,
   DropdownItem,
   KebabToggle,
   DropdownPosition,
   DropdownSeparator,
-  Modal,
-  ModalVariant } from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import PropTypes from 'prop-types';
 import { upperFirst, lowerCase } from 'lodash';
 import { TableText, TableVariant, Thead, Tbody, Tr, Td } from '@patternfly/react-table';
@@ -45,7 +50,9 @@ import {
   hasRequiredPermissions as can,
   missingRequiredPermissions as cannot,
   userPermissionsFromHostDetails,
+  hostIsImageMode,
 } from '../../hostDetailsHelpers';
+import ImageModeHostAlert from '../../../Hosts/ImageModeHostAlert';
 
 export const hideModuleStreamsTab = ({ hostDetails }) => !(hostDetails?.operatingsystem_family === 'Redhat' && Number(hostDetails?.operatingsystem_major > 7));
 
@@ -54,9 +61,9 @@ const EnabledIcon = ({ streamText, streamInstallStatus, upgradable }) => {
   case (streamInstallStatus?.length > 0 && streamText === 'disabled'):
     return <TableText wrapModifier="nowrap">{INSTALLED_STATE.INSTALLED}</TableText>;
   case (streamInstallStatus?.length > 0 && streamText === 'enabled' && upgradable !== true):
-    return <><CheckIcon color="green" /> {INSTALLED_STATE.UPTODATE}</>;
+    return <><Icon color="green" ><CheckIcon /></Icon>{INSTALLED_STATE.UPTODATE}</>;
   case (streamInstallStatus?.length > 0 && streamText === 'enabled' && upgradable):
-    return <><LongArrowAltUpIcon color="blue" /> {INSTALLED_STATE.UPGRADEABLE}</>;
+    return <><Icon color="blue"><LongArrowAltUpIcon /></Icon> {INSTALLED_STATE.UPGRADEABLE}</>;
   default:
     return <InactiveText text={INSTALLED_STATE.NOTINSTALLED} />;
   }
@@ -343,6 +350,7 @@ export const ModuleStreamsTab = () => {
   return (
     <div>
       <div id="modulestreams-tab">
+        {hostIsImageMode({ hostDetails }) && <ImageModeHostAlert />}
         <TableWrapper
           {...{
             metadata,
@@ -432,7 +440,7 @@ export const ModuleStreamsTab = () => {
                     id={`Checkbox${id}`}
                     label={__('Customize with Rex')}
                     isChecked={id === useCustomizedRex}
-                    onChange={checked => (checked ? setUseCustomizedRex(id) : setUseCustomizedRex(''))}
+                    onChange={(_event, checked) => (checked ? setUseCustomizedRex(id) : setUseCustomizedRex(''))}
                   />
                 </DropdownItem>,
                 <DropdownSeparator key={`separator-${id}`} ouiaId={`separator-${id}`} />,

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackageInstallModal.js

@@ -1,5 +1,15 @@
 import React, { useState } from 'react';
-import { Modal, Button, Dropdown, DropdownItem, DropdownToggle, DropdownDirection, DropdownToggleAction } from '@patternfly/react-core';
+import {
+  Modal,
+  Button,
+} from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownDirection,
+  DropdownToggleAction,
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon, CaretUpIcon } from '@patternfly/react-icons';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
@@ -198,7 +208,7 @@ const PackageInstallModal = ({
           <Tr ouiaId="row-header">
             {columnHeaders.map(col =>
               <Th key={col}>{col}</Th>)}
-            <Th />
+            <Th aria-label="action menu header" />
           </Tr>
         </Thead>
         <Tbody>
@@ -213,7 +223,7 @@ const PackageInstallModal = ({
               <Tr key={id} ouiaId={`row-${id}`}>
                 <Td
                   select={{
-                    disable: false,
+                    isDisabled: false,
                     isSelected: isSelected(id),
                     onSelect: (_event, selected) => selectOne(selected, id, pkg),
                     rowIndex,

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackageInstallModal.scss

@@ -1,3 +1,3 @@
-#package-install-modal .pf-c-input-group input {
+#package-install-modal .pf-v5-c-input-group input {
   min-width: 15em;
 }

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackagesTab.js

@@ -3,6 +3,11 @@ import { useSelector, useDispatch } from 'react-redux';
 import {
   ActionList,
   ActionListItem,
+  Skeleton,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import {
   Dropdown,
   DropdownItem,
   DropdownSeparator,
@@ -12,11 +17,8 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  Skeleton,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
-import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText } from '@patternfly/react-table';
+} from '@patternfly/react-core/deprecated';
+import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText, ActionsColumn } from '@patternfly/react-table';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { HOST_DETAILS_KEY } from 'foremanReact/components/HostDetails/consts';
@@ -40,12 +42,16 @@ import { katelloPackageUpdateUrl, packagesUpdateUrl } from '../customizedRexUrlH
 import './PackagesTab.scss';
 import hostIdNotReady, { getHostDetails } from '../../HostDetailsActions';
 import PackageInstallModal from './PackageInstallModal';
-import { hasRequiredPermissions as can,
+import {
+  hasRequiredPermissions as can,
   missingRequiredPermissions as cannot,
-  userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
+  userPermissionsFromHostDetails,
+  hostIsImageMode,
+} from '../../hostDetailsHelpers';
 import SortableColumnHeaders from '../../../../Table/components/SortableColumnHeaders';
 import { useRexJobPolling } from '../RemoteExecutionHooks';
 import { runSubmanRepos } from '../../Cards/ContentViewDetailsCard/HostContentViewActions';
+import ImageModeHostAlert from '../../../Hosts/ImageModeHostAlert';
 
 const invokeRexJobs = ['create_job_invocations'];
 const createBookmarks = ['create_bookmarks'];
@@ -74,7 +80,7 @@ const UpdateVersionsSelect = ({
           variant={SelectVariant.single}
           aria-label="upgradable-version-select"
           ouiaId="upgradable-version-select"
-          onToggle={isOpen => toggleUpgradableVersionSelect(isOpen, rowIndex)}
+          onToggle={(_event, isOpen) => toggleUpgradableVersionSelect(isOpen, rowIndex)}
           onSelect={(event, selected) => {
             onUpgradableVersionSelect(event, selected, rowIndex, packageName);
           }}
@@ -475,6 +481,7 @@ export const PackagesTab = () => {
   return (
     <div>
       <div id="packages-tab">
+        {hostIsImageMode({ hostDetails }) && <ImageModeHostAlert />}
         <TableWrapper
           {...{
             metadata,
@@ -515,13 +522,13 @@ export const PackagesTab = () => {
         >
           <Thead>
             <Tr ouiaId="row-header">
-              <Th key="select-all" />
+              <Th key="select-all" aria-label="Select all table header" />
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
                 pfSortParams={pfSortParams}
                 columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
               />
-              <Th />
+              <Th aria-label="action menu header" />
             </Tr>
           </Thead>
           <Tbody>
@@ -550,15 +557,19 @@ export const PackagesTab = () => {
                     isDisabled: actionInProgress,
                   },
                   {
-                    title: __('Upgrade via customized remote execution'),
-                    component: 'a',
-                    href: katelloPackageUpdateUrl({
-                      hostname,
-                      packageName: selectedPackageUpgradeVersion({
-                        packageName,
-                        upgradableVersions,
-                      }),
-                    }),
+                    title: (
+                      <a
+                        href={katelloPackageUpdateUrl({
+                          hostname,
+                          packageName: selectedPackageUpgradeVersion({
+                            packageName,
+                            upgradableVersions,
+                          }),
+                        })}
+                      >
+                        {__('Upgrade via customized remote execution')}
+                      </a>
+                    ),
                   },
                 );
               }
@@ -568,7 +579,7 @@ export const PackagesTab = () => {
                   {showActions ? (
                     <Td
                       select={{
-                        disable: actionInProgress,
+                        isDisabled: actionInProgress,
                         isSelected: isSelected(id),
                         onSelect: (event, selected) => selectOne(selected, id, pkg),
                         rowIndex,
@@ -602,7 +613,10 @@ export const PackagesTab = () => {
                       actions={{
                         items: rowActions,
                       }}
+                    ><ActionsColumn
+                      actions={rowActions}
                     />
+                    </Td>
                   ) : null}
                 </Tr>
               );

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackagesTab.scss

@@ -6,7 +6,7 @@
   margin: 16px 24px;
 }
 
-#style-select-id .pf-c-select button.pf-c-select__toggle {
+#style-select-id .pf-v5-c-select button.pf-v5-c-select__toggle {
   font-size: 1em;
   margin-left: -0.5rem;
 }

data/webpack/components/extensions/HostDetails/Tabs/RepositorySetsTab/RepositorySetsTab.js

@@ -22,9 +22,6 @@ import {
   ActionListItem,
   Alert,
   AlertActionCloseButton,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   Label,
   Skeleton,
   Split,
@@ -33,6 +30,11 @@ import {
   ToggleGroupItem,
   Tooltip,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from '@patternfly/react-core/deprecated';
 import { FlagIcon } from '@patternfly/react-icons';
 import {
   TableVariant,
@@ -593,13 +595,13 @@ const RepositorySetsTab = () => {
         >
           <Thead>
             <Tr ouiaId="header-tr">
-              <Th key="select-all" />
+              <Th key="select-all" aria-label="Select all table header" />
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
                 pfSortParams={pfSortParams}
                 columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
               />
-              <Th key="action-menu" />
+              <Th key="action-menu" aria-label="action menu table header" />
             </Tr>
           </Thead>
           <Tbody>
@@ -622,7 +624,7 @@ const RepositorySetsTab = () => {
                 <Tr key={id} ouiaId={`tr-${rowIndex}`}>
                   {canDoContentOverrides ? (
                     <Td select={{
-                      disable: !isSelectable(id),
+                      isDisabled: !isSelectable(id),
                       isSelected: isSelected(id),
                       onSelect: (event, selected) => selectOne(selected, id),
                       rowIndex,

data/webpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.js

@@ -6,15 +6,17 @@ import {
   FlexItem,
   Modal,
   ModalVariant,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
   Text,
   TextContent,
   TextList,
   TextListItem,
   Alert,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon, ArrowRightIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useSelector } from 'react-redux';

data/webpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.scss

@@ -1,4 +1,4 @@
-.pf-c-content {
+.pf-v5-c-content {
   ul {
       margin-top: 1rem;
       li svg {

data/webpack/components/extensions/HostDetails/Tabs/TracesTab/TracesEnabler.js

@@ -4,12 +4,11 @@ import {
   EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
-  Title,
   EmptyStateVariant,
   Button,
   Flex,
   FlexItem,
-  Spinner,
+  Spinner, EmptyStateHeader, EmptyStateFooter,
 } from '@patternfly/react-core';
 import { WrenchIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -67,14 +66,12 @@ const TracesEnabler = ({ hostname, tracerRpmAvailable }) => {
   } = useRexJobPolling(initialAction, successAction);
 
   return (
-    <EmptyState variant={EmptyStateVariant.small}>
+    <EmptyState variant={EmptyStateVariant.sm}>
       {pollingStarted ?
         <Spinner /> :
         <EmptyStateIcon icon={WrenchIcon} />
       }
-      <Title ouiaId="enable-tracer-title" headingLevel="h2" size="lg">
-        {pollingStarted ? enablingTitle : title}
-      </Title>
+      <EmptyStateHeader titleText={<>{pollingStarted ? enablingTitle : title}</>} headingLevel="h2" />
       <EmptyStateBody>
         <Flex direction={{ default: 'column' }}>
           <FlexItem>{body}</FlexItem>
@@ -90,13 +87,15 @@ const TracesEnabler = ({ hostname, tracerRpmAvailable }) => {
           </FlexItem>
         </Flex>
       </EmptyStateBody>
-      <EnableTracerModal
-        key={hostname}
-        isOpen={enableTracerModalOpen}
-        setIsOpen={setEnableTracerModalOpen}
-        triggerJobStart={triggerJobStart}
-        tracerRpmAvailable={tracerRpmAvailable}
-      />
+      <EmptyStateFooter>
+        <EnableTracerModal
+          key={hostname}
+          isOpen={enableTracerModalOpen}
+          setIsOpen={setEnableTracerModalOpen}
+          triggerJobStart={triggerJobStart}
+          tracerRpmAvailable={tracerRpmAvailable}
+        />
+      </EmptyStateFooter>
     </EmptyState>
   );
 };