Merge pull request #3265 from mabashian/socket-time-band

Prevent jobs/templates lists from refreshing list data more than once every 5 seconds

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]

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

@@ -17,7 +17,8 @@ function ListJobsController (
     ProcessErrors,
     Wait,
     Rest,
-    SearchBasePath
+    SearchBasePath,
+    $timeout
 ) {
     const vm = this || {};
     const [unifiedJob] = resolvedModels;
@@ -30,6 +31,8 @@ function ListJobsController (
 
     let launchModalOpen = false;
     let refreshAfterLaunchClose = false;
+    let pendingRefresh = false;
+    let refreshTimerRunning = false;
 
     vm.searchBasePath = SearchBasePath;
 
@@ -44,7 +47,11 @@ function ListJobsController (
 
     $scope.$on('ws-jobs', () => {
         if (!launchModalOpen) {
-            refreshJobs();
+            if (!refreshTimerRunning) {
+                refreshJobs();
+            } else {
+                pendingRefresh = true;
+            }
         } else {
             refreshAfterLaunchClose = true;
         }
@@ -235,6 +242,15 @@ function ListJobsController (
                 vm.jobs = data.results;
                 vm.job_dataset = data;
             });
+        pendingRefresh = false;
+        refreshTimerRunning = true;
+        $timeout(() => {
+            if (pendingRefresh) {
+                refreshJobs();
+            } else {
+                refreshTimerRunning = false;
+            }
+        }, 5000);
     }
 
     vm.isCollapsed = true;
@@ -260,7 +276,8 @@ ListJobsController.$inject = [
     'ProcessErrors',
     'Wait',
     'Rest',
-    'SearchBasePath'
+    'SearchBasePath',
+    '$timeout'
 ];
 
 export default ListJobsController;

awx/ui/client/features/jobs/routes/hostCompletedJobs.route.js

@@ -16,6 +16,13 @@ export default {
             squash: ''
         }
     },
+    data: {
+        socket: {
+            groups: {
+                jobs: ['status_changed']
+            }
+        }
+    },
     ncyBreadcrumb: {
         label: N_('COMPLETED JOBS')
     },

awx/ui/client/features/jobs/routes/inventoryCompletedJobs.route.js

@@ -18,6 +18,13 @@ export default {
             squash: ''
         }
     },
+    data: {
+        socket: {
+            groups: {
+                jobs: ['status_changed']
+            }
+        }
+    },
     ncyBreadcrumb: {
         label: N_('JOBS')
     },

awx/ui/client/features/jobs/routes/templateCompletedJobs.route.js

@@ -17,6 +17,13 @@ export default {
             squash: ''
         }
     },
+    data: {
+        socket: {
+            groups: {
+                jobs: ['status_changed']
+            }
+        }
+    },
     ncyBreadcrumb: {
         label: N_('COMPLETED JOBS')
     },

awx/ui/client/features/jobs/routes/workflowJobTemplateCompletedJobs.route.js

@@ -17,6 +17,13 @@ export default {
             squash: ''
         }
     },
+    data: {
+        socket: {
+            groups: {
+                jobs: ['status_changed']
+            }
+        }
+    },
     ncyBreadcrumb: {
         label: N_('COMPLETED JOBS')
     },

awx/ui/client/features/templates/routes/projectsTemplatesList.route.js

@@ -14,6 +14,13 @@ export default {
             },
         }
     },
+    data: {
+        socket: {
+            groups: {
+                jobs: ['status_changed']
+            }
+        }
+    },
     ncyBreadcrumb: {
         label: N_("JOB TEMPLATES")
     },

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

