Job Event detail is now displayed in a modal dialog. Inside all modal dialogs displaying a form, reduced amount of space given to field labels and expanded amount of space given to text area fields.

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

@@ -403,10 +403,6 @@
    margin-left: 5px;
  }
 
- .modal-input-xlarge {
-   width: 325px;
- }
-
  #tree-view {
     min-height: 100px;
  }
@@ -453,4 +449,30 @@
 
  #job-event-host-header {
     min-width: 200px;
- }
+ }
+
+
+
+/* form displayed in modal window */
+
+.modal .form-horizontal .control-label {
+  float: left;
+  width: 80px;
+  padding-top: 5px;
+  text-align: right;
+}
+
+.modal .form-horizontal .controls {
+  *display: inline-block;
+  *padding-left: 20px;
+  margin-left: 100px;
+  *margin-left: 0;
+}
+
+.modal .form-horizontal .controls:first-child {
+  *padding-left: 100px;
+}
+
+.modal-input-xlarge {
+   width: 400px;
+}

ansibleworks/ui/static/js/app.js

@@ -53,7 +53,8 @@ angular.module('ansible', [
     'GroupsHelper',
     'HostsHelper',
     'ParseHelper',
-    'ChildrenHelper'
+    'ChildrenHelper',
+    'EventsHelper'
      ])
     .config(['$routeProvider', function($routeProvider) {
         $routeProvider.

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

@@ -12,7 +12,7 @@
 
 function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, JobEventList,
                         GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller,
-                        ClearScope, ProcessErrors, GetBasePath, LookUpInit, ToggleChildren)
+                        ClearScope, ProcessErrors, GetBasePath, LookUpInit, ToggleChildren, EventView)
 {
     ClearScope('htmlTemplate');
     var list = JobEventList;
@@ -59,25 +59,10 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
 
     LoadBreadCrumbs();
     
-    scope.editJobEvent = function(id) {
+    scope.viewJobEvent = function(id) {
-       $location.path($location.path() + '/' + id);
+       EventView({"event_id": id });
        }
 
-    scope.viewHost = function(id) {
-        if (id !== undefined && id !== null) {
-            Rest.setUrl(GetBasePath('jobs') + $routeParams.id + '/'); 
-            Rest.get()
-                .success( function(data, status, headers, config) {
-                    LoadBreadCrumbs({ path: '/inventories/' + data.inventory, title: data.summary_fields.inventory.name });
-                    $location.path('/inventories/' + data.inventory + /hosts/ + id);
-                    })
-                .error( function(data, status, headers, config) {
-                    ProcessErrors(scope, data, status, null,
-                       { hdr: 'Error!', msg: 'Failed to lookup job record for job ' + $routeParams.id + ' GET returned status: ' + status });
-                    });
-            };
-        }
-
     scope.refresh = function() {
        scope.search(list.iterator);
        }
@@ -94,11 +79,11 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
 
 JobEventsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobEventList',
                            'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
-                           'ProcessErrors','GetBasePath', 'LookUpInit', 'ToggleChildren'
+                           'ProcessErrors','GetBasePath', 'LookUpInit', 'ToggleChildren', 'EventView'
                            ];
 
-function JobEventsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, 
+function JobEventsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, GenerateForm,
-                        GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath) 
+                        Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.

ansibleworks/ui/static/js/forms/JobEvents.js

@@ -12,15 +12,9 @@ angular.module('JobEventFormDefinition', [])
         
         editTitle: '{{ id }} - {{ event }}',                         //Legend in edit mode
         name: 'job_events',
-        well: true,
+        well: false,
         
         fields: {
-            id: {
-                label: 'Event ID',
-                type: 'text',
-                readonly: true,
-                "class": 'span2'
-                },
             event_display: {
                 label: 'Event',
                 type: 'text',
@@ -30,7 +24,7 @@ angular.module('JobEventFormDefinition', [])
                 label: 'Created',
                 type: 'text',
                 readonly: true,
-                "class": 'span4'
+                "class": 'span3'
                 },
             host: {
                 label: 'Host',
@@ -46,7 +40,7 @@ angular.module('JobEventFormDefinition', [])
             event_data: {
                 label: 'Event Data',
                 type: 'textarea',
-                "class": 'span12',
+                "class": "modal-input-xlarge",
                 rows: 10,
                 readonly: true
                 } 

ansibleworks/ui/static/js/helpers/Events.js

@@ -0,0 +1,59 @@
+
+angular.module('EventsHelper', ['RestServices', 'Utilities', 'JobEventFormDefinition'])
+.factory('EventView', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobEventForm', 'GenerateForm', 
+         'Prompt', 'ProcessErrors', 'GetBasePath',
+    function($rootScope, $location, $log, $routeParams, Rest, Alert, JobEventForm, GenerateForm, Prompt, ProcessErrors, GetBasePath) {
+    return function(params) {
+        var event_id = params.event_id;
+        var generator = GenerateForm;
+        var form = JobEventForm;
+        var defaultUrl = GetBasePath('base') + 'job_events/' + event_id + '/';
+        var scope = generator.inject(form, { mode: 'edit', modal: true, related: false});
+        generator.reset();
+        var master = {};
+        
+        scope.formModalActionLabel = 'OK';
+        scope.formModalHeader = 'View Event';
+        scope.formModalCancelShow = false;
+
+        scope.formModalAction = function() {
+            $('#form-modal').modal("hide");
+            }
+        
+        // Retrieve detail record and prepopulate the form
+        Rest.setUrl(defaultUrl);
+        Rest.get()
+            .success( function(data, status, headers, config) {
+                for (var fld in form.fields) {
+                    if (fld == 'status') {
+                       scope['status'] = (data.failed) ? 'error' : 'success';
+                    }
+                    else if (fld == 'event_data') {
+                       scope['event_data'] = JSON.stringify(data['event_data'], undefined, '\t');
+                    }
+                    else if (fld == 'host') {
+                       if (data['summary_fields'] && data['summary_fields']['host']) {
+                          scope['host'] = data['summary_fields']['host']['name'];
+                       }
+                    }
+                    else if (fld == 'event_display') {
+                       scope['event_display'] = data.event_display.replace(/^\u00a0*/g,'')
+                    }
+                    else {
+                       if (data[fld]) {
+                          scope[fld] = data[fld];
+                       }
+                    }
+                 }
+                })
+            .error( function(data, status, headers, config) {
+                ProcessErrors(scope, data, status, form,
+                    { hdr: 'Error!', msg: 'Failed to retrieve host: ' + event_id + '. GET status: ' + status });
+                });
+       
+        if (!scope.$$phase) {
+           scope.$digest();
+        }
+        
+        }
+        }]);

ansibleworks/ui/static/js/helpers/Groups.js

@@ -34,6 +34,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
         scope.formModalActionLabel = 'Finished';
         scope.formModalHeader = 'Add Group';
+        scope.formModalCancelShow = true;
         
         $('#form-modal').modal();
 
@@ -171,6 +172,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         
         scope.formModalActionLabel = 'Save';
         scope.formModalHeader = 'Create Group';
+        scope.formModalCancelShow = true;
         scope.parseType = 'json';
         ParseTypeChange(scope);
 
@@ -263,6 +265,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
         scope.formModalActionLabel = 'Save';
         scope.formModalHeader = 'Edit Group';
+        scope.formModalCancelShow = true;
         scope.parseType = 'json';
         ParseTypeChange(scope);
 

ansibleworks/ui/static/js/helpers/Hosts.js

@@ -35,6 +35,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
 
         scope.formModalActionLabel = 'Finished';
         scope.formModalHeader = 'Add Host';
+        scope.formModalCancelShow = true;
         
         $('#form-modal').modal();
         $('#form-modal').unbind('hidden');
@@ -162,6 +163,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         
         scope.formModalActionLabel = 'Save';
         scope.formModalHeader = 'Create Host';
+        scope.formModalCancelShow = true;
         scope.parseType = 'json';
         ParseTypeChange(scope);
         
@@ -253,6 +255,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
 
         scope.formModalActionLabel = 'Save';
         scope.formModalHeader = 'Edit Host';
+        scope.formModalCancelShow = true;
         scope.parseType = 'json';
         ParseTypeChange(scope);
         

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

@@ -22,18 +22,19 @@ angular.module('JobEventsListDefinition', [])
                 label: 'Creation Date',
                 key: true,
                 nosort: true,
-                notSearchable: true
+                notSearchable: true,
+                ngClick: "viewJobEvent(\{\{ jobevent.id \}\})",
                 },
             event_display: {
                 label: 'Event',
                 hasChildren: true,
-                link: true,
+                ngClick: "viewJobEvent(\{\{ jobevent.id \}\})",
                 nosort: true,
                 notSearchable: true
                 },
             host: {
                 label: 'Host',
-                ngClick: "viewHost(\{\{ jobevent.host \}\})",
+                ngClick: "viewJobEvent(\{\{ jobevent.id \}\})",
                 ngBind: 'jobevent.summary_fields.host.name',
                 searchField: 'hosts__name',
                 nosort: true,
@@ -80,7 +81,7 @@ angular.module('JobEventsListDefinition', [])
         fieldActions: {
             edit: {
                 label: 'View',
-                ngClick: "editJobEvent(\{\{ jobevent.id \}\})",
+                ngClick: "viewJobEvent(\{\{ jobevent.id \}\})",
                 icon: 'icon-zoom-in',
                 "class": 'btn-small',
                 awToolTip: 'View event details'

ansibleworks/ui/templates/ui/index.html

@@ -74,6 +74,7 @@
   <script src="{{ STATIC_URL }}js/helpers/Groups.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/Hosts.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/Parse.js"></script>
+  <script src="{{ STATIC_URL }}js/helpers/Events.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/Children.js"></script>
   <script src="{{ STATIC_URL }}lib/ansible/directives.js"></script>
   <script src="{{ STATIC_URL }}lib/ansible/filters.js"></script>
@@ -177,7 +178,7 @@
       </div>
       <div class="modal-body" id="form-modal-body"></div>
       <div class="modal-footer">
-        <a href="#" data-target="#form-modal" data-dismiss="modal" class="btn btn">Cancel</a>
+        <a href="#" ng-show="formModalCancelShow" data-target="#form-modal" data-dismiss="modal" class="btn btn">Cancel</a>
         <a href="" ng-bind="formModalActionLabel" ng-click="formModalAction()" class="btn btn-success"></a>
       </div>
     </div>