Latest job detail page changes. Fix for AC-1189- job template schedules.

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

@@ -8,7 +8,7 @@
 'use strict';
 
 function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest, ProcessErrors, DigestEvents,
-    SelectPlay) {
+    SelectPlay, SelectTask) {
 
     ClearScope();
 
@@ -91,8 +91,15 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
             id: id
         });
     };
+
+    $scope.selectTask = function(id) {
+        SelectTask({
+            scope: $scope,
+            id: id
+        });
+    };
 }
 
 JobDetailController.$inject = [ '$scope', '$compile', '$routeParams', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath', 'Wait',
-    'Rest', 'ProcessErrors', 'DigestEvents', 'SelectPlay'
+    'Rest', 'ProcessErrors', 'DigestEvents', 'SelectPlay', 'SelectTask'
 ];

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

@@ -39,8 +39,8 @@
 
 angular.module('JobDetailHelper', ['Utilities', 'RestServices'])
 
-.factory('DigestEvents', ['UpdatePlayStatus', 'UpdatePlayNoHostsMatched', 'UpdateHostStatus', 'UpdatePlayChild', 'AddHostResult',
+.factory('DigestEvents', ['UpdatePlayStatus', 'UpdatePlayNoHostsMatched', 'UpdateHostStatus', 'UpdatePlayChild', 'AddHostResult', 'MakeLastRowActive',
-function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePlayChild, AddHostResult) {
+function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePlayChild, AddHostResult, MakeLastRowActive) {
     return function(params) {
         var scope = params.scope,
             events = params.events;
@@ -49,9 +49,11 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
                 scope.plays.push({
                     id: event.id,
                     name: event.play,
-                    status: (event.failed) ? 'failed' : 'successful',
+                    status: (event.changed) ? 'changed' : (event.failed) ? 'failed' : 'none',
                     children: []
                 });
+                scope.activePlay = event.id;
+                MakeLastRowActive({ scope: scope, list: scope.plays, field: 'playActiveClass', set: 'activePlay' });
             }
             if (event.event === 'playbook_on_setup') {
                 scope.tasks.push({
@@ -63,7 +65,8 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
                 UpdatePlayStatus({
                     scope: scope,
                     play_id: event.parent,
-                    failed: event.failed
+                    failed: event.failed,
+                    changed: event.changed
                 });
             }
             if (event.event === 'playbook_on_task_start') {
@@ -71,17 +74,19 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
                     id: event.id,
                     name: event.task,
                     play_id: event.parent,
-                    status: (event.failed) ? 'failed' : 'successful'
+                    status: (event.changed) ? 'changed' : (event.failed) ? 'failed' : 'successful'
                 });
                 UpdatePlayStatus({
                     scope: scope,
                     play_id: event.parent,
-                    failed: event.failed
+                    failed: event.failed,
+                    changed: event.changed
                 });
+                MakeLastRowActive({ scope: scope, list: scope.tasks, field: 'taskActiveClass', set: 'activeTask' });
             }
-            if (event.event === 'playbook_on_no_hosts_matched') {
+            /*if (event.event === 'playbook_on_no_hosts_matched') {
                 UpdatePlayNoHostsMatched({ scope: scope, play_id: event.parent });
-            }
+            }*/
             if (event.event === 'runner_on_failed') {
 
             }
@@ -106,6 +111,22 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
     };
 }])
 
+.factory('MakeLastRowActive', [ function() {
+    return function(params) {
+        var scope = params.scope,
+            list = params.list,
+            field = params.field,
+            set = params.set;
+        list.forEach(function(row, idx) {
+            list[idx][field] = '';
+        });
+        if (list.length > 0) {
+            list[list.length - 1][field] = 'active';
+            scope[set] = list[list.length - 1].id;
+        }
+    };
+}])
+
 .factory('UpdatePlayChild', [ function() {
     return function(params) {
         var scope = params.scope,
@@ -144,10 +165,11 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
     return function(params) {
         var scope = params.scope,
             failed = params.failed,
+            changed = params.changed,
             id = params.play_id;
         scope.plays.every(function(play,idx) {
             if (play.id === id) {
-                scope.plays[idx].status = (failed) ? 'failed' : 'successful';
+                scope.plays[idx].status = (changed) ? 'changed' : (failed) ? 'failed' : 'none';
                 return false;
             }
             return true;
@@ -155,14 +177,21 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
     };
 }])
 
-.factory('UpdateTaskStatus', [ function() {
+.factory('UpdateTaskStatus', ['UpdatePlayStatus', function(UpdatePlayStatus) {
     return function(params) {
         var scope = params.scope,
-            task_id = params.task_id,
+            failed = params.failed,
-            failed = params.failed;
+            changed = params.changed,
+            id = params.task_id;
         scope.tasks.every(function (task, i) {
-            if (task.id === task_id) {
+            if (task.id === id) {
-                scope.tasks[i].status = (failed) ? 'failed' : 'successful';
+                scope.tasks[i].status = (changed) ? 'changed' : (failed) ? 'failed' : 'successful';
+                UpdatePlayStatus({
+                    scope: scope,
+                    failed: failed,
+                    changed: changed,
+                    play_id: task.parent
+                });
             }
         });
     };
@@ -212,15 +241,12 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
                 failed: (status === 'failed') ? 1 : 0
             });
         }
-
+        UpdateTaskStatus({
-        // Mark task failed
+            scope: scope,
-        if (status === 'failed') {
+            task_id: task_id,
-            UpdateTaskStatus({
+            failed: (status === 'failed' || status === 'unreachable') ? true :false,
-                scope: scope,
+            changed: (status === 'changed') ? true : false
-                task_id: task_id,
+        });
-                failed: true
-            });
-        }
     };
 }])
 
@@ -256,8 +282,9 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
             id: id,
             status: status,
             host_id: host_id,
-            play_name: play_name,
+            task_id: event.parent,
-            task_name : task_name,
+            task_name: task_name,
+            host_name: event.event_data.host,
             module_name: module_name,
             module_args: module_args,
             results: results,
@@ -271,8 +298,29 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
         var scope = params.scope,
             id = params.id;
         scope.plays.forEach(function(play, idx) {
-            scope.plays[idx].playActiveClass = (play.id === id) ? 'active' : '';
+            if (play.id === id) {
+                scope.plays[idx].playActiveClass = 'active';
+            }
+            else {
+                scope.plays[idx].playActiveClass = '';
+            }
         });
-        scope.selectedPlay = id;
+        scope.activePlay = id;
     };
 }])
