katello 4.13.0 → 4.14.0.rc1

data/webpack/components/extensions/Hosts/BulkActions/BulkPackagesWizard/04_Review.js

@@ -0,0 +1,168 @@
+import React, { useContext, useState } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { FormattedMessage } from 'react-intl';
+import { TreeView, Button, Text, TextContent, TextVariants, Flex, FlexItem, Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
+import { useWizardContext } from '@patternfly/react-core/next';
+import { CaretDownIcon } from '@patternfly/react-icons';
+import { BulkPackagesWizardContext, UPGRADE_ALL, INSTALL, REMOVE, UPGRADE } from './BulkPackagesWizard';
+
+export const dropdownOptions = [
+  __('via remote execution'),
+  __('via customized remote execution'),
+];
+
+export const BulkPackagesReview = () => {
+  const { goToStepById } = useWizardContext();
+  const {
+    selectedAction,
+    finishButtonText,
+    selectedRexOption,
+    setSelectedRexOption,
+    finishButtonLoading,
+    packagesBulkSelect: {
+      selectedResults: selectedPackageResults,
+      selectedCount: currentSelectedPackagesCount,
+    },
+    hostsBulkSelect: {
+      selectedCount: currentSelectedHostsCount,
+    },
+  } = useContext(BulkPackagesWizardContext);
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const toggleDropdownOpen = () => setIsDropdownOpen(prev => !prev);
+  const handleSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const dropdownItems = dropdownOptions.map(text => (
+    <DropdownItem key={`option_${text}`} ouiaId={`option_${text}`} onClick={() => setSelectedRexOption(text)}>{text}</DropdownItem>
+  ));
+
+  const packageActionsDescriptions = {
+    [INSTALL]: __('Packages to install'),
+    [REMOVE]: __('Packages to be removed'),
+    [UPGRADE]: __('Packages to be updated'),
+    [UPGRADE_ALL]: __('Packages to be updated'),
+  };
+
+  const treeViewTitle = packageActionsDescriptions[selectedAction];
+  const treeViewData = [
+    {
+      name: treeViewTitle,
+      id: 'packages-treeview-title',
+      customBadgeContent: selectedAction === UPGRADE_ALL ? 'All' : currentSelectedPackagesCount,
+      children: selectedAction === UPGRADE_ALL ? undefined :
+        selectedPackageResults.map(({ id, name }) => ({
+          name,
+          id,
+          key: id,
+        })),
+      action: (
+        <Button
+          ouiaId="link-to-packages-wizard-step-2"
+          variant="link"
+          type="button"
+          aria-label="Edit packages list"
+          onClick={() => goToStepById(selectedAction === UPGRADE_ALL ? 'mpw-step-1' : 'mpw-step-2')}
+        >
+          {__('Edit')}
+        </Button>
+      ),
+      actionProps: {
+        'aria-label': 'Edit packages list',
+      },
+    },
+  ];
+
+  const hostTreeViewData = [
+    {
+      name: __('Hosts'),
+      id: 'packages-host-treeview-title',
+      customBadgeContent: currentSelectedHostsCount,
+      expandedIcon: null,
+      action: (
+        <Button
+          ouiaId="link-to-packages-wizard-step-3"
+          variant="link"
+          type="button"
+          aria-label="Edit host selection"
+          onClick={() => goToStepById('mpw-step-3')}
+        >
+          {__('Edit')}
+        </Button>
+      ),
+      actionProps: {
+        'aria-label': 'Edit host selection',
+      },
+    },
+  ];
+
+  return (
+    <>
+      <TextContent>
+        <Text ouiaId="mpw-step-3-header" component={TextVariants.h3}>
+          {__('Review')}
+        </Text>
+        <Text ouiaId="mpw-step-3-content" component={TextVariants.p}>
+          <FormattedMessage
+            id="bulkPackagesReviewContent"
+            defaultMessage={__('Review and then click {submitBtnText}.')}
+            values={{
+              submitBtnText: <strong>{finishButtonText}</strong>,
+            }}
+          />
+        </Text>
+      </TextContent>
+      <div style={{ width: '70%', maxHeight: '50%', marginBottom: '2rem' }}>
+        <TreeView
+          data={treeViewData}
+          aria-label={treeViewTitle}
+          hasBadges
+        />
+        <TreeView
+          data={hostTreeViewData}
+          aria-label={__('Hosts')}
+          hasBadges
+        />
+      </div>
+      <Flex direction={{ default: 'row' }}>
+        <FlexItem>
+          <TextContent>
+            <Text ouiaId="mpw-step-3-content" component={TextVariants.p}>
+              <FormattedMessage
+                id="bulkPackagesReviewContent"
+                defaultMessage={__('Selected packages will be {submitAction} on {hostCount} hosts')}
+                values={{
+                  submitAction: selectedAction === 'install' ? __('installed') : __('updated'),
+                  hostCount: currentSelectedHostsCount,
+                }}
+              />
+            </Text>
+          </TextContent>
+        </FlexItem>
+        <FlexItem>
+          <Dropdown
+            ouiaId="bulk-packages-wizard-dropdown"
+            toggle={
+              <DropdownToggle
+                id="toggle-bulk-packages-wizard-dropdown"
+                ouiaId="bulk-packages-wizard-dropdown-toggle"
+                onToggle={toggleDropdownOpen}
+                toggleIndicator={CaretDownIcon}
+                isDisabled={finishButtonLoading}
+              >
+                {selectedRexOption}
+              </DropdownToggle>
+            }
+            onSelect={handleSelect}
+            isOpen={isDropdownOpen}
+            dropdownItems={dropdownItems}
+            menuAppendTo="parent"
+          />
+        </FlexItem>
+      </Flex>
+    </>
+  );
+};
+
+export default BulkPackagesReview;

data/webpack/components/extensions/Hosts/BulkActions/BulkPackagesWizard/04_ReviewFooter.js

@@ -0,0 +1,141 @@
+import React, { useContext } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Button } from '@patternfly/react-core';
+import { WizardFooterWrapper, useWizardContext } from '@patternfly/react-core/next';
+import { BulkPackagesWizardContext, INSTALL, UPGRADE, UPGRADE_ALL, REMOVE } from './BulkPackagesWizard';
+import { dropdownOptions } from './04_Review';
+import { katelloPackageInstallBySearchUrl, packagesUpdateUrl, katelloPackageRemoveBySearchUrl } from '../../../HostDetails/Tabs/customizedRexUrlHelpers';
+import { installPackageBySearch, updatePackages, removePackagesBySearch } from '../../../HostDetails/Tabs/RemoteExecutionActions';
+import { useRexJobPolling } from '../../../HostDetails/Tabs/RemoteExecutionHooks';
+
+export const BulkPackagesReviewFooter = () => {
+  const {
+    finishButtonText,
+    finishButtonLoading,
+    setFinishButtonLoading,
+    selectedRexOption,
+    closeModal,
+    packagesBulkSelect: {
+      fetchBulkParams: getPackagesBulkParams,
+      selectedCount: packagesSelectedCount,
+    },
+    hostsBulkSelect: {
+      fetchBulkParams: getHostsBulkParams,
+      selectedCount: hostsSelectedCount,
+    },
+    selectedAction,
+  } = useContext(BulkPackagesWizardContext);
+
+  const { goToStepById } = useWizardContext();
+
+  let packagesBulkParams = '';
+  let hostsBulkParams = '';
+  if (packagesSelectedCount) packagesBulkParams = getPackagesBulkParams();
+  if (hostsSelectedCount) hostsBulkParams = getHostsBulkParams();
+
+  // Customized REX
+  const [viaRex] = dropdownOptions;
+  const packageRexUrls = {
+    [INSTALL]: katelloPackageInstallBySearchUrl,
+    [REMOVE]: katelloPackageRemoveBySearchUrl,
+    [UPGRADE]: packagesUpdateUrl,
+    [UPGRADE_ALL]: packagesUpdateUrl,
+  };
+  const getCustomizedRexUrl = packageRexUrls[selectedAction];
+  const customizedRexUrl = getCustomizedRexUrl({
+    hostSearch: hostsBulkParams,
+    search: selectedAction === UPGRADE_ALL ? '' : packagesBulkParams,
+  });
+
+  // REX
+  const packageBulkUpgradeAction = () => updatePackages({
+    hostSearch: hostsBulkParams,
+    search: selectedAction === UPGRADE_ALL ? '' : packagesBulkParams,
+    descriptionFormat: selectedAction === UPGRADE_ALL ? __('Upgrade all packages') : undefined,
+  });
+
+  const {
+    triggerJobStart: triggerBulkPackageUpgrade,
+    isPolling: isBulkUpgradeInProgress,
+  } = useRexJobPolling(packageBulkUpgradeAction);
+
+  const packageBulkInstallAction = () => installPackageBySearch({
+    hostSearch: hostsBulkParams,
+    search: packagesBulkParams,
+  });
+
+  const packageBulkRemoveAction = () => removePackagesBySearch({
+    hostSearch: hostsBulkParams,
+    search: packagesBulkParams,
+  });
+
+  const {
+    triggerJobStart: triggerBulkPackageRemove,
+    isPolling: isBulkRemoveInProgress,
+  } = useRexJobPolling(packageBulkRemoveAction);
+
+  const {
+    triggerJobStart: triggerBulkPackageInstall,
+    isPolling: isBulkInstallInProgress,
+  } = useRexJobPolling(packageBulkInstallAction);
+
+  const handleFinishButtonClick = () => {
+    setFinishButtonLoading(true);
+    if ([UPGRADE_ALL, UPGRADE].includes(selectedAction)) {
+      triggerBulkPackageUpgrade();
+    }
+    if (selectedAction === INSTALL) {
+      triggerBulkPackageInstall();
+    }
+    if (selectedAction === REMOVE) {
+      triggerBulkPackageRemove();
+    }
+    closeModal();
+  };
+
+  const isBulkActionInProgress = isBulkUpgradeInProgress ||
+    isBulkInstallInProgress || isBulkRemoveInProgress;
+
+  const finishButton = (selectedRexOption === viaRex) ?
+    (
+      <Button
+        key="bulk-packages-wizard-finish-button"
+        ouiaId="bulk-packages-wizard-finish-button-via-rex"
+        type="submit"
+        variant="primary"
+        className="pf-m-progress"
+        isLoading={finishButtonLoading || isBulkActionInProgress}
+        isDisabled={finishButtonLoading || isBulkActionInProgress}
+        onClick={handleFinishButtonClick}
+      >
+        {finishButtonText}
+      </Button>
+    ) : (
+      <Button
+        key="bulk-packages-wizard-finish-button"
+        ouiaId="bulk-packages-wizard-finish-button-via-customized-rex"
+        component="a"
+        isLoading={finishButtonLoading}
+        isDisabled={finishButtonLoading}
+        onClick={() => setFinishButtonLoading(true)}
+        variant="primary"
+        href={customizedRexUrl}
+      >
+        {finishButtonText}
+      </Button>
+    );
+
+  return (
+    <WizardFooterWrapper>
+      {finishButton}
+      <Button variant="secondary" onClick={() => goToStepById('mpw-step-3')} isDisabled={finishButtonLoading} ouiaId="bulk-pkg-wiz-step4-back">
+        {__('Back')}
+      </Button>
+      <Button variant="link" onClick={closeModal} isDisabled={finishButtonLoading} ouiaId="bulk-pkg-wiz-step4-cancel">
+        {__('Cancel')}
+      </Button>
+    </WizardFooterWrapper>
+  );
+};
+
+export default BulkPackagesReviewFooter;

