katello 4.3.0.rc1 → 4.3.0.rc4

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

@@ -0,0 +1,347 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { Skeleton, ToggleGroup, ToggleGroupItem, Label, Tooltip, Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import {
+  TableVariant,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+} from '@patternfly/react-table';
+import { FlagIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import TableWrapper from '../../../../../components/Table/TableWrapper';
+import { enableRepoSetRepo, disableRepoSetRepo, resetRepoSetRepo, getHostRepositorySets } from './RepositorySetsActions';
+import { selectRepositorySetsStatus } from './RepositorySetsSelectors';
+import { selectHostDetailsStatus } from '../../HostDetailsSelectors.js';
+import { useBulkSelect } from '../../../../../components/Table/TableHooks';
+import { REPOSITORY_SETS_KEY } from './RepositorySetsConstants.js';
+import './RepositorySetsTab.scss';
+
+const getEnabledValue = ({ enabled, enabledContentOverride }) => {
+  const isOverridden = (enabledContentOverride !== null);
+  return {
+    isOverridden,
+    isEnabled: (isOverridden ? enabledContentOverride : enabled),
+  };
+};
+
+const EnabledIcon = ({ isEnabled, isOverridden }) => {
+  const enabledLabel = (
+    <Label
+      color={isEnabled ? 'green' : 'gray'}
+      icon={isOverridden ? <FlagIcon /> : null}
+      className={`${isEnabled ? 'enabled' : 'disabled'}-label${isOverridden ? ' content-override' : ''}`}
+    >
+      {isEnabled ? __('Enabled') : __('Disabled')}
+    </Label>
+  );
+  if (isOverridden) {
+    return (
+      <Tooltip
+        position="right"
+        content={__('Overridden')}
+      >
+        {enabledLabel}
+      </Tooltip>
+    );
+  }
+  return enabledLabel;
+};
+
+EnabledIcon.propTypes = {
+  isEnabled: PropTypes.bool.isRequired,
+  isOverridden: PropTypes.bool.isRequired,
+};
+
+const RepositorySetsTab = () => {
+  const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
+  const {
+    id: hostId,
+    subscription_status: subscriptionStatus,
+    content_facet_attributes: contentFacetAttributes,
+  } = hostDetails;
+  const contentFacet = propsToCamelCase(contentFacetAttributes ?? {});
+  const {
+    contentViewDefault,
+    lifecycleEnvironmentLibrary,
+    contentViewName,
+    lifecycleEnvironmentName,
+  } = contentFacet;
+  const nonLibraryHost = contentViewDefault === false &&
+    lifecycleEnvironmentLibrary === false;
+  const simpleContentAccess = (Number(subscriptionStatus) === 5);
+  const dispatch = useDispatch();
+  const toggleGroupStates = ['noLimit', 'limitToEnvironment'];
+  const [noLimit, limitToEnvironment] = toggleGroupStates;
+  const defaultToggleGroupState = nonLibraryHost ? limitToEnvironment : noLimit;
+  const [toggleGroupState, setToggleGroupState] =
+    useState(defaultToggleGroupState);
+  const [alertShowing, setAlertShowing] = useState(false);
+  const emptyContentTitle = __('No repository sets to show.');
+  const emptyContentBody = __('Repository sets will appear here when available.');
+  const emptySearchTitle = __('No matching repository sets found');
+  const emptySearchBody = __('Try changing your search query.');
+  const columnHeaders = [
+    __('Repository'),
+    __('Product'),
+    __('Repository path'),
+    __('Status'),
+  ];
+  const fetchItems = useCallback(
+    params => (hostId ?
+      getHostRepositorySets({
+        content_access_mode_env: toggleGroupState === limitToEnvironment,
+        content_access_mode_all: simpleContentAccess,
+        host_id: hostId,
+        ...params,
+      }) : null),
+    [hostId, toggleGroupState, limitToEnvironment, simpleContentAccess],
+  );
+
+  const response = useSelector(state => selectAPIResponse(state, REPOSITORY_SETS_KEY));
+  const { results, ...metadata } = response;
+  const status = useSelector(state => selectRepositorySetsStatus(state));
+  const {
+    selectOne, isSelected, searchQuery, selectedCount, isSelectable,
+    updateSearchQuery, selectNone, fetchBulkParams, ...selectAll
+  } = useBulkSelect({
+    results,
+    metadata,
+    isSelectable: () => false,
+  });
+
+  const hostDetailsStatus = useSelector(state => selectHostDetailsStatus(state));
+
+  useEffect(() => {
+    // wait until host details are loaded to set alertShowing
+    if (hostDetailsStatus === STATUS.RESOLVED) {
+      setAlertShowing(nonLibraryHost);
+    }
+  }, [hostDetailsStatus, nonLibraryHost]);
+
+  if (!hostId) return <Skeleton />;
+
+  const updateResults = ({ labels, enabled, newResponse }) => dispatch({
+    type: `${REPOSITORY_SETS_KEY}_SUCCESS`,
+    key: REPOSITORY_SETS_KEY,
+    response: {
+      ...response,
+      results: results.map((result) => {
+        if (labels.includes(result.label)) {
+          const isEnabled = enabled === null ?
+            newResponse.results.find(r => r.id === result.id).enabled :
+            enabled;
+          return { ...result, enabled: isEnabled, enabled_content_override: enabled };
+        }
+        return result;
+      }),
+    },
+  });
+  const overrideToEnabled = ({ labels }) =>
+    dispatch(enableRepoSetRepo({ hostId, labels, updateResults }));
+  const overrideToDisabled = ({ labels }) =>
+    dispatch(disableRepoSetRepo({ hostId, labels, updateResults }));
+  const resetToDefault = ({ labels }) =>
+    dispatch(resetRepoSetRepo({ hostId, labels, updateResults }));
+
+  // uncomment (and remove rule disablement) when Select All is added
+  /* eslint-disable max-len */
+  // const dropdownItems = [
+  //   <DropdownItem aria-label="bulk_enable" key="bulk_enable" component="button" onClick={overrideToEnabled}>
+  //     {__('Override to enabled')}
+  //   </DropdownItem>,
+  //   <DropdownItem aria-label="bulk_disable" key="bulk_disable" component="button" onClick={overrideToDisabled}>
+  //     {__('Override to disabled')}
+  //   </DropdownItem>,
+  //   <DropdownItem aria-label="bulk_disable" key="bulk_disable" component="button" onClick={resetToDefault}>
+  //     {__('Reset to default')}
+  //   </DropdownItem>,
+  // ];
+  /* eslint-enable max-len */
+
+  let toggleGroup;
+  if (nonLibraryHost) {
+    toggleGroup = (
+      <ToggleGroup aria-label="Repository Set toggle">
+        <ToggleGroupItem
+          text={__('Show all')}
+          buttonId="no-limit-toggle"
+          aria-label="No limit"
+          isSelected={toggleGroupState === noLimit}
+          onChange={() => setToggleGroupState(noLimit)}
+        />
+        <ToggleGroupItem
+          text={__('Limit to environment')}
+          buttonId="limit-to-env-toggle"
+          aria-label="Limit to environment"
+          isSelected={toggleGroupState === limitToEnvironment}
+          onChange={() => setToggleGroupState(limitToEnvironment)}
+        />
+      </ToggleGroup>
+    );
+  }
+
+  const hostEnvText = 'the "{contentViewName}" content view and "{lifecycleEnvironmentName}" environment';
+
+  const scaAlert = (toggleGroupState === limitToEnvironment ?
+    `Showing only repositories in ${hostEnvText}.` :
+    'Showing all available repositories.');
+
+  const nonScaAlert = (toggleGroupState === limitToEnvironment ?
+    `Showing repositories in ${hostEnvText} that are available through subscriptions.` :
+    'Showing all repositories available through subscriptions.');
+
+  let alertText;
+  if (simpleContentAccess) {
+    alertText = scaAlert;
+  } else {
+    alertText = nonScaAlert;
+  }
+
+  return (
+    <div>
+      <div id="repo-sets-tab">
+        <div className="content-header">
+          <div className="repo-sets-blurb">
+            <FormattedMessage
+              className="repo-sets-blurb"
+              id="repo-sets-blurb"
+              defaultMessage={__('Below are the repository sets currently available for this content host. For Red Hat subscriptions, additional content can be made available through the {rhrp}. Changing default settings requires subscription-manager 1.10 or newer to be installed on this host.')}
+              values={{
+                rhrp: <a href="/redhat_repositories">{__('Red Hat Repositories page')}</a>,
+              }}
+            />
+          </div>
+          {alertShowing &&
+            <Alert
+              variant="info"
+              className="repo-sets-alert"
+              isInline
+              title={
+                <FormattedMessage
+                  className="repo-sets-alert-title"
+                  id="repo-sets-alert-title"
+                  defaultMessage={alertText}
+                  values={{
+                    contentViewName,
+                    lifecycleEnvironmentName,
+                  }}
+                />
+              }
+              actionClose={<AlertActionCloseButton onClose={() => setAlertShowing(false)} />}
+            />
+          }
+        </div>
+        <TableWrapper
+          {...{
+                metadata,
+                emptyContentTitle,
+                emptyContentBody,
+                emptySearchTitle,
+                emptySearchBody,
+                status,
+                searchQuery,
+                updateSearchQuery,
+                selectedCount,
+                selectNone,
+                toggleGroup,
+                }
+          }
+          activeFilters={[toggleGroupState]}
+          defaultFilters={[defaultToggleGroupState]}
+          additionalListeners={[hostId, toggleGroupState]}
+          fetchItems={fetchItems}
+          autocompleteEndpoint="/repository_sets/auto_complete_search"
+          bookmarkController="katello_product_contents" // Katello::ProductContent.table_name
+          rowsCount={results?.length}
+          variant={TableVariant.compact}
+          {...selectAll}
+          displaySelectAllCheckbox={false}
+        >
+          <Thead>
+            <Tr>
+              <Th key="select-all" />
+              {columnHeaders.map(col =>
+                <Th key={col}>{col}</Th>)}
+              <Th />
+              <Th key="action-menu" />
+            </Tr>
+          </Thead>
+          <>
+            {results?.map((repoSet, rowIndex) => {
+              const {
+                id,
+                label,
+                content: { name: repoName },
+                enabled,
+                enabled_content_override: enabledContentOverride,
+                contentUrl: repoPath,
+                product: { name: productName, id: productId },
+              } = repoSet;
+              const { isEnabled, isOverridden } =
+                getEnabledValue({ enabled, enabledContentOverride });
+              return (
+                <Tbody key={`${id}_${repoPath}`}>
+                  <Tr>
+                    <Td select={{
+                        disable: !isSelectable(id),
+                        isSelected: isSelected(id),
+                        onSelect: (event, selected) => selectOne(selected, id),
+                        rowIndex,
+                        variant: 'checkbox',
+                        }}
+                    />
+                    <Td>
+                      <span>{repoName}</span>
+                    </Td>
+                    <Td>
+                      <a href={`/products/${productId}`}>{productName}</a>
+                    </Td>
+                    <Td>
+                      <span>{repoPath}</span>
+                    </Td>
+                    <Td>
+                      <span><EnabledIcon key={`enabled-icon-${id}`} {...{ isEnabled, isOverridden }} /></span>
+                    </Td>
+                    <Td
+                      key={`rowActions-${id}`}
+                      actions={{
+                          items: [
+                            {
+                              title: __('Override to disabled'),
+                              isDisabled: isOverridden && !isEnabled,
+                              onClick: () => overrideToDisabled({ labels: [label] }),
+                            },
+                            {
+                              title: __('Override to enabled'),
+                              isDisabled: isOverridden && isEnabled,
+                              onClick: () => overrideToEnabled({ labels: [label] }),
+                            },
+                            {
+                              title: __('Reset to default'),
+                              isDisabled: !isOverridden,
+                              onClick: () => resetToDefault({ labels: [label] }),
+                            },
+                          ],
+                        }}
+                    />
+                  </Tr>
+                </Tbody>
+                );
+              })
+              }
+          </>
+        </TableWrapper>
+      </div>
+    </div>
+  );
+};
+
+export default RepositorySetsTab;

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

@@ -0,0 +1,7 @@
+#repo-sets-tab .content-header .repo-sets-alert {
+  margin: 15px 24px;
+}
+
+#repo-sets-tab .content-header > .repo-sets-blurb {
+  margin: 15px 24px;
+}

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

