Fixes #36807 - UX fixes and add update count action

app/models/katello/concerns/smart_proxy_extensions.rb

@@ -424,10 +424,12 @@ def last_sync_audit
         Audited::Audit.where(:auditable_id => self, :auditable_type => SmartProxy.name, action: "sync capsule").order(:created_at).last
       end
 
-      def last_sync_time
-        task = sync_tasks.where.not(:ended_at => nil).where(:result => 'success').order(:ended_at).last
+      def last_sync_task
+        sync_tasks.where.not(:ended_at => nil).where(:result => 'success').order(:ended_at).last
+      end
 
-        task&.ended_at || last_sync_audit&.created_at&.to_s
+      def last_sync_time
+        last_sync_task&.ended_at || last_sync_audit&.created_at&.to_s
       end
 
       def environment_syncable?(env)

app/views/katello/api/v2/capsule_content/sync_status.json.rabl

@@ -1,6 +1,9 @@
 object @capsule
 
 attribute :last_sync_time
+node :last_sync_words do |_object|
+  @capsule&.last_sync_time ? time_ago_in_words(Time.parse(@capsule&.last_sync_time&.to_s)) : nil
+end
 
 attribute :download_policy
 
@@ -15,6 +18,10 @@ child :last_failed_sync_tasks => :last_failed_sync_tasks do
   extends 'foreman_tasks/api/tasks/show'
 end
 
+child :last_sync_task => :last_sync_task do
+  extends 'foreman_tasks/api/tasks/show'
+end
+
 child @lifecycle_environments => :lifecycle_environments do
   extends 'katello/api/v2/common/identifier'
   extends 'katello/api/v2/common/org_reference'

webpack/scenes/SmartProxy/ExpandableCvDetails.js

@@ -13,7 +13,7 @@ const ExpandableCvDetails = ({ contentViews, counts }) => {
   const columnHeaders = [
     __('Content view'),
     __('Last published'),
-    __('Synced to smart proxy'),
+    __('Synced'),
   ];
   const { content_counts: contentCounts } = counts;
   const expandedTableRows = useSet([]);
@@ -46,6 +46,7 @@ const ExpandableCvDetails = ({ contentViews, counts }) => {
           <Tbody key={`${id} + ${version}`}isExpanded={isExpanded}>
             <Tr key={version} ouiaId={cv.name}>
               <Td
+                style={{ paddingTop: 0 }}
                 expand={{
                   rowIndex,
                   isExpanded,

webpack/scenes/SmartProxy/ExpandedSmartProxyRepositories.js

@@ -24,10 +24,10 @@ const ExpandedSmartProxyRepositories = ({ contentCounts, repositories }) => {
         <DataListItemRow>
           <DataListItemCells dataListCells={[
             <DataListCell key="primary content">
-              <b>{__('Repositories')}</b>
+              <b>{__('Repository')}</b>
             </DataListCell>,
-            <DataListCell key="Packages"><b>{__('Packages')}</b></DataListCell>,
-            <DataListCell key="Additional Content"><b>{__('Additional Content')}</b></DataListCell>,
+            <DataListCell key="Package count"><b>{__('Packages')}</b></DataListCell>,
+            <DataListCell key="Additional content"><b>{__('Additional content')}</b></DataListCell>,
           ]}
           />
         </DataListItemRow>

webpack/scenes/SmartProxy/SmartProxyContentActions.js

@@ -1,6 +1,9 @@
-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({
   type: API_OPERATIONS.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;

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;

webpack/scenes/SmartProxy/SmartProxyExpandableTable.js

@@ -1,9 +1,9 @@
 import React, { useState, useCallback } from 'react';
-import { useSelector } from 'react-redux';
+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 getSmartProxyContent from './SmartProxyContentActions';
+import getSmartProxyContent, { updateSmartProxyContentCounts } from './SmartProxyContentActions';
 import {
   selectSmartProxyContent,
   selectSmartProxyContentStatus,
@@ -12,6 +12,8 @@ import {
 import { useSet } from '../../components/Table/TableHooks';
 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 }) => {
   const response = useSelector(selectSmartProxyContent);
@@ -20,16 +22,25 @@ const SmartProxyExpandableTable = ({ smartProxyId }) => {
   const [searchQuery, updateSearchQuery] = useState('');
   const expandedTableRows = useSet([]);
   const tableRowIsExpanded = id => expandedTableRows.has(id);
+  const dispatch = useDispatch();
   let metadata = {};
   const {
-    lifecycle_environments: results,
+    lifecycle_environments: results, last_sync_task: lastTask, last_sync_words: lastSyncWords,
   } = 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 }), [smartProxyId]);
 
   const emptyContentTitle = __('No content views yet');
@@ -67,29 +78,38 @@ const SmartProxyExpandableTable = ({ smartProxyId }) => {
               {col}
             </Th>
           ))}
+          <Th key="action-menu" />
         </Tr>
       </Thead>
       {
         results?.map((env, rowIndex) => {
           const {
-            name, id, content_views: contentViews, counts,
+            id, content_views: contentViews, counts,
           } = env;
           const isExpanded = tableRowIsExpanded(id);
           return (
-            <Tbody isExpanded={isExpanded} key={id}>
+            <Tbody isExpanded={isExpanded} key={id} id="smart_proxy_table">
               <Tr key={id} ouiaId={`EnvRow-${id}`}>
                 <Td
+                  style={{ paddingTop: 0 }}
                   expand={{
                     rowIndex,
                     isExpanded,
                     onToggle: (_event, _rInx, isOpen) =>
                       expandedTableRows.onToggle(isOpen, id),
                   }}
                 />
-                <Td>{name}</Td>
+                <Td><ComponentEnvironments environments={[env]} /></Td>
+                <Td><LastSync lastSync={lastTask} lastSyncWords={lastSyncWords} emptyMessage="N/A" /></Td>
+                <Td
+                  key={`rowActions-${id}`}
+                  actions={{
+                    items: [refreshCountAction],
+                  }}
+                />
               </Tr>
               <Tr key="child_row" ouiaId={`ContentViewTableRowChild-${id}`} isExpanded={isExpanded}>
-                <Td colSpan={2}>
+                <Td colSpan={4}>
                   <ExpandableCvDetails contentViews={contentViews} counts={counts} />
                 </Td>
               </Tr>

webpack/scenes/SmartProxy/__tests__/SmartProxyContentTest.js

@@ -23,8 +23,8 @@ test('Can display Smart proxy content table', async (done) => {
   await patientlyWaitFor(() => expect(getByText('Environment')).toBeInTheDocument());
   expect(getAllByText('Content view')[0]).toBeInTheDocument();
   expect(getAllByText('Last published')[0]).toBeInTheDocument();
-  expect(getAllByText('Repositories')[0]).toBeInTheDocument();
-  expect(getAllByText('Synced to smart proxy')[0]).toBeInTheDocument();
+  expect(getAllByText('Repository')[0]).toBeInTheDocument();
+  expect(getAllByText('Synced')[0]).toBeInTheDocument();
   expect(getAllByLabelText('Details')[0]).toHaveAttribute('aria-expanded', 'false');
   getAllByLabelText('Details')[0].click();
   expect(getAllByLabelText('Details')[0]).toHaveAttribute('aria-expanded', 'true');