Update inventory details after inventory source sync

awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.js

@@ -5,6 +5,8 @@ import { t } from '@lingui/macro';
 import {
   Button,
   Chip,
+  Label,
+  LabelGroup,
   TextList,
   TextListItem,
   TextListItemVariants,
@@ -114,6 +116,10 @@ function ConstructedInventoryDetail({ inventory }) {
     wsInventorySource.summary_fields?.current_job ||
     wsInventorySource.summary_fields?.last_job ||
     null;
+  const wsInventory = {
+    ...inventory,
+    ...wsInventorySource?.summary_fields?.inventory,
+  };
 
   const { request: deleteInventory, error: deleteError } = useRequest(
     useCallback(async () => {
@@ -180,19 +186,19 @@ function ConstructedInventoryDetail({ inventory }) {
         />
         <Detail
           label={actions.total_groups.label}
-          value={inventory.total_groups}
+          value={wsInventory.total_groups}
           helpText={actions.total_groups.help_text}
           dataCy="constructed-inventory-total-groups"
         />
         <Detail
           label={actions.total_hosts.label}
-          value={inventory.total_hosts}
+          value={wsInventory.total_hosts}
           helpText={actions.total_hosts.help_text}
           dataCy="constructed-inventory-total-hosts"
         />
         <Detail
           label={actions.total_inventory_sources.label}
-          value={inventory.total_inventory_sources}
+          value={wsInventory.total_inventory_sources}
           helpText={actions.total_inventory_sources.help_text}
           dataCy="constructed-inventory-sources"
         />
@@ -204,7 +210,7 @@ function ConstructedInventoryDetail({ inventory }) {
         />
         <Detail
           label={actions.inventory_sources_with_failures.label}
-          value={inventory.inventory_sources_with_failures}
+          value={wsInventory.inventory_sources_with_failures}
           helpText={actions.inventory_sources_with_failures.help_text}
           dataCy="constructed-inventory-sources-with-failures"
         />
@@ -266,22 +272,25 @@ function ConstructedInventoryDetail({ inventory }) {
           fullWidth
           label={t`Input Inventories`}
           value={
-            <ChipGroup
+            <LabelGroup numLabels={5}>
-              numChips={5}
-              totalChips={inputInventories?.length}
-              ouiaId="input-inventory-chips"
-            >
               {inputInventories?.map((inputInventory) => (
-                <Link
+                <Label
+                  color="blue"
                   key={inputInventory.id}
-                  to={`/inventories/inventory/${inputInventory.id}/details`}
+                  render={({ className, content, componentRef }) => (
+                    <Link
+                      className={className}
+                      innerRef={componentRef}
+                      to={`/inventories/inventory/${inputInventory.id}/details`}
+                    >
+                      {content}
+                    </Link>
+                  )}
                 >
-                  <Chip key={inputInventory.id} isReadOnly>
+                  {inputInventory.name}
-                    {inputInventory.name}
+                </Label>
-                  </Chip>
-                </Link>
               ))}
-            </ChipGroup>
+            </LabelGroup>
           }
           isEmpty={inputInventories?.length === 0}
         />

awx/ui/src/screens/Inventory/shared/useWsInventorySourcesDetails.js

@@ -1,16 +1,17 @@
 import { useState, useEffect } from 'react';
 import useWebsocket from 'hooks/useWebsocket';
+import { InventorySourcesAPI } from 'api';
 
-export default function useWsInventorySourcesDetails(initialSources) {
+export default function useWsInventorySourcesDetails(initialSource) {
-  const [sources, setSources] = useState(initialSources);
+  const [source, setSource] = useState(initialSource);
   const lastMessage = useWebsocket({
     jobs: ['status_changed'],
     control: ['limit_reached_1'],
   });
 
   useEffect(() => {
-    setSources(initialSources);
+    setSource(initialSource);
-  }, [initialSources]);
+  }, [initialSource]);
 
   useEffect(
     () => {
@@ -21,22 +22,37 @@ export default function useWsInventorySourcesDetails(initialSources) {
       ) {
         return;
       }
-      const updateSource = {
-        ...sources,
-        summary_fields: {
-          ...sources.summary_fields,
-          current_job: {
-            id: lastMessage.unified_job_id,
-            status: lastMessage.status,
-            finished: lastMessage.finished,
-          },
-        },
-      };
 
-      setSources(updateSource);
+      if (
+        ['successful', 'failed', 'error', 'cancelled'].includes(
+          lastMessage.status
+        )
+      ) {
+        fetchSource();
+      }
+      setSource(updateSource(source, lastMessage));
     },
     [lastMessage] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  return sources;
+  async function fetchSource() {
+    const { data } = await InventorySourcesAPI.readDetail(source.id);
+    setSource(data);
+  }
+
+  return source;
+}
+
+function updateSource(source, message) {
+  return {
+    ...source,
+    summary_fields: {
+      ...source.summary_fields,
+      current_job: {
+        id: message.unified_job_id,
+        status: message.status,
+        finished: message.finished,
+      },
+    },
+  };
 }

awx/ui/src/screens/Inventory/shared/useWsInventorySourcesDetails.test.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import WS from 'jest-websocket-mock';
+import { InventorySourcesAPI } from 'api';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import useWsInventorySourceDetails from './useWsInventorySourcesDetails';
 
+jest.mock('../../../api/models/InventorySources');
+
 function TestInner() {
   return <div />;
 }
@@ -111,6 +114,27 @@ describe('useWsProject', () => {
       status: 'running',
       finished: null,
     });
+
+    expect(InventorySourcesAPI.readDetail).toHaveBeenCalledTimes(0);
+    InventorySourcesAPI.readDetail.mockResolvedValue({
+      data: {},
+    });
+    await act(async () => {
+      mockServer.send(
+        JSON.stringify({
+          group_name: 'jobs',
+          inventory_id: 1,
+          status: 'successful',
+          type: 'inventory_update',
+          unified_job_id: 2,
+          unified_job_template_id: 1,
+          inventory_source_id: 1,
+        })
+      );
+    });
+    expect(InventorySourcesAPI.readDetail).toHaveBeenCalledTimes(1);
+
+    jest.clearAllMocks();
     WS.clean();
   });
 });