@@ -23,7 +23,8 @@ function ListTemplatesController(
     Wait,
     qs,
     GetBasePath,
-    ngToast
+    ngToast,
+    $timeout
 ) {
     const vm = this || {};
     const [jobTemplate, workflowTemplate] = resolvedModels;
@@ -33,6 +34,8 @@ function ListTemplatesController(
 
     let launchModalOpen = false;
     let refreshAfterLaunchClose = false;
+    let pendingRefresh = false;
+    let refreshTimerRunning = false;
 
     vm.strings = strings;
     vm.templateTypes = mapChoices(choices);
@@ -76,7 +79,11 @@ function ListTemplatesController(
 
     $scope.$on(`ws-jobs`, () => {
         if (!launchModalOpen) {
-            refreshTemplates();
+            if (!refreshTimerRunning) {
+                refreshTemplates();
+            } else {
+                pendingRefresh = true;
+            }
         } else {
             refreshAfterLaunchClose = true;
         }
@@ -205,6 +212,15 @@ 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) {
@@ -414,7 +430,8 @@ ListTemplatesController.$inject = [
     'Wait',
     'QuerySet',
     'GetBasePath',
-    'ngToast'
+    'ngToast',
+    '$timeout'
 ];
 
 export default ListTemplatesController;

awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js

@@ -48,10 +48,6 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, moment, gra
                         });
                 }
 
-                scope.$on('jobStatusChange', function(event, status){
-                    recreateGraph(scope.period, scope.jobType, status);
-                });
-
                 function createGraph(period, jobtype, data, status){
                     scope.period = period;
                     scope.jobType = jobtype;
@@ -171,7 +167,7 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, moment, gra
                                     <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
                                 </a>`);
 
-                        scope.$broadcast("jobStatusChange", job_status);
+                        recreateGraph(scope.period, scope.jobType, job_status);
                     });
 
                     adjustGraphSize(job_status_chart, element);

awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.service.js

@@ -10,18 +10,10 @@ export default
     "ProcessErrors",
     "$rootScope",
     "$q",
+    "$timeout",
     JobStatusGraphData];
 
-function JobStatusGraphData(Rest, getBasePath, processErrors, $rootScope, $q) {
+function JobStatusGraphData(Rest, getBasePath, processErrors, $rootScope, $q, $timeout) {
-
-    function pluck(property, promise, status) {
-        return promise.then(function(value) {
-            if(status === "successful" || status === "failed"){
-                delete value[property].jobs[status];
-            }
-            return value[property];
-        });
-    }
 
     function getData(period, jobType, status) {
         var url, dash_path = getBasePath('dashboard');
@@ -38,39 +30,66 @@ function JobStatusGraphData(Rest, getBasePath, processErrors, $rootScope, $q) {
         url = dash_path + 'graphs/jobs/?period='+period+'&job_type='+jobType;
         Rest.setHeader({'X-WS-Session-Quiet': true});
         Rest.setUrl(url);
-        var result = Rest.get()
+        return Rest.get()
-        .catch(function(response) {
+            .then(function(value) {
-            var errorMessage = 'Failed to get: ' + response.url + ' GET returned: ' + response.status;
+                if(status === "successful" || status === "failed"){
+                    delete value.data.jobs[status];
+                }
+                return value.data;
+            })
+            .catch(function(response) {
+                var errorMessage = 'Failed to get: ' + response.url + ' GET returned: ' + response.status;
 
-            processErrors(null,
+                processErrors(null,
-                          response.data,
+                            response.data,
-                          response.status,
+                            response.status,
-                          null, {
+                            null, {
-                hdr: 'Error!',
+                    hdr: 'Error!',
-                msg: errorMessage
+                    msg: errorMessage
+                });
+                return $q.reject(response);
             });
-            return $q.reject(response);
-        });
-
-        return pluck('data', result, status);
     }
 
     return {
+        pendingRefresh: false,
+        refreshTimerRunning: false,
+        refreshTimer: angular.noop,
         destroyWatcher: angular.noop,
         setupWatcher: function(period, jobType) {
-            this.destroyWatcher =
+            const that = this;
+            that.destroyWatcher =
                 $rootScope.$on('ws-jobs', function() {
-                    getData(period, jobType).then(function(result) {
+                    if (!that.refreshTimerRunning) {
-                        $rootScope.
+                        that.timebandGetData(period, jobType);
-                            $broadcast('DataReceived:JobStatusGraph',
+                    } else {
-                                       result);
+                        that.pendingRefresh = true;
-                        return result;
+                    }
-                    });
             });
         },
+        timebandGetData: function(period, jobType) {
+            getData(period, jobType).then(function(result) {
+                $rootScope.
+                    $broadcast('DataReceived:JobStatusGraph',
+                               result);
+                return result;
+            });
+            this.pendingRefresh = false;
+            this.refreshTimerRunning = true;
+            this.refreshTimer = $timeout(() => {
+                if (this.pendingRefresh) {
+                    this.timebandGetData(period, jobType);
+                } else {
+                    this.refreshTimerRunning = false;
+                }
+            }, 5000);
+        },
         get: function(period, jobType, status) {
 
             this.destroyWatcher();
+            $timeout.cancel(this.refreshTimer);
+            this.refreshTimerRunning = false;
+            this.pendingRefresh = false;
             this.setupWatcher(period, jobType);
 
             return getData(period, jobType, status);

awx/ui/client/src/home/home.controller.js

@@ -4,18 +4,24 @@
  * All Rights Reserved
  *************************************************/
 
-export default ['$scope', '$rootScope','Wait',
+export default ['$scope', '$rootScope','Wait', '$timeout',
     'Rest', 'GetBasePath', 'ProcessErrors', 'graphData',
-    function($scope, $rootScope, Wait,
+    function($scope, $rootScope, Wait, $timeout,
     Rest, GetBasePath, ProcessErrors, graphData) {
 
         var dataCount = 0;
         let launchModalOpen = false;
         let refreshAfterLaunchClose = false;
+        let pendingRefresh = false;
+        let refreshTimerRunning = false;
 
         $scope.$on('ws-jobs', function () {
             if (!launchModalOpen) {
-                refreshLists();
+                if (!refreshTimerRunning) {
+                    refreshLists();
+                } else {
+                    pendingRefresh = true;
+                }
             } else {
                 refreshAfterLaunchClose = true;
             }
@@ -137,6 +143,15 @@ export default ['$scope', '$rootScope','Wait',
             .catch(({data, status}) => {
                 ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard jobs list: ' + status });
             });
+            pendingRefresh = false;
+            refreshTimerRunning = true;
+            $timeout(() => {
+                if (pendingRefresh) {
+                    refreshLists();
+                } else {
+                    refreshTimerRunning = false;
+                }
+            }, 5000);
         }
 
     }