shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-02 09:51:09 +03:00
Code Releases Activity

Fixed inventory sync status dialog to use jqueryui dialog- making it draggable and resizable.

Browse Source
This commit is contained in:
Chris Houseknecht 2014-02-04 16:59:19 +00:00
parent 6c2b8358a0
commit 5cb6c22fc8
5 changed files with 135 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
awx/ui/static/js/forms/InventoryStatus.js
View File

@ -11,43 +11,47 @@ angular.module('InventoryStatusDefinition', [])
'InventoryStatusForm', {
name: 'inventory_update',
editTitle: 'Inventory Status',
editTitle: 'Inventory Status',
well: false,
'class': 'horizontal-narrow',
fields: {
license_error: {
license_error: {
type: 'alertblock',
'class': "alert-info",
alertTxt: "The invenvtory update process exceeded the available number of licensed hosts. " +
"<strong><a ng-click=\"viewLicense()\" href=\"\">View your license</a></strong> " +
"for more information.",
'class': 'alert-info',
alertTxt: 'The invenvtory update process exceeded the available number of licensed hosts. ' +
'<strong><a ng-click=\"viewLicense()\" href=\"\">View your license</a></strong> ' +
'for more information.',
ngShow: 'license_error',
closeable: false
closeable: true
},
created: {
label: 'Created',
label: 'Created',
type: 'text',
readonly: true
},
status: {
label: 'Status',
type: 'text',
readonly: true
readonly: true,
'class': 'nowrap mono-space resizable',
rows: '{{ status_rows }}'
},
result_stdout: {
label: 'Std Out',
label: 'Std Out',
type: 'textarea',
ngShow: "result_stdout",
ngShow: 'result_stdout',
'class': 'nowrap mono-space resizable',
readonly: true,
rows: 15
rows: '{{ stdout_rows }}'
},
result_traceback: {
label: 'Traceback',
label: 'Traceback',
type: 'textarea',
ngShow: "result_traceback",
ngShow: 'result_traceback',
'class': 'nowrap mono-space resizable',
readonly: true,
rows: 15
rows: '{{ traceback_rows }}'
}
}
}); //Form

18
awx/ui/static/js/forms/JobSummary.js
View File

@ -19,7 +19,7 @@ angular.module('JobSummaryDefinition', [])
//label: 'Job Status',
type: 'custom',
control: '<div class=\"job-detail-status\"><span style="padding-right: 15px; font-weight: bold;">Status</span> ' +
'<i class=\"fa icon-job-\{\{ status \}\}\"></i> \{\{ status \}\}</div>',
'<i class=\"fa icon-job-{{ status }}\"></i> {{ status }}</div>',
readonly: true
},
created: {
@ -28,23 +28,23 @@ angular.module('JobSummaryDefinition', [])
readonly: true
},
result_stdout: {
label: 'Standard Out',
label: 'Standard Out',
type: 'textarea',
readonly: true,
xtraWide: true,
rows: "\{\{ stdout_rows \}\}",
"class": 'nowrap mono-space resizable',
ngShow: "result_stdout != ''"
rows: '{{ stdout_rows }}',
'class': 'nowrap mono-space resizable',
ngShow: 'result_stdout != ""'
},
result_traceback: {
label: 'Traceback',
type: 'textarea',
xtraWide: true,
readonly: true,
rows: "\{\{ traceback_rows \}\}",
"class": 'nowrap mono-space resizable',
ngShow: "result_traceback != ''"
}
rows: '{{ traceback_rows }}',
'class': 'nowrap mono-space resizable',
ngShow: 'result_traceback != ""'
}
}
});

108
awx/ui/static/js/helpers/Groups.js
View File

