katello 3.17.0 → 3.18.0

data/webpack/components/ActionableDetail.js

@@ -47,7 +47,7 @@ ActionableDetail.propTypes = {
   value: PropTypes.oneOfType([ // displayed value
     PropTypes.string,
     PropTypes.bool,
-  ]).isRequired,
+  ]),
   onEdit: PropTypes.func.isRequired,
   textArea: PropTypes.bool,
   boolean: PropTypes.bool,
@@ -58,6 +58,7 @@ ActionableDetail.defaultProps = {
   textArea: false,
   boolean: false,
   tooltip: null,
+  value: null,
 };
 
 export default ActionableDetail;

data/webpack/components/Search/Search.js

@@ -64,7 +64,7 @@ class Search extends Component {
     if (this.state.typingTimeout) clearTimeout(this.state.typingTimeout);
 
     this.setState({
-      typingTimeout: setTimeout(() => this.props.onSearch(searchTerm), autoSearchDelay),
+      typingTimeout: setTimeout(() => this.onSearch(searchTerm), autoSearchDelay),
     });
   }
 

data/webpack/components/Table/MainTable.js

@@ -12,12 +12,14 @@ import Loading from '../../components/Loading';
 
 const MainTable = ({
   status, cells, rows, error, emptyContentTitle, emptyContentBody,
-  emptySearchTitle, emptySearchBody, searchIsActive, ...extraTableProps
+  emptySearchTitle, emptySearchBody, searchIsActive, activeFilters,
+  ...extraTableProps
 }) => {
+  const isFiltering = activeFilters || searchIsActive;
   if (status === STATUS.PENDING) return (<Loading />);
   // Can we display the error message?
   if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
-  if (status === STATUS.RESOLVED && searchIsActive && rows.length === 0) {
+  if (status === STATUS.RESOLVED && isFiltering && rows.length === 0) {
     return (<EmptyStateMessage
       title={emptySearchTitle}
       body={emptySearchBody}
@@ -56,11 +58,13 @@ MainTable.propTypes = {
   emptySearchTitle: PropTypes.string.isRequired,
   emptySearchBody: PropTypes.string.isRequired,
   searchIsActive: PropTypes.bool,
+  activeFilters: PropTypes.bool,
 };
 
 MainTable.defaultProps = {
   error: null,
   searchIsActive: false,
+  activeFilters: false,
 };
 
 export default MainTable;

data/webpack/components/Table/TableWrapper.js

@@ -11,9 +11,16 @@ import { orgId } from '../../services/api';
 
 /* Patternfly 4 table wrapper */
 const TableWrapper = ({
-  metadata, fetchItems, autocompleteEndpoint, ...allTableProps
+  children,
+  metadata,
+  fetchItems,
+  autocompleteEndpoint,
+  searchQuery,
+  updateSearchQuery,
+  additionalListeners,
+  activeFilters,
+  ...allTableProps
 }) => {
-  const { search: currentSearch } = metadata;
   const dispatch = useDispatch();
   const { foremanPerPage = 20 } = useForemanSettings();
   // setting pagination to local state so it doesn't disappear when page reloads
@@ -22,15 +29,28 @@ const TableWrapper = ({
   const [total, setTotal] = useState(0);
 
   const updatePagination = (data) => {
-    const { total: newTotal, page: newPage, per_page: newPerPage } = data;
+    const { subtotal: newTotal, page: newPage, per_page: newPerPage } = data;
     if (newTotal) setTotal(parseInt(newTotal, 10));
     if (newPage) setPage(parseInt(newPage, 10));
     if (newPerPage) setPerPage(parseInt(newPerPage, 10));
   };
+  const paginationParams = () => ({ per_page: perPage, page });
+  const fetchWithParams = (allParams = {}) => {
+    dispatch(fetchItems({ ...paginationParams(), ...allParams }));
+  };
 
   useEffect(() => updatePagination(metadata), [metadata]);
 
-  const paginationParams = () => ({ per_page: perPage, page });
+  // The search component will update the search query when a search is performed, listen for that
+  // and perform the search so we can be sure the searchQuery is updated when search is performed.
+  useEffect(() => {
+    if (searchQuery || activeFilters) {
+      // Reset page back to 1 when filter or search changes
+      fetchWithParams({ search: searchQuery, page: 1 });
+    } else {
+      fetchWithParams();
+    }
+  }, [searchQuery, ...additionalListeners]);
 
   const getAutoCompleteParams = search => ({
     endpoint: autocompleteEndpoint,
@@ -40,18 +60,23 @@ const TableWrapper = ({
     },
   });
 
-  const onSearch = search => dispatch(fetchItems({ ...paginationParams(), search }));
-
   const onPaginationUpdate = (updatedPagination) => {
     updatePagination(updatedPagination);
-    dispatch(fetchItems({ ...paginationParams(), ...updatedPagination, search: currentSearch }));
+    dispatch(fetchItems({ ...paginationParams(), ...updatedPagination, search: searchQuery }));
   };
 
   return (
     <React.Fragment>
       <Flex>
         <FlexItem>
-          <Search patternfly4 {...{ onSearch, getAutoCompleteParams }} />
+          <Search
+            patternfly4
+            onSearch={search => updateSearchQuery(search)}
+            getAutoCompleteParams={getAutoCompleteParams}
+          />
+        </FlexItem>
+        <FlexItem>
+          {children}
         </FlexItem>
         <FlexItem align={{ default: 'alignRight' }}>
           <Pagination
@@ -65,12 +90,14 @@ const TableWrapper = ({
           />
         </FlexItem>
       </Flex>
-      <MainTable searchIsActive={!!currentSearch} {...allTableProps} />
+      <MainTable searchIsActive={!!searchQuery} activeFilters={activeFilters} {...allTableProps} />
     </React.Fragment>
   );
 };
 
 TableWrapper.propTypes = {
+  searchQuery: PropTypes.string.isRequired,
+  updateSearchQuery: PropTypes.func.isRequired,
   fetchItems: PropTypes.func.isRequired,
   metadata: PropTypes.shape({
     total: PropTypes.number,
@@ -85,10 +112,20 @@ TableWrapper.propTypes = {
     search: PropTypes.string,
   }),
   autocompleteEndpoint: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  // additionalListeners are anything that can trigger another API call, e.g. a filter
+  additionalListeners: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ])),
+  activeFilters: PropTypes.bool,
 };
 
 TableWrapper.defaultProps = {
   metadata: {},
+  children: null,
+  additionalListeners: [],
+  activeFilters: false,
 };
 
 export default TableWrapper;

data/webpack/scenes/ContentViews/ContentViewSelectors.js

@@ -3,10 +3,14 @@ import {
   selectAPIError,
   selectAPIResponse,
 } from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
 import CONTENT_VIEWS_KEY from './ContentViewsConstants';
 
-export const selectContentViews = state => selectAPIResponse(state, CONTENT_VIEWS_KEY) || {};
+export const selectContentViews = state =>
+  selectAPIResponse(state, CONTENT_VIEWS_KEY) || {};
 
-export const selectContentViewStatus = state => selectAPIStatus(state, CONTENT_VIEWS_KEY);
+export const selectContentViewStatus = state =>
+  selectAPIStatus(state, CONTENT_VIEWS_KEY) || STATUS.PENDING;
 
-export const selectContentViewError = state => selectAPIError(state, CONTENT_VIEWS_KEY);
+export const selectContentViewError = state =>
+  selectAPIError(state, CONTENT_VIEWS_KEY);

data/webpack/scenes/ContentViews/ContentViewsConstants.js

@@ -3,4 +3,12 @@ export const UPDATE_CONTENT_VIEW = 'UPDATE_CONTENT_VIEW';
 export const UPDATE_CONTENT_VIEW_SUCCESS = 'UPDATE_CONTENT_VIEW_SUCCESS';
 export const UPDATE_CONTENT_VIEW_FAILURE = 'UPDATE_CONTENT_VIEW_FAILURE';
 
+export const cvDetailsKey = cvId => `${CONTENT_VIEWS_KEY}_${cvId}`;
+export const cvDetailsRepoKey = cvId => `${CONTENT_VIEWS_KEY}_REPOSITORIES_${cvId}`;
+
+// Repo added to content view status display and key
+export const ADDED = 'Added';
+export const NOT_ADDED = 'Not added';
+export const ALL_STATUSES = 'All';
+
 export default CONTENT_VIEWS_KEY;

data/webpack/scenes/ContentViews/ContentViewsPage.js

@@ -1,8 +1,7 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Grid, GridItem, TextContent, Text, TextVariants } from '@patternfly/react-core';
-import getContentViews from './ContentViewsActions';
 import { selectContentViews,
   selectContentViewStatus,
   selectContentViewError } from './ContentViewSelectors';
@@ -13,12 +12,6 @@ const ContentViewsPage = () => {
   const status = useSelector(selectContentViewStatus);
   const error = useSelector(selectContentViewError);
 
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(getContentViews());
-  }, []);
-
   return (
     <Grid className="grid-with-margin">
       <GridItem span={12}>

data/webpack/scenes/ContentViews/Details/ContentViewDetailActions.js

@@ -2,10 +2,14 @@ import { API_OPERATIONS, get, put } from 'foremanReact/redux/API';
 import { addToast } from 'foremanReact/redux/actions/toasts';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import CONTENT_VIEWS_KEY, {
+import {
   UPDATE_CONTENT_VIEW,
   UPDATE_CONTENT_VIEW_FAILURE,
   UPDATE_CONTENT_VIEW_SUCCESS,
+  NOT_ADDED,
+  ALL_STATUSES,
+  cvDetailsKey,
+  cvDetailsRepoKey,
 } from '../ContentViewsConstants';
 import api from '../../../services/api';
 
@@ -13,7 +17,7 @@ import { apiError } from '../../../utils/helpers';
 
 const getContentViewDetails = cvId => get({
   type: API_OPERATIONS.GET,
-  key: `${CONTENT_VIEWS_KEY}_${cvId}`,
+  key: cvDetailsKey(cvId),
   url: api.getApiUrl(`/content_views/${cvId}`),
 });
 
@@ -29,7 +33,7 @@ const cvUpdateSuccess = (response, dispatch) => {
 
 export const updateContentView = (cvId, params) => async dispatch => dispatch(put({
   type: API_OPERATIONS.PUT,
-  key: `${CONTENT_VIEWS_KEY}_${cvId}`,
+  key: cvDetailsKey(cvId),
   url: api.getApiUrl(`/content_views/${cvId}`),
   params,
   handleSuccess: response => cvUpdateSuccess(response, dispatch),
@@ -41,4 +45,22 @@ export const updateContentView = (cvId, params) => async dispatch => dispatch(pu
   },
 }));
 
+export const getContentViewRepositories = (cvId, params, status) => {
+  const apiParams = { ...params };
+  let apiUrl = `/content_views/${cvId}/repositories`;
+
+  if (status === ALL_STATUSES) {
+    apiUrl += '/show_all';
+  } else if (status === NOT_ADDED) {
+    apiParams.available_for = 'content_view';
+  }
+
+  return get({
+    type: API_OPERATIONS.GET,
+    key: cvDetailsRepoKey(cvId),
+    url: api.getApiUrl(apiUrl),
+    params: apiParams,
+  });
+};
+
 export default getContentViewDetails;

data/webpack/scenes/ContentViews/Details/ContentViewDetailSelectors.js

@@ -3,16 +3,26 @@ import {
   selectAPIError,
   selectAPIResponse,
 } from 'foremanReact/redux/API/APISelectors';
-import CONTENT_VIEWS_KEY from '../ContentViewsConstants';
+import { STATUS } from 'foremanReact/constants';
+import { cvDetailsKey, cvDetailsRepoKey } from '../ContentViewsConstants';
 
 export const selectCVDetails = (state, cvId) =>
-  selectAPIResponse(state, `${CONTENT_VIEWS_KEY}_${cvId}`) || {};
+  selectAPIResponse(state, cvDetailsKey(cvId)) || {};
 
 export const selectCVDetailStatus =
-  (state, cvId) => selectAPIStatus(state, `${CONTENT_VIEWS_KEY}_${cvId}`);
+  (state, cvId) => selectAPIStatus(state, cvDetailsKey(cvId)) || STATUS.PENDING;
 
 export const selectCVDetailError =
-  (state, cvId) => selectAPIError(state, `${CONTENT_VIEWS_KEY}_${cvId}`);
+  (state, cvId) => selectAPIError(state, cvDetailsKey(cvId));
+
+export const selectCVRepos = (state, cvId) =>
+  selectAPIResponse(state, cvDetailsRepoKey(cvId)) || {};
+
+export const selectCVReposStatus = (state, cvId) =>
+  selectAPIStatus(state, cvDetailsRepoKey(cvId)) || STATUS.PENDING;
+
+export const selectCVReposError = (state, cvId) =>
+  selectAPIError(state, cvDetailsRepoKey(cvId));
 
 
 export const selectIsCVUpdating = state => state.katello?.contentViewDetails?.updating;

data/webpack/scenes/ContentViews/Details/ContentViewDetails.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 
 import DetailsContainer from './DetailsContainer';
 import ContentViewInfo from './ContentViewInfo';
+import ContentViewRepositories from './Repositories/ContentViewRepositories';
 import { selectCVDetails } from './ContentViewDetailSelectors';
 import TabbedView from '../../../components/TabbedView';
 
@@ -25,7 +26,7 @@ const ContentViewDetails = ({ match }) => {
     },
     {
       title: __('Repositories'),
-      content: <React.Fragment>Repositories</React.Fragment>,
+      content: <ContentViewRepositories {...{ cvId, details }} />,
     },
     {
       title: __('Filters'),

data/webpack/scenes/ContentViews/Details/Repositories/ContentCounts.js

@@ -0,0 +1,56 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+
+// type: [plural_name, singular_name, link]
+const repoLabels = {
+  rpm: ['RPM packages', 'RPM package', 'packages'],
+  module_stream: ['module streams', 'module stream', 'module_streams'],
+  erratum: ['errata', 'erratum', 'errata'], // need to handle link, its $URL/errata?repositoryId=107
+  deb: ['deb packages', 'deb package', 'debs'],
+  ansible_collection: ['Ansible collections', 'Ansible collection', 'ansible_collections'],
+  docker_manifest: ['container manifests', 'container manifest', 'content/docker_manifests'],
+  docker_manifest_list: ['container manifest lists', 'container manifest list', 'content/docker_manifest_lists'],
+  docker_tag: ['container tags', 'container tag', 'content/docker_tags'],
+  file: ['files', 'file', 'content/files'],
+  ostree_branch: ['ostree branches', 'ostree branch', 'content/ostree_branches'],
+  package_group: ['package groups', 'package group', 'package_groups'],
+  puppet_module: ['puppet modules', 'puppet module', 'content/puppet_modules'],
+  srpm: ['source RPMs', 'source RPM', 'source_rpms'], // no link?
+};
+
+const appendCount = (type, count, info, productId, repoId) => {
+  const [repoPlural, repoSingular, link] = info;
+  const displayName = count > 1 ? repoPlural : repoSingular;
+  let url = urlBuilder(`products/${productId}/repositories/${repoId}/content`, '', link);
+  const displayInfo = `${count} ${displayName}`;
+  if (type === 'source_rpm') return displayInfo;
+  if (type === 'erratum') url = urlBuilder(`errata?repositoryId=${repoId}`);
+
+  return (
+    <div key={`${type}${count}`}>
+      <a href={url}>{displayInfo}</a>
+    </div>
+  );
+};
+
+const ContentCounts = ({ productId, repoId, counts }) => {
+  const allCounts = [];
+
+  Object.keys(counts).forEach((type) => {
+    const count = counts[type];
+    const info = repoLabels[type];
+    // package and rpm are the same
+    if (type !== 'package' && count > 0) allCounts.push(appendCount(type, count, info, productId, repoId));
+  });
+
+  return <Fragment>{allCounts}</Fragment>;
+};
+
+ContentCounts.propTypes = {
+  productId: PropTypes.number.isRequired,
+  repoId: PropTypes.number.isRequired,
+  counts: PropTypes.shape({}).isRequired,
+};
+
+export default ContentCounts;

data/webpack/scenes/ContentViews/Details/Repositories/ContentViewRepositories.js

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Bullseye, Split, SplitItem } from '@patternfly/react-core';
+import { TableVariant, fitContent } from '@patternfly/react-table';
+import { STATUS } from 'foremanReact/constants';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import PropTypes from 'prop-types';
+
+import TableWrapper from '../../../../components/Table/TableWrapper';
+import { getContentViewRepositories } from '../ContentViewDetailActions';
+import { selectCVRepos, selectCVReposStatus, selectCVReposError } from '../ContentViewDetailSelectors';
+import { ADDED, NOT_ADDED, ALL_STATUSES } from '../../ContentViewsConstants';
+import ContentCounts from './ContentCounts';
+import LastSync from './LastSync';
+import RepoAddedStatus from './RepoAddedStatus';
+import RepoIcon from './RepoIcon';
+import SelectableDropdown from './SelectableDropdown';
+
+const allRepositories = 'All repositories';
+
+// checkbox_name: API_name
+const repoTypes = {
+  [allRepositories]: 'all',
+  'Yum repositories': 'yum',
+  'File repositories': 'file',
+  'Container repositories': 'docker',
+  'OSTree repositories': 'ostree', // ostree is deprecated?
+};
+
+const ContentViewRepositories = ({ cvId }) => {
+  const response = useSelector(state => selectCVRepos(state, cvId), shallowEqual);
+  const status = useSelector(state => selectCVReposStatus(state, cvId), shallowEqual);
+  const error = useSelector(state => selectCVReposError(state, cvId), shallowEqual);
+
+  const [rows, setRows] = useState([]);
+  const [metadata, setMetadata] = useState({});
+  const [searchQuery, updateSearchQuery] = useState('');
+  const [typeSelected, setTypeSelected] = useState(allRepositories);
+  const [statusSelected, setStatusSelected] = useState(ALL_STATUSES);
+
+
+  const columnHeaders = [
+    { title: __('Type'), transforms: [fitContent] },
+    __('Name'),
+    __('Product'),
+    __('Sync state'),
+    __('Content'),
+    { title: __('Status') },
+  ];
+  const loading = status === STATUS.PENDING;
+
+  const buildRows = (results) => {
+    const newRows = [];
+    results.forEach((repo) => {
+      const {
+        id,
+        content_type: contentType,
+        name,
+        added_to_content_view: addedToCV,
+        product: { id: productId, name: productName },
+        content_counts: counts,
+        last_sync_words: lastSyncWords,
+        last_sync: lastSync,
+      } = repo;
+
+      const cells = [
+        { title: <Bullseye><RepoIcon type={contentType} /></Bullseye> },
+        { title: <a href={urlBuilder(`products/${productId}/repositories`, '', id)}>{name}</a> },
+        productName,
+        { title: <LastSync {...{ lastSyncWords, lastSync }} /> },
+        { title: <ContentCounts {...{ counts, productId }} repoId={id} /> },
+        {
+          title: <RepoAddedStatus added={addedToCV || statusSelected === ADDED} />,
+        },
+      ];
+
+      newRows.push({ cells });
+    });
+    return newRows;
+  };
+
+  const onSelect = (_event, isSelected, rowId) => {
+    let newRows;
+    if (rowId === -1) {
+      newRows = rows.map(row => ({ ...row, selected: isSelected }));
+    } else {
+      newRows = [...rows];
+      newRows[rowId].selected = isSelected;
+    }
+
+    setRows(newRows);
+  };
+
+  const getCVReposWithOptions = (params = {}) => {
+    const allParams = { ...params };
+    if (typeSelected !== 'All repositories') allParams.content_type = repoTypes[typeSelected];
+
+    return getContentViewRepositories(cvId, allParams, statusSelected);
+  };
+
+  useEffect(() => {
+    const { results, ...meta } = response;
+    setMetadata(meta);
+
+    if (!loading && results) {
+      const newRows = buildRows(results);
+      setRows(newRows);
+    }
+  }, [JSON.stringify(response)]);
+
+  const emptyContentTitle = __("You currently don't have any repositories to add to this content view.");
+  const emptyContentBody = __('Please add some repositories.'); // needs link
+  const emptySearchTitle = __('No matching repositories found');
+  const emptySearchBody = __('Try changing your search settings.');
+  const activeFilters = (typeSelected && typeSelected !== allRepositories) ||
+    (statusSelected && statusSelected !== ALL_STATUSES);
+
+  return (
+    <TableWrapper
+      {...{
+        rows,
+        metadata,
+        onSelect,
+        emptyContentTitle,
+        emptyContentBody,
+        emptySearchTitle,
+        emptySearchBody,
+        searchQuery,
+        updateSearchQuery,
+        error,
+        status,
+        activeFilters,
+      }}
+      cells={columnHeaders}
+      variant={TableVariant.compact}
+      autocompleteEndpoint="/repositories/auto_complete_search"
+      fetchItems={params => getCVReposWithOptions(params)}
+      additionalListeners={[typeSelected, statusSelected]}
+    >
+      <Split hasGutter>
+        <SplitItem>
+          <SelectableDropdown
+            items={Object.keys(repoTypes)}
+            title="Type"
+            selected={typeSelected}
+            setSelected={setTypeSelected}
+            placeholderText="Type"
+          />
+        </SplitItem>
+        <SplitItem>
+          <SelectableDropdown
+            items={[ADDED, NOT_ADDED, ALL_STATUSES]}
+            title="Status"
+            selected={statusSelected}
+            setSelected={setStatusSelected}
+            placeholderText="Status"
+          />
+        </SplitItem>
+      </Split>
+    </TableWrapper>
+  );
+};
+
+ContentViewRepositories.propTypes = {
+  cvId: PropTypes.number.isRequired,
+};
+
+export default ContentViewRepositories;