Changes ui-side behavior in response to websocket job status updates on several lists

awx/main/models/unified_jobs.py

@@ -3,6 +3,7 @@
 
 # Python
 from io import StringIO
+import datetime
 import codecs
 import json
 import logging
@@ -1218,12 +1219,17 @@ def _websocket_emit_status(self, status):
                     status_data['instance_group_name'] = self.instance_group.name
                 else:
                     status_data['instance_group_name'] = None
+            elif status in ['successful', 'failed', 'canceled'] and self.finished:
+                status_data['finished'] = datetime.datetime.strftime(self.finished, "%Y-%m-%dT%H:%M:%S.%fZ")
             status_data.update(self.websocket_emit_data())
             status_data['group_name'] = 'jobs'
+            if getattr(self, 'unified_job_template_id', None):
+                status_data['unified_job_template_id'] = self.unified_job_template_id
             emit_channel_notification('jobs-status_changed', status_data)
 
             if self.spawned_by_workflow:
                 status_data['group_name'] = "workflow_events"
+                status_data['workflow_job_template_id'] = self.unified_job_template.id
                 emit_channel_notification('workflow_events-' + str(self.workflow_job_id), status_data)
         except IOError:  # includes socket errors
             logger.exception('%s failed to emit channel msg about status change', self.log_format)

awx/ui/client/features/jobs/jobsList.controller.js

@@ -25,15 +25,15 @@ function ListJobsController (
 
     vm.strings = strings;
 
+    let newJobs = [];
+
     // smart-search
     const name = 'jobs';
     const iterator = 'job';
     let paginateQuerySet = {};
 
     let launchModalOpen = false;
-    let refreshAfterLaunchClose = false;
-    let pendingRefresh = false;
-    let refreshTimerRunning = false;
+    let newJobsTimerRunning = false;
 
     vm.searchBasePath = SearchBasePath;
 
@@ -104,23 +104,53 @@ function ListJobsController (
         $scope.$emit('updateCount', vm.job_dataset.count, 'jobs');
     });
 
