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

awx/ui/static/js/forms/InventoryStatus.js

@@ -18,12 +18,12 @@ angular.module('InventoryStatusDefinition', [])
         fields: {
             license_error: {
                 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',
-                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

awx/ui/static/js/forms/JobSummary.js

@@ -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 \}\}",
+                rows: '{{ stdout_rows }}',
-                "class": 'nowrap mono-space resizable',
+                'class': 'nowrap mono-space resizable',
-                ngShow: "result_stdout != ''"
+                ngShow: 'result_stdout != ""'
                 },
             result_traceback: {
                 label: 'Traceback',
                 type: 'textarea',
                 xtraWide: 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 != ""'
                 }
         }
         

awx/ui/static/js/helpers/Groups.js

@@ -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() {
+            html = "<div id=\"status-modal-dialog\" title=\"" + group_name + "- Inventory Sync\">\n" + 
-                $('#form-modal').modal("hide");
+                "<div id=\"form-container\" style=\"width: 100%;\"></div></div>\n";
-                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() {
+            $('#inventory-modal-container').empty().append(html);
-                WatchInventoryWindowResize();
+            scope = generator.inject(form, { mode: 'edit', id: 'form-container', breadCrumbs: false, related: false });
-                }
     
-            if (scope.removeUpdateStatusReady) {
+            // Set modal dimensions based on viewport width
-                scope.removeUpdateStatusReady();
+            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.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");

awx/ui/static/js/helpers/Jobs.js

@@ -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.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);
                 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 });
                 });
-        }
+        };
+
         }]);
 

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

@@ -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'] : "";