Used the onosAuth global variable to get the username rather than the websocket service.

Change-Id: I9a13733635d526ad68e03691186247b91b7b2301

@@ -77,26 +77,101 @@ html[data-platform='iPad'] #mast {
 
 #mast-right {
     display: inline-block;
-    padding-top: 8px;
-    padding-right: 16px;
     float: right;
-    /*border: 1px solid red;*/
+    position: relative;
+    top: -4px;
+    padding-right: 15px;
+    line-height: 44px;
 }
 
-#mast-right a {
-    font-size: 12pt;
-    font-style: normal;
-    font-weight: bold;
+.light #mast-right a {
+    color: #369;
+}
+
+.dark #mast-right a {
+    color: #eee;
+}
+
+.light #mast nav  {
+    color: #369;
+}
+
+.dark #mast nav  {
+    color: #eee;
+}
+
+/*
+    MAST HEAD DROPDOWN MENU
+*/
+
+#mast .dropdown-parent {
+    position: relative;
+}
+
+#mast .dropdown-parent i.dropdown-icon {
+    display: inline-block;
+    height: 7px;
+    width: 9px;
+    margin-left: 10px;
+    background: url('/onos/ui/data/img/dropdown-icon.png') no-repeat;
+}
+
+#mast .dropdown {
+    position: absolute;
+    top: 44px;
+    right: 0;
+    display: none;
+    min-width: 100px;
+    border-top: 1px solid #999;
+    line-height: 16px;
+    z-index: 1000;
+}
+
+#mast .dropdown a {
     text-decoration: none;
+    font-size: 14px;
+    display: block;
+    padding: 8px 16px 6px 12px;
 }
 
-.light #mast-right a {
+#mast .dropdown-parent:hover .dropdown {
+    display: block;
+}
+
+#mast .dropdown-parent:hover i.dropdown-icon {
+    background-position-x: -14px
+}
+
+html[data-platform='iPad'] #mast .dropdown {
+    top: 57px;
+}
+
+/* Theme styles for drop down menu */
+
+.light #mast .dropdown {
+    background-color: #bbb;
+    box-shadow: 0 2px 8px #777;
+}
+
+.dark #mast .dropdown {
+    background-color: #444;
+    box-shadow: 0 2px 8px #111;
+}
+
+.light #mast .dropdown a {
     color: #369;
+    border-bottom: solid #ccc 1px;
 }
-.dark #mast-right a {
+
+.dark #mast .dropdown a {
     color: #eee;
+    border-bottom: solid #333 1px;
 }
 
-#mast-right a:hover {
-    color: #CE5650;
+.light #mast .dropdown a:hover {
+    background-color: #ddd;
 }
+
+.dark #mast .dropdown a:hover {
+    background-color: #777;
+}
\ No newline at end of file

@@ -3,4 +3,16 @@
      ng-click="mastCtrl.toggleNav()"></div>
 <img class="logo" src="data/img/onos-logo.png">
 <span class="title">Open Network Operating System</span>
-<div id="mast-right"><a href="rs/logout">logout</a></div>
+<div id="mast-right">
+
+    <nav>
+        <div class="dropdown-parent">
+            <a class="user-menu__name">{{user}} <i class="dropdown-icon"></i></a>
+
+            <div class="dropdown">
+                <a href="rs/logout">Logout</a>
+            </div>
+        </div>
+    </nav>
+
+</div>

@@ -33,10 +33,10 @@
         };
 
         angular.module('onosMast', ['onosNav'])
-        .controller('MastCtrl', ['$log', '$window', 'NavService',
-                                    'DialogService', 'WebSocketService',
+        .controller('MastCtrl', ['$log', '$scope', '$window', 'WebSocketService', 'NavService',
+                                    'DialogService',
 
-        function (_$log_, $window, ns, ds, wss) {
+        function (_$log_, $scope, $window, wss, ns, ds) {
             var self = this;
 
             $log = _$log_;
@@ -79,6 +79,8 @@
                 ns.toggleNav();
             };
 
+            $scope.user = onosAuth || '(no one)';
+
             $log.log('MastCtrl has been created');
         }])
 

@@ -57,6 +57,7 @@
         }
     };
 
+
     // ==========================
     // === Web socket callbacks