Merge pull request #7940 from mabashian/6616-workflow-results-sockets

Update job status and workflow node job status based on websocket events

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/StatusIcon/StatusIcon.jsx

@@ -93,7 +93,7 @@ SkippedBottom.displayName = 'SkippedBottom';
 
 const StatusIcon = ({ status, ...props }) => {
   return (
-    <div {...props}>
+    <div {...props} data-job-status={status}>
       {status === 'running' && <RunningJob />}
       {(status === 'new' ||
         status === 'pending' ||

awx/ui_next/src/components/Workflow/WorkflowNodeHelp.jsx

@@ -33,10 +33,11 @@ const StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon)`
 
 function WorkflowNodeHelp({ node, i18n }) {
   let nodeType;
-  if (node.unifiedJobTemplate || node.job) {
+  const job = node?.originalNodeObject?.summary_fields?.job;
+  if (node.unifiedJobTemplate || job) {
     const type = node.unifiedJobTemplate
       ? node.unifiedJobTemplate.unified_job_type || node.unifiedJobTemplate.type
-      : node.job.type;
+      : job.type;
     switch (type) {
       case 'job_template':
       case 'job':
@@ -64,8 +65,8 @@ function WorkflowNodeHelp({ node, i18n }) {
   }
 
   let jobStatus;
-  if (node.job) {
+  if (job) {
-    switch (node.job.status) {
+    switch (job.status) {
       case 'new':
         jobStatus = i18n._(t`New`);
         break;
@@ -112,10 +113,9 @@ function WorkflowNodeHelp({ node, i18n }) {
 
   return (
     <>
-      {!node.unifiedJobTemplate &&
+      {!node.unifiedJobTemplate && (!job || job.type !== 'workflow_approval') && (
-        (!node.job || node.job.type !== 'workflow_approval') && (
         <>
-            <ResourceDeleted job={node.job}>
+          <ResourceDeleted job={job}>
             <StyledExclamationTriangleIcon />
             <Trans>
               The resource associated with this node has been deleted.
@@ -123,12 +123,12 @@ function WorkflowNodeHelp({ node, i18n }) {
           </ResourceDeleted>
         </>
       )}
-      {node.job && (
+      {job && (
         <GridDL>
           <dt>
             <b>{i18n._(t`Name`)}</b>
           </dt>
-          <dd id="workflow-node-help-name">{node.job.name}</dd>
+          <dd id="workflow-node-help-name">{job.name}</dd>
           <dt>
             <b>{i18n._(t`Type`)}</b>
           </dt>
@@ -137,19 +137,19 @@ function WorkflowNodeHelp({ node, i18n }) {
             <b>{i18n._(t`Job Status`)}</b>
           </dt>
           <dd id="workflow-node-help-status">{jobStatus}</dd>
-          {typeof node.job.elapsed === 'number' && (
+          {typeof job.elapsed === 'number' && (
             <>
               <dt>
                 <b>{i18n._(t`Elapsed`)}</b>
               </dt>
               <dd id="workflow-node-help-elapsed">
-                {secondsToHHMMSS(node.job.elapsed)}
+                {secondsToHHMMSS(job.elapsed)}
               </dd>
             </>
           )}
         </GridDL>
       )}
-      {node.unifiedJobTemplate && !node.job && (
+      {node.unifiedJobTemplate && !job && (
         <GridDL>
           <dt>
             <b>{i18n._(t`Name`)}</b>
@@ -161,7 +161,7 @@ function WorkflowNodeHelp({ node, i18n }) {
           <dd id="workflow-node-help-type">{nodeType}</dd>
         </GridDL>
       )}
-      {node.job && node.job.type !== 'workflow_approval' && (
+      {job && job.type !== 'workflow_approval' && (
         <p css="margin-top: 10px">{i18n._(t`Click to view job details`)}</p>
       )}
     </>

awx/ui_next/src/components/Workflow/WorkflowNodeHelp.test.jsx

@@ -9,12 +9,16 @@ describe('WorkflowNodeHelp', () => {
   });
   test('renders the expected content for a completed job template job', () => {
     const node = {
+      originalNodeObject: {
+        summary_fields: {
           job: {
             name: 'Foo Job Template',
             elapsed: 9000,
             status: 'successful',
             type: 'job',
           },
+        },
+      },
       unifiedJobTemplate: {
         name: 'Foo Job Template',
         unified_job_type: 'job',

awx/ui_next/src/components/Workflow/workflowReducer.js

@@ -64,6 +64,8 @@ export default function visualizerReducer(state, action) {
       return { ...state, linkToDelete: action.value };
     case 'SET_LINK_TO_EDIT':
       return { ...state, linkToEdit: action.value };
+    case 'SET_NODES':
+      return { ...state, nodes: action.value };
     case 'SET_NODE_POSITIONS':
       return { ...state, nodePositions: action.value };
     case 'SET_NODE_TO_DELETE':
@@ -363,9 +365,6 @@ function generateNodes(workflowNodes, i18n) {
       originalNodeObject: node,
     };
 
-    if (node.summary_fields.job) {
-      nodeObj.job = node.summary_fields.job;
-    }
     if (node.summary_fields.unified_job_template) {
       nodeObj.unifiedJobTemplate = node.summary_fields.unified_job_template;
     }

awx/ui_next/src/screens/Inventory/InventoryList/useWsInventories.js

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import useWebsocket from '../../../util/useWebsocket';
 import useThrottle from '../../../util/useThrottle';
 
-export default function useWsProjects(
+export default function useWsInventories(
   initialInventories,
   fetchInventoriesById
 ) {

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

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import useWebsocket from '../../../util/useWebsocket';
 
-export default function useWsJobs(initialSources) {
+export default function useWsInventorySources(initialSources) {
   const [sources, setSources] = useState(initialSources);
   const lastMessage = useWebsocket({
     jobs: ['status_changed'],

awx/ui_next/src/screens/Job/Job.jsx

@@ -1,5 +1,13 @@
-import React, { Component } from 'react';
+import React, { useEffect, useCallback } from 'react';
-import { Route, withRouter, Switch, Redirect, Link } from 'react-router-dom';
+import {
+  Route,
+  withRouter,
+  Switch,
+  Redirect,
+  Link,
+  useParams,
+  useRouteMatch,
+} from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { CaretLeftIcon } from '@patternfly/react-icons';
@@ -7,57 +15,32 @@ import { Card, PageSection } from '@patternfly/react-core';
 import { JobsAPI } from '../../api';
 import ContentError from '../../components/ContentError';
 import RoutedTabs from '../../components/RoutedTabs';
+import useRequest from '../../util/useRequest';
 import JobDetail from './JobDetail';
 import JobOutput from './JobOutput';
 import { WorkflowOutput } from './WorkflowOutput';
+import useWsJob from './useWsJob';
 import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
 
-class Job extends Component {
+function Job({ i18n, lookup, setBreadcrumb }) {
-  constructor(props) {
+  const { id, type } = useParams();
-    super(props);
+  const match = useRouteMatch();
 
-    this.state = {
+  const { isLoading, error, request: fetchJob, result } = useRequest(
-      job: null,
+    useCallback(async () => {
-      contentError: null,
+      const { data } = await JobsAPI.readDetail(id, type);
-      hasContentLoading: true,
-      isInitialized: false,
-    };
-
-    this.loadJob = this.loadJob.bind(this);
-  }
-
-  async componentDidMount() {
-    await this.loadJob();
-    this.setState({ isInitialized: true });
-  }
-
-  async componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      await this.loadJob();
-    }
-  }
-
-  async loadJob() {
-    const { match, setBreadcrumb } = this.props;
-    const id = parseInt(match.params.id, 10);
-
-    this.setState({ contentError: null, hasContentLoading: true });
-    try {
-      const { data } = await JobsAPI.readDetail(id, match.params.type);
       setBreadcrumb(data);
-      this.setState({ job: data });
+      return data;
-    } catch (err) {
+    }, [id, type, setBreadcrumb]),
-      this.setState({ contentError: err });
+    null
-    } finally {
+  );
-      this.setState({ hasContentLoading: false });
-    }
-  }
 
-  render() {
+  useEffect(() => {
-    const { match, i18n, lookup } = this.props;
+    fetchJob();
+  }, [fetchJob]);
+
+  const job = useWsJob(result);
 
-    const { job, contentError, hasContentLoading, isInitialized } = this.state;
   let jobType;
   if (job) {
     jobType = JOB_TYPE_URL_SEGMENTS[job.type];
@@ -78,18 +61,12 @@ class Job extends Component {
     { name: i18n._(t`Output`), link: `${match.url}/output`, id: 1 },
   ];
 
-    let showCardHeader = true;
+  if (!isLoading && error) {
-
-    if (!isInitialized) {
-      showCardHeader = false;
-    }
-
-    if (!hasContentLoading && contentError) {
     return (
       <PageSection>
         <Card>
-            <ContentError error={contentError}>
+          <ContentError error={error}>
-              {contentError.response.status === 404 && (
+            {error.response.status === 404 && (
               <span>
                 {i18n._(t`The page you requested could not be found.`)}{' '}
                 <Link to="/jobs">{i18n._(t`View all Jobs.`)}</Link>
@@ -105,10 +82,7 @@ class Job extends Component {
     return (
       <Switch>
         <Redirect from="jobs/:id" to={`/jobs/${jobType}/:id/output`} />
-          <Redirect
+        <Redirect from="jobs/:id/details" to={`/jobs/${jobType}/:id/details`} />
-            from="jobs/:id/details"
-            to={`/jobs/${jobType}/:id/details`}
-          />
         <Redirect from="jobs/:id/output" to={`/jobs/${jobType}/:id/output`} />
       </Switch>
     );
@@ -117,13 +91,9 @@ class Job extends Component {
   return (
     <PageSection>
       <Card>
-          {showCardHeader && <RoutedTabs tabsArray={tabsArray} />}
+        {!isLoading && <RoutedTabs tabsArray={tabsArray} />}
         <Switch>
-            <Redirect
+          <Redirect from="/jobs/:type/:id" to="/jobs/:type/:id/output" exact />
-              from="/jobs/:type/:id"
-              to="/jobs/:type/:id/output"
-              exact
-            />
           {job &&
             job.type === 'workflow_job' && [
               <Route key="workflow-details" path="/jobs/workflow/:id/details">
@@ -136,17 +106,15 @@ class Job extends Component {
           {job &&
             job.type !== 'workflow_job' && [
               <Route key="details" path="/jobs/:type/:id/details">
-                  <JobDetail type={match.params.type} job={job} />
+                <JobDetail type={type} job={job} />
               </Route>,
               <Route key="output" path="/jobs/:type/:id/output">
-                  <JobOutput type={match.params.type} job={job} />
+                <JobOutput type={type} job={job} />
               </Route>,
               <Route key="not-found" path="*">
-                  {!hasContentLoading && (
+                {!isLoading && (
                   <ContentError isNotFound>
-                      <Link
+                    <Link to={`/jobs/${type}/${id}/details`}>
-                        to={`/jobs/${match.params.type}/${match.params.id}/details`}
-                      >
                       {i18n._(t`View Job Details`)}
                     </Link>
                   </ContentError>
@@ -158,7 +126,6 @@ class Job extends Component {
     </PageSection>
   );
 }
-}
 
 export default withI18n()(withRouter(Job));
 export { Job as _Job };

awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutput.jsx

@@ -16,6 +16,7 @@ import workflowReducer, {
 import { WorkflowJobsAPI } from '../../../api';
 import WorkflowOutputGraph from './WorkflowOutputGraph';
 import WorkflowOutputToolbar from './WorkflowOutputToolbar';
+import useWsWorkflowOutput from './useWsWorkflowOutput';
 
 const CardBody = styled(PFCardBody)`
   display: flex;
@@ -79,6 +80,12 @@ function WorkflowOutput({ job, i18n }) {
     }
   }, [job.id, links, nodes]);
 
+  const updatedNodes = useWsWorkflowOutput(job.id, nodes);
+
+  useEffect(() => {
+    dispatch({ type: 'SET_NODES', value: updatedNodes });
+  }, [updatedNodes]);
+
   if (isLoading) {
     return (
       <CardBody>

awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.test.jsx

@@ -64,6 +64,8 @@ const workflowContext = {
     },
     {
       id: 2,
+      originalNodeObject: {
+        summary_fields: {
           job: {
             name: 'Foo JT',
             type: 'job',
@@ -71,6 +73,8 @@ const workflowContext = {
             elapsed: 60,
           },
         },
+      },
+    },
     {
       id: 3,
     },

awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx

@@ -64,24 +64,25 @@ Elapsed.displayName = 'Elapsed';
 function WorkflowOutputNode({ i18n, mouseEnter, mouseLeave, node }) {
   const history = useHistory();
   const { nodePositions } = useContext(WorkflowStateContext);
+  const job = node?.originalNodeObject?.summary_fields?.job;
   let borderColor = '#93969A';
 
-  if (node.job) {
+  if (job) {
     if (
-      node.job.status === 'failed' ||
+      job.status === 'failed' ||
-      node.job.status === 'error' ||
+      job.status === 'error' ||
-      node.job.status === 'canceled'
+      job.status === 'canceled'
     ) {
       borderColor = '#d9534f';
     }
-    if (node.job.status === 'successful' || node.job.status === 'ok') {
+    if (job.status === 'successful' || job.status === 'ok') {
       borderColor = '#5cb85c';
     }
   }
 
   const handleNodeClick = () => {
-    if (node.job && node.job.type !== 'workflow_aproval') {
+    if (job && job.type !== 'workflow_aproval') {
-      history.push(`/jobs/${node.job.id}/details`);
+      history.push(`/jobs/${job.id}/details`);
     }
   };
 
@@ -90,7 +91,7 @@ function WorkflowOutputNode({ i18n, mouseEnter, mouseLeave, node }) {
       id={`node-${node.id}`}
       transform={`translate(${nodePositions[node.id].x},${nodePositions[node.id]
         .y - nodePositions[1].y})`}
-      job={node.job}
+      job={job}
       onClick={handleNodeClick}
       onMouseEnter={mouseEnter}
       onMouseLeave={mouseLeave}
@@ -106,13 +107,15 @@ function WorkflowOutputNode({ i18n, mouseEnter, mouseLeave, node }) {
       />
       <foreignObject height="58" width="178" x="1" y="1">
         <NodeContents>
-          {node.job ? (
+          {job ? (
             <>
               <JobTopLine>
-                {node.job.status && <StatusIcon status={node.job.status} />}
+                {job.status && <StatusIcon status={job.status} />}
-                <p>{node.job.name}</p>
+                <p>{job.name || node.unifiedJobTemplate.name}</p>
               </JobTopLine>
-              <Elapsed>{secondsToHHMMSS(node.job.elapsed)}</Elapsed>
+              {!!job?.elapsed && (
+                <Elapsed>{secondsToHHMMSS(job.elapsed)}</Elapsed>
+              )}
             </>
           ) : (
             <NodeDefaultLabel>
@@ -123,7 +126,7 @@ function WorkflowOutputNode({ i18n, mouseEnter, mouseLeave, node }) {
           )}
         </NodeContents>
       </foreignObject>
-      {(node.unifiedJobTemplate || node.job) && (
+      {(node.unifiedJobTemplate || job) && (
         <WorkflowNodeTypeLetter node={node} />
       )}
     </NodeG>

awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.test.jsx

@@ -5,6 +5,8 @@ import WorkflowOutputNode from './WorkflowOutputNode';
 
 const nodeWithJT = {
   id: 2,
+  originalNodeObject: {
+    summary_fields: {
       job: {
         elapsed: 7,
         id: 9000,
@@ -12,15 +14,19 @@ const nodeWithJT = {
         status: 'successful',
         type: 'job',
       },
+    },
     unifiedJobTemplate: {
       id: 77,
       name: 'Automation JT',
       unified_job_type: 'job',
     },
+  },
 };
 
 const nodeWithoutJT = {
   id: 2,
+  originalNodeObject: {
+    summary_fields: {
       job: {
         elapsed: 7,
         id: 9000,
@@ -28,6 +34,8 @@ const nodeWithoutJT = {
         status: 'successful',
         type: 'job',
       },
+    },
+  },
 };
 
 const nodePositions = {

awx/ui_next/src/screens/Job/WorkflowOutput/useWsWorkflowOutput.js

@@ -0,0 +1,111 @@
+import { useState, useEffect } from 'react';
+import useWebsocket from '../../../util/useWebsocket';
+import { WorkflowJobsAPI } from '../../../api';
+
+const fetchWorkflowNodes = async (jobId, pageNo = 1, nodes = []) => {
+  const { data } = await WorkflowJobsAPI.readNodes(jobId, {
+    page_size: 200,
+    page: pageNo,
+  });
+
+  if (data.next) {
+    return fetchWorkflowNodes(jobId, pageNo + 1, nodes.concat(data.results));
+  }
+  return nodes.concat(data.results);
+};
+
+export default function useWsWorkflowOutput(workflowJobId, initialNodes) {
+  const [nodes, setNodes] = useState(initialNodes);
+  const lastMessage = useWebsocket({
+    jobs: ['status_changed'],
+    control: ['limit_reached_1'],
+  });
+
+  useEffect(() => {
+    setNodes(initialNodes);
+  }, [initialNodes]);
+
+  useEffect(
+    function parseWsMessage() {
+      async function refreshNodeObjects() {
+        const refreshedNodes = [];
+        const updatedNodeObjects = await fetchWorkflowNodes(workflowJobId);
+        const updatedNodeObjectsMap = updatedNodeObjects.reduce((map, node) => {
+          map[node.id] = node;
+          return map;
+        }, {});
+        nodes.forEach(node => {
+          if (node.id === 1) {
+            // This is our artificial start node
+            refreshedNodes.push({
+              ...node,
+            });
+          } else {
+            refreshedNodes.push({
+              ...node,
+              originalNodeObject:
+                updatedNodeObjectsMap[node.originalNodeObject.id],
+            });
+          }
+        });
+        setNodes(refreshedNodes);
+      }
+
+      if (
+        lastMessage?.unified_job_id === workflowJobId &&
+        ['successful', 'failed', 'error', 'cancelled'].includes(
+          lastMessage.status
+        )
+      ) {
+        refreshNodeObjects();
+      } else {
+        if (
+          !nodes ||
+          nodes.length === 0 ||
+          lastMessage?.workflow_job_id !== workflowJobId
+        ) {
+          return;
+        }
+
+        const index = nodes.findIndex(
+          node => node?.originalNodeObject?.id === lastMessage.workflow_node_id
+        );
+
+        if (index > -1) {
+          setNodes(updateNode(nodes, index, lastMessage));
+        }
+      }
+    },
+    [lastMessage] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  return nodes;
+}
+
+function updateNode(nodes, index, message) {
+  const node = {
+    ...nodes[index],
+    originalNodeObject: {
+      ...nodes[index]?.originalNodeObject,
+      job: message.unified_job_id,
+      summary_fields: {
+        ...nodes[index]?.originalNodeObject?.summary_fields,
+        job: {
+          ...nodes[index]?.originalNodeObject?.summary_fields?.job,
+          id: message.unified_job_id,
+          status: message.status,
+          type: message.type,
+        },
+      },
+    },
+    job: {
+      ...nodes[index]?.job,
+      id: message.unified_job_id,
+      name: nodes[index]?.job?.name || nodes[index]?.unifiedJobTemplate?.name,
+      status: message.status,
+      type: message.type,
+    },
+  };
+
+  return [...nodes.slice(0, index), node, ...nodes.slice(index + 1)];
+}

awx/ui_next/src/screens/Job/useWsJob.js

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import useWebsocket from '../../util/useWebsocket';
+import { JobsAPI } from '../../api';
+
+export default function useWsJob(initialJob) {
+  const { type } = useParams();
+  const [job, setJob] = useState(initialJob);
+  const lastMessage = useWebsocket({
+    jobs: ['status_changed'],
+    control: ['limit_reached_1'],
+  });
+
+  useEffect(() => {
+    setJob(initialJob);
+  }, [initialJob]);
+
+  useEffect(
+    function parseWsMessage() {
+      async function fetchJob() {
+        const { data } = await JobsAPI.readDetail(job.id, type);
+        setJob(data);
+      }
+
+      if (!job || lastMessage?.unified_job_id !== job.id) {
+        return;
+      }
+
+      if (
+        ['successful', 'failed', 'error', 'cancelled'].includes(
+          lastMessage.status
+        )
+      ) {
+        fetchJob();
+      } else {
+        setJob(updateJob(job, lastMessage));
+      }
+    },
+    [lastMessage] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  return job;
+}
+
+function updateJob(job, message) {
+  return {
+    ...job,
+    finished: message.finished,
+    status: message.status,
+  };
+}

awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx

@@ -30,7 +30,7 @@ function WorkflowJobTemplateAdd() {
         data: { id },
       } = await WorkflowJobTemplatesAPI.create(templatePayload);
       await Promise.all(await submitLabels(id, labels, organizationId));
-      history.push(`/templates/workflow_job_template/${id}/details`);
+      history.push(`/templates/workflow_job_template/${id}/visualizer`);
     } catch (err) {
       setFormSubmitError(err);
     }