@ -1093,42 +1093,89 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
var group_id = params.group_id;
var parent_scope = params.parent_scope;
var maxrows, html, scope, ww, wh, x, y;
function calcRows (content) {
var n, rows;
n = content.match(/\n/g);
rows = (n) ? n.length : 1;
return (rows > maxrows) ? maxrows : rows;
}
if (last_update == undefined || last_update == null || last_update == ''){
Wait('stop');
Alert('Missing Configuration', 'The selected group is not configured for inventory sync. ' +
'Edit the group and provide Source information.', 'alert-info');
}
else {
var scope = generator.inject(form, { mode: 'edit', modal: true, related: false, showModal: false });
generator.reset();
scope.formModalAction = function() {
$('#form-modal').modal("hide");
if (parent_scope && parent_scope.showHosts && !Empty(tree_id)) {
if (parent_scope.selected_tree_id !== tree_id) {
parent_scope.showHosts(tree_id, group_id, false);
}
}
WatchInventoryWindowResize();
}
scope.cancelModal = function() {
WatchInventoryWindowResize();
}
if (scope.removeUpdateStatusReady) {
scope.removeUpdateStatusReady();
html = "<div id=\"status-modal-dialog\" title=\"" + group_name + "- Inventory Sync\">\n" +
"<div id=\"form-container\" style=\"width: 100%;\"></div></div>\n";
$('#inventory-modal-container').empty().append(html);
scope = generator.inject(form, { mode: 'edit', id: 'form-container', breadCrumbs: false, related: false });
// Set modal dimensions based on viewport width
ww = $(document).width();
wh = $('body').height();
x, y, maxrows;
if (ww > 1199) {
// desktop
x = 675;
y = (750 > wh) ? wh - 20 : 750;
maxrows = 18;
}
scope.removeUpdateStatusReady = scope.$on('UpdateStatusReady', function(e) {
scope.formModalActionLabel = 'OK';
scope.formModalCancelShow = false;
scope.formModalInfo = false;
scope.formModalHeader = group_name + '<span class="subtitle"> - Inventory Sync</span>';
$('#form-modal').modal('show');
Wait('stop');
else if (ww <= 1199 && ww >= 768) {
x = 550;
y = (620 > wh) ? wh - 15 : 620;
maxrows = 12;
}
else {
x = (ww - 20);
y = (500 > wh) ? wh : 500;
maxrows = 10;
}
// Create the modal
$('#status-modal-dialog').dialog({
buttons: { "OK": function() { $( this ).dialog( "close" ); } },
modal: true,
width: x,
height: y,
autoOpen: false,
create: function (e, ui) {
// fix the close button
$('.ui-dialog[aria-describedby="status-modal-dialog"]').find('.ui-dialog-titlebar button')
.empty().attr({ 'class': 'close' }).text('x');
// fix the OK button
$('.ui-dialog[aria-describedby="status-modal-dialog"]').find('.ui-dialog-buttonset button:first')
.attr({ 'class': 'btn btn-primary' });
},
resizeStop: function(e, ui) {
// for some reason, after resizing dialog the form and fields (the content) doesn't expand to 100%
var dialog = $('.ui-dialog[aria-describedby="status-modal-dialog"]');
var content = dialog.find('#status-modal-dialog');
content.width( dialog.width() - 28 );
},
close: function(e, ui) {
// Destroy on close
$('.tooltip').each( function(index) {
// Remove any lingering tooltip <div> elements
$(this).remove();
});
$('.popover').each(function(index) {
// remove lingering popover <div> elements
$(this).remove();
});
$('#status-modal-dialog').dialog('destroy');
$('#inventory-modal-container').empty();
WatchInventoryWindowResize();
},
open: function(e, ui) {
Wait('stop');
}
});
// Retrieve detail record and prepopulate the form
Rest.setUrl(last_update);
Rest.get()
.success( function(data, status, headers, config) {
@ -1142,8 +1189,11 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
}
}
scope.license_error = license_error;
scope.$emit('UpdateStatusReady');
scope.license_error = license_error;
scope.status_rows = calcRows(data.status);
scope.stdout_rows = calcRows(data.result_stdout);
scope.traceback_rows = calcRows(data.result_traceback);
$('#status-modal-dialog').dialog('open');
})
.error( function(data, status, headers, config) {
$('#form-modal').modal("hide");

47
awx/ui/static/js/helpers/Jobs.js
View File

@ -19,8 +19,8 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
break;
case 'failed':
toolTip = 'Some tasks encountered errors.';
break;
case 'canceled':
break;
case 'canceled':
toolTip = 'Stopped by user request.';
break;
case 'new':
@ -37,7 +37,7 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
break;
}
return toolTip;
}
};
}])
.factory('ShowJobSummary', ['Rest', 'Wait', 'GetBasePath', 'FormatDate', 'ProcessErrors', 'GenerateForm', 'JobSummary',
@ -53,13 +53,14 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
// Using jquery dialog for its expandable property
var html = "<div id=\"status-modal-dialog\" title=\"Job " + job_id + "\"><div id=\"form-container\" style=\"width: 100%;\"></div></div>\n";
var html = '<div id=\"status-modal-dialog\" title=\"Job ' + job_id + '\">' +
'<div id=\"form-container\" style=\"width: 100%;\"></div></div>\n';
$('#inventory-modal-container').empty().append(html);
var scope = generator.inject(form, { mode: 'edit', id: 'form-container', breadCrumbs: false, related: false });
// Set modal dimensions based on viewport width
var ww = $(document).width();
var ww = $(document).width();
var wh = $('body').height();
var x, y, maxrows;
if (ww > 1199) {
@ -81,31 +82,32 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
// Create the modal
$('#status-modal-dialog').dialog({
buttons: { "OK": function() { $( this ).dialog( "close" ); } },
modal: true,
width: x,
buttons: { 'OK': function() { $( this ).dialog( 'close' ); } },
modal: true,
width: x,
height: y,
autoOpen: false,
create: function (e, ui) {
create: function () {
// fix the close button
$('.ui-dialog[aria-describedby="status-modal-dialog"]').find('.ui-dialog-titlebar button').empty().attr({ 'class': 'close' }).text('x');
$('.ui-dialog[aria-describedby="status-modal-dialog"]').find('.ui-dialog-titlebar button')
.empty().attr({ 'class': 'close' }).text('x');
// fix the OK button
$('.ui-dialog[aria-describedby="status-modal-dialog"]').find('.ui-dialog-buttonset button:first')
.attr({ 'class': 'btn btn-primary' });
},
resizeStop: function(e, ui) {
resizeStop: function() {
// for some reason, after resizing dialog the form and fields (the content) doesn't expand to 100%
var dialog = $('.ui-dialog[aria-describedby="status-modal-dialog"]');
var content = dialog.find('#status-modal-dialog');
content.width( dialog.width() - 28 );
},
close: function(e, ui) {
close: function() {
// Destroy on close
$('.tooltip').each( function(index) {
$('.tooltip').each( function() {
// Remove any lingering tooltip <div> elements
$(this).remove();
});
$('.popover').each(function(index) {
$('.popover').each(function() {
// remove lingering popover <div> elements
$(this).remove();
});
@ -113,7 +115,7 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
$('#inventory-modal-container').empty();
WatchInventoryWindowResize();
},
open: function(e, ui) {
open: function() {
Wait('stop');
}
});
@ -126,24 +128,25 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
Wait('start');
var url = GetBasePath('jobs') + job_id + '/';
Rest.setUrl(url);
Rest.setUrl(url);
Rest.get()
.success( function(data, status, headers, config) {
.success( function(data) {
scope.id = data.id;
scope.name = data.name;
scope.status = data.status;
scope.status = data.status;
scope.result_stdout = data.result_stdout;
scope.result_traceback = data.result_traceback;
scope['stdout_rows'] = calcRows(scope['result_stdout']);
scope['traceback_rows'] = calcRows(scope['result_traceback']);
scope.stdout_rows = calcRows(scope.result_stdout);
scope.traceback_rows = calcRows(scope.result_traceback);
var cDate = new Date(data.created);
scope.created = FormatDate(cDate);
$('#status-modal-dialog').dialog('open');
})
.error( function(data, status, headers, config) {
.error( function(data, status) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Attempt to load job failed. GET returned status: ' + status });
});
}
};
}]);

4
awx/ui/static/lib/ansible/form-generator.js
View File

@ -517,7 +517,9 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
if (field.type == 'alertblock') {
html += "<div class=\"row\">\n";
html += "<div class=\"col-lg-8 col-lg-offset-2\">\n";
html += "<div class=\"";
html += (options.modal || options.id) ? "col-lg-12" : "col-lg-8 col-lg-offset-2";
html += "\">\n";
html += "<div class=\"alert";
html += (field.closeable == undefined || field.closeable == true) ? " alert-dismissable" : "";
html += (field['class']) ? " " + field['class'] : "";