+
+.factory('SelectTask', [ function() {
+    return function(params) {
+        var scope = params.scope,
+            id = params.id;
+        scope.tasks.forEach(function(task, idx) {
+            if (task.id === id) {
+                scope.tasks[idx].taskActiveClass = 'active';
+            }
+            else {
+                scope.tasks[idx].taskActiveClass = '';
+            }
+        });
+        scope.activeTask = id;
+    };
+}]);

awx/ui/static/js/helpers/Schedules.js

@@ -164,7 +164,12 @@ angular.module('SchedulesHelper', [ 'Utilities', 'RestServices', 'SchedulesHelpe
                 url =  GetBasePath(base),
                 scheduler;
 
-            url += (!Empty($routeParams.id)) ? $routeParams.id + '/schedules/' : '';
+            if (!Empty($routeParams.template_id)) {
+                url += $routeParams.template_id + '/schedules/';
+            }
+            else if (!Empty($routeParams.id)) {
+                url += $routeParams.id + '/schedules/';
+            }
 
             if (scope.removeDialogReady) {
                 scope.removeDialogReady();
@@ -596,4 +601,4 @@ angular.module('SchedulesHelper', [ 'Utilities', 'RestServices', 'SchedulesHelpe
 
             scope.search(list.iterator);
         };
-    }]);
+    }]);

awx/ui/static/less/ansible-ui.less

@@ -7,22 +7,23 @@
  *
  */
 