data/webpack/components/extensions/Hosts/BulkActions/BulkPackagesWizard/BulkPackagesWizard.js

@@ -0,0 +1,252 @@
+import React, { useState, createContext, useContext } from 'react';
+import { Radio, Text, TextVariants, TextContent, Alert } from '@patternfly/react-core';
+import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core/next';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+import { useBulkSelect } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import { ForemanActionsBarContext } from 'foremanReact/components/HostDetails/ActionsBar';
+import { useTableIndexAPIResponse } from 'foremanReact/components/PF4/TableIndexPage/Table/TableIndexHooks';
+import { STATUS } from 'foremanReact/constants';
+import { HOSTS_API_PATH } from 'foremanReact/routes/Hosts/constants';
+import HostReview from '../HostReview';
+import { BulkPackagesReview, dropdownOptions } from './04_Review';
+import { BulkPackagesUpgradeTable, BulkPackagesInstallTable, BulkPackagesRemoveTable } from './02_BulkPackagesTable';
+import { BulkPackagesReviewFooter } from './04_ReviewFooter';
+import katelloApi from '../../../../../services/api';
+
+export const UPGRADE_ALL = 'upgradeAll';
+export const UPGRADE = 'upgrade';
+export const INSTALL = 'install';
+export const REMOVE = 'remove';
+
+export const BulkPackagesWizardContext = createContext({});
+
+export const useHostsBulkSelect = ({ initialSelectedHosts, modalIsOpen }) => {
+  const defaultParams = { search: initialSelectedHosts };
+  const apiOptions = { key: 'HOST_REVIEW' };
+  const replacementResponse = !modalIsOpen ? { response: {} } : false;
+  const hostsResponse = useTableIndexAPIResponse({
+    replacementResponse, // don't fetch data if modal is closed
+    apiUrl: `${HOSTS_API_PATH}?per_page=7`,
+    apiOptions,
+    defaultParams,
+  });
+
+  const {
+    response: {
+      results: hostsResults,
+      ...hostsMetadata
+    },
+  } = hostsResponse;
+
+  const { total, page, subtotal } = hostsMetadata;
+
+  return {
+    hostsBulkSelect: useBulkSelect({
+      results: hostsResults,
+      metadata: { total, page, selectable: subtotal },
+      initialSearchQuery: initialSelectedHosts,
+      initialSelectAllMode: true,
+    }),
+    hostsResponse,
+    hostsMetadata,
+  };
+};
+
+export const getPackagesUrl = selectedAction =>
+  `${katelloApi.getApiUrl('/packages/thindex')}?per_page=7&include_permissions=true&packages_restrict_upgradable=${selectedAction === 'upgrade'}`;
+
+const BulkPackagesWizard = () => {
+  const { modalOpen, setModalClosed: closeModal } = useForemanModal({ id: 'bulk-packages-wizard' });
+
+
+  const [selectedAction, setSelectedAction] = useState(UPGRADE_ALL);
+
+  const { selectedCount: initialSelectedHostCount, fetchBulkParams }
+    = useContext(ForemanActionsBarContext);
+
+  const [shouldValidateStep2, setShouldValidateStep2] = useState(false);
+  const [shouldValidateStep3, setShouldValidateStep3] = useState(false);
+  const [finishButtonLoading, setFinishButtonLoading] = useState(false);
+  const [selectedRexOption, setSelectedRexOption] = useState(dropdownOptions[0]);
+  const packageActionsNames = {
+    install: __('Install packages'), remove: __('Remove packages'), upgrade: __('Upgrade packages'), upgradeAll: __('Upgrade packages'),
+  };
+  const packageActions = () => {
+    switch (selectedAction) {
+    case INSTALL:
+      return (
+        <BulkPackagesInstallTable modalIsOpen={modalOpen} />
+      );
+    case REMOVE:
+      return (
+        <BulkPackagesRemoveTable modalIsOpen={modalOpen} />
+      );
+    default:
+      return (
+        <BulkPackagesUpgradeTable modalIsOpen={modalOpen} />
+      );
+    }
+  };
+
+  const finishButtonTextValues = {
+    install: __('Install'), remove: __('Remove'), upgrade: __('Upgrade'), upgradeAll: __('Upgrade'),
+  };
+  const finishButtonText = finishButtonTextValues[selectedAction];
+  const PACKAGES_URL = getPackagesUrl(selectedAction);
+  const apiOptions = { key: 'BULK_HOST_PACKAGES' };
+  const replacementResponse = !modalOpen ? { response: {} } : false;
+  const packagesResponse = useTableIndexAPIResponse({
+    replacementResponse, // don't fetch data if modal is closed
+    apiUrl: PACKAGES_URL,
+    apiOptions,
+  });
+
+  const {
+    response: {
+      results: packagesResults,
+      ...packagesMetadata
+    },
+    status: packagesStatus,
+  } = packagesResponse;
+
+  const { total, page, subtotal } = packagesMetadata;
+
+  const packagesBulkSelect = useBulkSelect({
+    results: packagesResults,
+    metadata: { total, page, selectable: subtotal },
+    idColumn: 'name',
+  });
+
+  const initialSelectedHosts = fetchBulkParams();
+
+  const hostsBulkSelect =
+    useHostsBulkSelect({ initialSelectedHosts, modalIsOpen: modalOpen });
+
+  // eslint-disable-next-line no-restricted-globals
+  const selectionIsValid = count => count > 0 || isNaN(count);
+  const packagesResultsPresent = packagesResults?.length > 0;
+  const packageSelectionIsValid =
+    selectionIsValid(packagesBulkSelect.selectedCount) || selectedAction === UPGRADE_ALL;
+  const hostSelectionIsValid = selectionIsValid(hostsBulkSelect.hostsBulkSelect.selectedCount);
+  let step2Valid = shouldValidateStep2 ? packageSelectionIsValid : true;
+  if (!packagesResultsPresent) step2Valid = false;
+  const step3Valid = shouldValidateStep3 ? hostSelectionIsValid : true;
+  const step4Valid = hostSelectionIsValid && packageSelectionIsValid;
+
+  const bulkPackagesWizardContextData = {
+    selectedAction,
+    finishButtonText,
+    initialSelectedHostCount,
+    setShouldValidateStep2,
+    finishButtonLoading,
+    setFinishButtonLoading,
+    selectedRexOption,
+    setSelectedRexOption,
+    closeModal,
+    packagesBulkSelect,
+    packagesResults,
+    packagesMetadata,
+    packagesResponse,
+    hostsBulkSelect: hostsBulkSelect.hostsBulkSelect,
+  };
+  return (
+    <BulkPackagesWizardContext.Provider value={bulkPackagesWizardContextData}>
+      <Wizard
+        header={<WizardHeader title={__('Manage packages')} onClose={closeModal} />}
+      >
+        <WizardStep
+          name={__('Select action')}
+          id="mpw-step-1"
+          footer={{ onClose: closeModal }}
+        >
+          <TextContent>
+            <Text ouiaId="mpw-step-1-header" component={TextVariants.h2}>
+              {__('Select action')}
+            </Text>
+            <Text ouiaId="mpw-step-1-content" component={TextVariants.p}>
+              {__('To manage packages, select an action.')}
+            </Text>
+          </TextContent>
+          {packagesStatus === STATUS.RESOLVED && !packagesResultsPresent && (
+            <Alert
+              ouiaId="no-packages-found-alert"
+              variant="info"
+              isInline
+              title={__('No upgradable packages found.')}
+              style={{ marginBottom: '1rem' }}
+            />
+          )}
+          <div style={{ marginBottom: '1rem' }} />
+          <div style={{ marginLeft: '1rem' }}>
+            <Radio
+              isChecked={selectedAction === UPGRADE_ALL}
+              name="packageActionRadioGroup"
+              onChange={() => setSelectedAction(UPGRADE_ALL)}
+              label={__('Upgrade all packages')}
+              id="r1-upgrade-all-packages"
+              ouiaId="r1-upgrade-all-packages"
+            />
+            <Radio
+              isChecked={selectedAction === UPGRADE}
+              name="packageActionRadioGroup"
+              onChange={() => setSelectedAction(UPGRADE)}
+              label={__('Upgrade packages')}
+              id="r2-upgrade-packages"
+              ouiaId="r2-upgrade-packages"
+            />
+            <Radio
+              isChecked={selectedAction === INSTALL}
+              name="packageActionRadioGroup"
+              onChange={() => setSelectedAction(INSTALL)}
+              label={__('Install packages')}
+              id="r3-install-packages"
+              ouiaId="r3-install-packages"
+            />
+            <Radio
+              isChecked={selectedAction === REMOVE}
+              name="packageActionRadioGroup"
+              onChange={() => setSelectedAction(REMOVE)}
+              label={__('Remove packages')}
+              id="r4-remove-packages"
+              ouiaId="r4-remove-packages"
+            />
+          </div>
+        </WizardStep>
+        <WizardStep
+          name={packageActionsNames[selectedAction]}
+          id="mpw-step-2"
+          isHidden={selectedAction === UPGRADE_ALL}
+          footer={{ isNextDisabled: !step2Valid, onClose: closeModal }}
+          status={step2Valid ? 'default' : 'error'}
+        >
+          {packageActions()}
+        </WizardStep>
+        <WizardStep
+          name={__('Review hosts')}
+          id="mpw-step-3"
+          status={step3Valid ? 'default' : 'error'}
+          footer={{ isNextDisabled: !step4Valid || !packagesResultsPresent, onClose: closeModal }}
+        >
+          <HostReview
+            key={modalOpen}
+            selectedAction={selectedAction}
+            hostsBulkSelect={hostsBulkSelect}
+            initialSelectedHosts={initialSelectedHosts}
+            setShouldValidateStep={setShouldValidateStep3}
+          />
+        </WizardStep>
+        <WizardStep
+          name={__('Review')}
+          id="mpw-review-step"
+          footer={<BulkPackagesReviewFooter />}
+          isDisabled={!step4Valid || !packagesResultsPresent}
+        >
+          <BulkPackagesReview />
+        </WizardStep>
+      </Wizard>
+    </BulkPackagesWizardContext.Provider>
+  );
+};
+
+export default BulkPackagesWizard;

data/webpack/components/extensions/Hosts/BulkActions/BulkPackagesWizard/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Modal, ModalVariant } from '@patternfly/react-core';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+import BulkPackagesWizard from './BulkPackagesWizard';
+
+const BulkPackagesWizardModal = () => {
+  const { modalOpen: isOpen } = useForemanModal({ id: 'bulk-packages-wizard' });
+
+  return (
+    <Modal
+      width="60%"
+      ouiaId="bulk-packages-wizard-modal"
+      isOpen={isOpen}
+      showClose={false}
+      aria-label="Wizard modal"
+      hasNoBodyWrapper
+      variant={ModalVariant.medium}
+    >
+      <BulkPackagesWizard />
+    </Modal>
+  );
+};
+
+export default BulkPackagesWizardModal;