katello 4.3.0 → 4.4.0.rc1

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

@@ -0,0 +1,279 @@
+import React, { useState } from 'react';
+import { Modal, Button, Dropdown, DropdownItem, DropdownToggle, DropdownDirection, DropdownToggleAction } from '@patternfly/react-core';
+import { CaretDownIcon, CaretUpIcon } from '@patternfly/react-icons';
+import { useSelector, useDispatch } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { Thead, Th, Tbody, Tr, Td, TableVariant } from '@patternfly/react-table';
+import { noop } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+import PropTypes from 'prop-types';
+import TableWrapper from '../../../Table/TableWrapper';
+import { useBulkSelect } from '../../../Table/TableHooks';
+import { HOST_YUM_INSTALLABLE_PACKAGES_KEY } from '../YumInstallablePackages/YumInstallablePackagesConstants';
+import { selectHostYumInstallablePackagesStatus } from '../YumInstallablePackages/YumInstallablePackagesSelectors';
+import { getHostYumInstallablePackages } from '../YumInstallablePackages/YumInstallablePackagesActions';
+import './PackageInstallModal.scss';
+import { installPackageBySearch } from './RemoteExecutionActions';
+import { katelloPackageInstallBySearchUrl, katelloPackageInstallUrl } from './customizedRexUrlHelpers';
+import hostIdNotReady from '../HostDetailsActions';
+import { installPackageViaKatelloAgent } from '../HostPackages/HostPackagesActions';
+
+const InstallDropdown = ({
+  isDisabled, installViaRex, installViaKatelloAgent,
+  bulkCustomizedRexUrl, showKatelloAgent,
+  disableInstallViaKatelloAgent,
+}) => {
+  const [isActionOpen, setIsActionOpen] = useState(false);
+  const onActionSelect = () => {
+    setIsActionOpen(false);
+  };
+  const onActionToggle = () => {
+    setIsActionOpen(prev => !prev);
+  };
+
+  const dropdownItems = [
+    <DropdownItem
+      key="install-k-agent"
+      component="button"
+      onClick={installViaKatelloAgent}
+      isDisabled={disableInstallViaKatelloAgent}
+    >
+      {__('Install via katello-agent')}
+    </DropdownItem>,
+    <DropdownItem key="install-rex" component="button" onClick={installViaRex}>
+      {__('Install via remote execution')}
+    </DropdownItem>,
+    <DropdownItem
+      key="install-customized-rex"
+      component="a"
+      href={bulkCustomizedRexUrl}
+      onClick={onActionSelect}
+    >
+      {__('Install via customized remote execution')}
+    </DropdownItem>,
+  ];
+
+  if (!showKatelloAgent) dropdownItems.shift();
+  const defaultRemoteAction = showKatelloAgent ? installViaKatelloAgent : installViaRex;
+
+  return (
+    <Dropdown
+      direction={DropdownDirection.up}
+      onSelect={onActionSelect}
+      toggle={
+        <DropdownToggle
+          isPrimary
+          isDisabled={isDisabled}
+          splitButtonItems={[
+            <DropdownToggleAction key="install" onClick={defaultRemoteAction}>
+              Install
+            </DropdownToggleAction>,
+          ]}
+          splitButtonVariant="action"
+          toggleIndicator={isActionOpen ? CaretUpIcon : CaretDownIcon}
+          onToggle={onActionToggle}
+        />
+      }
+      isOpen={isActionOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};
+
+InstallDropdown.propTypes = {
+  isDisabled: PropTypes.bool,
+  installViaRex: PropTypes.func,
+  installViaKatelloAgent: PropTypes.func,
+  bulkCustomizedRexUrl: PropTypes.string,
+  showKatelloAgent: PropTypes.bool,
+  disableInstallViaKatelloAgent: PropTypes.bool,
+};
+
+InstallDropdown.defaultProps = {
+  isDisabled: false,
+  installViaRex: noop,
+  installViaKatelloAgent: noop,
+  bulkCustomizedRexUrl: '',
+  showKatelloAgent: false,
+  disableInstallViaKatelloAgent: false,
+};
+
+const PackageInstallModal = ({
+  isOpen, closeModal, hostId, hostName, showKatelloAgent,
+}) => {
+  const emptyContentTitle = __('No packages available to install');
+  const emptyContentBody = __('No packages available to install on this host. Please check the host\'s content view and lifecycle environment.');
+  const emptySearchTitle = __('No matching packages found');
+  const emptySearchBody = __('Try changing your search settings.');
+  const columnHeaders = ['', __('Package'), __('Version')];
+  const response =
+    useSelector(state => selectAPIResponse(state, HOST_YUM_INSTALLABLE_PACKAGES_KEY));
+  const status = useSelector(state => selectHostYumInstallablePackagesStatus(state));
+  const dispatch = useDispatch();
+  const { results, ...metadata } = response;
+  const [suppressFirstFetch, setSuppressFirstFetch] = useState(false);
+
+  const {
+    searchQuery,
+    updateSearchQuery,
+    isSelected,
+    selectOne,
+    selectNone,
+    fetchBulkParams,
+    isSelectable,
+    selectedCount,
+    selectedResults,
+    ...selectAll
+  } = useBulkSelect({ results, metadata });
+  const fetchItems = (params) => {
+    if (!hostId) return hostIdNotReady;
+
+    if (results?.length > 0 && suppressFirstFetch) {
+      // If the modal has already been opened, no need to re-fetch the data that's already present
+      setSuppressFirstFetch(false);
+      return { type: 'HOST_APPLICABLE_PACKAGES_NOOP' };
+    }
+    return getHostYumInstallablePackages(hostId, params);
+  };
+
+  const selectedPackageNames = () => selectedResults.map(({ name }) => name);
+
+  const installViaRex = () => {
+    dispatch(installPackageBySearch({ hostname: hostName, search: fetchBulkParams() }));
+    selectNone();
+    closeModal();
+  };
+
+  const installViaKatelloAgent = () => {
+    dispatch(installPackageViaKatelloAgent(hostId, { packages: selectedPackageNames() }));
+    selectNone();
+    closeModal();
+  };
+
+  const handleModalClose = () => {
+    setSuppressFirstFetch(true);
+    closeModal();
+  };
+
+  const bulkCustomizedRexUrl = selectedCount ?
+    katelloPackageInstallBySearchUrl({ hostname: hostName, search: fetchBulkParams() }) :
+    '#';
+  const simpleBulkCustomizedRexUrl
+    = katelloPackageInstallUrl({ hostname: hostName, packages: selectedPackageNames() });
+  const enableSimpleRexUrl = !!selectedResults.length;
+
+  const modalActions = ([
+    <InstallDropdown
+      key="install"
+      isDisabled={!selectedCount}
+      installViaRex={installViaRex}
+      installViaKatelloAgent={installViaKatelloAgent}
+      bulkCustomizedRexUrl={enableSimpleRexUrl ? simpleBulkCustomizedRexUrl : bulkCustomizedRexUrl}
+      showKatelloAgent={showKatelloAgent}
+      disableInstallViaKatelloAgent={selectedResults.length === 0}
+    />,
+    <Button key="cancel" variant="link" onClick={handleModalClose}>
+      Cancel
+    </Button>,
+  ]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleModalClose}
+      title={__('Install packages')}
+      width="50%"
+      actions={modalActions}
+      id="package-install-modal"
+    >
+      <FormattedMessage
+        className="pkg-install-modal-blurb"
+        id="pkg-install-modal-blurb"
+        defaultMessage={__('Select packages to install to the host {hostName}.')}
+        values={{
+          hostName: <strong>{hostName}</strong>,
+        }}
+      />
+      <TableWrapper
+        {...{
+          metadata,
+          emptyContentTitle,
+          emptyContentBody,
+          emptySearchTitle,
+          emptySearchBody,
+          status,
+          searchQuery,
+          updateSearchQuery,
+          selectedCount,
+          selectNone,
+        }
+        }
+        additionalListeners={[hostId]}
+        fetchItems={fetchItems}
+        searchPlaceholderText={__('Search available packages')}
+        autocompleteEndpoint={`/hosts/${hostId}/packages/auto_complete_search`}
+        foremanApiAutoComplete
+        variant={TableVariant.compact}
+        {...selectAll}
+        displaySelectAllCheckbox
+      >
+        <Thead>
+          <Tr>
+            {columnHeaders.map(col =>
+              <Th key={col}>{col}</Th>)}
+            <Th />
+          </Tr>
+        </Thead>
+        <Tbody>
+          {results?.map((pkg, rowIndex) => {
+            const {
+              id,
+              name: packageName,
+              rpm_id: rpmId,
+              version,
+            } = pkg;
+            return (
+              <Tr key={id}>
+                <Td
+                  select={{
+                      disable: false,
+                      isSelected: isSelected(id),
+                      onSelect: (_event, selected) => selectOne(selected, id, pkg),
+                      rowIndex,
+                      variant: 'checkbox',
+                  }}
+                />
+                <Td>
+                  {rpmId
+                    ? <a href={urlBuilder(`packages/${rpmId}`, '')}>{packageName}</a>
+                    : packageName
+                  }
+                </Td>
+                <Td>
+                  {version}
+                </Td>
+              </Tr>
+            );
+          })
+          }
+        </Tbody>
+      </TableWrapper>
+    </Modal>
+  );
+};
+
+PackageInstallModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  hostId: PropTypes.number.isRequired,
+  hostName: PropTypes.string.isRequired,
+  showKatelloAgent: PropTypes.bool,
+};
+
+PackageInstallModal.defaultProps = {
+  showKatelloAgent: false,
+};
+
+export default PackageInstallModal;

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

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

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

