Show button to cancel inventory source sync

Show button to cancel inventory source sync.

See: https://github.com/ansible/awx/issues/10933
Also: https://github.com/ansible/awx/issues/10991

awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js

@@ -4,7 +4,7 @@ import { string, bool, func } from 'prop-types';
 import { Button, Label } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import { t } from '@lingui/macro';
+import { t, Plural } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import { timeOfDay } from 'util/dates';
 import { InventoriesAPI } from 'api';
@@ -58,7 +58,13 @@ function InventoryListItem({
   let tooltipContent = '';
   if (inventory.has_inventory_sources) {
     if (inventory.inventory_sources_with_failures > 0) {
-      tooltipContent = t`${inventory.inventory_sources_with_failures} sources with sync failures.`;
+      tooltipContent = (
+        <Plural
+          value={inventory.inventory_sources_with_failures}
+          one="# source with sync failures."
+          other="# sources with sync failures."
+        />
+      );
     } else {
       tooltipContent = t`No inventory sync failures.`;
     }

awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.test.js

@@ -95,9 +95,7 @@ describe('<InventoryListItem />', () => {
       </table>
     );
     expect(wrapper.find('StatusLabel').length).toBe(1);
-    expect(wrapper.find('StatusLabel').prop('tooltipContent')).toBe(
-      `${inventory.inventory_sources_with_failures} sources with sync failures.`
-    );
+    expect(wrapper.find('StatusLabel').prop('status')).toBe('error');
     expect(wrapper.find('Td').at(1).text()).toBe('Inventory');
     expect(wrapper.find('Td').at(2).text()).toBe('Error');
     expect(wrapper.find('Td').at(3).text()).toBe('Inventory');

awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js

@@ -10,7 +10,7 @@ import {
 import styled from 'styled-components';
 
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
-import StatusIcon from 'components/StatusIcon';
+import StatusLabel from 'components/StatusLabel';
 import JobCancelButton from 'components/JobCancelButton';
 import { formatDateString } from 'util/dates';
 import InventorySourceSyncButton from '../shared/InventorySourceSyncButton';
@@ -48,6 +48,14 @@ function InventorySourceListItem({
   const missingExecutionEnvironment =
     source.custom_virtualenv && !source.execution_environment;
 
+  let job = null;
+
+  if (source.summary_fields?.current_job) {
+    job = source.summary_fields.current_job;
+  } else if (source.summary_fields?.last_job) {
+    job = source.summary_fields.last_job;
+  }
+
   return (
     <>
       <Tr id={`source-row-${source.id}`}>
@@ -76,27 +84,27 @@ function InventorySourceListItem({
           )}
         </Td>
         <Td dataLabel={t`Status`}>
-          {source.summary_fields.last_job && (
+          {job && (
             <Tooltip
               position="top"
-              content={generateLastJobTooltip(source.summary_fields.last_job)}
-              key={source.summary_fields.last_job.id}
+              content={generateLastJobTooltip(job)}
+              key={job.id}
             >
-              <Link to={`/jobs/inventory/${source.summary_fields.last_job.id}`}>
-                <StatusIcon status={source.summary_fields.last_job.status} />
+              <Link to={`/jobs/inventory/${job.id}`}>
+                <StatusLabel status={job.status} />
               </Link>
             </Tooltip>
           )}
         </Td>
         <Td dataLabel={t`Type`}>{label}</Td>
         <ActionsTd dataLabel={t`Actions`}>
-          {['running', 'pending', 'waiting'].includes(source?.status) ? (
+          {['running', 'pending', 'waiting'].includes(job?.status) ? (
             <ActionItem visible={source.summary_fields.user_capabilities.start}>
               {source.summary_fields?.current_job?.id && (
                 <JobCancelButton
                   job={{
                     type: 'inventory_update',
-                    id: source.summary_fields.current_job.id,
+                    id: source?.summary_fields?.current_job?.id,
                   }}
                   errorTitle={t`Inventory Source Sync Error`}
                   errorMessage={t`Failed to cancel Inventory Source Sync`}

awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.test.js

@@ -57,7 +57,7 @@ describe('<InventorySourceListItem />', () => {
         </tbody>
       </table>
     );
-    expect(wrapper.find('StatusIcon').length).toBe(1);
+    expect(wrapper.find('StatusLabel').length).toBe(1);
     expect(wrapper.find('Link').at(1).prop('to')).toBe('/jobs/inventory/664');
     expect(wrapper.find('.pf-c-table__check').length).toBe(1);
     expect(wrapper.find('Td').at(1).text()).toBe('Foo');

awx/ui/src/screens/Inventory/InventorySources/useWsInventorySources.js

@@ -37,7 +37,7 @@ function updateSource(sources, index, message) {
     last_updated: message.finished,
     summary_fields: {
       ...sources[index].summary_fields,
-      last_job: {
+      current_job: {
         id: message.unified_job_id,
         status: message.status,
         finished: message.finished,

awx/ui/src/screens/Inventory/InventorySources/useWsInventorySources.test.js

@@ -63,7 +63,7 @@ describe('useWsInventorySources hook', () => {
     WS.clean();
   });
 
-  test('should update last job status', async () => {
+  test('should update current job status', async () => {
     global.document.cookie = 'csrftoken=abc123';
     const mockServer = new WS('ws://localhost/websocket/');
 
@@ -72,7 +72,7 @@ describe('useWsInventorySources hook', () => {
         id: 3,
         status: 'running',
         summary_fields: {
-          last_job: {
+          current_job: {
             id: 5,
             status: 'running',
           },
@@ -112,7 +112,7 @@ describe('useWsInventorySources hook', () => {
       status: 'successful',
       last_updated: 'the_time',
       summary_fields: {
-        last_job: {
+        current_job: {
           id: 5,
           status: 'successful',
           finished: 'the_time',