From 042e15f109865609d9a290fcf72c5943a9624f50 Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Thu, 1 May 2014 14:29:08 -0400
Subject: [PATCH] Adjust table heights based on actual viewport height. Summary
 flyout now accounts for viewport width and goes 100% on width < 840px.

---
 awx/ui/static/js/controllers/JobDetail.js | 29 +++++++++++++++++++----
 awx/ui/static/js/helpers/JobDetail.js     | 22 +++++++++--------
 awx/ui/static/less/job-details.less       | 10 +++++++-
 awx/ui/templates/ui/index.html            |  2 --
 4 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js
index f786c202f0..93bca739fa 100644
--- a/awx/ui/static/js/controllers/JobDetail.js
+++ b/awx/ui/static/js/controllers/JobDetail.js
@@ -254,7 +254,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
     // Use debounce from the underscore library. We're including underscore
     // for the timezone stuff, so might as well take advantage of it.
     function adjustSize() {
-        var ww = $(window).width();
+        var height, ww = $(window).width();
         if (ww < 1240) {
             $('#job-summary-container').hide();
             $('#job-detail-container').css({ "width": "100%", "padding-right": "15px" });
@@ -271,6 +271,23 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
             });
             $('#job-summary-container').css({ "width": "41.66666667%", "padding-right": "15px", "z-index": 0 }).show();
         }
+
+        // Adjust page height
+        $('#plays-table-detail').height(150);
+        $('#plays-table-detail').mCustomScrollbar("update");
+        $('#tasks-table-detail').height(150);
+        $('#tasks-table-detail').mCustomScrollbar("update");
+        $('#hosts-table-detail').height(150);
+        $('#hosts-table-detail').mCustomScrollbar("update");
+        height = ($('#wrap').height() - $('.site-footer').height()) - $('.main-container').height() - 22;
+        if (height > 15) {
+            $('#plays-table-detail').height(150 + (height / 3));
+            $('#plays-table-detail').mCustomScrollbar("update");
+            $('#tasks-table-detail').height(150 + (height / 3));
+            $('#tasks-table-detail').mCustomScrollbar("update");
+            $('#hosts-table-detail').height(150 + (height / 3));
+            $('#hosts-table-detail').mCustomScrollbar("update");
+        }
     }
     $(document).ready(function() {
         adjustSize();
@@ -281,10 +298,11 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
     }, 500));
 
     $scope.toggleSummary = function(hide) {
-        var docw, doch, height = $('#job-detail-container').height();
+        var docw, doch, height = $('#job-detail-container').height(), slide_width;
         if (!hide) {
             docw = $(window).width();
             doch = $(window).height();
+            slide_width = (docw < 840) ? '100%' : '80%';
             $('#summary-button').hide();
             $('.overlay').css({
                 width: $(document).width(),
@@ -297,9 +315,10 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
             $('#job-summary-container').css({
                 top: 0,
                 right: 0,
-                width: '75%',
+                width: slide_width,
                 'z-index': 2000,
-                'padding-right': '15px'
+                'padding-right': '15px',
+                'padding-left': '15px'
             }).show('slide', {'direction': 'right'});
         }
         else {
@@ -373,7 +392,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                                 scope.hostResults.pop();
                             }
                         });
-                        //$('#hosts-table-detail').mCustomScrollbar("update");
+                        $('#hosts-table-detail').mCustomScrollbar("update");
                         if (data.next) {
                             // there are more rows. move dragger down, letting user know.
                             setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 10) + 'px' }); }, 700);
diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js
index 7d2161d0bb..72ee32a5a3 100644
--- a/awx/ui/static/js/helpers/JobDetail.js
+++ b/awx/ui/static/js/helpers/JobDetail.js
@@ -695,16 +695,18 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
         Rest.get()
             .success(function(data) {
                 var i;
-                for (i = data.results.length - 1; i >=0; i--) {
-                    scope.hostResults.push({
-                        id: data.results[i].id,
-                        status: ( (data.results[i].failed) ? 'failed' : (data.results[i].changed) ? 'changed' : 'successful' ),
-                        host_id: data.results[i].host,
-                        task_id: data.results[i].parent,
-                        name: data.results[i].summary_fields.host.name,
-                        created: data.results[i].created,
-                        msg: data.results[i].event_data.res.msg
-                    });
+                if (data.results.length > 0) {
+                    for (i = data.results.length - 1; i >=0; i--) {
+                        scope.hostResults.push({
+                            id: data.results[i].id,
+                            status: ( (data.results[i].failed) ? 'failed' : (data.results[i].changed) ? 'changed' : 'successful' ),
+                            host_id: data.results[i].host,
+                            task_id: data.results[i].parent,
+                            name: data.results[i].event_data.host,
+                            created: data.results[i].created,
+                            msg: ( (data.results[i].event_data && data.results[i].event_data.res) ? data.results[i].event_data.res.msg : '' )
+                        });
+                    }
                 }
                 Wait('stop');
                 SelectHost({ scope: scope });
diff --git a/awx/ui/static/less/job-details.less b/awx/ui/static/less/job-details.less
index 67de01dcb4..8375210bc0 100644
--- a/awx/ui/static/less/job-details.less
+++ b/awx/ui/static/less/job-details.less
@@ -180,7 +180,10 @@
     background-color: @white; 
     .row {
         border-top: 1px solid @grey;
-    } 
+    }
+    .row:first-child {
+        border: none;
+    }
     /*.row:nth-child(odd) {
         background-color: @well;
         padding-top: 0;
@@ -189,6 +192,11 @@
     .active {
         background-color: #EDF2F2;
     }
+
+    .loading-info {
+        padding-top: 5px;
+        padding-left: 3px;
+    }
 }
 
 .status-column i {
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index 86aca40924..d3087380e6 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -359,8 +359,6 @@
 
   <div class="overlay"></div>
   <div class="spinny"><i class="fa fa-cog fa-spin fa-2x"></i> <p>working...</p></div>
-
-  <div id="push"></div>
 </div>
 
 <div class="navbar navbar-inverse site-footer fade-in">