Summary section slides in and out based on screen width. When screen less than 1240px the summary section hides and a button is presented allowing user to view summary panel as an overlayor slide-in panel. Fixed handling of websocket connection indicator tool-tip.

awx/ui/static/js/app.js

@@ -510,16 +510,16 @@ angular.module('Tower', [
                 setTimeout(function() {
                     $rootScope.$apply(function() {
                         sock.checkStatus();
-                        $rootScope.$emit('SocketErrorEncountered');
+                        //$rootScope.$emit('SocketErrorEncountered');
                         $log.debug('socket status: ' + $rootScope.socketStatus);
                     });
-                });
+                },2000);
                 sock.on("status_changed", function(data) {
                     $rootScope.$emit('JobStatusChange', data);
                 });
             }
             openSocket();
-
+            /*
             $rootScope.socketToggle = function() {
                 switch($rootScope.socketStatus) {
                     case 'ok':
@@ -534,6 +534,6 @@ angular.module('Tower', [
                         $rootScope.socketTip = '';
                         setTimeout(openSocket, 500);
                 }
-            };
+            };*/
         }
     ]);

awx/ui/static/js/controllers/JobDetail.js

@@ -258,10 +258,18 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
         if (ww < 1240) {
             $('#job-summary-container').hide();
             $('#job-detail-container').css({ "width": "100%", "padding-right": "15px" });
+            $('#summary-button').show();
         }
         else {
+            $('.overlay').hide();
+            $('#summary-button').hide();
+            $('#hide-summary-button').hide();
             $('#job-detail-container').css({ "width": "58.33333333%", "padding-right": "7px" });
-            $('#job-summary-container').show();
+            $('#job-summary-container .job_well').css({
+                'box-shadow': 'none',
+                'height': 'auto'
+            });
+            $('#job-summary-container').css({ "width": "41.66666667%", "padding-right": "15px" }).show();
         }
     }
     $(document).ready(function() {
@@ -272,6 +280,35 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
         adjustSize();
     }, 500));
 
+    $scope.toggleSummary = function(hide) {
+        var docw, doch, height = $('#job-detail-container').height();
+        if (!hide) {
+            docw = $(window).width();
+            doch = $(window).height();
+            $('#summary-button').hide();
+            $('.overlay').css({
+                width: $(document).width(),
+                height: $(document).height()
+            }).show();
+            $('#job-summary-container .job_well').height(height - 18).css({
+                'box-shadow': '-3px 3px 5px 0 #ccc'
+            });
+            $('#hide-summary-button').show();
+            $('#job-summary-container').css({
+                top: 0,
+                right: 0,
+                width: '75%',
+                'z-index': 2000,
+                'padding-right': '15px'
+            }).show('slide', {'direction': 'right'});
+        }
+        else {
+            $('.overlay').hide();
+            $('#summary-button').show();
+            $('#job-summary-container').hide('slide', {'direction': 'right'});
+        }
+    };
+
     $scope.HostDetailOnTotalScroll = function(mcs) {
         var url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask;
         url += '&host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=5&order_by=host__name';
@@ -388,6 +425,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                         msg: 'Call to ' + url + '. GET returned: ' + status });
                 });
         }
