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]
2024-10-31 23:51:09 +03:00 · 2019-02-21 18:06:41 +00:00 · 2019-02-21 18:06:41 +00:00 · e5acf93c66
commit e5acf93c66
parent 09684e2c41 e3c9a42741
10 changed files with 143 additions and 44 deletions
--- a/awx/ui/client/features/jobs/jobsList.controller.js
+++ b/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;
--- a/awx/ui/client/features/jobs/routes/hostCompletedJobs.route.js
+++ b/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')
    },
--- a/awx/ui/client/features/jobs/routes/inventoryCompletedJobs.route.js
+++ b/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')
    },
--- a/awx/ui/client/features/jobs/routes/templateCompletedJobs.route.js
+++ b/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')
    },
--- a/awx/ui/client/features/jobs/routes/workflowJobTemplateCompletedJobs.route.js
+++ b/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')
    },
--- a/awx/ui/client/features/templates/routes/projectsTemplatesList.route.js
+++ b/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")
    },
--- a/awx/ui/client/features/templates/templatesList.controller.js
+++ b/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;
--- a/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js
+++ b/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);
--- a/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.service.js
+++ b/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 pluck(property, promise, status) {
-        return promise.then(function(value) {
-            if(status === "successful" || status === "failed"){
-                delete value[property].jobs[status];
-            }
-            return value[property];
-        });
-    }
+function JobStatusGraphData(Rest, getBasePath, processErrors, $rootScope, $q, $timeout) {

    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()
-        .catch(function(response) {
-            var errorMessage = 'Failed to get: ' + response.url + ' GET returned: ' + response.status;
+        return Rest.get()
+            .then(function(value) {
+                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,
-                          response.data,
-                          response.status,
-                          null, {
-                hdr: 'Error!',
-                msg: errorMessage
+                processErrors(null,
+                            response.data,
+                            response.status,
+                            null, {
+                    hdr: 'Error!',
+                    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) {
-                        $rootScope.
-                            $broadcast('DataReceived:JobStatusGraph',
-                                       result);
-                        return result;
-                    });
+                    if (!that.refreshTimerRunning) {
+                        that.timebandGetData(period, jobType);
+                    } else {
+                        that.pendingRefresh = true;
+                    }
            });
        },
+        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);
--- a/awx/ui/client/src/home/home.controller.js
+++ b/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);
        }

    }