-    $scope.$on('ws-jobs', () => {
-        if (!launchModalOpen) {
-            if (!refreshTimerRunning) {
-                refreshJobs();
-            } else {
-                pendingRefresh = true;
+    const canAddRowsDynamically = () => {
+        const orderByValue = _.get($state.params, 'job_search.order_by');
+        const pageValue = _.get($state.params, 'job_search.page');
+        const idInValue = _.get($state.params, 'job_search.id__in');
+
+        return (!idInValue && (!pageValue || pageValue === '1')
+            && (orderByValue === '-finished' || orderByValue === '-started'));
+    };
+
+    const updateJobRow = (msg) => {
+        // Loop across the jobs currently shown and update the row
+        // if it exists
+        for (let i = 0; i < vm.jobs.length; i++) {
+            if (vm.jobs[i].id === msg.unified_job_id) {
+                // Update the job status.
+                vm.jobs[i].status = msg.status;
+                if (msg.finished) {
+                    vm.jobs[i].finished = msg.finished;
+                    const orderByValue = _.get($state.params, 'job_search.order_by');
+                    if (orderByValue === '-finished') {
+                        // Attempt to sort the rows in the list by their finish
+                        // timestamp in descending order
+                        vm.jobs.sort((a, b) =>
+                            (!b.finished) - (!a.finished)
+                            || new Date(b.finished) - new Date(a.finished));
+                    }
+                }
+                break;
             }
-        } else {
-            refreshAfterLaunchClose = true;
+        }
+    };
+
+    $scope.$on('ws-jobs', (e, msg) => {
+        if (msg.status === 'pending' && canAddRowsDynamically()) {
+            newJobs.push(msg.unified_job_id);
+            if (!launchModalOpen && !newJobsTimerRunning) {
+                fetchNewJobs();
+            }
+        } else if (!newJobs.includes(msg.unified_job_id)) {
+            updateJobRow(msg);
         }
     });
 
     $scope.$on('launchModalOpen', (evt, isOpen) => {
         evt.stopPropagation();
-        if (!isOpen && refreshAfterLaunchClose) {
-            refreshAfterLaunchClose = false;
-            refreshJobs();
+        if (!isOpen && newJobs.length > 0) {
+            fetchNewJobs();
         }
         launchModalOpen = isOpen;
     });
@@ -289,22 +319,49 @@ function ListJobsController (
         });
     };
 
-    function refreshJobs () {
-        qs.search(SearchBasePath, $state.params.job_search, { 'X-WS-Session-Quiet': true })
+    const fetchNewJobs = () => {
+        newJobsTimerRunning = true;
+        const newJobIdsFilter = newJobs.join(',');
+        newJobs = [];
+        const newJobsSearchParams = Object.assign({}, $state.params.job_search);
+        newJobsSearchParams.count_disabled = 1;
+        newJobsSearchParams.id__in = newJobIdsFilter;
+        delete newJobsSearchParams.page_size;
+        const stringifiedSearchParams = qs.encodeQueryset(newJobsSearchParams, false);
+        Rest.setUrl(`${vm.searchBasePath}${stringifiedSearchParams}`);
+        Rest.get()
             .then(({ data }) => {
-                vm.jobs = data.results;
-                vm.job_dataset = data;
+                vm.job_dataset.count += data.results.length;
+                const pageSize = parseInt($state.params.job_search.page_size, 10) || 20;
+                const joinedJobs = data.results.concat(vm.jobs);
+                vm.jobs = joinedJobs.length > pageSize
+                    ? joinedJobs.slice(0, pageSize)
+                    : joinedJobs;
+                $timeout(() => {
+                    if (canAddRowsDynamically()) {
+                        if (newJobs.length > 0 && !launchModalOpen) {
+                            fetchNewJobs();
+                        } else {
+                            newJobsTimerRunning = false;
+                        }
+                    } else {
+                        // Bail out - one of [order_by, page, id__in] params has changed since we
+                        // received these new job messages
+                        newJobs = [];
+                        newJobsTimerRunning = false;
+                    }
+                }, 5000);
+            })
+            .catch(({ data, status }) => {
+                ProcessErrors($scope, data, status, null, {
+                    hdr: strings.get('error.HEADER'),
+                    msg: strings.get('error.CALL', {
+                        path: `${vm.searchBasePath}${stringifiedSearchParams}`,
+                        status
+                    })
+                });
             });
-        pendingRefresh = false;
-        refreshTimerRunning = true;
-        $timeout(() => {
-            if (pendingRefresh) {
-                refreshJobs();
-            } else {
-                refreshTimerRunning = false;
-            }
-        }, 5000);
-    }
+    };
 
     vm.isCollapsed = true;
 

awx/ui/client/features/projects/projectsList.controller.js

@@ -113,11 +113,6 @@ function projectsListController (
                 // And we found the affected project
                 $log.debug(`Received event for project: ${project.name}`);
                 $log.debug(`Status changed to: ${data.status}`);
-                if (data.status === 'successful' || data.status === 'failed' || data.status === 'canceled') {
-                    reloadList();
-                } else {
-                    project.scm_update_tooltip = vm.strings.get('update.UPDATE_RUNNING');
-                }
                 project.status = data.status;
                 buildTooltips(project);
             }

awx/ui/client/features/templates/templatesList.controller.js

@@ -24,18 +24,13 @@ function ListTemplatesController(
     qs,
     GetBasePath,
     ngToast,
-    $timeout
 ) {
     const vm = this || {};
     const [jobTemplate, workflowTemplate] = resolvedModels;
 
     const choices = workflowTemplate.options('actions.GET.type.choices')
         .concat(jobTemplate.options('actions.GET.type.choices'));
 
-    let launchModalOpen = false;
-    let refreshAfterLaunchClose = false;
-    let pendingRefresh = false;
-    let refreshTimerRunning = false;
     let paginateQuerySet = {};
 
     vm.strings = strings;
@@ -120,27 +115,41 @@ function ListTemplatesController(
         setToolbarSort();
     }, true);
 
-    $scope.$on(`ws-jobs`, () => {
-        if (!launchModalOpen) {
-            if (!refreshTimerRunning) {
-                refreshTemplates();
-            } else {
-                pendingRefresh = true;
+    $scope.$on(`ws-jobs`, (e, msg) => {
+        if (msg.unified_job_template_id && vm.templates) {
+            const template = vm.templates.find((t) => t.id === msg.unified_job_template_id);
+            if (template) {
+                if (msg.status === 'pending') {
+                    // This is a new job - add it to the front of the
+                    // recent_jobs array
+                    if (template.summary_fields.recent_jobs.length === 10) {
+                        template.summary_fields.recent_jobs.pop();
+                    }
+
+                    template.summary_fields.recent_jobs.unshift({
+                        id: msg.unified_job_id,
+                        status: msg.status,
+                        type: msg.type
+                    });
+                } else {
+                    // This is an update to an existing job.  Check to see
+                    // if we have it in our array of recent_jobs
+                    for (let i=0; i<template.summary_fields.recent_jobs.length; i++) {
+                        const recentJob = template.summary_fields.recent_jobs[i];
+                        if (recentJob.id === msg.unified_job_id) {
+                            recentJob.status = msg.status;
+                            if (msg.finished) {
+                                recentJob.finished = msg.finished;
+                                template.last_job_run = msg.finished;
+                            }
+                            break;
+                        }
+                    };
+                }
             }
-        } else {
-            refreshAfterLaunchClose = true;
         }
     });
 
-    $scope.$on('launchModalOpen', (evt, isOpen) => {
-        evt.stopPropagation();
-        if (!isOpen && refreshAfterLaunchClose) {
-            refreshAfterLaunchClose = false;
-            refreshTemplates();
-        }
-        launchModalOpen = isOpen;
-    });
-
     vm.isInvalid = (template) => {
         if(isJobTemplate(template)) {
             return template.project === null || (template.inventory === null && template.ask_inventory_on_launch === false);
@@ -265,15 +274,6 @@ function ListTemplatesController(
             vm.templates = vm.dataset.results;
         })
         .finally(() => Wait('stop'));
-        pendingRefresh = false;
-        refreshTimerRunning = true;
-        $timeout(() => {
-            if (pendingRefresh) {
-                refreshTemplates();
-            } else {
-                refreshTimerRunning = false;
-            }
-        }, 5000);
     }
 
     function createErrorHandler(path, action) {
@@ -483,8 +483,7 @@ ListTemplatesController.$inject = [
     'Wait',
     'QuerySet',
     'GetBasePath',
-    'ngToast',
-    '$timeout'
+    'ngToast'
 ];
 
 export default ListTemplatesController;

awx/ui/client/src/home/dashboard/lists/job-templates/job-templates-list.directive.js

@@ -11,7 +11,7 @@ export default
                 templateUrl: templateUrl('home/dashboard/lists/job-templates/job-templates-list')
             };
 
-            function link(scope, element, attr) {
+            function link(scope) {
 
                 scope.$watch("data", function(data) {
                     if (data) {
@@ -22,7 +22,7 @@ export default
                             scope.noJobTemplates = true;
                         }
                     }
-                });
+                }, true);
 
                 scope.canAddJobTemplate = false;
                 let url = GetBasePath('job_templates');