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
ansible · Sep 11, 2020 · 412a294 · 412a294
2 parents 0c5aaa2 + 8fab455
commit 412a294
Show file tree

Hide file tree

Showing 14 changed files with 357 additions and 203 deletions.
diff --git a/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx b/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' ||

diff --git a/awx/ui_next/src/components/Workflow/WorkflowNodeHelp.jsx b/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) {
-    switch (node.job.status) {
+  if (job) {
+    switch (job.status) {
       case 'new':
         jobStatus = i18n._(t`New`);
         break;
@@ -112,23 +113,22 @@ function WorkflowNodeHelp({ node, i18n }) {
 
   return (
     <>
-      {!node.unifiedJobTemplate &&
-        (!node.job || node.job.type !== 'workflow_approval') && (
-          <>
-            <ResourceDeleted job={node.job}>
-              <StyledExclamationTriangleIcon />
-              <Trans>
-                The resource associated with this node has been deleted.
-              </Trans>
-            </ResourceDeleted>
-          </>
-        )}
-      {node.job && (
+      {!node.unifiedJobTemplate && (!job || job.type !== 'workflow_approval') && (
+        <>
+          <ResourceDeleted job={job}>
+            <StyledExclamationTriangleIcon />
+            <Trans>
+              The resource associated with this node has been deleted.
+            </Trans>
+          </ResourceDeleted>
+        </>
+      )}
+      {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>
       )}
     </>

diff --git a/awx/ui_next/src/components/Workflow/WorkflowNodeHelp.test.jsx b/awx/ui_next/src/components/Workflow/WorkflowNodeHelp.test.jsx
@@ -9,11 +9,15 @@ describe('WorkflowNodeHelp', () => {
   });
   test('renders the expected content for a completed job template job', () => {
     const node = {
-      job: {
-        name: 'Foo Job Template',
-        elapsed: 9000,
-        status: 'successful',
-        type: 'job',
+      originalNodeObject: {
+        summary_fields: {
+          job: {
+            name: 'Foo Job Template',
+            elapsed: 9000,
+            status: 'successful',
+            type: 'job',
+          },
+        },
       },
       unifiedJobTemplate: {
         name: 'Foo Job Template',

diff --git a/awx/ui_next/src/components/Workflow/workflowReducer.js b/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;
     }

diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/useWsInventories.js b/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
 ) {

diff --git a/awx/ui_next/src/screens/Inventory/InventorySources/useWsInventorySources.js b/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'],