katello 4.3.0.rc4 → 4.4.0.rc2

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

@@ -0,0 +1,241 @@
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Skeleton, Label, Hint, HintBody, Button } from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import { upperFirst } from 'lodash';
+import { TableText, TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import {
+  LongArrowAltUpIcon,
+  CheckIcon,
+} from '@patternfly/react-icons';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { selectModuleStreamStatus, selectModuleStream } from './ModuleStreamsSelectors';
+import { useBulkSelect, useUrlParams } from '../../../../Table/TableHooks';
+import { getHostModuleStreams } from './ModuleStreamsActions';
+import InactiveText from '../../../../../scenes/ContentViews/components/InactiveText';
+import TableWrapper from '../../../../../components/Table/TableWrapper';
+import hostIdNotReady from '../../HostDetailsActions';
+import { selectHostDetails } from '../../HostDetailsSelectors';
+
+export const ModuleStreamsTab = () => {
+  const { id: hostId, name: hostName } = useSelector(selectHostDetails);
+
+  const emptyContentTitle = __('This host does not have any Module streams.');
+  const emptyContentBody = __('Module streams will appear here when available.');
+  const emptySearchTitle = __('Your search returned no matching Module streams.');
+  const emptySearchBody = __('Try changing your search criteria.');
+  const { searchParam } = useUrlParams();
+  const columnHeaders = [
+    __('Name'),
+    __('State'),
+    __('Stream'),
+    __('Installation status'),
+    __('Installed profile'),
+  ];
+
+  const fetchItems = useCallback(
+    (params) => {
+      if (!hostId) return hostIdNotReady;
+      return getHostModuleStreams(
+        hostId,
+        params,
+      );
+    },
+    [hostId],
+  );
+
+  const response = useSelector(selectModuleStream);
+  const { results, ...metadata } = response;
+  const status = useSelector(state => selectModuleStreamStatus(state));
+  /* eslint-disable no-unused-vars */
+  const {
+    selectOne, isSelected, searchQuery, selectedCount, isSelectable,
+    updateSearchQuery, selectNone, fetchBulkParams, ...selectAll
+  } = useBulkSelect({
+    results,
+    metadata,
+    isSelectable: _result => false,
+    initialSearchQuery: searchParam || '',
+  });
+  /* eslint-enable no-unused-vars */
+
+  if (!hostId) return <Skeleton />;
+
+  const rowActions = [
+    {
+      title: __('Install'), disabled: true,
+    },
+    {
+      title: __('Update'), disabled: true,
+    },
+    {
+      title: __('Enable'), disabled: true,
+    },
+    {
+      title: __('Disable'), disabled: true,
+    },
+    {
+      title: __('Reset'), disabled: true,
+    },
+    {
+      title: __('Remove'), disabled: true,
+    },
+  ];
+
+  const EnabledIcon = ({ streamText, streamInstallStatus, upgradable }) => {
+    const INSTALLED_STATE = {
+      INSTALLED: __('Installed'),
+      UPGRADEABLE: __('Upgradable'),
+      UPTODATE: __('Up-to-date'),
+      NOTINSTALLED: __('Not installed'),
+    };
+
+    switch (true) {
+    case (streamInstallStatus?.length > 0 && streamText === 'disabled'):
+      return <TableText wrapModifier="nowrap">{INSTALLED_STATE.INSTALLED}</TableText>;
+    case (streamInstallStatus?.length > 0 && streamText === 'enabled' && upgradable !== true):
+      return <><CheckIcon color="green" /> {INSTALLED_STATE.UPTODATE}</>;
+    case (streamInstallStatus?.length > 0 && streamText === 'enabled' && upgradable):
+      return <><LongArrowAltUpIcon color="blue" /> {INSTALLED_STATE.UPGRADEABLE}</>;
+    default:
+      return <InactiveText text={INSTALLED_STATE.NOTINSTALLED} />;
+    }
+  };
+
+  EnabledIcon.propTypes = {
+    streamText: PropTypes.string.isRequired,
+    streamInstallStatus: PropTypes.arrayOf(PropTypes.string).isRequired,
+    upgradable: PropTypes.bool.isRequired,
+  };
+
+  const StreamState = ({ moduleStreamStatus }) => {
+    let streamText = moduleStreamStatus?.charAt(0)?.toUpperCase() + moduleStreamStatus?.slice(1);
+    streamText = streamText?.replace('Unknown', 'Default');
+    switch (true) {
+    case (streamText === 'Default'):
+      return <Label color="gray" variant="outline">{streamText}</Label>;
+    case (streamText === 'Disabled'):
+      return <Label color="gray" variant="filled">{streamText}</Label>;
+    case (streamText === 'Enabled'):
+      return <Label color="green" variant="filled">{streamText}</Label>;
+    default:
+      return null;
+    }
+  };
+
+  StreamState.propTypes = {
+    moduleStreamStatus: PropTypes.string.isRequired,
+  };
+
+  const HostInstalledProfiles = ({ moduleStreamStatus, installedProfiles }) => {
+    let installedProfile;
+    if (installedProfiles?.length > 0) {
+      installedProfile = installedProfiles?.map(profile => upperFirst(profile)).join(', ');
+    } else {
+      installedProfile = 'No profile installed';
+    }
+    const disabledText = moduleStreamStatus === 'disabled' || moduleStreamStatus === 'unknown';
+    return disabledText ? <InactiveText text={installedProfile} /> : installedProfile;
+  };
+
+  HostInstalledProfiles.propTypes = {
+    moduleStreamStatus: PropTypes.string.isRequired,
+    installedProfiles: PropTypes.arrayOf(PropTypes.string).isRequired,
+  };
+
+  return (
+    <div>
+      <div id="modules-hint" className="margin-0-24 margin-top-16">
+        <Hint>
+          <HintBody>
+            {__('Module stream management functionality on this page is incomplete')}.
+            <br />
+            <Button component="a" variant="link" isInline href={urlBuilder(`content_hosts/${hostId}/module-streams`, '')}>
+              {__('Visit the previous Module stream page')}.
+            </Button>
+          </HintBody>
+        </Hint>
+      </div>
+      <div id="modulestreams-tab">
+        <TableWrapper
+          {...{
+            metadata,
+            emptyContentTitle,
+            emptyContentBody,
+            emptySearchTitle,
+            emptySearchBody,
+            searchQuery,
+            updateSearchQuery,
+            fetchItems,
+            status,
+          }}
+          additionalListeners={[hostId]}
+          fetchItems={fetchItems}
+          autocompleteEndpoint={`/hosts/${hostId}/module_streams/auto_complete_search`}
+          foremanApiAutoComplete
+          rowsCount={results?.length}
+          variant={TableVariant.compact}
+        >
+          <Thead>
+            <Tr>
+              {columnHeaders.map(col =>
+                <Th key={col}>{col}</Th>)}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {results?.map(({
+              id,
+              status: moduleStreamStatus,
+              name,
+              stream,
+              installed_profiles: installedProfiles,
+              upgradable,
+              module_spec: moduleSpec,
+            }, index) =>
+
+            /* eslint-disable react/no-array-index-key */
+
+              (
+                <Tr key={`${id} ${index}`}>
+                  <Td>
+                    <a
+                      href={`/module_streams?search=module_spec%3D${moduleSpec}+and+host%3D${hostName}`}
+                    >
+                      {name}
+                    </a>
+                  </Td>
+                  <Td>
+                    <StreamState moduleStreamStatus={moduleStreamStatus} />
+                  </Td>
+                  <Td>{stream}</Td>
+                  <Td>
+                    <EnabledIcon
+                      streamText={moduleStreamStatus}
+                      streamInstallStatus={installedProfiles}
+                      upgradable={upgradable}
+                    />
+                  </Td>
+                  <Td>
+                    <HostInstalledProfiles
+                      moduleStreamStatus={moduleStreamStatus}
+                      installedProfiles={installedProfiles}
+                    />
+                  </Td>
+                  <Td
+                    key={`rowActions-${id}`}
+                    actions={{
+                      items: rowActions,
+                    }}
+                  />
+                </Tr>
+              ))
+            }
+          </Tbody>
+        </TableWrapper>
+      </div>
+    </div>
+  );
+};
+
+export default ModuleStreamsTab;

data/webpack/components/extensions/HostDetails/Tabs/ModuleStreamsTab/__tests__/moduleStreamsTab.test.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { act } from 'react-test-renderer';
+import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import { nockInstance, assertNockRequest, mockForemanAutocomplete, mockSetting } from '../../../../../../test-utils/nockWrapper';
+import { foremanApi } from '../../../../../../services/api';
+import { ModuleStreamsTab } from '../ModuleStreamsTab';
+import mockModuleStreams from './modules.fixtures.json';
+import { MODULE_STREAMS_KEY } from '../ModuleStreamsConstants';
+
+const contentFacetAttributes = {
+  id: 11,
+  uuid: 'e5761ea3-4117-4ecf-83d0-b694f99b389e',
+  content_view_default: false,
+  lifecycle_environment_library: false,
+};
+
+const renderOptions = (facetAttributes = contentFacetAttributes) => ({
+  apiNamespace: MODULE_STREAMS_KEY,
+  initialState: {
+    API: {
+      HOST_DETAILS: {
+        response: {
+          id: 1,
+          name: 'test-host',
+          content_facet_attributes: { ...facetAttributes },
+        },
+        status: 'RESOLVED',
+      },
+    },
+  },
+});
+
+const hostModuleStreams = foremanApi.getApiUrl('/hosts/1/module_streams');
+const autocompleteUrl = '/hosts/1/module_streams/auto_complete_search';
+
+let firstModuleStreams;
+let searchDelayScope;
+let autoSearchScope;
+
+beforeEach(() => {
+  const { results } = mockModuleStreams;
+  [firstModuleStreams] = results;
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+});
+
+afterEach(() => {
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+});
+
+beforeEach(() => {
+  const { results } = mockModuleStreams;
+  [firstModuleStreams] = results;
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+});
+
+afterEach(() => {
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+});
+
+test('Can call API for Module streams and show on screen on page load', async (done) => {
+  // Setup autocomplete with mockForemanAutoComplete since we aren't adding /katello
+  const autocompleteScope = mockForemanAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(hostModuleStreams)
+    .query(true)
+    .reply(200, mockModuleStreams);
+
+  const { getAllByText } = renderWithRedux(<ModuleStreamsTab />, renderOptions());
+
+  // Assert that the Module streams are now showing on the screen, but wait for them to appear.
+  await patientlyWaitFor(() =>
+    expect(getAllByText(firstModuleStreams.name)[0]).toBeInTheDocument());
+  // Assert request was made and completed, see helper function
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  act(done);
+});
+
+test('Can handle no Module streams being present', async (done) => {
+  // Setup autocomplete with mockForemanAutoComplete since we aren't adding /katello
+  const autocompleteScope = mockForemanAutocomplete(nockInstance, autocompleteUrl);
+
+  const noResults = {
+    total: 0,
+    subtotal: 0,
+    page: 1,
+    per_page: 20,
+    results: [],
+  };
+
+  const scope = nockInstance
+    .get(hostModuleStreams)
+    .query(true)
+    .reply(200, noResults);
+
+  const { queryByText } = renderWithRedux(<ModuleStreamsTab />, renderOptions());
+
+  // Assert that there are not any Module streams showing on the screen.
+  await patientlyWaitFor(() => expect(queryByText('This host does not have any Module streams.')).toBeInTheDocument());
+  // Assert request was made and completed, see helper function
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  act(done);
+});

data/webpack/components/extensions/HostDetails/Tabs/ModuleStreamsTab/__tests__/modules.fixtures.json

@@ -0,0 +1,34 @@
+{
+  "total":3,
+  "subtotal":3,
+  "page":1,
+  "per_page":20,
+  "error":null,
+  "search":null,
+  "results":[
+     {
+        "status":"unknown",
+        "installed_profiles":[],
+        "upgradable":false,
+        "name":"horse",
+        "stream":"1.4",
+        "module_spec":"horse:1.4"
+     },
+     {
+        "status":"unknown",
+        "installed_profiles":[],
+        "upgradable":false,
+        "name":"monkey",
+        "stream":"1.8",
+        "module_spec":"monkey:1.8"
+     },
+     {
+        "status":"enabled",
+        "installed_profiles":["walrus"],
+        "upgradable":false,
+        "name":"walrus",
+        "stream":"2.4",
+        "module_spec":"walrus:2.4"
+     }
+  ]
+}

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;
+}