Job stdout sockets and menu title

Added monitoring and restart of the socket connections on the stdout page. Added a title to the main nav that displays when the menu collapses.

awx/ui/static/js/app.js

@@ -442,13 +442,23 @@ angular.module('Tower', [
 
             function activateTab() {
                 // Make the correct tab active
-                var base = $location.path().replace(/^\//, '').split('/')[0];
+                var base = $location.path().replace(/^\//, '').split('/')[0],
+                    urlDepth = $location.path().replace(/^\//, '').split('/').length;
+
                 if (base === '') {
                     base = 'home';
                 } else {
                     //base.replace(/\_/g, ' ');
                     base = (base === 'job_events' || base === 'job_host_summaries') ? 'jobs' : base;
                 }
+
+                if (urlDepth === 1 && base !== 'home') {
+                    $('#ansible-list-title').html('<strong>' + base.replace(/\_/,' ') + '</strong>');
+                }
+                else {
+                    $('#ansible-list-title').empty();
+                }
+
                 $('#ansible-main-menu li').each(function() {
                     $(this).removeClass('active');
                 });

awx/ui/static/js/controllers/JobStdout.js

@@ -25,44 +25,65 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
         page_size = 500,
         lastScrollTop = 0,
         st,
-        direction;
+        direction,
+        checkCount = 0;;
 
-    status_socket = Socket({
+
-        scope: $scope,
+    function openSockets() {
-        endpoint: "jobs"
+        status_socket = Socket({
-    });
+            scope: $scope,
-    status_socket.init();
+            endpoint: "jobs"
-    status_socket.on("status_changed", function(data) {
+        });
-        if (parseInt(data.unified_job_id, 10) === parseInt(job_id,10) && $scope.job) {
+        status_socket.init();
-            $scope.job.status = data.status;
+        status_socket.on("status_changed", function(data) {
-            if (data.status === 'failed' || data.status === 'canceled' ||
+            if (parseInt(data.unified_job_id, 10) === parseInt(job_id,10) && $scope.job) {
-                    data.status === 'error' || data.status === 'successful') {
+                $scope.job.status = data.status;
-                if ($rootScope.jobStdOutInterval) {
+                if (data.status === 'failed' || data.status === 'canceled' ||
-                    window.clearInterval($rootScope.jobStdOutInterval);
+                        data.status === 'error' || data.status === 'successful') {
-                }
+                    if ($rootScope.jobStdOutInterval) {
-                if (live_event_processing) {
+                        window.clearInterval($rootScope.jobStdOutInterval);
-                    if (loaded_sections.length === 0) {
-                        $scope.$emit('LoadStdout');
                     }
-                    else {
+                    if (live_event_processing) {
-                        getNextSection();
+                        if (loaded_sections.length === 0) {
+                            $scope.$emit('LoadStdout');
+                        }
+                        else {
+                            getNextSection();
+                        }
                     }
+                    live_event_processing = false;
                 }
-                live_event_processing = false;
             }
-        }
+        });
-    });
+        event_socket = Socket({
+            scope: $scope,
+            endpoint: "job_events"
+        });
+        event_socket.init();
+        event_socket.on("job_events-" + job_id, function() {
+            if (api_complete) {
+                event_queue++;
+            }
+        });
+    }
+    openSockets();
 
-    event_socket = Socket({
+    $rootScope.checkSocketConnectionInterval = setInterval(function() {
-        scope: $scope,
+        if (status_socket.checkStatus() === 'error' || checkCount > 2) {
-        endpoint: "job_events"
+            // there's an error or we're stuck in a 'connecting' state. attempt to reconnect
-    });
+            $log.debug('stdout page: initializing and restarting socket connections');
-    event_socket.init();
+            status_socket = null;
-    event_socket.on("job_events-" + job_id, function() {
+            event_socket = null;
-        if (api_complete) {
+            openSockets();
-            event_queue++;
+            checkCount = 0;
         }
-    });
+        else if (status_socket.checkStatus() === 'connecting') {
+            checkCount++;
+        }
+        else {
+            checkCount = 0;
+        }
+    }, 3000);
 
     $rootScope.jobStdOutInterval = setInterval( function() {
         if (event_queue > 0) {

awx/ui/static/js/controllers/Jobs.js

@@ -21,7 +21,7 @@ function JobsListController ($rootScope, $log, $scope, $compile, $routeParams, C
         api_complete = false,
         schedule_socket,
         job_socket,
-        max_rows, checkCount;
+        max_rows, checkCount=0;
 
     function openSockets() {
         job_socket = Socket({

awx/ui/static/less/main-layout.less

@@ -16,7 +16,7 @@ html {
 body {
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
-    padding-top: 60px;
+    padding-top: 75px;
     color: @black;
 }
 
@@ -46,6 +46,10 @@ body {
     }
 }
 
+#ansible-list-title {
+    display: none;
+}
+
 #content-container {
     margin-top: 40px;
 }
@@ -73,6 +77,14 @@ body {
             display: block;
         }
     }
+    #ansible-list-title {
+        display: inline-block;
+        position: relative;
+        top: 1px;
+        left: 10px;
+        color: @black;
+        text-transform:capitalize;
+    }
     #account-menu {
         display: none;
     }

awx/ui/templates/ui/index.html

@@ -13,7 +13,6 @@
   <link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/lib/codemirror.css" />
   <link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/theme/elegant.css" />
   <link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/addon/lint/lint.css" />
-  <!-- link rel="stylesheet" href="{{ STATIC_URL }}lib/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" -->
   <link rel="stylesheet" href="{{ STATIC_URL }}lib/novus-nvd3/nv.d3.css"  type="text/css">
 
   {% if settings.USE_MINIFIED_JS %}
@@ -199,10 +198,11 @@
                       <span class="icon-bar"></span>
                     </button>
                     <a class="navbar-brand" href="#home"><img id="ansible-brand-logo" src="{{ STATIC_URL }}img/tower2-logominimal.png" /></a>
+                    <div id="ansible-list-title"></div> <!-- title to show on list pages when menu collapses. value set in app.js -->
                 </div>
                 <div class="navbar-collapse collapse" id="main-navbar-collapse">
                     <ul class="nav navbar-nav" id="ansible-main-menu">
-                        <!--<li id="home" class="active"><a href="#home" id="main_home_link" >Home</a></li>-->
+                        <!-- <li id="home" class="active"><a href="#home" id="main_home_link" >Home</a></li> -->
                         <li id="organizations"><a href="#organizations" id="main_organizations_link">Organizations</a></li>
                         <li id="users"><a href="#users" id="main_users_link">Users</a></li>
                         <li id="teams"><a href="#teams" id="main_teams_link">Teams</a></li>