Added buttons to top of Job Events, Job Details and Job Host Summary pages to link everything together and provide a Refresh action.

ansibleworks/ui/static/css/ansible-ui.css

@@ -182,6 +182,18 @@
     min-width: 30px;
  }
 
+ .status-actions {
+    display: inline-block;
+    height: 25px;
+ }
+
+ .status-spin {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 15px;
+    font-size: 22px;
+ }
+
  .search-widget label {
     display:inline-block;
     vertical-align: middle;
@@ -255,6 +267,11 @@
     margin-left: 10px;
     margin-top: 3px;
  }
+
+ .status-actions {
+    margin-bottom: 20px;
+ }
+
  /* End Display list actions */
 
  .well {

ansibleworks/ui/static/js/controllers/JobEvents.js

@@ -59,6 +59,19 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
                     });
             };
         }
+
+    scope.refresh = function() {
+       scope.search(list.iterator);
+       }
+
+    scope.jobDetails = function() {
+       $location.path('/jobs/' + $routeParams.id);
+       };
+
+    scope.jobSummary = function() {
+       $location.path('/jobs/' + $routeParams.id + '/job_host_summaries');
+       };
+
 }
 
 JobEventsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobEventList',

ansibleworks/ui/static/js/controllers/JobHosts.js

@@ -50,6 +50,18 @@ function JobHostSummaryList ($scope, $rootScope, $location, $log, $routeParams,
                    { hdr: 'Error!', msg: 'Failed to lookup job record for job ' + $routeParams.id + ' GET returned status: ' + status });
                 });
         };
+
+    scope.refresh = function() {
+       scope.search(list.iterator);
+       }
+
+    scope.jobDetails = function() {
+       $location.path('/jobs/' + $routeParams.id);
+       };
+
+    scope.jobEvents = function() {
+       $location.path('/jobs/' + $routeParams.id + '/job_events');
+       };
   
 }
 

ansibleworks/ui/static/js/controllers/Jobs.js

@@ -32,7 +32,8 @@ function JobsListCtrl ($scope, $rootScope, $location, $log, $routeParams, Rest,
        scope.search(list.iterator);
        }
 
