add ws support to inventory sources list

awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.jsx

@@ -19,6 +19,7 @@ import DatalistToolbar from '../../../components/DataListToolbar';
 import AlertModal from '../../../components/AlertModal/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail/ErrorDetail';
 import InventorySourceListItem from './InventorySourceListItem';
+import useWsInventorySources from './useWsInventorySources';
 
 const QS_CONFIG = getQSConfig('inventory', {
   not__source: '',
@@ -34,7 +35,7 @@ function InventorySourceList({ i18n }) {
   const {
     isLoading,
     error: fetchError,
-    result: { sources, sourceCount, sourceChoices, sourceChoicesOptions },
+    result: { result, sourceCount, sourceChoices, sourceChoicesOptions },
     request: fetchSources,
   } = useRequest(
     useCallback(async () => {
@@ -44,18 +45,21 @@ function InventorySourceList({ i18n }) {
         InventorySourcesAPI.readOptions(),
       ]);
       return {
-        sources: results[0].data.results,
+        result: results[0].data.results,
         sourceCount: results[0].data.count,
         sourceChoices: results[1].data.actions.GET.source.choices,
         sourceChoicesOptions: results[1].data.actions,
       };
     }, [id, search]),
     {
-      sources: [],
+      result: [],
       sourceCount: 0,
       sourceChoices: [],
     }
   );
+
+  const sources = useWsInventorySources(result);
+
   const canSyncSources =
     sources.length > 0 &&
     sources.every(source => source.summary_fields.user_capabilities.start);

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

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import useWebsocket from '../../../util/useWebsocket';
+
+export default function useWsJobs(initialSources) {
+  const [sources, setSources] = useState(initialSources);
+  const lastMessage = useWebsocket({
+    jobs: ['status_changed'],
+    control: ['limit_reached_1'],
+  });
+
+  useEffect(() => {
+    setSources(initialSources);
+  }, [initialSources]);
+
+  useEffect(
+    function parseWsMessage() {
+      if (!lastMessage?.unified_job_id || !lastMessage?.inventory_source_id) {
+        return;
+      }
+
+      const sourceId = lastMessage.inventory_source_id;
+      const index = sources.findIndex(s => s.id === sourceId);
+      if (index > -1) {
+        setSources(updateSource(sources, index, lastMessage));
+      }
+    },
+    [lastMessage] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  return sources;
+}
+
+function updateSource(sources, index, message) {
+  const source = {
+    ...sources[index],
+    status: message.status,
+    last_updated: message.finished,
+    summary_fields: {
+      ...sources[index].summary_fields,
+      last_job: {
+        id: message.unified_job_id,
+        status: message.status,
+        finished: message.finished,
+      },
+    },
+  };
+  return [...sources.slice(0, index), source, ...sources.slice(index + 1)];
+}