Job detail page refactor

Using dictionaries rather than arrays. Filters now working. New endpoints wired in.

awx/ui/static/js/controllers/JobDetail.js

@@ -147,7 +147,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
     if (scope.removeInitialDataLoaded) {
         scope.removeInitialDataLoaded();
     }
-    scope.removeInitialDataLoaded= scope.$on('InitialDataLoaded', function() {
+    scope.removeInitialDataLoaded = scope.$on('InitialDataLoaded', function() {
         // Load data for the host summary table
         if (!api_complete) {
             ReloadHostSummaryList({
@@ -167,6 +167,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
         SelectPlay({
             scope: scope,
             id: lastPlay,
+            callback: 'InitialDataLoaded'
         });
     });
 
@@ -181,14 +182,15 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
             .success( function(data) {
                 data.forEach(function(event, idx) {
                     var status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'none',
-                        start = event.start,
+                        start = event.started,
                         end,
                         elapsed;
-                    if (idx < data.results.length - 1) {
+                    if (idx < data.length - 1) {
                         // end date = starting date of the next event
-                        end = data.results[idx + 1].started;
+                        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 (scope.job_status.status === 'successful' || scope.job_status.status === 'failed' ||
+                        scope.job_status.status === 'error' || scope.job_status.status === 'canceled') {
                         // this is the last play and the job already finished
                         end = scope.job_status.finished;
                     }
@@ -640,11 +642,8 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
         }
     };
 
-    scope.searchSummaryHosts = function() {
-
-    };
-
     scope.searchAllByHost = function() {
+        var nxtPlay;
         if (scope.search_all_hosts_name) {
             FilterAllByHostName({
                 scope: scope,
@@ -656,12 +655,18 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
             scope.search_all_tasks = [];
             scope.search_all_plays = [];
             scope.searchAllHostsEnabled = true;
-            scope.activePlay = scope.plays[scope.plays.length - 1].id;
+            nxtPlay = scope.plays[scope.plays.length - 1].id;
-            setTimeout(function() {
+            SelectPlay({
-                SelectPlay({ scope: scope, id: scope.activePlay });
+                scope: scope,
-            }, 2000);
+                id: nxtPlay
+            });
+            ReloadHostSummaryList({
+                scope: scope
+            });
+            //setTimeout(function() {
+            //    SelectPlay({ scope: scope, id: scope.activePlay });
+            //}, 2000);
         }
-        scope.searchSummaryHosts();
     };
 
     scope.allHostNameKeyPress = function(e) {
@@ -671,25 +676,30 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
     };
 
     scope.filterByStatus = function(choice) {
-        var tmp = [];
+        var key, keys, nxtPlay;
         if (choice === 'Failed') {
             scope.searchAllStatus = 'failed';
-            scope.plays.forEach(function(row) {
+            for(key in scope.plays) {
-                if (row.status === 'failed') {
+                if (scope.plays[key].status === 'failed') {
-                    tmp.push(row.id);
+                    nxtPlay = key;
                 }
-            });
+            }
-            tmp.sort();
-            scope.activePlay = tmp[tmp.length - 1];
         }
         else {
             scope.searchAllStatus = '';
-            scope.activePlay = scope.plays[scope.plays.length - 1].id;
+            keys = Object.keys(scope.plays);
+            nxtPlay = (keys.length > 0) ? keys[keys.length - 1] : null;
         }
-        scope.searchSummaryHosts();
+        SelectPlay({
-        setTimeout(function() {
+            scope: scope,
-            SelectPlay({ scope: scope, id: scope.activePlay });
+            id: nxtPlay
-        }, 2000);
+        });
+        ReloadHostSummaryList({
+            scope: scope
+        });
+        //setTimeout(function() {
+        //    SelectPlay({ scope: scope, id: scope.activePlay });
+        //}, 2000);
     };
 
     scope.viewEvent = function(event_id) {

awx/ui/static/js/helpers/JobDetail.js

@@ -474,7 +474,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
 }])
 
 // Add a new host result
-.factory('AddHostResult', ['FindFirstTaskofPlay', function(FindFirstTaskofPlay) {
+.factory('AddHostResult', ['FindFirstTaskofPlay', 'SetTaskStyles', function(FindFirstTaskofPlay, SetTaskStyles) {
     return function(params) {
         var scope = params.scope,
             task_id = params.task_id,
@@ -484,7 +484,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
             created = params.created,
             name = params.name,
             msg = params.message,
-            pId, diff, task, play_id, first;
+            task, play_id, first;
 
         if (scope.activeTask === task_id && !scope.hostResultsMap[host_id]) {
             // the event applies to the currently selected task
@@ -510,30 +510,39 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
             if (scope.hostResults.length > scope.hostTableRows) {
                 scope.hostResults.splice(0,1);
             }
+            // Refresh the map
+            scope.hostResultsMap = {};
+            scope.hostResults.forEach(function(result, idx) {
+                scope.hostResultsMap[result.id] = idx;
+            });
         }
 
-        // get the correct play_id for this event. the task_id is always correct/available, but sometimes
+        // update the task
-        // the event does not have a play_id
+        if (scope.tasks[task_id]) {
-        for (pId in scope.tasks) {
+            task = scope.tasks[task_id];
-            if (scope.tasks[pId][task_id]) {
+            play_id = scope.tasks[task_id].play_id;
-                play_id = pId;
-            }
-        }
 
-        first = FindFirstTaskofPlay({
+            first = FindFirstTaskofPlay({
-            scope: scope,
+                scope: scope,
-            play_id: play_id
+                play_id: play_id
-        });
+            });
 
-        task = scope.tasks[play_id][task_id];
-        if (task_id === first) {
             task.hostCount += 1;
+            task.reportedHosts++;
+            task.failedCount += (status === 'failed' || status === 'unreachable') ? 1 : 0;
+            task.changedCount += (status === 'changed') ? 1 : 0;
+            task.successfulCount += (status === 'successful') ? 1 : 0;
+            task.skippedCount += (status === 'skipped') ? 1 : 0;
+
+            SetTaskStyles({ task: task });
         }
-        task.reportedHosts++;
+    };
-        task.failedCount += (status === 'failed' || status === 'unreachable') ? 1 : 0;
+}])
-        task.changedCount += (status === 'changed') ? 1 : 0;
+
-        task.successfulCount += (status === 'successful') ? 1 : 0;
+.factory('SetTaskStyles', [ function() {
-        task.skippedCount += (status === 'skipped') ? 1 : 0;
+    return function(params) {
+        var task = params.task,
+            diff;
 
         task.failedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.failedCount / task.hostCount))) : 0;
         task.changedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.changedCount / task.hostCount))) : 0;
@@ -555,14 +564,10 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                 task.successfulPct = task.successfulPct - diff;
             }
         }
-        task.successfulStyle = (task.successfulPct > 0) ? { display: 'inline-block', width: task.successfulPct + '%' } : { display: 'none' };
+        task.successfulStyle = (task.successfulPct > 0) ? { 'display': 'inline-block', 'width': task.successfulPct + "%" } : { 'display': 'none' };
-        task.changedStyle = (task.changedPct > 0) ? { display: 'inline-block', width: task.changedPct + '%' } : { display: 'none' };
+        task.changedStyle = (task.changedPct > 0) ? { 'display': 'inline-block', 'width': task.changedPct + "%" } : { 'display': 'none' };
-        task.skippedStyle = (task.skippedPct > 0) ? { display: 'inline-block', width: task.skippedPct + '%' } : { display: 'none' };
+        task.skippedStyle = (task.skippedPct > 0) ? { 'display': 'inline-block', 'width': task.skippedPct + "%" } : { 'display': 'none' };
-        task.failedStyle = (task.failedPct > 0) ? { display: 'inline-block', width: task.failedPct + '%' } : { display: 'none' };
+        task.failedStyle = (task.failedPct > 0) ? { 'display': 'inline-block', 'width': task.failedPct + "%" } : { 'display': 'none' };
-        $('#' + task.id + '-' + task.play_id + '-' + 'successful-bar').css(task.successfulStyle);
-        $('#' + task.id + '-' + task.play_id + '-' + 'changed-bar').css(task.changedStyle);
-        $('#' + task.id + '-' + task.play_id + '-' + 'skipped-bar').css(task.skippedStyle);
-        $('#' + task.id + '-' + task.play_id + '-' + 'failed-bar').css(task.failedStyle);
     };
 }])
 
@@ -570,93 +575,112 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
 .factory('SelectPlay', ['SelectTask', 'LoadTasks', function(SelectTask, LoadTasks) {
     return function(params) {
         var scope = params.scope,
-            id = params.id;
+            id = params.id,
+            callback = params.callback;
 
         if (scope.plays[scope.activePlay]) {
             scope.plays[scope.activePlay].playActiveClass = '';
         }
-        scope.plays[id].playActiveClass = 'active';
+        if (id) {
+            scope.plays[id].playActiveClass = 'active';
+        }
         scope.activePlay = id;
-        scope.activePlayName = scope.plays[id].name;
 
         LoadTasks({
-            scope: scope
+            scope: scope,
+            callback: callback
         });
-
     };
 }])
 
-.factory('LoadTasks', ['Rest', 'ProcessErrors', 'GetElapsed', 'SelectTask', function(Rest, ProcessErrors, GetElapsed, SelectTask) {
+.factory('LoadTasks', ['Rest', 'ProcessErrors', 'GetElapsed', 'SelectTask', 'SetTaskStyles', function(Rest, ProcessErrors, GetElapsed, SelectTask, SetTaskStyles) {
     return function(params) {
         var scope = params.scope,
             callback = params.callback,
-            url = scope.job.related.job_tasks + '?parent=' + scope.activePlay + '&order_by=id';
+            url, tIds, lastId;
 
-        Rest.setUrl(url);
+        if (scope.activePlay) {
-        Rest.get()
+            url = scope.job.url + 'job_tasks/?event_id=' + scope.activePlay;
-            .success(function(data) {
+            // job_tasks seems to ignore all query predicates other than event_id
-                var tIds, lastId;
+            //+ '&';
-                scope.tasks = {};
+            //url += (scope.search_all_plays.length > 0) ? 'event_id__in=' + scope.search_all_plays.join() + '&' : '';
-                data.results.forEach(function(event, idx) {
+            //url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
-                    var end, elapsed;
+            //url += 'order_by=id';
 
-                    if (idx < data.results.length - 1) {
+            Rest.setUrl(url);
-                        // end date = starting date of the next event
+            Rest.get()
-                        end = data.results[idx + 1].created;
+                .success(function(data) {
-                    }
+                    scope.tasks = {};
-                    else {
+                    data.forEach(function(event, idx) {
-                        // no next event (task), get the end time of the play
+                        var end, elapsed;
-                        end = scope.plays[scope.activePlay].finished;
+                        if ((!scope.searchAllStatus) || (scope.searchAllStatus === 'failed' && event.failed) &&
-                    }
+                            ((scope.search_all_tasks.length === 0) || (scope.searchAllTasks.indexOf(event.id)))) {
-                    if (end) {
-                        elapsed = GetElapsed({
-                            start: event.created,
-                            end: end
-                        });
-                    }
-                    else {
-                        elapsed = '00:00:00';
-                    }
 
-                    scope.tasks[event.id] = {
+                            if (idx < data.length - 1) {
-                        id: event.id,
+                                // end date = starting date of the next event
-                        play_id: event.id,
+                                end = data[idx + 1].created;
-                        name: event.event_display,
+                            }
-                        status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                            else {
-                        created: event.created,
+                                // no next event (task), get the end time of the play
-                        modified: event.modified,
+                                end = scope.plays[scope.activePlay].finished;
-                        finished: end,
+                            }
-                        elapsed: elapsed,
+
-                        hostCount: 0,             // hostCount,
+                            if (end) {
-                        reportedHosts: 0,
+                                elapsed = GetElapsed({
-                        successfulCount: 0,
+                                    start: event.created,
-                        failedCount: 0,
+                                    end: end
-                        changedCount: 0,
+                                });
-                        skippedCount: 0,
+                            }
-                        successfulStyle: { display: 'none'},
+                            else {
-                        failedStyle: { display: 'none' },
+                                elapsed = '00:00:00';
-                        changedStyle: { display: 'none' },
+                            }
-                        skippedStyle: { display: 'none' },
+
-                        taskActiveClass: ''
+                            scope.tasks[event.id] = {
-                    };
+                                id: event.id,
+                                play_id: event.id,
+                                name: event.name,
+                                status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                                created: event.created,
+                                modified: event.modified,
+                                finished: end,
+                                elapsed: elapsed,
+                                hostCount: event.host_count,          // hostCount,
+                                reportedHosts: event.reported_hosts,
+                                successfulCount: event.successful_count,
+                                failedCount: event.failed_count,
+                                changedCount: event.changed_count,
+                                skippedCount: event.skipped_count,
+                                taskActiveClass: ''
+                            };
+
+                            SetTaskStyles({ task: scope.tasks[event.id] });
+                        }
+                    });
+
+                    // set the active task
+                    tIds = Object.keys(scope.tasks);
+                    lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null;
+                    SelectTask({
+                        scope: scope,
+                        id: lastId,
+                        callback: callback
+                    });
+                })
+                .error(function(data) {
+                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
                 });
-
+        }
-                // set the active task
+        else {
-                tIds = Object.keys(scope.tasks);
+            // set the active task
-                lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null;
+            tIds = Object.keys(scope.tasks);
-                SelectTask({
+            lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null;
-                    scope: scope,
+            SelectTask({
-                    id: lastId
+                scope: scope,
-                });
+                id: lastId,
-
+                callback: callback
-                if (callback) {
-                    scope.$emit(callback);
-                }
-            })
-            .error(function(data) {
-                ProcessErrors(scope, data, status, null, { hdr: 'Error!',
-                    msg: 'Call to ' + url + '. GET returned: ' + status });
             });
+        }
     };
 }])
 
@@ -667,15 +691,16 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
             id = params.id,
             callback = params.callback;
 
-        scope.tasks[scope.activePlay][scope.activeTask].taskActiveClass = '';
+        if (scope.activeTask && scope.tasks[scope.activeTask]) {
-        scope.tasks[scope.activePlay][id].taskActiveClass = 'active';
+            scope.tasks[scope.activeTask].taskActiveClass = '';
-        scope.activeTask = id;
-        scope.activeTaskName = scope.tasks[scope.activePlay][id].name;
-
-        if (callback) {
-            callback();
         }
 
+        if (id) {
+            scope.tasks[id].taskActiveClass = 'active';
+            scope.activeTaskName = scope.tasks[id].name;
+        }
+        scope.activeTask = id;
+
         $('#tasks-table-detail').mCustomScrollbar("update");
         setTimeout( function() {
             scope.auto_scroll = true;
@@ -683,7 +708,8 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
         }, 700);
 
         LoadHosts({
-            scope: scope
+            scope: scope,
+            callback: callback
         });
     };
 }])
@@ -696,38 +722,43 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
             url;
         scope.hostResults = [];
         scope.hostResultsMap = {};
-        // If we have a selected task, then get the list of hosts
+        if (scope.activeTask) {
-        url = scope.job.related.job_events + '?parent=' + scope.activeTask + '&';
+            // If we have a selected task, then get the list of hosts
-        url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
+            url = scope.job.related.job_events + '?parent=' + scope.activeTask + '&';
-        url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
+            url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
-        url += 'host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name';
+            url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
-        Rest.setUrl(url);
+            url += 'host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name';
-        Rest.get()
+            Rest.setUrl(url);
-            .success(function(data) {
+            Rest.get()
-                data.results.forEach(function(event) {
+                .success(function(data) {
-                    scope.hostResults.push({
+                    data.results.forEach(function(event) {
-                        id: event.id,
+                        scope.hostResults.push({
-                        status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                            id: event.id,
-                        host_id: event.host,
+                            status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
-                        task_id: event.parent,
+                            host_id: event.host,
-                        name: event.event_data.host,
+                            task_id: event.parent,
-                        created: event.created,
+                            name: event.event_data.host,
-                        msg: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
+                            created: event.created,
+                            msg: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
+                        });
+                        scope.hostResultsMap[event.id] = scope.hostResults.length - 1;
                     });
-                    scope.hostResultsMap[event.id] = scope.hostResults.length - 1;
+                    if (callback) {
+                        scope.$emit(callback);
+                    }
+                    SelectHost({ scope: scope });
+                })
+                .error(function(data, status) {
+                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
                 });
-                SelectHost({ scope: scope });
+        }
-                if (callback) {
+        else {
-                    scope.$emit(callback);
+            if (callback) {
-                }
+                scope.$emit(callback);
-                else {
+            }
-                    scope.$emit('InitialDataLoaded');
+            SelectHost({ scope: scope });
-                }
+        }
-            })
-            .error(function(data, status) {
-                ProcessErrors(scope, data, status, null, { hdr: 'Error!',
-                    msg: 'Call to ' + url + '. GET returned: ' + status });
-            });
     };
 }])
 
@@ -874,6 +905,10 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                     });
                 }, 500);
             }
+            else {
+                scope.tasks = {};
+                scope.hostResults = [];
+            }
         });
 
         if (scope.removeAllTasksReady) {

awx/ui/static/partials/job_detail.html

@@ -85,10 +85,9 @@
                             </div>
                             <div id="tasks-table-detail" aw-custom-scroll class="table-detail">
                                 <div class="row cursor-pointer"
-                                    ng-repeat="(task_id, task) in taskList = (FilterById : search_all_tasks | filter:{ status : searchAllStatus}) track by task_id"
+                                    ng-repeat="(task_id, task) in tasks track by task_id"
                                     ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
-
+                                    <!-- = (tasks | FilterById : search_all_tasks | filter:{ status : searchAllStatus} | filter:{ play_id: activePlay }} -->
-                                <!-- = (tasks | FilterById : search_all_tasks | filter:{ status : searchAllStatus} | filter:{ play_id: activePlay }} -->
                                     <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div>
                                     <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
                                             data-placement="top">{{ task.elapsed }}
@@ -101,7 +100,7 @@
                                         <div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-m atching-hosts'">No matching hosts</div></div>
                                     </div>
                                 </div>
-                                <div class="row" ng-show="!taskList">
+                                <div class="row" ng-show="!tasks">
                                     <div class="col-lg-12">
                                         <div class="loading-info">No tasks matched</div>
                                     </div>