-    scope.editJob = function(id) {
+    scope.editJob = function(id, name) {
+       LoadBreadCrumbs({ path: '/jobs/' + id, title: name });
        $location.path($location.path() + '/' + id);
        }
 
@@ -129,8 +130,9 @@ function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
    var base = $location.path().replace(/^\//,'').split('/')[0];
    var master = {};
    var id = $routeParams.id;
-   var relatedSets = {}; 
+   var relatedSets = {};
 
+   scope.statusSearchSpin = false;
 
    function getPlaybooks(project) {
        if (project !== null && project !== '' && project !== undefined) {
@@ -186,7 +188,9 @@ function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
    Rest.setUrl(defaultUrl + ':id/'); 
    Rest.get({ params: {id: id} })
        .success( function(data, status, headers, config) {
+           
            LoadBreadCrumbs({ path: '/job_templates/' + id, title: data.name });
+           
            for (var fld in form.fields) {
               if (data[fld] !== null && data[fld] !== undefined) {  
                  if (form.fields[fld].type == 'select') {
@@ -326,17 +330,40 @@ function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
               .error( function(data, status, headers, config) {
                   $('#prompt-modal').modal('hide');
                   ProcessErrors(scope, data, status, null,
-                            { hdr: 'Error!', msg: 'Call to ' + url + ' failed. POST returned status: ' + status });
+                      { hdr: 'Error!', msg: 'Call to ' + url + ' failed. POST returned status: ' + status });
                   });      
           };
 
-       Prompt({ hdr: 'Delete', 
+      Prompt({ hdr: 'Delete', 
-                body: 'Are you sure you want to remove ' + name + ' from ' + scope.name + ' ' + title + '?',
+               body: 'Are you sure you want to remove ' + name + ' from ' + scope.name + ' ' + title + '?',
-                action: action
+               action: action
-                });
+               });
        
       }
 
+   scope.refresh = function() {
+      scope.statusSearchSpin = true;
+      Rest.setUrl(defaultUrl + id + '/'); 
+      Rest.get()
+          .success( function(data, status, headers, config) {
+              scope.status = data.status; 
+              scope.result_stdout = data.result_stdout;
+              scope.result_traceback = data.result_traceback;
+              scope.statusSearchSpin = false;
+              })
+          .error( function(data, status, headers, config) {
+              ProcessErrors(scope, data, status, null,
+                 { hdr: 'Error!', msg: 'Attempt to load job failed. GET returned status: ' + status });
+              });
+      }
+
+  scope.jobSummary = function() {
+      $location.path('/jobs/' + id + '/job_host_summaries');
+      }
+
+  scope.jobEvents = function() {
+      $location.path('/jobs/' + id + '/job_events');
+      }
 }
 
 JobsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobForm', 

ansibleworks/ui/static/js/forms/Jobs.js

@@ -146,7 +146,7 @@ angular.module('JobFormDefinition', [])
                 label: 'Standard Out', 
                 type: 'textarea',
                 readonly: true,
-                rows: 10,
+                rows: 20,
                 class: 'span12'
                 },
             result_traceback: {
@@ -158,6 +158,30 @@ angular.module('JobFormDefinition', [])
                 }
             },
 
+        statusActions: {
+            refresh: {
+                icon: 'icon-refresh',
+                ngClick: "refresh()",
+                class: 'btn-small',
+                awToolTip: 'Refresh job status & output',
+                mode: 'all'
+                },
+            summary: {
+                icon: 'icon-filter',
+                ngClick: "jobSummary()",
+                class: 'btn-success btn-small',
+                awToolTip: 'View host summary',
+                mode: 'all'
+                },
+            events: {
+                icon: 'icon-list-ul',
+                ngClick: "jobEvents()",
+                class: 'btn-success btn-small',
+                awToolTip: 'View job events',
+                mode: 'all',             
+                }
+            },
+
         related: { //related colletions (and maybe items?)
            
             }

ansibleworks/ui/static/js/lists/JobEvents.js

@@ -48,6 +48,27 @@ angular.module('JobEventsListDefinition', [])
             },
         
         actions: {
+            refresh: {
+                ngClick: "refresh()",
+                icon: 'icon-refresh',
+                awToolTip: 'Refresh the page',
+                class: 'btn-small',
+                mode: 'all'
+                },
+            edit: {
+                ngClick: "jobDetails()",
+                icon: 'icon-edit',
+                class: 'btn-small',
+                awToolTip: 'View/Edit detail',
+                mode: 'all'
+                },
+            summary: {
+                icon: 'icon-filter',
+                ngClick: "jobSummary()",
+                class: 'btn-success btn-small',
+                awToolTip: 'View host summary',
+                mode: 'all'
+                }
             },
 
         fieldActions: {

ansibleworks/ui/static/js/lists/JobHosts.js

@@ -53,7 +53,27 @@ angular.module('JobHostDefinition', [])
             },
         
         actions: {
-
+            refresh: {
+                icon: 'icon-refresh',
+                ngClick: "refresh()",
+                class: 'btn-small',
+                awToolTip: 'Refresh the page',
+                mode: 'all'
+                },
+            edit: {
+                icon: 'icon-edit',
+                ngClick: "jobDetails()",
+                class: 'btn-small',
+                awToolTip: 'View job detail',
+                mode: 'all'
+                },
+            events: {
+                icon: 'icon-list-ul',
+                ngClick: "jobEvents()",
+                class: 'btn-success btn-small',
+                awToolTip: 'View job events',
+                mode: 'all',             
+                }
             },
 
         fieldActions: {

ansibleworks/ui/static/js/lists/Jobs.js

@@ -59,7 +59,7 @@ angular.module('JobsListDefinition', [])
 
         fieldActions: {
             edit: {
-                ngClick: "editJob(\{\{ job.id \}\})",
+                ngClick: "editJob(\{\{ job.id \}\}, '\{\{ job.name \}\}')",
                 icon: 'icon-edit',
                 class: 'btn-mini',
                 awToolTip: 'View/Edit detail',

ansibleworks/ui/static/lib/ansible/form-generator.js

@@ -419,6 +419,30 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           html += "</li>\n</ul>\n</div>\n";
        }
 
+       if ((!this.modal && this.form.statusFields)) {
+          // Add status fields section (used in Jobs form)
+          html += "<div class=\"well\">\n";
+          if (this.form.statusActions) {
+             html += "<div class=\"status-actions\">\n";
+             var act;
+             for (action in this.form.statusActions) {
+                 act = this.form.statusActions[action];
+                 html += "<button " + this.attr(act, 'ngClick') + 
+                         "class=\"btn btn-small " + act.class + "\" ";
+                 html += (act.awToolTip) ? this.attr(act,'awToolTip') : "";
+                 html += (act.awToolTip) ? "data-placement=\"top\" " : "";
+                 html += " >" + this.icon(act.icon) + "</button> ";
+              }
+              html += "</div>\n";
+              html += "<div class=\"status-spin\"><i class=\"icon-spinner icon-spin\" ng-show=\"statusSearchSpin == true\"></i></div>\n";
+          }
+          for (var fld in this.form.statusFields) {
+              field = this.form.statusFields[fld];
+              html += this.buildField(fld, field, options);
+          }
+          html += "</div><!-- well -->\n";
+       }
+
        if (this.form.fieldsAsHeader) {
           html += "<div class=\"well\">\n";
           html += "<form class=\"form-inline\" name=\"" + this.form.name + "_form\" id=\"" + this.form.name + "\" novalidate >\n";
@@ -517,15 +541,6 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           }
        }
 
-       if ((!this.modal && this.form.statusFields)) {
-          // Add status fields section (used in Jobs form)
-          html += "<div class=\"well\">\n";
-          for (var fld in this.form.statusFields) {
-              field = this.form.statusFields[fld];
-              html += this.buildField(fld, field, options);
-          }
-          html += "</div><!-- well -->\n";
-       }
 
        if ((!this.modal && this.form.items)) {
           for (itm in this.form.items) {

ansibleworks/ui/static/lib/ansible/list-generator.js

@@ -146,6 +146,7 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
                     html += "<button " + this.attr(list.actions[action], 'ngClick') + 
                             "class=\"btn btn-small " + list.actions[action].class + "\" ";
                     html += (list.actions[action].awToolTip) ? this.attr(list.actions[action],'awToolTip') : "";
+                    html += (list.actions[action].awToolTip) ? "data-placement=\"top\" " : "";
                     html += " >" + this.icon(list.actions[action].icon) + "</button> ";
                  }
               }