mirror of
https://github.com/ansible/awx.git
synced 2024-11-02 09:51:09 +03:00
Fixed inventory sync status dialog to use jqueryui dialog- making it draggable and resizable.
This commit is contained in:
Chris Houseknecht
parent
6c2b8358a0
commit
5cb6c22fc8
@ -18,12 +18,12 @@ angular.module('InventoryStatusDefinition', [])
|
||||
fields: {
|
||||
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',
|
||||
@ -33,21 +33,25 @@ angular.module('InventoryStatusDefinition', [])
|
||||
status: {
|
||||
label: 'Status',
|
||||
type: 'text',
|
||||
readonly: true
|
||||
readonly: true,
|
||||
'class': 'nowrap mono-space resizable',
|
||||
rows: '{{ status_rows }}'
|
||||
},
|
||||
result_stdout: {
|
||||
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',
|
||||
type: 'textarea',
|
||||
ngShow: "result_traceback",
|
||||
ngShow: 'result_traceback',
|
||||
'class': 'nowrap mono-space resizable',
|
||||
readonly: true,
|
||||
rows: 15
|
||||
rows: '{{ traceback_rows }}'
|
||||
}
|
||||
}
|
||||
}); //Form
|
||||
@ -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: {
|
||||
@ -32,18 +32,18 @@ angular.module('JobSummaryDefinition', [])
|
||||
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 != ""'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
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;
|
||||
}
|
||||
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();
|
||||
}
|
||||
|
||||
scope.cancelModal = function() {
|
||||
WatchInventoryWindowResize();
|
||||
}
|
||||
|
||||
if (scope.removeUpdateStatusReady) {
|
||||
scope.removeUpdateStatusReady();
|
||||
}
|
||||
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');
|
||||
},
|
||||
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) {
|
||||
@ -1143,7 +1190,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
|
||||
}
|
||||
}
|
||||
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) {
|
||||
$('#form-modal').modal("hide");
|
||||
|
||||
@ -37,7 +37,7 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
|
||||
break;
|
||||
}
|
||||
return toolTip;
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.factory('ShowJobSummary', ['Rest', 'Wait', 'GetBasePath', 'FormatDate', 'ProcessErrors', 'GenerateForm', 'JobSummary',
|
||||
@ -53,7 +53,8 @@ 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 });
|
||||
@ -81,31 +82,32 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
|
||||
|
||||
// Create the modal
|
||||
$('#status-modal-dialog').dialog({
|
||||
buttons: { "OK": function() { $( this ).dialog( "close" ); } },
|
||||
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');
|
||||
}
|
||||
});
|
||||
@ -128,22 +130,23 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
|
||||
var url = GetBasePath('jobs') + job_id + '/';
|
||||
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.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 });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
}]);
|
||||
|
||||
|
||||
@ -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'] : "";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user