diff --git a/awx/ui/static/css/ansible-ui.css b/awx/ui/static/css/ansible-ui.css
index 18162b2e43..e1246c999e 100644
--- a/awx/ui/static/css/ansible-ui.css
+++ b/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%;
diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js
index 8619f1405d..4cd380d9a5 100644
--- a/awx/ui/static/js/app.js
+++ b/awx/ui/static/js/app.js
@@ -50,7 +50,7 @@ angular.module('ansible', [
'JobsListDefinition',
'JobFormDefinition',
'JobEventsListDefinition',
- 'JobModalEventDefinition',
+ 'JobEventDataDefinition',
'JobHostDefinition',
'GroupsHelper',
'HostsHelper',
diff --git a/awx/ui/static/js/forms/JobModalEvent.js b/awx/ui/static/js/forms/JobEventData.js
similarity index 57%
rename from awx/ui/static/js/forms/JobModalEvent.js
rename to awx/ui/static/js/forms/JobEventData.js
index 803abeb2f6..718f51ab8f 100644
--- a/awx/ui/static/js/forms/JobModalEvent.js
+++ b/awx/ui/static/js/forms/JobEventData.js
@@ -1,14 +1,14 @@
/*********************************************
* Copyright (c) 2013 AnsibleWorks, Inc.
*
- * JobModalEvent.js
- * Form definition for Job Events model
+ * JobEventData.js
+ * 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,
- 'class': 'modal-input-xlarge'
+ rows: 18,
+ 'class': 'modal-input-xxxlarge'
}
- },
-
- buttons: {
- },
-
- related: { //related colletions (and maybe items?)
}
}); //Form
-
diff --git a/awx/ui/static/js/helpers/Events.js b/awx/ui/static/js/helpers/Events.js
index eaca5d71a5..13de0f6e95 100644
--- a/awx/ui/static/js/helpers/Events.js
+++ b/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':
diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js
index 7d154adaf4..05d8e2de05 100644
--- a/awx/ui/static/lib/ansible/form-generator.js
+++ b/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
- $('#form-modal').modal({ backdrop: 'static', keyboard: false });
+ if (options.modal_selector) {
+ $(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;
},
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index 1f571dc8c9..31a434d25d 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -56,7 +56,7 @@
-
+
@@ -188,11 +188,28 @@
+
+