katello 4.3.0.rc4 → 4.4.0.rc2

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

@@ -1,24 +1,69 @@
 import React, { useCallback, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { Button, Hint, HintBody } from '@patternfly/react-core';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  ActionList,
+  ActionListItem,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownToggle,
+  DropdownToggleAction,
+  KebabToggle,
+  Skeleton,
+  Split,
+  SplitItem,
+} 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 { useBulkSelect } from '../../../../components/Table/TableHooks';
+import SelectableDropdown from '../../../SelectableDropdown';
 import TableWrapper from '../../../../components/Table/TableWrapper';
 import { PackagesStatus, PackagesLatestVersion } from '../../../../components/Packages';
-import { getInstalledPackagesWithLatest } from '../HostPackages/HostPackagesActions';
+import {
+  getInstalledPackagesWithLatest,
+  removePackageViaKatelloAgent,
+  upgradeAllViaKatelloAgent,
+  upgradePackageViaKatelloAgent,
+} 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 { removePackage, updatePackage, removePackages, updatePackages } from './RemoteExecutionActions';
+import { katelloPackageUpdateUrl, packagesUpdateUrl } from './customizedRexUrlHelpers';
 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 dispatch = useDispatch();
+  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 [isActionOpen, setIsActionOpen] = useState(false);
+  const onActionSelect = () => {
+    setIsActionOpen(false);
+  };
+  const onActionToggle = () => {
+    setIsActionOpen(prev => !prev);
+  };
 
   const emptyContentTitle = __('This host does not have any packages.');
   const emptyContentBody = __('Packages will appear here when available.');
