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.

2026-01-16 20:30:46 -03:30 · 2013-06-19 13:03:17 -04:00 · 2013-06-19 13:03:17 -04:00 · 6b8deab753
commit 6b8deab753
parent 11e16dfdfc
9 changed files with 110 additions and 41 deletions
--- a/ansibleworks/ui/static/css/ansible-ui.css
+++ b/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;
+}
--- a/ansibleworks/ui/static/js/app.js
+++ b/ansibleworks/ui/static/js/app.js
@ -53,7 +53,8 @@ angular.module('ansible', [
    'GroupsHelper',
    'HostsHelper',
    'ParseHelper',
-    'ChildrenHelper'
+    'ChildrenHelper',
+    'EventsHelper'
     ])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
--- a/ansibleworks/ui/static/js/controllers/JobEvents.js
+++ b/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) {
-       $location.path($location.path() + '/' + id);
+    scope.viewJobEvent = function(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, 
-                        GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath) 
+function JobEventsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, GenerateForm,
+                        Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath) 
 {
   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                //scope.
--- a/ansibleworks/ui/static/js/forms/JobEvents.js
+++ b/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
                } 
--- a/ansibleworks/ui/static/js/helpers/Events.js
+++ b/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();
+        }
+        
+        }
+        }]);
--- a/ansibleworks/ui/static/js/helpers/Groups.js
+++ b/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);

--- a/ansibleworks/ui/static/js/helpers/Hosts.js
+++ b/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);
        
--- a/ansibleworks/ui/static/js/lists/JobEvents.js
+++ b/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'
--- a/ansibleworks/ui/templates/ui/index.html
+++ b/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>