katello 4.3.0.rc1 → 4.3.0.rc2

data/webpack/components/Search/Search.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { ControlLabel } from 'react-bootstrap';
 import { loadSetting } from 'foremanReact/components/Settings/SettingsActions';
@@ -26,11 +26,14 @@ const Search = ({
 }) => {
   const [items, setItems] = useState([]);
   const dispatch = useDispatch();
+  const mountedRef = useRef(true);
 
   const onInputUpdate = async (searchTerm = '') => {
     const newItems = items.filter(({ text }) => stringIncludes(text, searchTerm));
 
     if (newItems.length !== items.length) {
+      // Checking whether the current component is mounted before state change events
+      if (!mountedRef.current) return;
       setItems(newItems);
     }
 
@@ -43,6 +46,8 @@ const Search = ({
       } else {
         data = await api.get(endpoint, undefined, params);
       }
+      // Checking whether the current component is mounted before state change events
+      if (!mountedRef.current) return;
       setItems(data?.data?.filter(({ error }) => !error).map(({ label }) => ({
         text: label.trim(),
       })));
@@ -56,6 +61,7 @@ const Search = ({
   useEffect(() => {
     dispatch(loadSetting(AUTOSEARCH_DELAY));
     dispatch(loadSetting(AUTOSEARCH_WHILE_TYPING));
+    return () => { mountedRef.current = false; };
   }, [dispatch]);
 
   const onNewSearch = (search) => {

data/webpack/components/SelectAllCheckbox/index.js

@@ -71,13 +71,13 @@ const SelectAllCheckbox = ({
     <DropdownItem key="select-none" component="button" isDisabled={selectedCount === 0} onClick={handleSelectNone} >
       {`${__('Select none')} (0)`}
     </DropdownItem>,
-    <DropdownItem key="select-page" component="button" isDisabled={areAllRowsOnPageSelected} onClick={handleSelectPage}>
+    <DropdownItem key="select-page" component="button" isDisabled={pageRowCount === 0 || areAllRowsOnPageSelected} onClick={handleSelectPage}>
       {`${__('Select page')} (${pageRowCount})`}
     </DropdownItem>,
   ];
   if (canSelectAll) {
     selectAllDropdownItems.push((
-      <DropdownItem key="select-all" id="all" component="button" isDisabled={areAllRowsSelected} onClick={handleSelectAll}>
+      <DropdownItem key="select-all" id="all" component="button" isDisabled={totalCount === 0 || areAllRowsSelected} onClick={handleSelectAll}>
         {`${__('Select all')} (${totalCount})`}
       </DropdownItem>));
   }

data/webpack/components/Table/MainTable.scss

@@ -1,11 +1,17 @@
-.pf-c-dropdown.pf-m-align-right{
+.pf-c-dropdown.pf-m-align-right {
   width: 100%;
   justify-content: flex-end;
   display: flex;
 }
+
 .pf-c-dropdown__menu {
   min-width: 0;
 }
+
 .pf-c-wizard__footer {
   z-index: 1;
+}
+
+.pf-c-table tbody tr td {
+  vertical-align: inherit;
 }

data/webpack/components/Table/TableHooks.js

@@ -179,27 +179,18 @@ export const useBulkSelect = ({
   };
 
   const fetchBulkParams = () => {
-    const selected = {
-      included: {
-        ids: [],
-        search: null,
-      },
-      excluded: {
-        ids: [],
-      },
-      all: false,
+    const searchQueryWithExclusionSet = () => {
+      const query = [searchQuery,
+        !isEmpty(exclusionSet) && `${idColumn} !^ (${[...exclusionSet].join(',')})`];
+      return query.filter(item => item).join(' and ');
     };
 
-    if (selectAllMode) {
-      selected.included.search = searchQuery;
-      selected.excluded.ids = [...exclusionSet];
-      selected.all = true;
-    } else if (!isEmpty(inclusionSet)) {
-      selected.included.ids = [...inclusionSet];
-    } else {
-      return {};
-    }
-    return selected;
+    const searchQueryWithInclusionSet = () => {
+      if (isEmpty(inclusionSet)) throw new Error('Cannot build a search query with no items selected');
+      return `${idColumn} ^ (${[...inclusionSet].join(',')})`;
+    };
+
+    return selectAllMode ? searchQueryWithExclusionSet() : searchQueryWithInclusionSet();
   };
 
   const prevSearchRef = usePrevious({ searchQuery });

data/webpack/components/Table/TableWrapper.js

@@ -63,8 +63,6 @@ const TableWrapper = ({
   const hasChanged = (oldValue, newValue) => !isEqual(oldValue, newValue);
 
   const spawnFetch = useCallback((paginationData) => {
-    // The search component will update the search query when a search is performed, listen for that
-    // and perform the search so we can be sure the searchQuery is updated when search is performed.
     const fetchWithParams = (allParams = {}) => {
       const newRequest = {
         ...(paginationData ?? paginationParams()),

data/webpack/components/WithOrganization/__snapshots__/withOrganization.test.js.snap

@@ -17,7 +17,6 @@ exports[`subscriptions page should render select org page 1`] = `
     default={[Function]}
     loadOrganization={[Function]}
     organization={Object {}}
-    saveOrganization={[Function]}
     store={
       Object {
         "clearActions": [Function],
@@ -28,6 +27,7 @@ exports[`subscriptions page should render select org page 1`] = `
         "subscribe": [Function],
       }
     }
+    updateCdnConfiguration={[Function]}
   >
     <Header
       title="Select Organization"
@@ -73,7 +73,6 @@ exports[`subscriptions page should render the wrapped component 1`] = `
     default={[Function]}
     loadOrganization={[Function]}
     organization={Object {}}
-    saveOrganization={[Function]}
     store={
       Object {
         "clearActions": [Function],
@@ -84,12 +83,12 @@ exports[`subscriptions page should render the wrapped component 1`] = `
         "subscribe": [Function],
       }
     }
+    updateCdnConfiguration={[Function]}
   >
     <WrappedComponent
       default={[Function]}
       loadOrganization={[Function]}
       organization={Object {}}
-      saveOrganization={[Function]}
       store={
         Object {
           "clearActions": [Function],
@@ -100,6 +99,7 @@ exports[`subscriptions page should render the wrapped component 1`] = `
           "subscribe": [Function],
         }
       }
+      updateCdnConfiguration={[Function]}
     >
       <div>
          Wrapped! 

data/webpack/components/extensions/HostDetails/HostDetailsConstants.js

@@ -0,0 +1 @@
+export default 'HOST_DETAILS';

data/webpack/components/extensions/HostDetails/HostDetailsSelectors.js

@@ -0,0 +1,16 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import HOST_DETAILS_KEY from './HostDetailsConstants';
+
+export const selectHostDetails = state =>
+  selectAPIResponse(state, HOST_DETAILS_KEY) || {};
+
+export const selectHostDetailsStatus = state =>
+  selectAPIStatus(state, HOST_DETAILS_KEY) || STATUS.PENDING;
+
+export const selectHostDetailsError = state =>
+  selectAPIError(state, HOST_DETAILS_KEY);

data/webpack/components/extensions/HostDetails/HostErrata/HostErrataConstants.js

@@ -30,3 +30,5 @@ export const SEVERITIES_TO_PARAM = {
 };
 
 export default HOST_ERRATA_KEY;
+
+export const ERRATA_SEARCH_QUERY = 'Errata search query';

data/webpack/components/extensions/HostDetails/HostPackages/HostPackagesActions.js

@@ -0,0 +1,11 @@
+import { API_OPERATIONS, get } from 'foremanReact/redux/API';
+import { foremanApi } from '../../../../services/api';
+import { HOST_PACKAGES_KEY } from './HostPackagesConstants';
+
+export const getInstalledPackagesWithLatest = (hostId, params) => get({
+  type: API_OPERATIONS.GET,
+  key: HOST_PACKAGES_KEY,
+  url: foremanApi.getApiUrl(`/hosts/${hostId}/packages?include_latest_upgradable=true`),
+  params,
+});
+export default getInstalledPackagesWithLatest;

data/webpack/components/extensions/HostDetails/HostPackages/HostPackagesConstants.js

@@ -0,0 +1,2 @@
+export const HOST_PACKAGES_KEY = 'HOST_PACKAGES';
+export default HOST_PACKAGES_KEY;

data/webpack/components/extensions/HostDetails/HostPackages/HostPackagesSelectors.js

@@ -0,0 +1,16 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import { HOST_PACKAGES_KEY } from './HostPackagesConstants';
+
+export const selectHostPackages = state =>
+  selectAPIResponse(state, HOST_PACKAGES_KEY) || {};
+
+export const selectHostPackagesStatus = state =>
+  selectAPIStatus(state, HOST_PACKAGES_KEY) || STATUS.PENDING;
+
+export const selectHostPackagesError = state =>
+  selectAPIError(state, HOST_PACKAGES_KEY);

data/webpack/components/extensions/HostDetails/Tabs/ContentTab/SecondaryTabsRoutes.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
+import { PackagesTab } from '../PackagesTab';
 import { ErrataTab } from '../ErrataTab';
 import { route } from './helpers';
 
@@ -8,6 +9,9 @@ const SecondaryTabRoutes = () => (
     <Route exact path="/Content">
       <Redirect to={route('errata')} />
     </Route>
+    <Route path={route('packages')}>
+      <PackagesTab />
+    </Route>
     <Route path={route('errata')}>
       <ErrataTab />
     </Route>

data/webpack/components/extensions/HostDetails/Tabs/ContentTab/constants.js

@@ -1,6 +1,7 @@
 import { translate as __ } from 'foremanReact/common/I18n';
 
 const SECONDARY_TABS = [
+  { key: 'packages', title: __('Packages') },
   { key: 'errata', title: __('Errata') },
 ];
 

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

@@ -18,7 +18,6 @@ import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 import IsoDate from 'foremanReact/components/common/dates/IsoDate';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
-import { isEmpty } from 'lodash';
 import SelectableDropdown from '../../../SelectableDropdown';
 import { useSet, useBulkSelect } from '../../../../components/Table/TableHooks';
 import TableWrapper from '../../../../components/Table/TableWrapper';
@@ -28,12 +27,15 @@ import ErratumExpansionDetail from './ErratumExpansionDetail';
 import ErratumExpansionContents from './ErratumExpansionContents';
 import { selectHostErrataStatus } from '../HostErrata/HostErrataSelectors';
 import { HOST_ERRATA_KEY, ERRATA_TYPES, ERRATA_SEVERITIES, TYPES_TO_PARAM, SEVERITIES_TO_PARAM } from '../HostErrata/HostErrataConstants';
+import { installErrata } from './RemoteExecutionActions';
+import { errataInstallUrl } from './customizedRexUrlHelpers';
 import './ErrataTab.scss';
 
 export const ErrataTab = () => {
   const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
   const {
     id: hostId,
+    name: hostname,
     content_facet_attributes: contentFacetAttributes,
   } = hostDetails;
   const contentFacet = propsToCamelCase(contentFacetAttributes ?? {});
@@ -91,7 +93,7 @@ export const ErrataTab = () => {
   const response = useSelector(state => selectAPIResponse(state, HOST_ERRATA_KEY));
   const { results, ...metadata } = response;
   const status = useSelector(state => selectHostErrataStatus(state));
-
+  const errataSearchQuery = id => `errata_id = ${id}`;
   const {
     selectOne, isSelected, searchQuery, selectedCount, isSelectable,
     updateSearchQuery, selectNone, fetchBulkParams, ...selectAll
@@ -104,38 +106,99 @@ export const ErrataTab = () => {
 
   if (!hostId) return <Skeleton />;
 
-  const rowActions = [
-    {
-      title: __('Apply via Katello agent'), disabled: true,
-    },
-    {
-      title: __('Apply via remote execution'), disabled: true,
-    },
-    {
-      title: __('Apply via customized remote execution'), disabled: true,
-    },
-  ];
+  const applyErratumViaRemoteExecution = id => dispatch(installErrata({
+    hostname,
+    search: errataSearchQuery(id),
+  }));
+
+  const applyViaRemoteExecution = () => {
+    dispatch(installErrata({
+      hostname, search: fetchBulkParams(),
+    }));
+
+    const params = { page: metadata.page, per_page: metadata.per_page, search: metadata.search };
+    dispatch(getInstallableErrata(
+      hostId,
+      { ...params, include_applicable: toggleGroupState === ALL },
+    ));
+  };
+
+  const bulkCustomizedRexUrl = () => errataInstallUrl({
+    hostname, search: (selectedCount > 0) ? fetchBulkParams() : '',
+  });
 
   const recalculateErrata = () => {
     setIsBulkActionOpen(false);
     dispatch(regenerateApplicability(hostId));
   };
 
+  const applyByKatelloAgent = () => {
+    const selected = fetchBulkParams();
+    setIsBulkActionOpen(false);
+    selectNone();
+    dispatch(applyViaKatelloAgent(hostId, { search: selected }));
+  };
+
+  const applyErratumViaKatelloAgent = id => dispatch(applyViaKatelloAgent(
+    hostId,
+    { errata_ids: [id] },
+  ));
+
+  const katelloAgentAvailable = (contentFacet.katelloAgentInstalled &&
+                                 contentFacet.katelloAgentEnabled);
+  const apply = () => {
+    if (contentFacet.remoteExecutionByDefault || !katelloAgentAvailable) {
+      applyViaRemoteExecution();
+    } else {
+      applyByKatelloAgent();
+    }
+  };
+
   const dropdownItems = [
-    <DropdownItem aria-label="bulk_add" key="bulk_add" component="button" onClick={recalculateErrata}>
+    <DropdownItem
+      aria-label="bulk_add"
+      key="bulk_add"
+      component="button"
+      onClick={recalculateErrata}
+    >
       {__('Recalculate')}
     </DropdownItem>,
   ];
 
-  const applyByKatelloAgent = () => {
-    const selected = fetchBulkParams();
-    if (!isEmpty(selected)) {
-      const parameters = { bulk_errata_ids: JSON.stringify(selected) };
-      setIsBulkActionOpen(false);
-      selectNone();
-      dispatch(applyViaKatelloAgent(hostId, parameters));
-    }
-  };
+  if (katelloAgentAvailable) {
+    dropdownItems.push((
+      <DropdownItem
+        aria-label="apply_via_katello_agent"
+        key="apply_via_katello_agent"
+        component="button"
+        onClick={applyByKatelloAgent}
+        isDisabled={selectedCount === 0}
+      >
+        {__('Apply via Katello agent')}
+      </DropdownItem>));
+  }
+
+  dropdownItems.push((
+    <DropdownItem
+      aria-label="apply_via_remote_execution"
+      key="apply_via_remote_execution"
+      component="button"
+      onClick={applyViaRemoteExecution}
+      isDisabled={selectedCount === 0}
+    >
+      {__('Apply via remote execution')}
+    </DropdownItem>));
+
+  dropdownItems.push((
+    <DropdownItem
+      aria-label="apply_via_customized_remote_execution"
+      key="apply_via_customized_remote_execution"
+      component="a"
+      href={bulkCustomizedRexUrl()}
+      isDisabled={selectedCount === 0}
+    >
+      {__('Apply via customized remote execution')}
+    </DropdownItem>));
 
   const handleErrataTypeSelected = newType => setErrataTypeSelected((prevType) => {
     if (prevType === newType) {
@@ -157,7 +220,7 @@ export const ErrataTab = () => {
         <SplitItem>
           <ActionList isIconList>
             <ActionListItem>
-              <Button isDisabled={selectedCount === 0} onClick={applyByKatelloAgent}> {__('Apply')} </Button>
+              <Button isDisabled={selectedCount === 0} onClick={apply}> {__('Apply')} </Button>
             </ActionListItem>
             <ActionListItem>
               <Dropdown
@@ -259,7 +322,7 @@ export const ErrataTab = () => {
               <Th key="select-all" />
               {columnHeaders.map(col =>
                 <Th key={col}>{col}</Th>)}
-              <Th />
+              <Th key="action-menu" />
             </Tr>
           </Thead>
           <>
@@ -273,6 +336,36 @@ export const ErrataTab = () => {
                 installable: isInstallable,
               } = erratum;
               const isExpanded = erratumIsExpanded(id);
+              let rowActions;
+              if (isInstallable) {
+                rowActions = [
+                  {
+                    title: __('Apply via remote execution'),
+                    onClick: () => applyErratumViaRemoteExecution(errataId),
+                  },
+                  {
+                    title: __('Apply via customized remote execution'),
+                    component: 'a',
+                    href: errataInstallUrl({ hostname, search: errataSearchQuery(errataId) }),
+                  },
+                ];
+
+                if (contentFacet.katelloAgentInstalled && contentFacet.katelloAgentEnabled) {
+                  rowActions.unshift({
+                      title: __('Apply via Katello agent'),
+                      onClick: () => applyErratumViaKatelloAgent(errataId),
+                    });
+                }
+              } else {
+                rowActions = [
+                  {
+                    title: __('Apply Erratum'),
+                    component: 'a',
+                    href: urlBuilder(`errata/${id}/content-hosts`, ''),
+                  },
+                ];
+              }
+
               return (
                 <Tbody isExpanded={isExpanded} key={`${id}_${createdAt}`}>
                   <Tr>
@@ -319,6 +412,7 @@ export const ErrataTab = () => {
                       actions={{
                           items: rowActions,
                         }}
+
                     />
                   </Tr>
                   <Tr key="child_row" isExpanded={isExpanded}>

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

@@ -1,2 +1,3 @@
 export const HOST_TRACES_KEY = 'HOST_TRACES';
 export const KATELLO_TRACER_PACKAGE = 'katello-host-tools-tracer';
+export const TRACES_SEARCH_QUERY = 'Traces search query';

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

@@ -0,0 +1,127 @@
+import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Hint, HintBody } 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 TableWrapper from '../../../../components/Table/TableWrapper';
+import { PackagesStatus, PackagesLatestVersion } from '../../../../components/Packages';
+import { getInstalledPackagesWithLatest } from '../HostPackages/HostPackagesActions';
+import { selectHostPackagesStatus } from '../HostPackages/HostPackagesSelectors';
+import { HOST_PACKAGES_KEY } from '../HostPackages/HostPackagesConstants';
+import './PackagesTab.scss';
+
+export const PackagesTab = () => {
+  const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
+  const { id: hostId } = hostDetails;
+  const actionButtons = <Button isDisabled> {__('Upgrade')} </Button>;
+
+  const [searchQuery, updateSearchQuery] = useState('');
+
+  const emptyContentTitle = __('This host does not have any packages.');
+  const emptyContentBody = __('Packages will appear here when available.');
+  const emptySearchTitle = __('No matching packages found');
+  const emptySearchBody = __('Try changing your search settings.');
+  const columnHeaders = [
+    __('Package'),
+    __('Status'),
+    __('Installed Version'),
+    __('Upgradable To'),
+  ];
+
+  const fetchItems = useCallback(
+    params => (hostId ? getInstalledPackagesWithLatest(hostId, params) : null),
+    [hostId],
+  );
+
+  const response = useSelector(state => selectAPIResponse(state, HOST_PACKAGES_KEY));
+  const { results, ...metadata } = response;
+  const status = useSelector(state => selectHostPackagesStatus(state));
+  const rowActions = [
+    {
+      title: __('Upgrade via remote execution'), disabled: true,
+    },
+    {
+      title: __('Upgrade via customized remote execution'), disabled: true,
+    },
+  ];
+
+  return (
+    <div>
+      <div id="packages-hint">
+        <Hint>
+          <HintBody>
+            {__('Packages management functionality on this page is incomplete')}.
+            <br />
+            <Button component="a" variant="link" isInline href={urlBuilder(`content_hosts/${hostId}/packages/installed`, '')}>
+              {__('Visit the previous Packages page')}.
+            </Button>
+          </HintBody>
+        </Hint>
+      </div>
+      <div id="packages-tab">
+        <TableWrapper
+          {...{
+                metadata,
+                emptyContentTitle,
+                emptyContentBody,
+                emptySearchTitle,
+                emptySearchBody,
+                status,
+                actionButtons,
+                searchQuery,
+                updateSearchQuery,
+                }
+          }
+          additionalListeners={[hostId]}
+          fetchItems={fetchItems}
+          autocompleteEndpoint={`/hosts/${hostId}/packages/auto_complete_search`}
+          foremanApiAutoComplete
+          variant={TableVariant.compact}
+        >
+          <Thead>
+            <Tr>
+              {columnHeaders.map(col =>
+                <Th key={col}>{col}</Th>)}
+              <Th />
+            </Tr>
+          </Thead>
+          <Tbody>
+            {results?.map((packages) => {
+                const {
+                  id,
+                  name: packageName,
+                  nvra: installedVersion,
+                  rpm_id: rpmId,
+                } = packages;
+                return (
+                  <Tr key={`${id}`}>
+                    <Td>
+                      {rpmId
+                        ? <a href={urlBuilder(`packages/${rpmId}`, '')}>{packageName}</a>
+                        : packageName
+                      }
+                    </Td>
+                    <Td><PackagesStatus {...packages} /></Td>
+                    <Td>{installedVersion.replace(`${packageName}-`, '')}</Td>
+                    <Td><PackagesLatestVersion {...packages} /></Td>
+                    <Td
+                      key={`rowActions-${id}`}
+                      actions={{
+                          items: rowActions,
+                        }}
+                    />
+                  </Tr>
+                );
+              })
+              }
+          </Tbody>
+        </TableWrapper>
+      </div>
+    </div>
+  );
+};
+
+export default PackagesTab;

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

@@ -0,0 +1,11 @@
+#packages-tab {
+  margin: 0 20px;
+  margin-bottom: 2em;
+  margin-top: 2em;
+}
+
+#packages-alert {
+  margin: 0 20px;
+  margin-bottom: 2em;
+  margin-top: 2em;
+}