@@ -32,94 +77,342 @@ 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));
-  const rowActions = [
-    {
-      title: __('Upgrade via remote execution'), disabled: true,
-    },
-    {
-      title: __('Upgrade via customized remote execution'), disabled: true,
-    },
+  const {
+    selectOne,
+    isSelected,
+    searchQuery,
+    selectedCount,
+    isSelectable,
+    selectedResults,
+    updateSearchQuery,
+    selectNone,
+    selectAllMode,
+    areAllRowsSelected,
+    fetchBulkParams,
+    ...selectAll
+  } = useBulkSelect({
+    results,
+    metadata,
+  });
+
+  if (!hostId) return <Skeleton />;
+
+  const handleInstallPackagesClick = () => {
+    setIsBulkActionOpen(false);
+    setIsModalOpen(true);
+  };
+
+  const removePackageViaRemoteExecution = packageName => dispatch(removePackage({
+    hostname,
+    packageName,
+  }));
+
+  const removeViaKatelloAgent = (packageName) => {
+    dispatch(removePackageViaKatelloAgent(hostId, { packages: [packageName] }));
+    selectNone();
+  };
+
+  const removePackagesViaRemoteExecution = () => {
+    const selected = fetchBulkParams();
+    setIsBulkActionOpen(false);
+    selectNone();
+    dispatch(removePackages({ hostname, search: selected }));
+  };
+
+  const selectedPackageNames = () => selectedResults.map(({ name }) => name);
+  const selectedUpgradableVersions = () => selectedResults.map(({ upgradable_version: v }) => v);
+
+  const removePackagesViaKatelloAgent = () => {
+    dispatch(removePackageViaKatelloAgent(hostId, { packages: selectedPackageNames() }));
+    selectNone();
+  };
+
+  const defaultRemoteAction = defaultRemoteActionMethod({ hostDetails });
+
+  const removeBulk = () => {
+    if (defaultRemoteAction === KATELLO_AGENT) {
+      removePackagesViaKatelloAgent();
+    } else {
+      removePackagesViaRemoteExecution();
+    }
+  };
+
+  const handlePackageRemove = (packageName) => {
+    if (defaultRemoteAction === KATELLO_AGENT) {
+      removeViaKatelloAgent(packageName);
+    } else {
+      removePackageViaRemoteExecution(packageName);
+    }
+  };
+
+  const upgradeViaRemoteExecution = packageName => dispatch(updatePackage({
+    hostname,
+    packageName,
+  }));
+
+  const upgradeBulkViaRemoteExecution = () => {
+    const selected = fetchBulkParams();
+    setIsBulkActionOpen(false);
+    selectNone();
+    dispatch(updatePackages({
+      hostname,
+      search: selected,
+    }));
+  };
+
+  const upgradeBulkViaKatelloAgent = () => {
+    if (areAllRowsSelected()) {
+      dispatch(upgradeAllViaKatelloAgent(hostId));
+    } else {
+      dispatch(upgradePackageViaKatelloAgent(hostId, { packages: selectedUpgradableVersions() }));
+    }
+    selectNone();
+  };
+
+  const upgradeBulk = () => {
+    if (defaultRemoteAction === KATELLO_AGENT) {
+      upgradeBulkViaKatelloAgent();
+    } else {
+      upgradeBulkViaRemoteExecution();
+    }
+  };
+
+  const upgradeViaCustomizedRemoteExecution = selectedCount ?
+    packagesUpdateUrl({ hostname, search: fetchBulkParams() }) :
+    '#';
+
+  const disableRemove = () => selectedCount === 0 || selectAllMode;
+
+  const allUpgradable = () => selectedResults.length > 0 &&
+    selectedResults.every(item => item.upgradable_version);
+  const disableUpgrade = () => selectedCount === 0 ||
+    (selectAllMode && packageStatusSelected !== 'Upgradable') ||
+    (defaultRemoteAction === KATELLO_AGENT && selectAllMode && !areAllRowsSelected()) ||
+    (!selectAllMode && !allUpgradable());
+
+  const dropdownUpgradeItems = [
+    <DropdownItem
+      aria-label="bulk_upgrade_rex"
+      key="bulk_upgrade_rex"
+      component="button"
+      onClick={upgradeBulkViaRemoteExecution}
+    >
+      {__('Upgrade via remote execution')}
+    </DropdownItem>,
+    <DropdownItem
+      aria-label="bulk_upgrade_customized_rex"
+      key="bulk_upgrade_customized_rex"
+      component="a"
+      href={upgradeViaCustomizedRemoteExecution}
+    >
+      {__('Upgrade via customized remote execution')}
+    </DropdownItem>,
   ];
 
+  const dropdownRemoveItems = [
+    <DropdownItem
+      aria-label="bulk_remove"
+      key="bulk_remove"
+      component="button"
+      onClick={removeBulk}
+      isDisabled={disableRemove()}
+    >
+      {__('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 handlePackageStatusSelected = newStatus => setPackageStatusSelected((prevStatus) => {
+    if (prevStatus === newStatus) {
+      return PACKAGE_STATUS;
+    }
+    return newStatus;
+  });
+
+  const actionButtons = (
+    <Split hasGutter>
+      <SplitItem>
+        <ActionList isIconList>
+          <ActionListItem>
+            <Dropdown
+              onSelect={onActionSelect}
+              toggle={
+                <DropdownToggle
+                  splitButtonItems={[
+                    <DropdownToggleAction key="action" aria-label="upgrade_actions" onClick={upgradeBulk}>
+                      {__('Upgrade')}
+                    </DropdownToggleAction>,
+                  ]}
+                  isDisabled={disableUpgrade()}
+                  splitButtonVariant="action"
+                  onToggle={onActionToggle}
+                />
+              }
+              isOpen={isActionOpen}
+              dropdownItems={dropdownUpgradeItems}
+            />
+          </ActionListItem>
+          <ActionListItem>
+            <Dropdown
+              toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+              isOpen={isBulkActionOpen}
+              isPlain
+              dropdownItems={dropdownRemoveItems}
+            />
+          </ActionListItem>
+        </ActionList>
+      </SplitItem>
+    </Split>
+  );
+
+  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>
+  );
+
   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,
-                }
+            metadata,
+            emptyContentTitle,
+            emptyContentBody,
+            emptySearchTitle,
+            emptySearchBody,
+            status,
+            activeFilters,
+            defaultFilters,
+            actionButtons,
+            searchQuery,
+            updateSearchQuery,
+            toggleGroup,
+            selectedCount,
+            selectNone,
+            areAllRowsSelected,
           }
-          additionalListeners={[hostId]}
+          }
+          additionalListeners={[hostId, packageStatusSelected]}
           fetchItems={fetchItems}
           autocompleteEndpoint={`/hosts/${hostId}/packages/auto_complete_search`}
           foremanApiAutoComplete
+          rowsCount={results?.length}
           variant={TableVariant.compact}
+          {...selectAll}
+          displaySelectAllCheckbox
         >
           <Thead>
             <Tr>
+              <Th key="select-all" />
               {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>
+            {results?.map((pkg, rowIndex) => {
+              const {
+                id,
+                name: packageName,
+                nvra: installedVersion,
+                rpm_id: rpmId,
+                upgradable_version: upgradableVersion,
+              } = pkg;
+
+              const rowActions = [
+                {
+                  title: __('Remove'),
+                  onClick: () => handlePackageRemove(packageName),
+                },
+              ];
+
+              if (upgradableVersion) {
+                rowActions.unshift(
+                  {
+                    title: __('Upgrade via remote execution'),
+                    onClick: () => upgradeViaRemoteExecution(upgradableVersion),
+                  },
+                  {
+                    title: __('Upgrade via customized remote execution'),
+                    component: 'a',
+                    href: katelloPackageUpdateUrl({ hostname, packageName: upgradableVersion }),
+                  },
                 );
-              })
               }
+
+              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><PackagesStatus {...pkg} /></Td>
+                  <Td>{installedVersion.replace(`${packageName}-`, '')}</Td>
+                  <Td><PackagesLatestVersion {...pkg} /></Td>
+                  <Td
+                    key={`rowActions-${id}`}
+                    actions={{
+                      items: rowActions,
+                    }}
+                  />
+                </Tr>
+              );
+            })
+            }
           </Tbody>
         </TableWrapper>
       </div>
