External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-04 19:18:13 -03:30
Code Issues Packages Projects Releases Wiki 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
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', { 'InventoryStatusForm', {
name: 'inventory_update', name: 'inventory_update',
editTitle: 'Inventory Status', editTitle: 'Inventory Status',
well: false, well: false,
'class': 'horizontal-narrow', 'class': 'horizontal-narrow',
fields: { fields: {
license_error: { license_error: {
type: 'alertblock', type: 'alertblock',
'class': "alert-info", 'class': 'alert-info',
alertTxt: "The invenvtory update process exceeded the available number of licensed hosts. " + alertTxt: 'The invenvtory update process exceeded the available number of licensed hosts. ' +
"<strong><a ng-click=\"viewLicense()\" href=\"\">View your license</a></strong> " + '<strong><a ng-click=\"viewLicense()\" href=\"\">View your license</a></strong> ' +
"for more information.", 'for more information.',
ngShow: 'license_error', ngShow: 'license_error',
closeable: false closeable: true
}, },
created: { created: {
label: 'Created', label: 'Created',
type: 'text', type: 'text',
readonly: true readonly: true
}, },
status: { status: {
label: 'Status', label: 'Status',
type: 'text', type: 'text',
readonly: true readonly: true,
'class': 'nowrap mono-space resizable',
rows: '{{ status_rows }}'
}, },
result_stdout: { result_stdout: {
label: 'Std Out', label: 'Std Out',
type: 'textarea', type: 'textarea',
ngShow: "result_stdout", ngShow: 'result_stdout',
'class': 'nowrap mono-space resizable',
readonly: true, readonly: true,
rows: 15 rows: '{{ stdout_rows }}'
}, },
result_traceback: { result_traceback: {
label: 'Traceback', label: 'Traceback',
type: 'textarea', type: 'textarea',
ngShow: "result_traceback", ngShow: 'result_traceback',
'class': 'nowrap mono-space resizable',
readonly: true, readonly: true,
rows: 15 rows: '{{ traceback_rows }}'
} }
} }
}); //Form }); //Form

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

