katello 4.13.0 → 4.14.0.rc1

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

@@ -0,0 +1,160 @@
+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 { BulkErrataWizardContext } from './BulkErrataWizard';
+
+export const dropdownOptions = [
+  __('via remote execution'),
+  __('via customized remote execution'),
+];
+
+export const BulkErrataReview = () => {
+  const { goToStepById } = useWizardContext();
+  const {
+    finishButtonText,
+    selectedRexOption,
+    setSelectedRexOption,
+    finishButtonLoading,
+    errataBulkSelect: {
+      selectedResults: selectedErrataResults,
+      selectedCount: currentSelectedErrataCount,
+      areAllRowsSelected: allErrataSelected,
+      searchQuery: errataSearchQuery,
+    },
+    hostsBulkSelect: {
+      selectedCount: currentSelectedHostsCount,
+    },
+  } = useContext(BulkErrataWizardContext);
+  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 treeViewTitle = __('Errata to apply');
+  const treeViewData = [
+    {
+      name: treeViewTitle,
+      id: 'errata-treeview-title',
+      customBadgeContent: allErrataSelected() && errataSearchQuery === '' ? 'All' : currentSelectedErrataCount,
+      children: allErrataSelected() ? undefined :
+        selectedErrataResults.map(({ id, name, errata_id: errataId }) => ({
+          name: `${errataId}: ${name}`,
+          id,
+          key: id,
+        })),
+      action: (
+        <Button
+          ouiaId="link-to-errata-wizard-step-2"
+          variant="link"
+          type="button"
+          aria-label="Edit errata list"
+          onClick={() => goToStepById('mew-step-1')}
+        >
+          {__('Edit')}
+        </Button>
+      ),
+      actionProps: {
+        'aria-label': 'Edit errata list',
+      },
+    },
+  ];
+
+  const hostTreeViewData = [
+    {
+      name: __('Hosts'),
+      id: 'errata-host-treeview-title',
+      customBadgeContent: currentSelectedHostsCount,
+      expandedIcon: null,
+      action: (
+        <Button
+          ouiaId="link-to-errata-wizard-step-3"
+          variant="link"
+          type="button"
+          aria-label="Edit host selection"
+          onClick={() => goToStepById('mew-step-3')}
+        >
+          {__('Edit')}
+        </Button>
+      ),
+      actionProps: {
+        'aria-label': 'Edit host selection',
+      },
+    },
+  ];
+
+  return (
+    <>
+      <TextContent>
+        <Text ouiaId="mew-step-3-header" component={TextVariants.h3}>
+          {__('Review')}
+        </Text>
+        <Text ouiaId="mew-step-3-content" component={TextVariants.p}>
+          <FormattedMessage
+            id="bulkErrataReviewContent"
+            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="mew-step-3-content" component={TextVariants.p}>
+              <FormattedMessage
+                id="bulkErrataReviewContent"
+                defaultMessage={__('Selected errata will be applied on {hostCount} hosts')}
+                values={{
+                  hostCount: currentSelectedHostsCount,
+                }}
+              />
+            </Text>
+          </TextContent>
+        </FlexItem>
+        <FlexItem>
+          <Dropdown
+            ouiaId="bulk-errata-wizard-dropdown"
+            toggle={
+              <DropdownToggle
+                id="toggle-bulk-errata-wizard-dropdown"
+                ouiaId="bulk-errata-wizard-dropdown-toggle"
+                onToggle={toggleDropdownOpen}
+                toggleIndicator={CaretDownIcon}
+                isDisabled={finishButtonLoading}
+              >
+                {selectedRexOption}
+              </DropdownToggle>
+            }
+            onSelect={handleSelect}
+            isOpen={isDropdownOpen}
+            dropdownItems={dropdownItems}
+            menuAppendTo="parent"
+          />
+        </FlexItem>
+      </Flex>
+    </>
+  );
+};
+
+export default BulkErrataReview;

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