+      {hostId &&
+      <PackageInstallModal
+        isOpen={isModalOpen}
+        closeModal={closeModal}
+        hostId={hostId}
+        hostName={hostname}
+        showKatelloAgent={showKatelloAgent}
+      />
+      }
     </div>
   );
 };

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

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

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

@@ -3,8 +3,10 @@ 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';
+import { PACKAGES_SEARCH_QUERY } from '../HostPackages/HostPackagesConstants';
 
 const errorToast = (error) => {
   const message = getResponseErrorMsgs(error.response);
@@ -19,6 +21,7 @@ const baseParams = ({ feature, hostname, inputs = {} }) => ({
   },
 });
 
+// used when we know the package name
 const katelloPackageInstallParams = ({ hostname, packageName }) =>
   baseParams({
     hostname,
@@ -26,6 +29,42 @@ 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 katelloPackageRemoveParams = ({ hostname, packageName }) =>
+  baseParams({
+    hostname,
+    inputs: { package: packageName },
+    feature: REX_FEATURES.KATELLO_PACKAGE_REMOVE,
+  });
+
+const katelloPackagesRemoveParams = ({ hostname, search }) =>
+  baseParams({
+    hostname,
+    inputs: { [PACKAGES_SEARCH_QUERY]: search },
+    feature: REX_FEATURES.KATELLO_PACKAGES_REMOVE_BY_SEARCH,
+  });
+
+const katelloPackageUpdateParams = ({ hostname, packageName }) =>
+  baseParams({
+    hostname,
+    inputs: { package: packageName },
+    feature: REX_FEATURES.KATELLO_PACKAGE_UPDATE,
+  });
+
+const katelloPackagesUpdateParams = ({ hostname, search }) =>
+  baseParams({
+    hostname,
+    inputs: { [PACKAGES_SEARCH_QUERY]: search },
+    feature: REX_FEATURES.KATELLO_PACKAGES_UPDATE_BY_SEARCH,
+  });
+
 const katelloTracerResolveParams = ({ hostname, search }) =>
   baseParams({
     hostname,
@@ -38,7 +77,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 +92,66 @@ 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 removePackage = ({ hostname, packageName }) => post({
+  type: API_OPERATIONS.POST,
+  key: REX_JOB_INVOCATIONS_KEY,
+  url: foremanApi.getApiUrl('/job_invocations'),
+  params: katelloPackageRemoveParams({ hostname, packageName }),
+  handleSuccess: response => renderTaskStartedToast({
+    humanized: { action: `Remove ${packageName} on ${hostname}` },
+    id: response?.data?.dynflow_task?.id,
+  }),
+  errorToast: error => errorToast(error),
+});
+
+export const removePackages = ({ hostname, search }) => post({
+  type: API_OPERATIONS.POST,
+  key: REX_JOB_INVOCATIONS_KEY,
+  url: foremanApi.getApiUrl('/job_invocations'),
+  params: katelloPackagesRemoveParams({ hostname, search }),
+  handleSuccess: response => renderTaskStartedToast({
+    humanized: { action: `Remove packages on ${hostname}` },
+    id: response?.data?.dynflow_task?.id,
+  }),
+  errorToast: error => errorToast(error),
+});
+
+export const updatePackage = ({ hostname, packageName }) => post({
+  type: API_OPERATIONS.POST,
+  key: REX_JOB_INVOCATIONS_KEY,
+  url: foremanApi.getApiUrl('/job_invocations'),
+  params: katelloPackageUpdateParams({ hostname, packageName }),
+  handleSuccess: response => renderTaskStartedToast({
+    humanized: { action: `Update ${packageName} on ${hostname}` },
+    id: response?.data?.dynflow_task?.id,
+  }),
+  errorToast: error => errorToast(error),
+});
+
+export const updatePackages = ({ hostname, search }) => post({
+  type: API_OPERATIONS.POST,
+  key: REX_JOB_INVOCATIONS_KEY,
+  url: foremanApi.getApiUrl('/job_invocations'),
+  params: katelloPackagesUpdateParams({ hostname, search }),
+  handleSuccess: response => renderTaskStartedToast({
+    humanized: { action: `Update 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 +174,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,11 @@
 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_PACKAGE_REMOVE: 'katello_package_remove',
+  KATELLO_PACKAGES_REMOVE_BY_SEARCH: 'katello_packages_remove_by_search',
+  KATELLO_PACKAGE_UPDATE: 'katello_package_update',
+  KATELLO_PACKAGES_UPDATE_BY_SEARCH: 'katello_packages_update_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',
 };