-@black:       #171717;
+@active-color: #c6e5e5;
-@white:       #FFF;
+@black:        #171717;
-@warning:     #FF9900;
+@blue:         #1778c3;   /* logo blue */
-@red:         #da4f49;
+@blue-link:    #1778c3;
-@red-hover:   #AE3F3A;
+@blue-dark:    #2a6496;   /* link hover */
-@green:       #5bb75b;
+@green:        #5bb75b;
-@blue:        #1778c3;   /* logo blue */
+@grey:         #A9A9A9;
-@blue-link:   #1778c3;
+@grey-txt:     #707070;
-@blue-dark:   #2a6496;   /* link hover */
+@info:         #d9edf7;   /* alert info background color */
-@grey:        #A9A9A9;
+@info-border:  #bce8f1;   /* alert info border color */
-@grey-txt:    #707070;
+@info-color:   #3a87ad;
-@well:        #f5f5f5;   /* well background color */
+@red:          #da4f49;
-@well-border: #e3e3e3;
+@red-hover:    #AE3F3A;
-@info:        #d9edf7;   /* alert info background color */
+@warning:      #FF9900;
-@info-border: #bce8f1;   /* alert info border color */
+@well:         #f5f5f5;   /* well background color */
-@info-color:  #3a87ad;
+@well-border:  #e3e3e3;
+@white:        #FFF;
 
 @tip-background: #0088CC;
 @tip-color: #fff;
