debounce fetching of individual jobs

awx/ui_next/src/components/JobList/JobList.jsx

@@ -61,19 +61,24 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
   const { request: addJobsById } = useRequest(
     useCallback(
       async ids => {
+        if (!ids.length) {
+          return;
+        }
         const params = parseQueryString(QS_CONFIG, location.search);
-        params.id__in = ids;
+        params.id__in = ids.join(',');
         const { data } = await UnifiedJobsAPI.read({ ...params });
-        const mergedJobsList = [...data.results, ...results].slice(
+        setValue(prev => {
-          0,
+          const mergedJobsList = [...data.results, ...prev.results].slice(
-          params.page_size
+            0,
-        );
+            params.page_size
-        setValue({
+          );
-          results: mergedJobsList,
+          return {
-          count: count + data.count,
+            results: mergedJobsList,
+            count: prev.count + data.count,
+          };
         });
       },
-      [location, setValue, QS_CONFIG] // eslint-disable-line react-hooks/exhaustive-deps
+      [location, setValue] // eslint-disable-line react-hooks/exhaustive-deps
     )
   );
 

awx/ui_next/src/components/JobList/useWsJobs.js

@@ -3,10 +3,24 @@ import { useState, useEffect, useRef } from 'react';
 export default function useWsJobs(initialJobs, fetchJobsById, filtersApplied) {
   const [jobs, setJobs] = useState(initialJobs);
   const [lastMessage, setLastMessage] = useState(null);
+  const [jobsToFetch, setJobsToFetch] = useState([]);
+  const debouncedJobsToFetch = useDebounce(jobsToFetch, 5000);
   useEffect(() => {
     setJobs(initialJobs);
   }, [initialJobs]);
 
+  const enqueueJobId = id => {
+    if (!jobsToFetch.includes(id)) {
+      setJobsToFetch(ids => ids.concat(id));
+    }
+  };
+  useEffect(() => {
+    if (debouncedJobsToFetch.length) {
+      fetchJobsById(debouncedJobsToFetch);
+      setJobsToFetch([]);
+    }
+  }, [debouncedJobsToFetch, fetchJobsById]);
+
   const ws = useRef(null);
 
   useEffect(() => {
@@ -15,7 +29,7 @@ export default function useWsJobs(initialJobs, fetchJobsById, filtersApplied) {
     }
     if (filtersApplied) {
       if (['completed', 'failed', 'error'].includes(lastMessage.status)) {
-        fetchJobsById([lastMessage.unified_job_id]);
+        enqueueJobId(lastMessage.unified_job_id);
       }
       return;
     }
@@ -25,7 +39,7 @@ export default function useWsJobs(initialJobs, fetchJobsById, filtersApplied) {
     if (index > -1) {
       setJobs(updateJob(jobs, index, lastMessage));
     } else {
-      fetchJobsById([lastMessage.unified_job_id]);
+      enqueueJobId(lastMessage.unified_job_id);
     }
   }, [lastMessage]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -85,3 +99,19 @@ function updateJob(jobs, index, message) {
   };
   return [...jobs.slice(0, index), job, ...jobs.slice(index + 1)];
 }
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}