update jobs in list based on websockets

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

@@ -11,7 +11,7 @@ import PaginatedDataList, { ToolbarDeleteButton } from '../PaginatedDataList';
 import useRequest, { useDeleteItems } from '../../util/useRequest';
 import { getQSConfig, parseQueryString } from '../../util/qs';
 import JobListItem from './JobListItem';
-import useWebSocket from './useWebSocket';
+import useWsJobs from './useWsJobs';
 import {
   AdHocCommandsAPI,
   InventoryUpdatesAPI,
@@ -37,59 +37,24 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
 
   const [selected, setSelected] = useState([]);
   const location = useLocation();
-  const params = parseQueryString(QS_CONFIG, location.search);
   const {
-    jobs,
+    result: { results, count },
-    count: itemCount,
+    error: contentError,
-    contentError,
     isLoading,
-    fetchJobs,
+    request: fetchJobs,
-  } = useWebSocket(params);
+  } = useRequest(
-  // should this happen automatically inside the hook?
+    useCallback(async () => {
-  // useEffect(() => {
+      const params = parseQueryString(QS_CONFIG, location.search);
-  //   fetchJobs();
+      const { data } = await UnifiedJobsAPI.read({ ...params });
-  // }, [fetchJobs]);
+      return data;
-  //   useCallback(async () => {
+    }, [location]), // eslint-disable-line react-hooks/exhaustive-deps
-  //     const params = parseQueryString(QS_CONFIG, location.search);
+    { results: [], count: 0 }
-  //
+  );
-  //     const {
+  useEffect(() => {
-  //       data: { count, results },
+    fetchJobs();
-  //     } = await UnifiedJobsAPI.read({ ...params });
+  }, [fetchJobs]);
-  //
-  //     return {
-  //       itemCount: count,
-  //       jobs: results,
-  //     };
-  //   }, [QS_CONFIG, location])
-  // ); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // const {
+  const jobs = useWsJobs(results, fetchJobs);
-  //   result: { jobs, itemCount },
-  //   error: contentError,
-  //   isLoading,
-  //   request: fetchJobs,
-  // } = useRequest(
-  //   useCallback(async () => {
-  //     const params = parseQueryString(QS_CONFIG, location.search);
-  //
-  //     const {
-  //       data: { count, results },
-  //     } = await UnifiedJobsAPI.read({ ...params });
-  //
-  //     return {
-  //       itemCount: count,
-  //       jobs: results,
-  //     };
-  //   }, [location]), // eslint-disable-line react-hooks/exhaustive-deps
-  //   {
-  //     jobs: [],
-  //     itemCount: 0,
-  //   }
-  // );
-  //
-  // useEffect(() => {
-  //   fetchJobs();
-  // }, [fetchJobs]);
 
   const isAllSelected = selected.length === jobs.length && selected.length > 0;
   const {
@@ -151,7 +116,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
           contentError={contentError}
           hasContentLoading={isLoading || isDeleteLoading}
           items={jobs}
-          itemCount={itemCount}
+          itemCount={count}
           pluralizedItemName={i18n._(t`Jobs`)}
           qsConfig={QS_CONFIG}
           onRowClick={handleSelect}

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

@@ -75,7 +75,7 @@ function JobListItem({
                 ]
               : []),
             <DataListCell key="finished">
-              {formatDateString(job.finished)}
+              {job.finished ? formatDateString(job.finished) : ''}
             </DataListCell>,
           ]}
         />

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

@@ -1,151 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import useRequest from '../../util/useRequest';
-import { UnifiedJobsAPI } from '../../api';
-
-// rename: useWsJobs ?
-export default function useWebSocket(params) {
-  const [jobs, setJobs] = useState([]);
-  const {
-    result: { results, count },
-    error: contentError,
-    isLoading,
-    request: fetchJobs,
-  } = useRequest(
-    useCallback(async () => {
-      console.log('fetching...');
-      const { data } = await UnifiedJobsAPI.read({ ...params });
-      return data;
-    }, [params]),
-    { results: [], count: 0 }
-  );
-  useEffect(() => {
-    fetchJobs();
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    setJobs(results);
-  }, [results]);
-  const ws = useRef(null);
-
-  useEffect(() => {
-    ws.current = new WebSocket(`wss://${window.location.host}/websocket/`);
-
-    const connect = () => {
-      const xrftoken = `; ${document.cookie}`
-        .split('; csrftoken=')
-        .pop()
-        .split(';')
-        .shift();
-      ws.current.send(
-        JSON.stringify({
-          xrftoken,
-          groups: {
-            jobs: ['status_changed'],
-            schedules: ['changed'],
-            control: ['limit_reached_1'],
-          },
-        })
-      );
-    };
-    ws.current.onopen = connect;
-
-    ws.current.onmessage = e => {
-      const data = JSON.parse(e.data);
-      // console.log(JSON.parse(e.data));
-      const jobId = data.unified_job_id;
-      if (!jobId) {
-        return;
-      }
-
-      // TODO: Pull this function up... jobs is being closed over
-      const index = jobs.findIndex(j => j.id === jobId);
-      console.log('index', index);
-      console.log(jobId, typeof jobId, jobs);
-      if (index > -1) {
-        const job = {
-          ...jobs[index],
-          status: data.status,
-          finished: data.finished,
-        };
-        console.log('updated job:', job);
-        const newJobs = [
-          ...jobs.slice(0, index),
-          job,
-          ...jobs.slice(index + 1),
-        ];
-        console.log('updating jobs: ', newJobs);
-        setJobs(newJobs);
-      }
-    };
-
-    ws.current.onclose = e => {
-      // eslint-disable-next-line no-console
-      console.debug('Socket closed. Reconnecting...', e);
-      setTimeout(() => {
-        connect();
-      }, 1000);
-    };
-
-    ws.current.onerror = err => {
-      // eslint-disable-next-line no-console
-      console.debug('Socket error: ', err, 'Disconnecting...');
-      ws.close();
-    };
-
-    return () => {
-      ws.current.close();
-    };
-  }, []);
-
-  return {
-    jobs,
-    count,
-    contentError,
-    isLoading,
-    fetchJobs,
-  };
-}
-
-const initial = {
-  groups_current: [
-    'schedules-changed',
-    'control-limit_reached_1',
-    'jobs-status_changed',
-  ],
-  groups_left: [],
-  groups_joined: [
-    'schedules-changed',
-    'control-limit_reached_1',
-    'jobs-status_changed',
-  ],
-};
-
-const one = {
-  unified_job_id: 292,
-  status: 'pending',
-  type: 'job',
-  group_name: 'jobs',
-  unified_job_template_id: 26,
-};
-const two = {
-  unified_job_id: 292,
-  status: 'waiting',
-  instance_group_name: 'tower',
-  type: 'job',
-  group_name: 'jobs',
-  unified_job_template_id: 26,
-};
-const three = {
-  unified_job_id: 293,
-  status: 'running',
-  type: 'job',
-  group_name: 'jobs',
-  unified_job_template_id: 26,
-};
-const four = {
-  unified_job_id: 293,
-  status: 'successful',
-  finished: '2020-06-01T21:49:28.704114Z',
-  type: 'job',
-  group_name: 'jobs',
-  unified_job_template_id: 26,
-};

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