+        scope.auto_scroll = false;
     };
 
     $scope.HostSummaryOnTotalScrollBack = function(mcs) {

awx/ui/static/less/job-details.less

@@ -101,6 +101,17 @@
 
 
 
+#summary-button {
+    position: absolute;
+    top: 5px;
+    right: 20px;
+    z-index: 100;
+}
+
+#hide-summary-button {
+    margin-bottom: 15px;
+}
+
 .section {
     margin-bottom: 20px;
     h5 {
@@ -249,6 +260,7 @@
     }
     .table-header {
         font-size: 12px;
+        padding-right: 18px;
     }
     .table-detail {
         height: 200px;

awx/ui/static/lib/ansible/Socket.js

@@ -20,27 +20,21 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                 protocol = $location.protocol(),
                 url = protocol + '://' + host + ':8080/socket.io/' + endpoint;
 
-            if (scope.removeSocketErrorEncountered) {
+            function getSocketTip(status) {
-                scope.removeSocketErrorEncountered();
+                var result = '';
-            }
+                switch(status) {
-            scope.removeSocketErrorEncountered = scope.$on('socketStatusChange', function() {
-                switch(scope.socketStatus) {
                     case 'error':
-                        scope.socketTip = "There was an error connecting to the websocket server. Click for troubleshooting help.";
+                        result = "There was an error connecting to the websocket server. Click for troubleshooting help.";
                         break;
                     case 'connecting':
-                        scope.socketTip = "Attempting to connect to the websocket server. Click for troubleshooting help.";
+                        result = "Attempting to connect to the websocket server. Click for troubleshooting help.";
                         break;
                     case "ok":
-                        scope.socketTip = "Connected to the websocket server. Pages containing job status information for playbook runs, SCM updates and inventory " +
+                        result = "Connected to the websocket server. Pages containing job status information for playbook runs, SCM updates and inventory " +
                             "sync processes will automatically update in real-time.";
                 }
-                /*else if (scope.socketStatus === 'error') {
+                return result;
-                    Alert("Connection Error", "Error encountered while attempting to connect to the websocket server. Confirm the server " +
+            }
-                        "is up. Use the <i class=\"fa fa-power-off\"></i> button found on the Inventories, Projects and Jobs pages to reconnect.",
-                        "alert-danger");
-                }*/
-            });
 
             return {
                 scope: scope,
@@ -67,14 +61,14 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                             $log.debug('Socket connecting...');
                             self.scope.$apply(function () {
                                 self.scope.socketStatus = 'connecting';
-                                self.scope.$emit('socketStatusChange');
+                                self.scope.socketTip = getSocketTip(self.scope.socketStatus);
                             });
                         });
                         self.socket.on('connect', function() {
                             $log.debug('Socket connection established');
                             self.scope.$apply(function () {
                                 self.scope.socketStatus = 'ok';
-                                self.scope.$emit('socketStatusChange');
+                                self.scope.socketTip = getSocketTip(self.scope.socketStatus);
                             });
                         });
                         self.socket.on('connect_failed', function(reason) {
@@ -82,7 +76,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                             $log.error('Socket connection failed: ' + r);
                             self.scope.$apply(function () {
                                 self.scope.socketStatus = 'error';
-                                self.scope.$emit('socketStatusChange');
+                                self.scope.socketTip = getSocketTip(self.scope.socketStatus);
                             });
 
                         });
@@ -90,7 +84,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                             $log.debug('Socket disconnected');
                             self.scope.$apply(function() {
                                 self.socketStatus = 'error';
-                                self.scope.$emit('socketStatusChange');
+                                self.scope.socketTip = getSocketTip(self.scope.socketStatus);
                             });
                         });
                         self.socket.on('error', function(reason) {
@@ -98,28 +92,28 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                             $log.debug('Socket error: ' + r);
                             self.scope.$apply(function() {
                                 self.scope.socketStatus = 'error';
-                                self.scope.$emit('socketStatusChange');
+                                self.scope.socketTip = getSocketTip(self.scope.socketStatus);
                             });
                         });
                         self.socket.on('reconnecting', function() {
                             $log.debug('Socket attempting reconnect...');
                             self.scope.$apply(function() {
                                 self.scope.socketStatus = 'connecting';
-                                self.scope.$emit('socketStatusChange');
+                                self.scope.socketTip = getSocketTip(self.scope.socketStatus);
                             });
                         });
                         self.socket.on('reconnect', function() {
                             $log.debug('Socket reconnected');
                             self.scope.$apply(function() {
                                 self.scope.socketStatus = 'ok';
-                                self.scope.$emit('socketStatusChange');
+                                self.scope.socketTip = getSocketTip(self.scope.socketStatus);
                             });
                         });
                         self.socket.on('reconnect_failed', function(reason) {
                             $log.error('Socket reconnect failed: ' + reason);
                             self.scope.$apply(function() {
                                 self.scope.socketStatus = 'error';
-                                self.scope.$emit('socketStatusChange');
+                                self.scope.socketTip = getSocketTip(self.scope.socketStatus);
                             });
                         });
                     }
@@ -144,7 +138,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                         $log.debug('Socket error: connection refused');
                         self.scope.socketStatus = 'error';
                     }
-                    self.scope.$emit('socketStatusChange');
+                    self.scope.socketTip = getSocketTip(self.scope.socketStatus);
                     return self.scope.socketStatus;
                 },
                 on: function (eventName, callback) {

awx/ui/static/partials/job_detail.html

@@ -2,7 +2,7 @@
     <div ng-cloak id="htmlTemplate">
         
         <div class="row">
-            <div id="breadcrumb-container" class="col-md-12">
+            <div id="breadcrumb-container" class="col-md-12" style="position: relative;">
                 <div class="nav-path">
                     <ul class="breadcrumb" id="breadcrumb-list">
                         <li><a href="/#/jobs">Jobs</a></li>
@@ -15,7 +15,9 @@
         
         <div class="row" style="position: relative;">
             <div id="job-detail-container">
-
+                <div id="summary-button" style="display: hidden;">
+                    <a href="" class="btn btn-xs btn-default" ng-click="toggleSummary()" aw-tool-tip="View hosts summary" data-placement="top"><i class="fa fa-arrow-circle-left fa-lg"></i></a>
+                </div>
                 <div class="job_well">
                     <div class="row status-row">
                         <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Status</div>
@@ -126,10 +128,13 @@
                 
                 </div><!-- well -->
 
-            </div><!-- col-md-7 -->
+            </div><!-- job-detail-container -->
 
             <div id="job-summary-container">
                 <div class="job_well">
+                    <div id="hide-summary-button" style="display: hidden;">
+                        <a href="" class="btn btn-xs btn-default" ng-click="toggleSummary('hide')" aw-tool-tip="Hide hosts summary" data-placement="top"><i class="fa fa-arrow-circle-right fa-lg"></i></a>
+                    </div>
                     <div id="hosts-summary-section" class="section job_summary">
                         <div class="header">
                             <div class="title">Host Summary</div>