Merge pull request #258 from jlmitch5/jlm_62_put_socket_in_menu_bar

put socket status in menu bar

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

@@ -8,6 +8,7 @@ export default function() {
 
             scope.$on('$destroy', function() {
                 contents.remove();
+                $(".MenuItem--socketStatus").remove();
             });
         }
     };

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

@@ -10,7 +10,8 @@
 <a menu-item link-to="jobs" title="Jobs" class="MenuItem">
     Jobs
 </a>
-<a link-to="userEdit" model="{ user_id: currentUser }" class="MenuItem MenuItem--right MenuItem--fixed MenuItem-username">
+<web-socket-status class="MenuItem MenuItem--socketStatus MenuItem--right MenuItem--fixed"></web-socket-status>
+<a link-to="userEdit" model="{ user_id: currentUser }" class="MenuItem MenuItem--right MenuItem--fixed MenuItem--username">
   <i class="MenuItem-icon MenuItem-icon--labelled">
     <aw-icon name="User"></aw-icon>
   </i>

awx/ui/static/js/main-menu/menu-item.block.less

@@ -118,13 +118,20 @@
       }
   }
 
-  &-username {
+  &--socketStatus {
+      @media screen and (max-width: @menu-breakpoint) {
+          display: none;
+      }
+  }
+
+  &--username {
       padding-right: 0.25rem;
       @media screen and (max-width: @menu-breakpoint) {
           order: 1; // moves this to the bottom
       }
       @media screen and (min-width: (@menu-breakpoint + 1px)) {
           max-width: 110px;
+          margin-left: -3px;
       }
   }
 

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

@@ -1,7 +1,8 @@
 <a href="#portal" title="Portal" class="MenuItem MenuItem--hoverable">
     Portal
 </a>
-<a link-to="userEdit" model="{ user_id: currentUser }" class="MenuItem MenuItem--right MenuItem--fixed MenuItem-username">
+<web-socket-status class="MenuItem MenuItem--socketStatus MenuItem--right MenuItem--fixed"></web-socket-status>
+<a link-to="userEdit" model="{ user_id: currentUser }" class="MenuItem MenuItem--fixed MenuItem-username">
   <i class="MenuItem-icon MenuItem-icon--labelled">
     <aw-icon name="User"></aw-icon>
   </i>

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

@@ -8,8 +8,8 @@ export default function() {
 
             scope.$on('$destroy', function() {
                 contents.remove();
+                $(".MenuItem--socketStatus").remove();
             });
         }
     };
 }
-

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

@@ -1,13 +1,10 @@
 <button
-    ng-click="socketHelp()"
+    aw-tool-tip="{{socketTip}}"
-    aw-pop-over="{{socketTip}}"
+    tip-watch="socketTip"
-    aw-pop-over-watch="socketTip"
+    data-placement="bottom"
-    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>
-

awx/ui/static/js/shared/Socket.js

@@ -51,10 +51,10 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                 var result = '';
                 switch(status) {
                     case 'error':
-                        result = "Live events: error connecting to the Tower server. Click for troubleshooting help.";
+                        result = "Live events: error connecting to the Tower server.";
                         break;
                     case 'connecting':
-                        result = "Live events: attempting to connect to the Tower server. Click for troubleshooting help.";
+                        result = "Live events: attempting to connect to the Tower server.";
                         break;
                     case "ok":
                         result = "Live events: connected. Pages containing job status information will automatically update in real-time.";

awx/ui/static/js/shared/directives.js

@@ -485,7 +485,8 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                     html: true,
                     title: attrs.awToolTip,
                     container: 'body',
-                    trigger: 'hover focus'
+                    trigger: 'hover focus',
+                    template: '<div class="Tooltip tooltip" role="tooltip"><div class="Tooltip-arrow tooltip-arrow"></div><div class="Tooltip-inner tooltip-inner"></div></div>'
                 });
 
                 if (attrs.tipWatch) {

awx/ui/static/js/tooltip/tooltip.block.less

@@ -0,0 +1,7 @@
+/** @define Tooltip */
+
+@import "shared/branding/colors.less";
+.Tooltip-inner {
+    white-space: pre-wrap;
+    word-break: break-word;
+}

awx/ui/templates/ui/index.html

@@ -36,12 +36,6 @@
   </main-menu>
 
   <div class="container-fluid">
-    <div class="row">
-      <div class="col-lg-11"></div>
-      <div class="col-lg-1" style="display: flex;">
-        <web-socket-status style="margin-left: auto;"></web-socket-status>
-      </div>
-    </div>
     <div class="container-fluid" id="#content-container">
       <div class="row">
           <div class="col-lg-12">