Move web socket status indicator into directive

awx/ui/static/js/app.js

@@ -937,7 +937,7 @@ var tower = angular.module('Tower', [
         LoadConfig, Store, ShowSocketHelp, AboutAnsibleHelp, ConfigureTower, CreateCustomInventory) {
 
 
-            var html, e, sock;
+            var sock;
 
             function activateTab() {
                 // Make the correct tab active
@@ -985,16 +985,6 @@ var tower = angular.module('Tower', [
                     $rootScope.removeOpenSocket();
                 }
                 $rootScope.removeOpenSocket = $rootScope.$on('OpenSocket', function() {
-                    html = "<a href=\"\" ng-hide=\"socketStatus === 'ok'\" ng-click=\"socketHelp()\" aw-pop-over=\"{{ socketTip }}\" aw-pop-over-watch=\"socketTip\" data-placement=\"bottom\" data-trigger=\"hover\" " +
-                    "data-popover-title=\"Live Events\" data-container=\"body\" style=\"font-size: 10px;\"><i class=\"fa icon-socket-{{ socketStatus }}\"></i></a>";
-                    e = angular.element(document.getElementById('socket-beacon-div'));
-                    e.empty().append(html);
-                    $compile(e)($rootScope);
-
-                    e = angular.element(document.getElementById('socket-beacon-li'));
-                    e.empty().append(html);
-                    $compile(e)($rootScope);
-
                     // Listen for job changes and issue callbacks to initiate
                     // DOM updates
                     function openSocket() {

awx/ui/static/js/main-menu/main-menu.partial.html

@@ -4,4 +4,5 @@
         <menu-toggle-button width="15" height="15" bar-height="2"></menu-toggle-button>
     </a>
     <include-partial ng-include="menuStylePartialUrl"></include-partial>
+    <web-socket-status class="MenuItem MenuItem--fixed"></web-socket-status>
 </nav>

awx/ui/static/js/main-menu/main.js

@@ -2,6 +2,7 @@ import mainMenu from './main-menu.directive';
 import menuItem from './menu-item.directive';
 import menuToggle from './menu-toggle.directive';
 import portalModeLink from './portal-mode-link.directive';
+import webSocketStatus from './web-socket-status.directive';
 
 import includePartial from 'tower/shared/include-partial/main';
 
@@ -10,4 +11,5 @@ export default
         .directive('portalModeLink', portalModeLink)
         .directive('menuItem', menuItem)
         .directive('menuToggleButton', menuToggle)
+        .directive('webSocketStatus', webSocketStatus)
         .directive('mainMenu', mainMenu);

awx/ui/static/js/main-menu/web-socket-status.directive.js

@@ -0,0 +1,16 @@
+export default ['$rootScope', function($rootScope) {
+    return {
+        restrict: 'E',
+        templateUrl: '/static/js/main-menu/web-socket-status.partial.html',
+        link: function(scope, element, attrs) {
+            scope.socketHelp = $rootScope.socketHelp;
+            scope.socketTip = $rootScope.socketTip;
+            $rootScope.$watch('socketStatus', function(newStatus) {
+                scope.socketStatus = newStatus;
+            });
+            $rootScope.$watch('socketTip', function(newTip) {
+                scope.socketTip = newTip;
+            });
+        }
+    };
+}]

awx/ui/static/js/main-menu/web-socket-status.partial.html

@@ -0,0 +1,13 @@
+<button
+    ng-click="socketHelp()"
+    aw-pop-over="{{socketTip}}"
+    aw-pop-over-watch="socketTip"
+    data-popover-title="Live Events"
+    data-placement="left"
+    data-trigger="hover"
+    data-container="body"
+    class="Button--pseudo"
+    ng-if="socketStatus !== 'ok'">
+    <i class="fa icon-socket-{{socketStatus}}"></i>
+</button>
+