katello 4.10.0.rc2 → 4.11.0.rc1

data/webpack/scenes/SmartProxy/ExpandedSmartProxyRepositories.js

@@ -0,0 +1,139 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+import AdditionalCapsuleContent from './AdditionalCapsuleContent';
+import InactiveText from '../ContentViews/components/InactiveText';
+import RepoIcon from '../ContentViews/Details/Repositories/RepoIcon';
+
+const ExpandedSmartProxyRepositories = ({
+  contentCounts, repositories, syncedToCapsule, envId,
+}) => {
+  const filterDataByEnvId = () => {
+    const filteredData = {};
+
+    Object.keys(contentCounts).forEach((key) => {
+      const entry = contentCounts[key];
+      if (entry.metadata.env_id === envId) {
+        filteredData[key] = entry;
+      }
+    });
+
+    return filteredData;
+  };
+  const envContentCounts = filterDataByEnvId();
+
+  const getRepositoryNameById = id => (repositories.find(repo =>
+    Number(repo.id) === Number(id) || Number(repo.library_id) === Number(id)) || {}).name;
+
+  const dataListCellLists = (repoCounts, repo) => {
+    const cellList = [];
+    /* eslint-disable max-len */
+    cellList.push(<DataListCell key={`${repo.id}-name`}><span><a href={`/products/${envContentCounts[repo].metadata.product_id}/repositories/${envContentCounts[repo].metadata.library_instance_id}/`}>{getRepositoryNameById(envContentCounts[repo].metadata.library_instance_id)}</a></span></DataListCell>);
+    cellList.push(<DataListCell key={`${repo.id}-type`}><RepoIcon type={envContentCounts[repo].metadata.content_type} /></DataListCell>);
+    cellList.push(<DataListCell key={`${repo.id}-rpm`}><span>{envContentCounts[repo].counts.rpm ? `${envContentCounts[repo].counts.rpm} Packages` : 'N/A'}</span></DataListCell>);
+    cellList.push(<DataListCell key={`${repo.id}-count`}><AdditionalCapsuleContent counts={envContentCounts[repo].counts} /></DataListCell>);
+    /* eslint-enable max-len */
+    return cellList;
+  };
+
+  const dataListCellListsNotSynced = (repo) => {
+    const cellList = [];
+    /* eslint-disable max-len */
+    cellList.push(<DataListCell key={`${repo.id}-name`}><span><a href={`/products/${repo.product_id}/repositories/${repo.library_id}/`}>{repo.name}</a></span></DataListCell>);
+    cellList.push(<DataListCell key={`${repo.id}-type`}><RepoIcon type={repo.content_type} /></DataListCell>);
+    cellList.push(<DataListCell key={`${repo.id}-rpm`}><span><InactiveText text="N/A" /></span></DataListCell>);
+    cellList.push(<DataListCell key={`${repo.id}-count`}><InactiveText text="N/A" /></DataListCell>);
+    /* eslint-enable max-len */
+    return cellList;
+  };
+  if (syncedToCapsule) {
+    return (
+      <DataList aria-label="Expanded repository details" isCompact>
+        <DataListItem key="headers" >
+          <DataListItemRow>
+            <DataListItemCells dataListCells={[
+              <DataListCell key="primary content">
+                <b>{__('Repository')}</b>
+              </DataListCell>,
+              <DataListCell key="Type"><b>{__('Type')}</b></DataListCell>,
+              <DataListCell key="Package count"><b>{__('Packages')}</b></DataListCell>,
+              <DataListCell key="Additional content"><b>{__('Additional content')}</b></DataListCell>,
+            ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        {Object.keys(envContentCounts).length ?
+          Object.keys(envContentCounts).map((repo, index) => (
+            <DataListItem key={`${repo.id}-${index}`}>
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={dataListCellLists(envContentCounts[repo], repo)}
+                />
+              </DataListItemRow>
+            </DataListItem>
+          )) :
+          <DataListItem key="empty">
+            <DataListItemRow>
+              <DataListItemCells
+                dataListCells={[<DataListCell key="cv-empty"><InactiveText text={__('Content view version is empty')} /></DataListCell>]}
+              />
+            </DataListItemRow>
+          </DataListItem>
+          }
+      </DataList>
+    );
+  }
+
+  return (
+    <DataList aria-label="Expanded repository details" isCompact>
+      <DataListItem key="headers" >
+        <DataListItemRow>
+          <DataListItemCells dataListCells={[
+            <DataListCell key="primary content">
+              <b>{__('Repository')}</b>
+            </DataListCell>,
+            <DataListCell key="Type"><b>{__('Type')}</b></DataListCell>,
+            <DataListCell key="Package count"><b>{__('Packages')}</b></DataListCell>,
+            <DataListCell key="Additional content"><b>{__('Additional content')}</b></DataListCell>,
+          ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      {repositories.length ?
+        repositories.map((repo, index) => (
+          <DataListItem key={`${repo.id}-${index}`}>
+            <DataListItemRow>
+              <DataListItemCells dataListCells={dataListCellListsNotSynced(repo)} />
+            </DataListItemRow>
+          </DataListItem>
+        )) :
+        <DataListItem key="empty">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[<DataListCell key="cv-empty"><InactiveText text={__('Content view version is empty')} /></DataListCell>]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+    }
+    </DataList>);
+};
+
+ExpandedSmartProxyRepositories.propTypes = {
+  contentCounts: PropTypes.shape({}),
+  repositories: PropTypes.arrayOf(PropTypes.shape({})),
+  syncedToCapsule: PropTypes.bool,
+  envId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string, // The API can sometimes return strings
+  ]).isRequired,
+};
+
+ExpandedSmartProxyRepositories.defaultProps = {
+  contentCounts: {},
+  repositories: [{}],
+  syncedToCapsule: false,
+};
+
+export default ExpandedSmartProxyRepositories;

data/webpack/scenes/SmartProxy/SmartProxyContentActions.js

@@ -1,11 +1,14 @@
-import { API_OPERATIONS, get } from 'foremanReact/redux/API';
+import { API_OPERATIONS, get, post } from 'foremanReact/redux/API';
+import { translate as __ } from 'foremanReact/common/I18n';
 import api, { foremanApi, orgId } from '../../services/api';
-import SMART_PROXY_CONTENT_KEY, { SMART_PROXY_KEY } from './SmartProxyContentConstants';
+import SMART_PROXY_CONTENT_KEY, { SMART_PROXY_COUNTS_UPDATE_KEY, SMART_PROXY_KEY } from './SmartProxyContentConstants';
+import { renderTaskStartedToast } from '../Tasks/helpers';
+import { getResponseErrorMsgs } from '../../utils/helpers';
 
-const getSmartProxyContent = ({ smartProxyId }) => get({
+const getSmartProxyContent = ({ smartProxyId, organizationId }) => get({
   type: API_OPERATIONS.GET,
   key: SMART_PROXY_CONTENT_KEY,
-  url: api.getApiUrl(`/capsules/${smartProxyId}/content/sync?${orgId()}`),
+  url: api.getApiUrl(organizationId ? `/capsules/${smartProxyId}/content/sync?organization_id=${organizationId}` : `/capsules/${smartProxyId}/content/sync`),
 });
 
 export const getSmartProxies = () => get({
@@ -15,4 +18,14 @@ export const getSmartProxies = () => get({
   params: { organization_id: orgId(), per_page: 'all' },
 });
 
+export const updateSmartProxyContentCounts = smartProxyId => post({
+  type: API_OPERATIONS.POST,
+  key: SMART_PROXY_COUNTS_UPDATE_KEY,
+  url: api.getApiUrl(`/capsules/${smartProxyId}/content/update_counts`),
+  handleSuccess: (response) => {
+    renderTaskStartedToast(response?.data, __('Smart proxy content count refresh has started in the background'));
+  },
+  errorToast: error => __(`Something went wrong while refreshing content counts: ${getResponseErrorMsgs(error.response)}`),
+});
+
 export default getSmartProxyContent;

data/webpack/scenes/SmartProxy/SmartProxyContentConstants.js

@@ -1,3 +1,4 @@
 const SMART_PROXY_CONTENT_KEY = 'SMART_PROXY_CONTENT';
 export const SMART_PROXY_KEY = 'SMART_PROXY';
+export const SMART_PROXY_COUNTS_UPDATE_KEY = 'SMART_PROXY_COUNTS_UPDATE_KEY';
 export default SMART_PROXY_CONTENT_KEY;

data/webpack/scenes/SmartProxy/SmartProxyExpandableTable.js

@@ -0,0 +1,150 @@
+import React, { useState, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Thead, Tbody, Th, Tr, Td } from '@patternfly/react-table';
+import { useSet } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import getSmartProxyContent, { updateSmartProxyContentCounts } from './SmartProxyContentActions';
+import {
+  selectSmartProxyContent,
+  selectSmartProxyContentStatus,
+  selectSmartProxyContentError,
+} from './SmartProxyContentSelectors';
+import TableWrapper from '../../components/Table/TableWrapper';
+import ExpandableCvDetails from './ExpandableCvDetails';
+import ComponentEnvironments from '../ContentViews/Details/ComponentContentViews/ComponentEnvironments';
+import LastSync from '../ContentViews/Details/Repositories/LastSync';
+
+const SmartProxyExpandableTable = ({ smartProxyId, organizationId }) => {
+  const response = useSelector(selectSmartProxyContent);
+  const status = useSelector(selectSmartProxyContentStatus);
+  const error = useSelector(selectSmartProxyContentError);
+  const [searchQuery, updateSearchQuery] = useState('');
+  const expandedTableRows = useSet([]);
+  const tableRowIsExpanded = id => expandedTableRows.has(id);
+  const dispatch = useDispatch();
+  let metadata = {};
+  const {
+    lifecycle_environments: results, content_counts: contentCounts,
+  } = response;
+  if (results) {
+    metadata = { total: results.length, subtotal: results.length };
+  }
+  const columnHeaders = [
+    __('Environment'),
+    __('Last sync'),
+  ];
+
+  const refreshCountAction = {
+    title: __('Refresh counts'),
+    onClick: () => {
+      dispatch(updateSmartProxyContentCounts(smartProxyId));
+    },
+  };
+  const fetchItems = useCallback(
+    () => getSmartProxyContent({ smartProxyId, organizationId }),
+    [smartProxyId, organizationId],
+  );
+
+  const emptyContentTitle = __('No content views yet');
+  const emptyContentBody = __('You currently have no content views to display');
+  const emptySearchTitle = __('No matching content views found');
+  const emptySearchBody = __('Try changing your search settings.');
+  const alwaysHideToolbar = true;
+  const hidePagination = true;
+
+  return (
+    <TableWrapper
+      {...{
+        error,
+        metadata,
+        emptyContentTitle,
+        emptyContentBody,
+        emptySearchTitle,
+        emptySearchBody,
+        searchQuery,
+        updateSearchQuery,
+        fetchItems,
+        alwaysHideToolbar,
+        hidePagination,
+      }}
+      ouiaId="capsule-content-table"
+      autocompleteEndpoint=""
+      status={status}
+    >
+      <Thead>
+        <Tr ouiaId="cvTableHeaderRow">
+          <Th key="expand-carat" />
+          {columnHeaders.map(col => (
+            <Th
+              key={col}
+            >
+              {col}
+            </Th>
+          ))}
+          <Th key="action-menu" />
+        </Tr>
+      </Thead>
+      {
+          results?.map((env, rowIndex) => {
+            const {
+              id, content_views: contentViews, last_sync: lastSync,
+            } = env;
+            const isExpanded = tableRowIsExpanded(id);
+            return (
+              <Tbody isExpanded={isExpanded} key={id} id="smart_proxy_table">
+                <Tr key={id} ouiaId={`EnvRow-${id}`}>
+                  <Td
+                    aria-label={`expand-env-${id}`}
+                    style={{ paddingTop: 0 }}
+                    expand={{
+                      rowIndex,
+                      isExpanded,
+                      onToggle: (_event, _rInx, isOpen) =>
+                        expandedTableRows.onToggle(isOpen, id),
+                    }}
+                  />
+                  <Td><ComponentEnvironments environments={[env]} /></Td>
+                  <Td><LastSync lastSync={lastSync} lastSyncWords={lastSync?.last_sync_words} emptyMessage="N/A" /></Td>
+                  <Td
+                    key={`rowActions-${id}`}
+                    actions={{
+                      items: [refreshCountAction],
+                    }}
+                  />
+                </Tr>
+                <Tr key="child_row" ouiaId={`ContentViewTableRowChild-${id}`} isExpanded={isExpanded}>
+                  <Td colSpan={4}>
+                    {isExpanded ?
+                      <ExpandableCvDetails
+                        contentViews={contentViews}
+                        contentCounts={contentCounts}
+                        envId={id}
+                      /> :
+                      <></>}
+                  </Td>
+                </Tr>
+              </Tbody>
+            );
+          })
+        }
+    </TableWrapper>
+  );
+};
+
+SmartProxyExpandableTable.propTypes = {
+  smartProxyId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string, // The API can sometimes return strings
+  ]).isRequired,
+  organizationId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string, // The API can sometimes return strings
+  ]),
+};
+
+SmartProxyExpandableTable.defaultProps = {
+  organizationId: null,
+};
+
+export default SmartProxyExpandableTable;