AC-232 Now able to view raw JSON as well.

awx/ui/static/css/ansible-ui.css

@@ -613,6 +613,10 @@
    width: 460px;
  }
 
+ .modal-input-xxxlarge {
+   width: 98%;
+ }
+
  .form-section-title {
    font-weight: bold;
    width: 100%;

awx/ui/static/js/app.js

@@ -50,7 +50,7 @@ angular.module('ansible', [
     'JobsListDefinition',
     'JobFormDefinition',
     'JobEventsListDefinition',
-    'JobModalEventDefinition',
+    'JobEventDataDefinition',
     'JobHostDefinition',
     'GroupsHelper',
     'HostsHelper',

awx/ui/static/js/forms/JobEventData.js

@@ -1,14 +1,14 @@
 /*********************************************
  *  Copyright (c) 2013 AnsibleWorks, Inc.
  *
- *  JobModalEvent.js
+ *  JobEventData.js
- *  Form definition for Job Events model
+ *  Form definition for Job Events -JSON view
  *
  *  
  */
-angular.module('JobModalEventDefinition', [])
+angular.module('JobEventDataDefinition', [])
     .value(
-    'JobModalEventForm', {
+    'JobEventDataForm', {
         
         editTitle: '{{ id }} - {{ event_display }}',                         //Legend in edit mode
         name: 'job_events',
@@ -17,19 +17,12 @@ angular.module('JobModalEventDefinition', [])
 
         fields: {
             event_data: {
-                label: 'Event Data',
+                label: false,
                 type: 'textarea',
                 readonly: true,
-                rows: 10,
+                rows: 18,
-                'class': 'modal-input-xlarge'
+                'class': 'modal-input-xxxlarge'
                 } 
-            },
-
-        buttons: {
-            },
-
-        related: { //related colletions (and maybe items?)   
             }
             
     }); //Form
-

awx/ui/static/js/helpers/Events.js

@@ -6,16 +6,20 @@
  *  EventView - show the job_events form in a modal dialog
  *
  */
-angular.module('EventsHelper', ['RestServices', 'Utilities'])
+angular.module('EventsHelper', ['RestServices', 'Utilities', 'JobEventDataDefinition'])
 .factory('EventView', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GenerateForm', 
-         'Prompt', 'ProcessErrors', 'GetBasePath', 'FormatDate',
+         'Prompt', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'JobEventDataForm',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GenerateForm, Prompt, ProcessErrors, GetBasePath,
-          FormatDate) {
+          FormatDate, JobEventDataForm) {
     return function(params) {
         
-        // We're going to manipulate the form object each time user clicks on View button. We can't rely on what's
+        // We're going to manipulate the form object each time the user clicks on View button. We can't rely on what's
         // left of the form in memory each time. Instead we have to define the form from scratch, so for now we're
-        // keeping it here inline rather than in a separate file.
+        // keeping it here inline rather than a separate file.
+        //
+        // Form manipulation is done to remove any empty values. In order for a section (or accordion) to not be drawn,
+        // it needs to be removed prior to call jqueryui. Otherwise, attempting to hide accordion pieces after the 
+        // the accordion is rendered creates undesired behavior.
         var form = {
             name: 'job_events',
             well: false,
@@ -163,7 +167,7 @@ angular.module('EventsHelper', ['RestServices', 'Utilities'])
         Rest.get()
             .success( function(data, status, headers, config) {
                 
-                // If event_data is not available or not very useful
+                // If event_data is not available, removed fields that depend on it
                 if ($.isEmptyObject(data['event_data']) || !data['event_data']['res'] || typeof data['event_data']['res'] == 'string') {
                    for (var fld in form.fields) {
                        switch(fld) {
@@ -182,7 +186,8 @@ angular.module('EventsHelper', ['RestServices', 'Utilities'])
                        }
                    }
                 }
-                else if (typeof data['event_data']['res'] != 'string') {
+                
+                if ($.isEmptyObject(data['event_data']) || !data['event_data']['res'] || typeof data['event_data']['res'] != 'string') {
                    delete form.fields['traceback'];
                 }
                 
@@ -257,16 +262,33 @@ angular.module('EventsHelper', ['RestServices', 'Utilities'])
                     }
                 scope.formModalActionLabel = 'OK';
                 scope.formModalCancelShow = false;
+                scope.formModalInfo = 'View JSON';
                 $('#form-modal .btn-success').removeClass('btn-success').addClass('btn-none');
                 $('#form-modal').addClass('skinny-modal');
-
                 scope.formModalHeader = data['event_display'].replace(/^\u00a0*/g,'');
                 
+                // Respond to View JSON button
+                scope.formModalInfoAction = function() {
+                    var generator = GenerateForm;
+                    var scope = generator.inject(JobEventDataForm, { mode: 'edit', modal: true, related: false, 
+                        modal_selector: '#form-modal2', modal_body_id: 'form-modal2-body' });
+                    generator.reset();
+                    scope.formModal2Action = function() {
+                        $('#form-modal2').modal("hide");
+                        }
+                    scope.formModal2ActionLabel = 'OK';
+                    scope.formModal2CancelShow = false;
+                    scope.formModal2Info = false;
+                    $('#form-modal2 .btn-success').removeClass('btn-success').addClass('btn-none');
+                    //$('#form-modal2').addClass('skinny-modal');
+                    scope.formModal2Header = data['event_display'].replace(/^\u00a0*/g,'');
+                    scope.event_data = JSON.stringify(data['event_data'], null, '\t');
+                    }
+
                 if (typeof data['event_data']['res'] == 'string') {
                    scope['traceback'] = data['event_data']['res'];
                 }
-
+                
-                //scope.event_data = JSON.stringify(data['event_data'], null, '\t');
                 for (var fld in form.fields) {
                     switch(fld) {
                         case 'status':

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

@@ -32,7 +32,13 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        //
        var element;
        if (options.modal) {
-          element = angular.element(document.getElementById('form-modal-body'));
+          if (options.modal_body_id) {
+             element = angular.element(document.getElementById(options.modal_body_id));
+          }
+          else {
+             // use default dialog
+             element = angular.element(document.getElementById('form-modal-body'));
+          }
        }
        else {
           element = angular.element(document.getElementById('htmlTemplate'));
@@ -56,10 +62,17 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        }
 
        if (options.modal) {
-          this.scope.formHeader = (options.mode == 'add') ? form.addTitle : form.editTitle;
+          this.scope.formHeader = (options.mode == 'add') ? form.addTitle : form.editTitle;  //Default title for default modal
+          this.scope.formModalInfo = false  //Disable info button for default modal
           $('.popover').remove();  //remove any lingering pop-overs
-          $('#form-modal').removeClass('skinny-modal'); //Used in job_events to remove white space
+          if (options.modal_selector) {
-          $('#form-modal').modal({ backdrop: 'static', keyboard: false });
+             $(options.modal_selector).removeClass('skinny-modal'); //Used in job_events to remove white space
+             $(options.modal_selector).modal({ backdrop: 'static', keyboard: false });
+          }
+          else {
+             $('#form-modal').removeClass('skinny-modal'); //Used in job_events to remove white space
+             $('#form-modal').modal({ backdrop: 'static', keyboard: false });
+          }
        }
        return this.scope;
        },

awx/ui/templates/ui/index.html

@@ -56,7 +56,7 @@
   <script src="{{ STATIC_URL }}js/forms/Jobs.js"></script>
   <script src="{{ STATIC_URL }}js/forms/Projects.js"></script>
   <script src="{{ STATIC_URL }}js/forms/Permissions.js"></script>
-  <script src="{{ STATIC_URL }}js/forms/JobModalEvent.js"></script>
+  <script src="{{ STATIC_URL }}js/forms/JobEventData.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Users.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Organizations.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Admins.js"></script>
@@ -188,11 +188,28 @@
       </div>
       <div class="modal-body" id="form-modal-body"></div>
       <div class="modal-footer">
+        <a href="" ng-bind="formModalInfo" ng-show="formModalInfo !== undefined && formModalInfo != ''" ng-click="formModalInfoAction()" 
+            class="btn btn-small pull-left"></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-primary"></a>
       </div>
     </div>
 
+    <div id="form-modal2" class="modal hide">
+      <div class="modal-header">
+        <button type="button" class="close" data-target="#alert-modal" 
+                        data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h3 ng-bind="formModal2Header"></h3>
+      </div>
+      <div class="modal-body" id="form-modal2-body"></div>
+      <div class="modal-footer">
+        <a href="" ng-bind="formModal2Info" ng-show="formModal2Info !== undefined && formModal2Info != ''" ng-click="formModal2InfoAction()" 
+            class="btn btn-small pull-left"></a>
+        <a href="#" ng-show="formModal2CancelShow" data-target="#form-modal2" data-dismiss="modal" class="btn btn">Cancel</a>
+        <a href="" ng-bind="formModal2ActionLabel" ng-click="formModal2Action()" class="btn btn-primary"></a>
+      </div>
+    </div>
+
     <!-- Alerts/error handling dialogs -->
     <div id="alert-modal" class="modal hide">
       <div class="modal-header">