@@ -19,7 +19,7 @@ angular.module('JobSummaryDefinition', [])
//label: 'Job Status', //label: 'Job Status',
type: 'custom', type: 'custom',
control: '<div class=\"job-detail-status\"><span style="padding-right: 15px; font-weight: bold;">Status</span> ' + 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 readonly: true
}, },
created: { created: {
@@ -28,23 +28,23 @@ angular.module('JobSummaryDefinition', [])
readonly: true readonly: true
}, },
result_stdout: { result_stdout: {
label: 'Standard Out', label: 'Standard Out',
type: 'textarea', type: 'textarea',
readonly: true, readonly: true,
xtraWide: true, xtraWide: true,
rows: "\{\{ stdout_rows \}\}", rows: '{{ stdout_rows }}',
"class": 'nowrap mono-space resizable', 'class': 'nowrap mono-space resizable',
ngShow: "result_stdout != ''" ngShow: 'result_stdout != ""'
}, },
result_traceback: { result_traceback: {
label: 'Traceback', label: 'Traceback',
type: 'textarea', type: 'textarea',
xtraWide: true, xtraWide: true,
readonly: true, readonly: true,
rows: "\{\{ traceback_rows \}\}", rows: '{{ traceback_rows }}',
"class": 'nowrap mono-space resizable', 'class': 'nowrap mono-space resizable',
ngShow: "result_traceback != ''" 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 group_id = params.group_id;
var parent_scope = params.parent_scope; 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 == ''){ if (last_update == undefined || last_update == null || last_update == ''){
Wait('stop'); Wait('stop');
Alert('Missing Configuration', 'The selected group is not configured for inventory sync. ' + Alert('Missing Configuration', 'The selected group is not configured for inventory sync. ' +
'Edit the group and provide Source information.', 'alert-info'); 'Edit the group and provide Source information.', 'alert-info');
} }
else { 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() { html = "<div id=\"status-modal-dialog\" title=\"" + group_name + "- Inventory Sync\">\n" +
WatchInventoryWindowResize(); "<div id=\"form-container\" style=\"width: 100%;\"></div></div>\n";
}
$('#inventory-modal-container').empty().append(html);
if (scope.removeUpdateStatusReady) { scope = generator.inject(form, { mode: 'edit', id: 'form-container', breadCrumbs: false, related: false });
scope.removeUpdateStatusReady();
// 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) { else if (ww <= 1199 && ww >= 768) {
scope.formModalActionLabel = 'OK'; x = 550;
scope.formModalCancelShow = false; y = (620 > wh) ? wh - 15 : 620;
scope.formModalInfo = false; maxrows = 12;
scope.formModalHeader = group_name + '<span class="subtitle"> - Inventory Sync</span>'; }
$('#form-modal').modal('show'); else {
Wait('stop'); 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.setUrl(last_update);
Rest.get() Rest.get()
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
@@ -1142,8 +1189,11 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
} }
} }
} }
scope.license_error = license_error; scope.license_error = license_error;
scope.$emit('UpdateStatusReady'); 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) { .error( function(data, status, headers, config) {
$('#form-modal').modal("hide"); $('#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; break;
case 'failed': case 'failed':
toolTip = 'Some tasks encountered errors.'; toolTip = 'Some tasks encountered errors.';
break; break;
case 'canceled': case 'canceled':
toolTip = 'Stopped by user request.'; toolTip = 'Stopped by user request.';
break; break;
case 'new': case 'new':
@@ -37,7 +37,7 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
break; break;
} }
return toolTip; return toolTip;
} };
}]) }])
.factory('ShowJobSummary', ['Rest', 'Wait', 'GetBasePath', 'FormatDate', 'ProcessErrors', 'GenerateForm', 'JobSummary', .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 // 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); $('#inventory-modal-container').empty().append(html);
var scope = generator.inject(form, { mode: 'edit', id: 'form-container', breadCrumbs: false, related: false }); var scope = generator.inject(form, { mode: 'edit', id: 'form-container', breadCrumbs: false, related: false });
// Set modal dimensions based on viewport width // Set modal dimensions based on viewport width
var ww = $(document).width(); var ww = $(document).width();
var wh = $('body').height(); var wh = $('body').height();
var x, y, maxrows; var x, y, maxrows;
if (ww > 1199) { if (ww > 1199) {
@@ -81,31 +82,32 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
// Create the modal // Create the modal
$('#status-modal-dialog').dialog({ $('#status-modal-dialog').dialog({
buttons: { "OK": function() { $( this ).dialog( "close" ); } }, buttons: { 'OK': function() { $( this ).dialog( 'close' ); } },
modal: true, modal: true,
width: x, width: x,
height: y, height: y,
autoOpen: false, autoOpen: false,
create: function (e, ui) { create: function () {
// fix the close button // 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 // fix the OK button
$('.ui-dialog[aria-describedby="status-modal-dialog"]').find('.ui-dialog-buttonset button:first') $('.ui-dialog[aria-describedby="status-modal-dialog"]').find('.ui-dialog-buttonset button:first')
.attr({ 'class': 'btn btn-primary' }); .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% // 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 dialog = $('.ui-dialog[aria-describedby="status-modal-dialog"]');
var content = dialog.find('#status-modal-dialog'); var content = dialog.find('#status-modal-dialog');
content.width( dialog.width() - 28 ); content.width( dialog.width() - 28 );
}, },
close: function(e, ui) { close: function() {
// Destroy on close // Destroy on close
$('.tooltip').each( function(index) { $('.tooltip').each( function() {
// Remove any lingering tooltip <div> elements // Remove any lingering tooltip <div> elements
$(this).remove(); $(this).remove();
}); });
$('.popover').each(function(index) { $('.popover').each(function() {
// remove lingering popover <div> elements // remove lingering popover <div> elements
$(this).remove(); $(this).remove();
}); });
@@ -113,7 +115,7 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
$('#inventory-modal-container').empty(); $('#inventory-modal-container').empty();
WatchInventoryWindowResize(); WatchInventoryWindowResize();
}, },
open: function(e, ui) { open: function() {
Wait('stop'); Wait('stop');
} }
}); });
@@ -126,24 +128,25 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
Wait('start'); Wait('start');
var url = GetBasePath('jobs') + job_id + '/'; var url = GetBasePath('jobs') + job_id + '/';
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
.success( function(data, status, headers, config) { .success( function(data) {
scope.id = data.id; scope.id = data.id;
scope.name = data.name; scope.name = data.name;
scope.status = data.status; scope.status = data.status;
scope.result_stdout = data.result_stdout; scope.result_stdout = data.result_stdout;
scope.result_traceback = data.result_traceback; scope.result_traceback = data.result_traceback;
scope['stdout_rows'] = calcRows(scope['result_stdout']); scope.stdout_rows = calcRows(scope.result_stdout);
scope['traceback_rows'] = calcRows(scope['result_traceback']); scope.traceback_rows = calcRows(scope.result_traceback);
var cDate = new Date(data.created); var cDate = new Date(data.created);
scope.created = FormatDate(cDate); scope.created = FormatDate(cDate);
$('#status-modal-dialog').dialog('open'); $('#status-modal-dialog').dialog('open');
}) })
.error( function(data, status, headers, config) { .error( function(data, status) {
ProcessErrors(scope, data, status, null, ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Attempt to load job failed. GET returned status: ' + status }); { 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') { if (field.type == 'alertblock') {
html += "<div class=\"row\">\n"; 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 += "<div class=\"alert";
html += (field.closeable == undefined || field.closeable == true) ? " alert-dismissable" : ""; html += (field.closeable == undefined || field.closeable == true) ? " alert-dismissable" : "";
html += (field['class']) ? " " + field['class'] : ""; html += (field['class']) ? " " + field['class'] : "";