@@ -7,7 +7,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 import EnableTracerEmptyState from './EnableTracerEmptyState';
 import TableWrapper from '../../../Table/TableWrapper';
-import { useSelectionSet } from '../../../Table/TableHooks';
+import { useBulkSelect } from '../../../Table/TableHooks';
 import { getHostTraces } from './HostTracesActions';
 import { resolveTraces } from './RemoteExecutionActions';
 import { selectHostTracesStatus } from './HostTracesSelectors';
@@ -15,7 +15,6 @@ import { resolveTraceUrl } from './customizedRexUrlHelpers';
 import './TracesTab.scss';
 
 const TracesTab = () => {
-  const [searchQuery, updateSearchQuery] = useState('');
   const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
   const dispatch = useDispatch();
   const {
@@ -37,34 +36,40 @@ const TracesTab = () => {
   const toggleBulkAction = () => setIsBulkActionOpen(prev => !prev);
   const response = useSelector(state => selectAPIResponse(state, 'HOST_TRACES'));
   const { results, ...meta } = response;
+  const tracesSearchQuery = id => `id = ${id}`;
   const {
-    selectOne,
-    isSelected, isSelectable,
-    selectionSet: selectedTraces,
-    ...selectAll
-  } = useSelectionSet({
+    selectOne, isSelected, searchQuery, selectedCount, isSelectable,
+    updateSearchQuery, selectNone, fetchBulkParams, ...selectAll
+  } = useBulkSelect({
     results,
     metadata: meta,
     isSelectable: result => !!result.restart_command,
   });
 
-  const onBulkRestartApp = (ids) => {
-    dispatch(resolveTraces({ hostname, ids: [...ids].join(',') }));
-    selectedTraces.clear();
 
+  const onBulkRestartApp = () => {
+    dispatch(resolveTraces({
+      hostname, search: fetchBulkParams(),
+    }));
+    selectNone();
     const params = { page: meta.page, per_page: meta.per_page, search: meta.search };
     dispatch(getHostTraces(hostId, params));
   };
 
-  const bulkCustomizedRexUrl = ids => resolveTraceUrl({ hostname, ids: [...ids] });
+  const onRestartApp = id => dispatch(resolveTraces({
+    hostname,
+    search: tracesSearchQuery(id),
+  }));
 
-  const onRestartApp = id => onBulkRestartApp([id]);
+  const bulkCustomizedRexUrl = () => resolveTraceUrl({
+    hostname, search: (selectedCount > 0) ? fetchBulkParams() : '',
+  });
 
   const dropdownItems = [
-    <DropdownItem isDisabled={!selectedTraces.size} aria-label="bulk_rex" key="bulk_rex" component="button" onClick={() => onBulkRestartApp(selectedTraces)}>
+    <DropdownItem isDisabled={selectedCount === 0} aria-label="bulk_rex" key="bulk_rex" component="button" onClick={onBulkRestartApp}>
       {__('Restart via remote execution')}
     </DropdownItem>,
-    <DropdownItem isDisabled={!selectedTraces.size} aria-label="bulk_rex_customized" key="bulk_rex_customized" component="a" href={bulkCustomizedRexUrl(selectedTraces)}>
+    <DropdownItem isDisabled={selectedCount === 0} aria-label="bulk_rex_customized" key="bulk_rex_customized" component="a" href={bulkCustomizedRexUrl()}>
       {__('Restart via customized remote execution')}
     </DropdownItem>,
   ];
@@ -76,8 +81,8 @@ const TracesTab = () => {
           <ActionListItem>
             <Button
               variant="secondary"
-              isDisabled={!selectedTraces.size}
-              onClick={() => onBulkRestartApp(selectedTraces)}
+              isDisabled={selectedCount === 0}
+              onClick={onBulkRestartApp}
             >
               {__('Restart app')}
             </Button>
@@ -96,9 +101,6 @@ const TracesTab = () => {
 
   );
   const status = useSelector(state => selectHostTracesStatus(state));
-  // const selectAll = () => {
-  //   // leaving blank until we can implement selectAll Katello-wide
-  // };
   if (showEnableTracer) return <EnableTracerEmptyState />;
 
   if (!hostId) return <Skeleton />;
@@ -108,21 +110,26 @@ const TracesTab = () => {
     <div id="traces-tab">
       <h3>{__('Tracer helps administrators identify applications that need to be restarted after a system is patched.')}</h3>
       <TableWrapper
-        actionButtons={actionButtons}
-        searchQuery={searchQuery}
-        emptyContentBody={emptyContentBody}
-        emptyContentTitle={emptyContentTitle}
-        emptySearchBody={emptySearchBody}
-        emptySearchTitle={emptySearchTitle}
-        updateSearchQuery={updateSearchQuery}
-        fetchItems={fetchItems}
+        {...{
+                emptyContentTitle,
+                emptyContentBody,
+                emptySearchTitle,
+                emptySearchBody,
+                status,
+                searchQuery,
+                updateSearchQuery,
+                selectedCount,
+                selectNone,
+                fetchItems,
+                actionButtons,
+                }
+          }
+        metadata={meta}
         autocompleteEndpoint={`/hosts/${hostId}/traces/auto_complete_search`}
         foremanApiAutoComplete
-        displaySelectAllCheckbox
         rowsCount={results?.length}
         variant={TableVariant.compact}
-        status={status}
-        metadata={meta}
+        displaySelectAllCheckbox
         {...selectAll}
       >
         <Thead>
@@ -146,7 +153,7 @@ const TracesTab = () => {
           let rowDropdownItems = [
             { title: 'Restart via remote execution', onClick: () => onRestartApp(id) },
             {
-              component: 'a', href: resolveTraceUrl({ hostname, ids: [id] }), title: 'Restart via customized remote execution',
+              component: 'a', href: resolveTraceUrl({ hostname, search: tracesSearchQuery(id) }), title: 'Restart via customized remote execution',
             },
           ];
           if (resolveDisabled) {

data/webpack/components/extensions/HostDetails/Tabs/__tests__/bookmarks.fixtures.json

@@ -0,0 +1,12 @@
+{
+  "total": 20,
+  "subtotal": 1,
+  "page": 1,
+  "per_page": 20,
+  "search": "controller=katello_product_contents",
+  "sort": {
+    "by": null,
+    "order": null
+  },
+  "results": []
+}