@@ -1,24 +1,51 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Button, Hint, HintBody } from '@patternfly/react-core';
+import {
+  Button,
+  Hint,
+  HintBody,
+  DropdownItem,
+  DropdownSeparator,
+  Dropdown,
+  Skeleton,
+  Split,
+  SplitItem,
+  ActionList,
+  ActionListItem,
+  KebabToggle,
+} from '@patternfly/react-core';
 import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import SelectableDropdown from '../../../SelectableDropdown';
 import TableWrapper from '../../../../components/Table/TableWrapper';
+import { useUrlParams } from '../../../../components/Table/TableHooks';
 import { PackagesStatus, PackagesLatestVersion } from '../../../../components/Packages';
 import { getInstalledPackagesWithLatest } from '../HostPackages/HostPackagesActions';
 import { selectHostPackagesStatus } from '../HostPackages/HostPackagesSelectors';
-import { HOST_PACKAGES_KEY } from '../HostPackages/HostPackagesConstants';
+import { HOST_PACKAGES_KEY, PACKAGES_VERSION_STATUSES, VERSION_STATUSES_TO_PARAM } from '../HostPackages/HostPackagesConstants';
 import './PackagesTab.scss';
+import hostIdNotReady from '../HostDetailsActions';
+import PackageInstallModal from './PackageInstallModal';
+import defaultRemoteActionMethod, { KATELLO_AGENT } from '../hostDetailsHelpers';
 
 export const PackagesTab = () => {
   const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
-  const { id: hostId } = hostDetails;
-  const actionButtons = <Button isDisabled> {__('Upgrade')} </Button>;
+  const { id: hostId, name: hostName } = hostDetails;
 
-  const [searchQuery, updateSearchQuery] = useState('');
+  const { searchParam } = useUrlParams();
+  const [searchQuery, updateSearchQuery] = useState(searchParam || '');
+  const PACKAGE_STATUS = __('Status');
+  const [packageStatusSelected, setPackageStatusSelected] = useState(PACKAGE_STATUS);
+  const activeFilters = [packageStatusSelected];
+  const defaultFilters = [PACKAGE_STATUS];
+  const [isBulkActionOpen, setIsBulkActionOpen] = useState(false);
+  const toggleBulkAction = () => setIsBulkActionOpen(prev => !prev);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const closeModal = () => setIsModalOpen(false);
+  const showKatelloAgent = (defaultRemoteActionMethod({ hostDetails }) === KATELLO_AGENT);
 
   const emptyContentTitle = __('This host does not have any packages.');
   const emptyContentBody = __('Packages will appear here when available.');
@@ -32,13 +59,27 @@ export const PackagesTab = () => {
   ];
 
   const fetchItems = useCallback(
-    params => (hostId ? getInstalledPackagesWithLatest(hostId, params) : null),
-    [hostId],
+    (params) => {
+      if (!hostId) return hostIdNotReady;
+      const modifiedParams = { ...params };
+      if (packageStatusSelected !== PACKAGE_STATUS) {
+        modifiedParams.status = VERSION_STATUSES_TO_PARAM[packageStatusSelected];
+      }
+      return getInstalledPackagesWithLatest(hostId, modifiedParams);
+    },
+    [hostId, PACKAGE_STATUS, packageStatusSelected],
   );
 
   const response = useSelector(state => selectAPIResponse(state, HOST_PACKAGES_KEY));
   const { results, ...metadata } = response;
   const status = useSelector(state => selectHostPackagesStatus(state));
+
+  if (!hostId) return <Skeleton />;
+  const handleInstallPackagesClick = () => {
+    setIsBulkActionOpen(false);
+    setIsModalOpen(true);
+  };
+
   const rowActions = [
     {
       title: __('Upgrade via remote execution'), disabled: true,
@@ -48,6 +89,70 @@ export const PackagesTab = () => {
     },
   ];
 
+  const handlePackageStatusSelected = newStatus => setPackageStatusSelected((prevStatus) => {
+    if (prevStatus === newStatus) {
+      return PACKAGE_STATUS;
+    }
+    return newStatus;
+  });
+
+  const toggleGroup = (
+    <Split hasGutter>
+      <SplitItem>
+        <SelectableDropdown
+          id="package-status-dropdown"
+          title={PACKAGE_STATUS}
+          showTitle={false}
+          items={Object.values(PACKAGES_VERSION_STATUSES)}
+          selected={packageStatusSelected}
+          setSelected={handlePackageStatusSelected}
+        />
+      </SplitItem>
+    </Split>
+  );
+
+  const dropdownItems = [
+    <DropdownItem
+      aria-label="remove_pkg_from_host"
+      key="remove_pkg_from_host"
+      component="button"
+      isDisabled
+    >
+      {__('Remove')}
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem
+      aria-label="install_pkg_on_host"
+      key="install_pkg_on_host"
+      component="button"
+      onClick={handleInstallPackagesClick}
+    >
+      {__('Install packages')}
+    </DropdownItem>,
+  ];
+
+  const actionButtons = (
+    <>
+      <Split hasGutter>
+        <SplitItem>
+          <ActionList isIconList>
+            <ActionListItem>
+              <Button isDisabled> {__('Upgrade')} </Button>
+            </ActionListItem>
+            <ActionListItem>
+              <Dropdown
+                toggle={<KebabToggle aria-label="Packages bulk actions" onToggle={toggleBulkAction} />}
+                isOpen={isBulkActionOpen}
+                isPlain
+                dropdownItems={dropdownItems}
+              />
+            </ActionListItem>
+          </ActionList>
+        </SplitItem>
+      </Split>
+    </>
+  );
+
   return (
     <div>
       <div id="packages-hint" className="margin-0-24 margin-top-16">
@@ -70,12 +175,15 @@ export const PackagesTab = () => {
             emptySearchTitle,
             emptySearchBody,
             status,
+            activeFilters,
+            defaultFilters,
             actionButtons,
             searchQuery,
             updateSearchQuery,
+            toggleGroup,
           }
           }
-          additionalListeners={[hostId]}
+          additionalListeners={[hostId, packageStatusSelected]}
           fetchItems={fetchItems}
           autocompleteEndpoint={`/hosts/${hostId}/packages/auto_complete_search`}
           foremanApiAutoComplete
@@ -120,6 +228,15 @@ export const PackagesTab = () => {
           </Tbody>
         </TableWrapper>
       </div>
+      {hostId &&
+      <PackageInstallModal
+        isOpen={isModalOpen}
+        closeModal={closeModal}
+        hostId={hostId}
+        hostName={hostName}
+        showKatelloAgent={showKatelloAgent}
+      />
+      }
     </div>
   );
 };

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

@@ -3,8 +3,9 @@ import { REX_JOB_INVOCATIONS_KEY, REX_FEATURES } from './RemoteExecutionConstant
 import { foremanApi } from '../../../../services/api';
 import { getResponseErrorMsgs } from '../../../../utils/helpers';
 import { renderTaskStartedToast } from '../../../../scenes/Tasks/helpers';
-import { ERRATA_SEARCH_QUERY } from '../HostErrata/HostErrataConstants';
-import { TRACES_SEARCH_QUERY } from './HostTracesConstants';
+import { ERRATA_SEARCH_QUERY } from './ErrataTab/HostErrataConstants';
+import { TRACES_SEARCH_QUERY } from './TracesTab/HostTracesConstants';
+import { PACKAGE_SEARCH_QUERY } from '../YumInstallablePackages/YumInstallablePackagesConstants';
 
 const errorToast = (error) => {
   const message = getResponseErrorMsgs(error.response);
@@ -19,6 +20,7 @@ const baseParams = ({ feature, hostname, inputs = {} }) => ({
   },
 });
 
+// used when we know the package name
 const katelloPackageInstallParams = ({ hostname, packageName }) =>
   baseParams({
     hostname,
@@ -26,6 +28,15 @@ const katelloPackageInstallParams = ({ hostname, packageName }) =>
     feature: REX_FEATURES.KATELLO_PACKAGE_INSTALL,
   });
 
+// used when we know package Id(s)
+const katelloPackageInstallBySearchParams = ({ hostname, search }) =>
+  baseParams({
+    hostname,
+    inputs: { [PACKAGE_SEARCH_QUERY]: search },
+    feature: REX_FEATURES.KATELLO_PACKAGE_INSTALL_BY_SEARCH,
+  });
+
+
 const katelloTracerResolveParams = ({ hostname, search }) =>
   baseParams({
     hostname,
@@ -38,7 +49,7 @@ const katelloHostErrataInstallParams = ({
 }) => baseParams({
   hostname,
   inputs: { [ERRATA_SEARCH_QUERY]: search },
-  feature: REX_FEATURES.KATELLO_HOST_ERRATA_INSTALL,
+  feature: REX_FEATURES.KATELLO_HOST_ERRATA_INSTALL_BY_SEARCH,
 });
 
 export const installPackage = ({ hostname, packageName }) => post({
@@ -53,6 +64,18 @@ export const installPackage = ({ hostname, packageName }) => post({
   errorToast: error => errorToast(error),
 });
 
+export const installPackageBySearch = ({ hostname, search }) => post({
+  type: API_OPERATIONS.POST,
+  key: REX_JOB_INVOCATIONS_KEY,
+  url: foremanApi.getApiUrl('/job_invocations'),
+  params: katelloPackageInstallBySearchParams({ hostname, search }),
+  handleSuccess: response => renderTaskStartedToast({
+    humanized: { action: `Install packages on ${hostname}` },
+    id: response?.data?.dynflow_task?.id,
+  }),
+  errorToast: error => errorToast(error),
+});
+
 export const resolveTraces = ({ hostname, search }) => post({
   type: API_OPERATIONS.POST,
   key: REX_JOB_INVOCATIONS_KEY,
@@ -75,7 +98,7 @@ export const installErrata = ({
     hostname, search,
   }),
   handleSuccess: response => renderTaskStartedToast({
-    humanized: { action: `Install Errata on ${hostname}` },
+    humanized: { action: `Install errata on ${hostname}` },
     id: response?.data?.dynflow_task?.id,
   }),
   errorToast: error => errorToast(error),

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

@@ -1,6 +1,7 @@
 export const REX_JOB_INVOCATIONS_KEY = 'REX_JOB_INVOCATIONS';
 export const REX_FEATURES = {
   KATELLO_PACKAGE_INSTALL: 'katello_package_install',
+  KATELLO_PACKAGE_INSTALL_BY_SEARCH: 'katello_package_install_by_search',
   KATELLO_HOST_TRACER_RESOLVE: 'katello_host_tracer_resolve',
-  KATELLO_HOST_ERRATA_INSTALL: 'katello_errata_install',
+  KATELLO_HOST_ERRATA_INSTALL_BY_SEARCH: 'katello_errata_install_by_search',
 };

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

@@ -20,9 +20,10 @@ import TableWrapper from '../../../../../components/Table/TableWrapper';
 import { enableRepoSetRepo, disableRepoSetRepo, resetRepoSetRepo, getHostRepositorySets } from './RepositorySetsActions';
 import { selectRepositorySetsStatus } from './RepositorySetsSelectors';
 import { selectHostDetailsStatus } from '../../HostDetailsSelectors.js';
-import { useBulkSelect } from '../../../../../components/Table/TableHooks';
+import { useBulkSelect, useUrlParams } from '../../../../../components/Table/TableHooks';
 import { REPOSITORY_SETS_KEY } from './RepositorySetsConstants.js';
 import './RepositorySetsTab.scss';
+import hostIdNotReady from '../../HostDetailsActions';
 
 const getEnabledValue = ({ enabled, enabledContentOverride }) => {
   const isOverridden = (enabledContentOverride !== null);
@@ -78,11 +79,12 @@ const RepositorySetsTab = () => {
     lifecycleEnvironmentLibrary === false;
   const simpleContentAccess = (Number(subscriptionStatus) === 5);
   const dispatch = useDispatch();
+  const { searchParam, show } = useUrlParams();
   const toggleGroupStates = ['noLimit', 'limitToEnvironment'];
   const [noLimit, limitToEnvironment] = toggleGroupStates;
   const defaultToggleGroupState = nonLibraryHost ? limitToEnvironment : noLimit;
   const [toggleGroupState, setToggleGroupState] =
-    useState(defaultToggleGroupState);
+    useState(show ?? defaultToggleGroupState);
   const [alertShowing, setAlertShowing] = useState(false);
   const emptyContentTitle = __('No repository sets to show.');
   const emptyContentBody = __('Repository sets will appear here when available.');
@@ -101,7 +103,7 @@ const RepositorySetsTab = () => {
         content_access_mode_all: simpleContentAccess,
         host_id: hostId,
         ...params,
-      }) : null),
+      }) : hostIdNotReady),
     [hostId, toggleGroupState, limitToEnvironment, simpleContentAccess],
   );
 
@@ -115,6 +117,7 @@ const RepositorySetsTab = () => {
     results,
     metadata,
     isSelectable: () => false,
+    initialSearchQuery: searchParam || '',
   });
 
   const hostDetailsStatus = useSelector(state => selectHostDetailsStatus(state));

data/webpack/components/extensions/HostDetails/Tabs/{EnableTracerModal.js → TracesTab/EnableTracerModal.js}

@@ -15,7 +15,8 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 import { installTracerPackage } from './HostTracesActions';
-import { katelloPackageInstallUrl } from './customizedRexUrlHelpers';
+import { katelloPackageInstallUrl } from '../customizedRexUrlHelpers';
+import { KATELLO_TRACER_PACKAGE } from './HostTracesConstants';
 
 const EnableTracerModal = ({ isOpen, setIsOpen }) => {
   const title = __('Enable Tracer');
@@ -43,7 +44,7 @@ const EnableTracerModal = ({ isOpen, setIsOpen }) => {
     <DropdownItem key={`option_${text}`} onClick={() => setSelectedOption(text)}>{text}</DropdownItem>
   ));
 
-  const customizedRexUrl = katelloPackageInstallUrl({ hostname });
+  const customizedRexUrl = katelloPackageInstallUrl({ hostname, packages: KATELLO_TRACER_PACKAGE });
 
   const getEnableTracerButton = () => {
     const [viaRex] = dropdownOptions;

data/webpack/components/extensions/HostDetails/Tabs/{HostTracesActions.js → TracesTab/HostTracesActions.js}

@@ -3,8 +3,8 @@ import {
   HOST_TRACES_KEY,
   KATELLO_TRACER_PACKAGE,
 } from './HostTracesConstants';
-import { installPackage } from './RemoteExecutionActions';
-import { foremanApi } from '../../../../services/api';
+import { installPackage } from '../RemoteExecutionActions';
+import { foremanApi } from '../../../../../services/api';
 
 export const getHostTraces = (hostId, params) => get({
   type: API_OPERATIONS.GET,

data/webpack/components/extensions/HostDetails/Tabs/{TracesTab.js → TracesTab/TracesTab.js}

@@ -8,13 +8,14 @@ import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'
 import { useSelector, useDispatch } from 'react-redux';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 import EnableTracerEmptyState from './EnableTracerEmptyState';
-import TableWrapper from '../../../Table/TableWrapper';
-import { useBulkSelect } from '../../../Table/TableHooks';
+import TableWrapper from '../../../../Table/TableWrapper';
+import { useBulkSelect, useUrlParams } from '../../../../Table/TableHooks';
 import { getHostTraces } from './HostTracesActions';
-import { resolveTraces } from './RemoteExecutionActions';
+import { resolveTraces } from '../RemoteExecutionActions';
 import { selectHostTracesStatus } from './HostTracesSelectors';
-import { resolveTraceUrl } from './customizedRexUrlHelpers';
+import { resolveTraceUrl } from '../customizedRexUrlHelpers';
 import './TracesTab.scss';
+import hostIdNotReady from '../../HostDetailsActions';
 
 const TracesTab = () => {
   const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
@@ -31,9 +32,10 @@ const TracesTab = () => {
   const emptySearchBody = __('Try changing your search settings.');
   const fetchItems = useCallback(
     params =>
-      (hostId ? getHostTraces(hostId, params) : null),
+      (hostId ? getHostTraces(hostId, params) : hostIdNotReady),
     [hostId],
   );
+  const { searchParam } = useUrlParams();
   const [isBulkActionOpen, setIsBulkActionOpen] = useState(false);
   const toggleBulkAction = () => setIsBulkActionOpen(prev => !prev);
   const response = useSelector(state => selectAPIResponse(state, 'HOST_TRACES'));
@@ -46,6 +48,7 @@ const TracesTab = () => {
     results,
     metadata: meta,
     isSelectable: result => !!result.restart_command,
+    initialSearchQuery: searchParam || '',
   });