From 52b676f0be22ff09dc02db20610c90b3a454ae0d Mon Sep 17 00:00:00 2001
From: Joe Fiorini <joe@joefiorini.com>
Date: Thu, 30 Apr 2015 12:58:22 -0400
Subject: [PATCH] Move web socket status indicator into directive

---
 awx/ui/static/js/app.js                          | 12 +-----------
 .../static/js/main-menu/main-menu.partial.html   |  1 +
 awx/ui/static/js/main-menu/main.js               |  2 ++
 .../js/main-menu/web-socket-status.directive.js  | 16 ++++++++++++++++
 .../js/main-menu/web-socket-status.partial.html  | 13 +++++++++++++
 5 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 awx/ui/static/js/main-menu/web-socket-status.directive.js
 create mode 100644 awx/ui/static/js/main-menu/web-socket-status.partial.html

diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js
index 1bddad24fc..b7848c93cc 100644
--- a/awx/ui/static/js/app.js
+++ b/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() {
diff --git a/awx/ui/static/js/main-menu/main-menu.partial.html b/awx/ui/static/js/main-menu/main-menu.partial.html
index 4c7ec3e335..e395133195 100644
--- a/awx/ui/static/js/main-menu/main-menu.partial.html
+++ b/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>
diff --git a/awx/ui/static/js/main-menu/main.js b/awx/ui/static/js/main-menu/main.js
index 8af8db94ea..4674e6fbd3 100644
--- a/awx/ui/static/js/main-menu/main.js
+++ b/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);
diff --git a/awx/ui/static/js/main-menu/web-socket-status.directive.js b/awx/ui/static/js/main-menu/web-socket-status.directive.js
new file mode 100644
index 0000000000..844c129464
--- /dev/null
+++ b/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;
+            });
+        }
+    };
+}]
diff --git a/awx/ui/static/js/main-menu/web-socket-status.partial.html b/awx/ui/static/js/main-menu/web-socket-status.partial.html
new file mode 100644
index 0000000000..3d3ee3f15d
--- /dev/null
+++ b/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>
+