@@ -0,0 +1,138 @@
+import { useState, useEffect, useRef } from 'react';
+
+export default function useWsJobs(initialJobs, refetchJobs) {
+  const [jobs, setJobs] = useState(initialJobs);
+  const [lastMessage, setLastMessage] = useState(null);
+  useEffect(() => {
+    setJobs(initialJobs);
+  }, [initialJobs]);
+
+  const ws = useRef(null);
+
+  useEffect(() => {
+    if (!lastMessage || !lastMessage.unified_job_id) {
+      return;
+    }
+
+    const jobId = lastMessage.unified_job_id;
+    const index = jobs.findIndex(j => j.id === jobId);
+    if (index > -1) {
+      setJobs(updateJob(jobs, index, lastMessage));
+    } else {
+      setJobs(addJobStub(jobs, lastMessage));
+      refetchJobs();
+    }
+  }, [lastMessage]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    ws.current = new WebSocket(`wss://${window.location.host}/websocket/`);
+
+    const connect = () => {
+      const xrftoken = `; ${document.cookie}`
+        .split('; csrftoken=')
+        .pop()
+        .split(';')
+        .shift();
+      ws.current.send(
+        JSON.stringify({
+          xrftoken,
+          groups: {
+            jobs: ['status_changed'],
+            schedules: ['changed'],
+            control: ['limit_reached_1'],
+          },
+        })
+      );
+    };
+    ws.current.onopen = connect;
+
+    ws.current.onmessage = e => {
+      setLastMessage(JSON.parse(e.data));
+    };
+
+    ws.current.onclose = e => {
+      // eslint-disable-next-line no-console
+      console.debug('Socket closed. Reconnecting...', e);
+      setTimeout(() => {
+        connect();
+      }, 1000);
+    };
+
+    ws.current.onerror = err => {
+      // eslint-disable-next-line no-console
+      console.debug('Socket error: ', err, 'Disconnecting...');
+      ws.close();
+    };
+
+    return () => {
+      ws.current.close();
+    };
+  }, []);
+
+  return jobs;
+}
+
+function updateJob(jobs, index, message) {
+  const job = {
+    ...jobs[index],
+    status: message.status,
+    finished: message.finished,
+  };
+  return [...jobs.slice(0, index), job, ...jobs.slice(index + 1)];
+}
+
+function addJobStub(jobs, message) {
+  const job = {
+    id: message.unified_job_id,
+    status: message.status,
+    type: message.type,
+    url: `/api/v2/jobs/${message.unified_job_id}`,
+  };
+  return [job, ...jobs];
+}
+
+//
+// const initial = {
+//   groups_current: [
+//     'schedules-changed',
+//     'control-limit_reached_1',
+//     'jobs-status_changed',
+//   ],
+//   groups_left: [],
+//   groups_joined: [
+//     'schedules-changed',
+//     'control-limit_reached_1',
+//     'jobs-status_changed',
+//   ],
+// };
+//
+// const one = {
+//   unified_job_id: 292,
+//   status: 'pending',
+//   type: 'job',
+//   group_name: 'jobs',
+//   unified_job_template_id: 26,
+// };
+// const two = {
+//   unified_job_id: 292,
+//   status: 'waiting',
+//   instance_group_name: 'tower',
+//   type: 'job',
+//   group_name: 'jobs',
+//   unified_job_template_id: 26,
+// };
+// const three = {
+//   unified_job_id: 293,
+//   status: 'running',
+//   type: 'job',
+//   group_name: 'jobs',
+//   unified_job_template_id: 26,
+// };
+// const four = {
+//   unified_job_id: 293,
+//   status: 'successful',
+//   finished: '2020-06-01T21:49:28.704114Z',
+//   type: 'job',
+//   group_name: 'jobs',
+//   unified_job_template_id: 26,
+// };