@@ -0,0 +1,99 @@
+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 { BulkErrataWizardContext } from './BulkErrataWizard';
+import { dropdownOptions } from './04_Review';
+import { errataInstallUrl } from '../../../HostDetails/Tabs/customizedRexUrlHelpers';
+import { installErrata } from '../../../HostDetails/Tabs/RemoteExecutionActions';
+import { useRexJobPolling } from '../../../HostDetails/Tabs/RemoteExecutionHooks';
+
+export const BulkErrataReviewFooter = () => {
+  const {
+    finishButtonText,
+    finishButtonLoading,
+    setFinishButtonLoading,
+    selectedRexOption,
+    closeModal,
+    errataBulkSelect: {
+      fetchBulkParams: getErrataBulkParams,
+      selectedCount: errataSelectedCount,
+    },
+    hostsBulkSelect: {
+      fetchBulkParams: getHostsBulkParams,
+      selectedCount: hostsSelectedCount,
+    },
+  } = useContext(BulkErrataWizardContext);
+
+  const { goToStepById } = useWizardContext();
+
+  let errataBulkParams = '';
+  let hostsBulkParams = '';
+  if (errataSelectedCount) errataBulkParams = getErrataBulkParams();
+  if (hostsSelectedCount) hostsBulkParams = getHostsBulkParams();
+  // Customized REX
+  const [viaRex] = dropdownOptions;
+  const customizedRexUrl = errataInstallUrl({
+    hostSearch: hostsBulkParams,
+    search: errataBulkParams,
+  });
+
+  const errataBulkInstallAction = () => installErrata({
+    hostSearch: hostsBulkParams,
+    search: errataBulkParams,
+  });
+
+  const {
+    triggerJobStart: triggerBulkErrataInstall,
+    isPolling: isBulkInstallInProgress,
+  } = useRexJobPolling(errataBulkInstallAction);
+
+  const handleFinishButtonClick = () => {
+    setFinishButtonLoading(true);
+    triggerBulkErrataInstall();
+    closeModal();
+  };
+
+  const finishButton = (selectedRexOption === viaRex) ?
+    (
+      <Button
+        key="bulk-errata-wizard-finish-button"
+        ouiaId="bulk-errata-wizard-finish-button-via-rex"
+        type="submit"
+        variant="primary"
+        className="pf-m-progress"
+        isLoading={finishButtonLoading || isBulkInstallInProgress}
+        isDisabled={finishButtonLoading || isBulkInstallInProgress}
+        onClick={handleFinishButtonClick}
+      >
+        {finishButtonText}
+      </Button>
+    ) : (
+      <Button
+        key="bulk-errata-wizard-finish-button"
+        ouiaId="bulk-errata-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('mew-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 BulkErrataReviewFooter;

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

@@ -0,0 +1,157 @@
+import React, { useState, createContext, useContext } from 'react';
+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 { BulkErrataReview, dropdownOptions } from './04_Review';
+import BulkErrataTable from './02_BulkErrataTable';
+import { BulkErrataReviewFooter } from './04_ReviewFooter';
+import katelloApi from '../../../../../services/api';
+
+export const BulkErrataWizardContext = createContext({});
+
+export const useErrataHostsBulkSelect = ({ 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 ERRATA_URL = `${katelloApi.getApiUrl('/errata')}?per_page=7&include_permissions=true`;
+
+const BulkErrataWizard = () => {
+  const { modalOpen, setModalClosed: closeModal } = useForemanModal({ id: 'bulk-errata-wizard' });
+  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 finishButtonText = __('Apply');
+  const replacementResponse = !modalOpen ? { response: {} } : false;
+  const initialSelectedHosts = fetchBulkParams();
+  const apiOptions = { key: 'BULK_HOST_ERRATA' };
+  const defaultParams = { included: { search: initialSelectedHosts } };
+  const hostsBulkSelect =
+    useErrataHostsBulkSelect({ initialSelectedHosts, modalIsOpen: modalOpen });
+
+  const errataResponse = useTableIndexAPIResponse({
+    replacementResponse, // don't fetch data if modal is closed
+    apiUrl: ERRATA_URL,
+    apiOptions,
+    defaultParams,
+  });
+
+  const {
+    status: errataStatus,
+    response: {
+      results: errataResults,
+      ...errataMetadata
+    },
+  } = errataResponse;
+
+  const { total, page, subtotal } = errataMetadata;
+
+  const errataBulkSelect = useBulkSelect({
+    results: errataResults,
+    metadata: { total, page, selectable: subtotal },
+    idColumn: 'errata_id',
+  });
+
+  // eslint-disable-next-line no-restricted-globals
+  const selectionIsValid = count => count > 0 || isNaN(count);
+  const errataResultsPresent = errataResults?.length > 0;
+  const errataSelectionIsValid =
+    selectionIsValid(errataBulkSelect.selectedCount);
+  const hostSelectionIsValid = selectionIsValid(hostsBulkSelect.hostsBulkSelect.selectedCount);
+  let step2Valid = shouldValidateStep2 ? errataSelectionIsValid : true;
+  if (errataStatus === STATUS.RESOLVED && !errataResultsPresent) step2Valid = false;
+  const step3Valid = shouldValidateStep3 ? hostSelectionIsValid : true;
+  const step4Valid = hostSelectionIsValid && errataSelectionIsValid;
+
+  const BulkErrataWizardContextData = {
+    finishButtonText,
+    initialSelectedHostCount,
+    setShouldValidateStep2,
+    finishButtonLoading,
+    setFinishButtonLoading,
+    selectedRexOption,
+    setSelectedRexOption,
+    closeModal,
+    errataBulkSelect,
+    errataResults,
+    errataMetadata,
+    errataResponse,
+    hostsBulkSelect: hostsBulkSelect.hostsBulkSelect,
+  };
+  return (
+    <BulkErrataWizardContext.Provider value={BulkErrataWizardContextData}>
+      <Wizard
+        header={<WizardHeader title={__('Manage errata')} onClose={closeModal} />}
+      >
+        <WizardStep
+          name={__('Select errata')}
+          id="mew-step-2"
+          footer={{ isNextDisabled: !step2Valid, onClose: closeModal }}
+          status={step2Valid ? 'default' : 'error'}
+        >
+          <BulkErrataTable modalIsOpen={modalOpen} />
+        </WizardStep>
+        <WizardStep
+          name={__('Review hosts')}
+          id="mew-step-3"
+          status={step3Valid ? 'default' : 'error'}
+          footer={{ isNextDisabled: !step4Valid || !errataResultsPresent, onClose: closeModal }}
+        >
+          <HostReview
+            key={modalOpen}
+            hostsBulkSelect={hostsBulkSelect}
+            initialSelectedHosts={initialSelectedHosts}
+            setShouldValidateStep={setShouldValidateStep3}
+          />
+        </WizardStep>
+        <WizardStep
+          name={__('Review')}
+          id="mew-review-step"
+          footer={<BulkErrataReviewFooter />}
+          isDisabled={!step4Valid || !errataResultsPresent}
+        >
+          <BulkErrataReview />
+        </WizardStep>
+      </Wizard>
+    </BulkErrataWizardContext.Provider>
+  );
+};
+
+export default BulkErrataWizard;

data/webpack/components/extensions/Hosts/BulkActions/BulkErrataWizard/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 BulkErrataWizard from './BulkErrataWizard';
+
+const BulkErrataWizardModal = () => {
+  const { modalOpen: isOpen } = useForemanModal({ id: 'bulk-errata-wizard' });
+
+  return (
+    <Modal
+      width="60%"
+      ouiaId="bulk-errata-wizard-modal"
+      isOpen={isOpen}
+      showClose={false}
+      aria-label="Wizard modal"
+      hasNoBodyWrapper
+      variant={ModalVariant.medium}
+    >
+      <BulkErrataWizard />
+    </Modal>
+  );
+};
+
+export default BulkErrataWizardModal;

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

@@ -0,0 +1,157 @@
+import React, { useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Alert,
+  ToolbarItem,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
+import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
+import { translate as __ } from 'foremanReact/common/I18n';
+import SelectAllCheckbox from 'foremanReact/components/PF4/TableIndexPage/Table/SelectAllCheckbox';
+import { getControllerSearchProps } from 'foremanReact/constants';
+import { noop } from 'foremanReact/common/helpers';
+import { RowSelectTd } from 'foremanReact/components/HostsIndex/RowSelectTd';
+import { getPageStats } from 'foremanReact/components/PF4/TableIndexPage/Table/helpers';
+import { BulkPackagesWizardContext, getPackagesUrl } from './BulkPackagesWizard';
+import katelloApi from '../../../../../services/api';
+
+export const BulkPackagesUpgradeTable = props => <BulkPackagesTable {...props} tableType="upgrade" />;
+export const BulkPackagesInstallTable = props => <BulkPackagesTable {...props} tableType="install" />;
+export const BulkPackagesRemoveTable = props => <BulkPackagesTable {...props} tableType="remove" />;
+
+const BulkPackagesTable = ({
+  tableType,
+}) => {
+  const {
+    setShouldValidateStep2,
+    packagesBulkSelect,
+    packagesResults: results,
+    packagesMetadata: {
+      total, per_page: perPage, page, subtotal,
+    },
+    packagesResponse: response,
+  } = useContext(BulkPackagesWizardContext);
+  const PACKAGES_URL = getPackagesUrl(tableType);
+  const apiOptions = { key: 'BULK_HOST_PACKAGES' };
+  const packageActionsNames = { install: __('Install packages'), remove: __('Remove packages'), upgrade: __('Upgrade packages') };
+  const packageActionsDescriptions = {
+    install: __('Select packages to install on the selected hosts. Some packages may already be installed on some hosts.'),
+    remove: __('Select packages to remove on the selected hosts.'),
+    upgrade: __('Select packages to upgrade to the latest version. Packages may have different versions on different hosts.'),
+  };
+
+  const origSearchProps = getControllerSearchProps('packages', 'searchBar-packages');
+  const customSearchProps = {
+    ...origSearchProps,
+    autocomplete: {
+      ...origSearchProps.autocomplete,
+      url: katelloApi.getApiUrl('/packages/auto_complete_search'),
+    },
+  };
+
+  const {
+    selectPage,
+    selectNone,
+    selectOne,
+    isSelected,
+    selectedCount,
+    areAllRowsSelected,
+    areAllRowsOnPageSelected,
+    updateSearchQuery,
+    hasInteracted,
+  } = packagesBulkSelect;
+
+  useEffect(() => {
+    if (results?.length && hasInteracted) {
+      setShouldValidateStep2(true);
+    }
+  }, [setShouldValidateStep2, results, hasInteracted]);
+
+  const pageStats = getPageStats({ total: subtotal, page, perPage });
+  const selectionToolbar = (
+    <ToolbarItem key="selectAll">
+      <SelectAllCheckbox
+        {...{
+          selectNone,
+          selectPage,
+          selectedCount,
+          pageRowCount: pageStats.pageRowCount,
+          areAllRowsSelected,
+          areAllRowsOnPageSelected,
+        }}
+        selectAll={noop}
+        totalCount={total}
+        areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
+        areAllRowsSelected={areAllRowsSelected()}
+      />
+    </ToolbarItem>
+  );
+
+  const columns = {
+    name: {
+      title: __('Package'),
+      wrapper: ({ name, id }) => (
+        <a target="_blank" href={`/packages/${id}`} rel="noreferrer">{name}</a>
+      ),
+      isSorted: true,
+      weight: 50,
+    },
+  };
+
+  return (
+    <>
+      <TextContent>
+        <Text ouiaId="mpw-step-3-header" component={TextVariants.h3}>
+          {packageActionsNames[tableType]}
+        </Text>
+        <Text ouiaId="mpw-step-3-content" component={TextVariants.p}>
+          {packageActionsDescriptions[tableType]}
+        </Text>
+      </TextContent>
+      {selectedCount === 0 && hasInteracted && (
+        <Alert
+          ouiaId="no-packages-alert"
+          variant="info"
+          isInline
+          title={__('Select at least one package.')}
+          style={{ marginBottom: '1rem' }}
+        />
+      )}
+      {tableType === 'upgrade' && !results?.length && (
+        <Alert
+          ouiaId="no-packages-found-alert"
+          variant="info"
+          isInline
+          title={__('No upgradable packages found.')}
+          style={{ marginBottom: '1rem' }}
+        />
+      )}
+      <TableIndexPage
+        columns={columns}
+        showCheckboxes
+        apiUrl={PACKAGES_URL}
+        apiOptions={apiOptions}
+        headerText={__('Packages')}
+        header={null}
+        controller="packages"
+        customSearchProps={customSearchProps}
+        creatable={false}
+        replacementResponse={response}
+        selectionToolbar={selectionToolbar}
+        updateSearchQuery={updateSearchQuery}
+        rowSelectTd={RowSelectTd}
+        selectOne={selectOne}
+        isSelected={isSelected}
+        idColumn="name"
+        updateParamsByUrl={false}
+        bookmarksPosition="right"
+      />
+    </>
+  );
+};
+
+BulkPackagesTable.propTypes = {
+  tableType: PropTypes.string.isRequired,
+};