From d300eab7901c7e672058a1459030a149c524bfad Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Sat, 14 Jun 2014 03:58:52 -0400 Subject: [PATCH] Job detail page refactor If the queue grows beyond 500 events, reset and start over. --- awx/ui/static/js/controllers/JobDetail.js | 73 ++++++++--------------- awx/ui/static/js/helpers/JobDetail.js | 61 ++++++++++++------- 2 files changed, 66 insertions(+), 68 deletions(-) diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js index 3cf1949aae..2d270daa6a 100644 --- a/awx/ui/static/js/controllers/JobDetail.js +++ b/awx/ui/static/js/controllers/JobDetail.js @@ -7,8 +7,9 @@ 'use strict'; -function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest, ProcessErrors, DigestEvents, - SelectPlay, SelectTask, Socket, GetElapsed, SelectHost, FilterAllByHostName, DrawGraph, LoadHostSummary, ReloadHostSummaryList) { +function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest, ProcessErrors, + DigestEvents, SelectPlay, SelectTask, Socket, GetElapsed, SelectHost, FilterAllByHostName, DrawGraph, LoadHostSummary, ReloadHostSummaryList, + JobIsFinished) { ClearScope(); @@ -20,13 +21,6 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, refresh_count = 0, lastEventId = 0; - scope.plays = {}; - scope.tasks = {}; - scope.hosts = []; - scope.hostResults = []; - scope.hostResultsMap = {}; - scope.hostsMap = {}; - scope.search_all_tasks = []; scope.search_all_plays = []; scope.job_status = {}; @@ -62,13 +56,6 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, data.event = data.event_name; $log.debug('push event: ' + data.id); event_queue.push(data); - - /* if (api_complete && data.id > lastEventId) { - // api loading is complete, process incoming events - } - else { - // Waiting on values from the api to load. Until then queue incoming events. - } */ }); if (scope.removeAPIComplete) { @@ -100,20 +87,8 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, } lastEventId = Math.max(hostId, taskId, playId); - // Only process queued events > the max event in memory - /*if (event_queue.length > 0) { - event_queue.forEach(function(event) { - if (event.id > lastEventId) { - events.push(event); - } - }); - if (events.length > 0) { - DigestEvents({ - scope: scope, - events: events - }); - } - }*/ + api_complete = true; + Wait('stop'); DigestEvents({ scope: scope, @@ -121,11 +96,8 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, lastEventId: lastEventId }); - api_complete = true; - // Draw the graph - if (scope.job.status === 'successful' || scope.job.status === 'failed' || scope.job.status === 'error') { - // The job has already completed. graph values found on playbook stats + if (JobIsFinished(scope)) { url = scope.job.related.job_events + '?event=playbook_on_stats'; Rest.setUrl(url); Rest.get() @@ -146,7 +118,6 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, } else { // Draw the graph based on summary values in memory - Wait('stop'); DrawGraph({ scope: scope, resize: true }); } }); @@ -178,12 +149,22 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, }); }); - if (scope.removeJobReady) { - scope.removeJobReady(); + if (scope.removeLoadJobDetails) { + scope.removeLoadJobDetails(); } - scope.removeJobReady = scope.$on('JobReady', function(e, events_url) { - // Job finished loading. Now get the set of plays + scope.removeRefreshJobDetails = scope.$on('LoadJobDetails', function(e, events_url) { + + // Call to load all the job bits including, plays, tasks, hosts results and host summary var url = scope.job.url + 'job_plays/?order_by=id'; + + scope.plays = {}; + scope.tasks = {}; + scope.hostResults = []; + scope.hostResultsMap = {}; + scope.hosts = []; + scope.hostsMap = {}; + api_complete = false; + Rest.setUrl(url); Rest.get() .success( function(data) { @@ -196,8 +177,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, // end date = starting date of the next event end = data[idx + 1].started; } - else if (scope.job_status.status === 'successful' || scope.job_status.status === 'failed' || - scope.job_status.status === 'error' || scope.job_status.status === 'canceled') { + else if (JobIsFinished(scope)) { // this is the last play and the job already finished end = scope.job_status.finished; } @@ -312,9 +292,11 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, else { scope.job_status.elapsed = '00:00:00'; } - + if (scope.myInterval) { + window.clearInterval(scope.myInterval); + } scope.setSearchAll('host'); - scope.$emit('JobReady', data.related.job_events); + scope.$emit('LoadJobDetails', data.related.job_events); scope.$emit('GetCredentialNames', data); }) .error(function(data, status) { @@ -675,9 +657,6 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, ReloadHostSummaryList({ scope: scope }); - //setTimeout(function() { - // SelectPlay({ scope: scope, id: scope.activePlay }); - //}, 2000); } }; @@ -722,5 +701,5 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, JobDetailController.$inject = [ '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath', 'Wait', 'Rest', 'ProcessErrors', 'DigestEvents', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'SelectHost', 'FilterAllByHostName', 'DrawGraph', - 'LoadHostSummary', 'ReloadHostSummaryList' + 'LoadHostSummary', 'ReloadHostSummaryList', 'JobIsFinished' ]; diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js index 6da6df434c..44ab67e3c1 100644 --- a/awx/ui/static/js/helpers/JobDetail.js +++ b/awx/ui/static/js/helpers/JobDetail.js @@ -40,35 +40,43 @@ angular.module('JobDetailHelper', ['Utilities', 'RestServices']) .factory('DigestEvents', ['$log', 'UpdatePlayStatus', 'UpdateHostStatus', 'AddHostResult', 'SelectPlay', 'SelectTask', - 'GetHostCount', 'GetElapsed', 'UpdateTaskStatus', 'DrawGraph', 'LoadHostSummary', + 'GetHostCount', 'GetElapsed', 'UpdateTaskStatus', 'DrawGraph', 'LoadHostSummary', 'JobIsFinished', function($log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTask, GetHostCount, GetElapsed, - UpdateTaskStatus, DrawGraph, LoadHostSummary) { + UpdateTaskStatus, DrawGraph, LoadHostSummary, JobIsFinished) { return function(params) { var scope = params.scope, queue = params.queue, - lastEventId = params.lastEventId, - myInterval; + lastEventId = params.lastEventId; + + function popEvent() { + $log.debug('queue length: ' + queue.length); + if (queue.length > 0 && queue.length < 500) { + var event = queue.splice(0,1); + if (event[0].id > lastEventId) { + $log.debug('processing event: ' + event[0].id); + scope.$emit('ProcessEvent', event[0]); + } + } + else if (queue.length > 500) { + // if we get too far behind, clear the queue and refresh + queue = []; + scope.emit('LoadJob'); + } + } if (scope.removeGetNextEvent) { scope.removeGetNextEvent(); } scope.removeGetNextEvent = scope.$on('GetNextEvent', function() { - if (myInterval) { - window.clearInterval(myInterval); + if (scope.myInterval) { + window.clearInterval(scope.myInterval); } - if (scope.job.status !== 'successful' && scope.job.status !== 'failed' && scope.job.status !== 'error') { - myInterval = window.setInterval(function() { - var event; - $log.debug('checking queue length is: ' + queue.length); - if (queue.length > 0) { - event = queue.splice(0,1); - if (event[0].id > lastEventId) { - $log.debug('processing event: ' + event[0].id); - scope.$emit('ProcessEvent', event[0]); - } - } - }, 500); + popEvent(); + if (!JobIsFinished(scope)) { + scope.myInterval = window.setInterval(function() { + popEvent(); + }, 600); } }); @@ -79,11 +87,11 @@ function($log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, Se var hostCount; $log.debug('handling event: ' + event.id); if (event.event === 'playbook_on_start') { - if (scope.job_status.status!== 'failed' && scope.job_status.status !== 'canceled' && - scope.job_status.status !== 'error' && scope.job_status !== 'successful') { + if (!JobIsFinished(scope)) { scope.job_status.started = event.created; scope.job_status.status = 'running'; } + scope.$emit('GetNextEvent'); } if (event.event === 'playbook_on_play_start') { @@ -94,6 +102,9 @@ function($log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, Se status: (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'none', elapsed: '00:00:00' }; + if (scope.plays.length > 1) { + DrawGraph({ scope: scope, resize: false }); + } SelectPlay({ scope: scope, id: event.id @@ -135,6 +146,7 @@ function($log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, Se changed: event.changed, modified: event.modified }); + scope.$emit('GetNextEvent'); } if (event.event === 'playbook_on_no_hosts_matched') { UpdatePlayStatus({ @@ -273,11 +285,18 @@ function($log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, Se } }); - scope.$emit('GetNextEvent'); + scope.$emit('GetNextEvent'); // Start checking the queue }; }]) +.factory('JobIsFinished', [ function() { + return function(scope) { + return (scope.job_status.status === 'failed' || scope.job_status.status === 'canceled' || + scope.job_status.status === 'error' || scope.job_status.status === 'successful'); + }; +}]) + //Get the # of expected hosts for a task by looking at the number //on the very first task for a play .factory('GetHostCount', [ 'FindFirstTaskofPlay', function(FindFirstTaskofPlay) {