@@ -65,6 +66,7 @@ body.modal-open {
 .capitalize { text-transform: capitalize; }
 .grey-txt { color: @grey; }
 .text-center { text-align: center !important; }
+.cursor-pointer { cursor: pointer }
 
 .red-txt,
 a.red-txt:visited,
@@ -899,7 +901,7 @@ input[type="checkbox"].checkbox-no-label {
 
 .table-hover-inverse tbody tr:hover > td,
 .table-hover-inverse tbody tr:hover > th {
-  background-color: #c6e5e5;
+  background-color: @active-color;
 }
 
 .table > thead > tr > td.success,
@@ -914,13 +916,13 @@ input[type="checkbox"].checkbox-no-label {
 .table > thead > tr.success > th,
 .table > tbody > tr.success > th,
 .table > tfoot > tr.success > th {
-  background-color: #c6e5e5;
+  background-color: @active-color;
 }
 .table-hover > tbody > tr > td.success:hover,
 .table-hover > tbody > tr > th.success:hover,
 .table-hover > tbody > tr.success:hover > td,
 .table-hover > tbody > tr.success:hover > th {
-  background-color: #c6e5e5;
+  background-color: @active-color;
 }
 
 .table-summary thead > tr > th,
@@ -1588,11 +1590,11 @@ tr td button i {
         margin-bottom: 0;
     }
     .table>tbody>tr>td {
-        border-top-color: #fff;
+        border-top-color: @well;
         padding: 0;
     }
     .table>thead>tr>th {
-        border-bottom-color: #fff;
+        border-bottom-color: @well;
         padding: 0;
     }
     ul {
@@ -1621,7 +1623,23 @@ tr td button i {
 }
 
 .job-list li.active {
-    background-color: @white;
+    background-color: @active-color;
+}
+
+.job_plays, .job_tasks, .job_hosts {
+    height: 150px;
+    overflow-y: auto;
+    overflow-x: none;
+}
+
+.host_details {
+    pre {
+        border: none; 
+        max-height: 100px;
+        overflow: auto;
+        margin: 0;
+        padding: 0;
+    }
 }
 
 .scroll-up-indicator {

awx/ui/static/partials/job_detail.html

@@ -3,8 +3,9 @@
         <div class="row">
             <div class="col-md-12" id="breadcrumbs"></div>
         </div>
+        
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-md-8">
                 <h5>Options</h5>
                 <div class="job_options job_well" id="job_options">
                     <table class="table table-condensed">
@@ -52,57 +53,65 @@
                         </tbody>
                     </table>
                 </div>
-                <a id="job_options_scroll_down_indicator" href="" aw-scroll-down="job_options" class="scroll-down-indicator">more <i class="fa fa-chevron-circle-down"></i></a>
+                <!-- <a id="job_options_scroll_down_indicator" href="" aw-scroll-down="job_options" class="scroll-down-indicator">more <i class="fa fa-chevron-circle-down"></i></a>
-                <a id="job_options_scroll_up_indicator" href="" aw-scroll-up="job_options" class="scroll-up-indicator">more <i class="fa fa-chevron-circle-up"></i></a>
+                <a id="job_options_scroll_up_indicator" href="" aw-scroll-up="job_options" class="scroll-up-indicator">more <i class="fa fa-chevron-circle-up"></i></a> -->
-            </div>
+            
-        </div><!-- row -->
+                <div class="job-detail-tables">
 
-        <div class="row">
+                    <h5>Plays</h5>
-            <div class="col-md-6 job-detail-tables">
+                    <div class="job_plays job_well">
+                         <ul class="job-list">
+                            <li ng-repeat="play in plays"  ng-class="play.playActiveClass"  ng-click="selectPlay(play.id)" class="cursor-pointer">
+                                <i class="fa icon-job-{{ play.status }}"></i> {{play.name }}
+                                <ul ng-show="play.children.length > 0">
+                                    <li ng-repeat="child in play.children">
+                                        <i class="fa icon-job-{{ child.status }}"></i> {{child.name }}
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
 
-                <h5>Plays</h5>
+                    <h5>Tasks</h5>
-                <div class="job_plays job_well">
+                    <div class="job_tasks job_well">
-                     <ul class="job-list">
+                        <ul class="job-list">
-                        <li ng-repeat="play in plays">
+                            <li ng-repeat="task in tasks | filter:{ play_id: activePlay }" ng-class="task.taskActiveClass" ng-click="selectTask(task.id)"><i class="fa icon-job-{{ task.status }}"></i> {{ task.name }}</li>
-                            <i class="fa icon-job-{{ play.status }}"></i> {{play.name }}
+                        </ul>
-                            <ul ng-show="play.children.length > 0">
+                    </div>
-                                <li ng-class="playActiveClass" ng-click="selectPlay(play.id)" ng-repeat="child in play.children">
-                                    <i class="fa icon-job-{{ child.status }}"></i> {{child.name }}
-                                </li>
-                            </ul>
-                        </li>
-                    </ul>
 
+
+                    <h5>Host Details</h5>
+                    <div class="host_details job_well">
+                            <p>{{ activeTaskName }}</p>
+                            <table class="table table-condensed job-detail-table">
+                            <thead>
+                                <tr>
+                                    <th class="col-md-4">Host</th>
+                                    <th class="col-md-8">Results</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr ng-repeat="result in hostResults | filter:{ task_id: activeTask }">
+                                    <td><i class="fa icon-job-{{ result.status }}"></i> {{ result.host_name }}</td>
+                                    <td><pre>{{ result.results }}</pre></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
+            </div><!-- col-md-8 -->
 
-                <h4>Tasks</h4>
+            <div class="col-md-4">
-                <div class="job_tasks">
+                <h5>Hosts Summary</h5>
+                <div class="job_hosts job_well">
                     <table class="table table-condensed job-detail-table">
                         <thead>
                             <tr>
-                                <th class="col-md-1">Status</th>
+                                <th class="col-md-8">Name</th>
-                                <th>Name</th>
+                                <th class="text-center col-md-1">OK</th>
-                            </tr>
+                                <th class="text-center col-md-1">Changed</th>
-                        </thead>
+                                <th class="text-center col-md-1">Unreachable</th>
-                        <tbody>
+                                <th class="text-center col-md-1">Failed</th>
-                            <tr ng-repeat="task in tasks">
-                                <td><i class="fa icon-job-{{ task.status }}"></i></td>
-                                <td>{{ task.name }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <h4>Hosts</h4>
-                <div class="job_hosts">
-                    <table class="table table-condensed job-detail-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th class="text-center">OK</th>
-                                <th class="text-center">Changed</th>
-                                <th class="text-center">Unreachable</th>
-                                <th class="text-center">Failed</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -116,7 +125,12 @@
                         </tbody>
                     </table>
                 </div>
-
+                <!--
+                <div class="job_well">
+                    <p>Active Play: {{ activePlay }}</p>
+                    <p>Active Task: {{ activeTask }}</p>
+                </div>
+                -->
             </div>
         </div>