ONOS-2202 - GUI -- Moved flow, port, and group navigation buttons out of device details panel. Created tab-like behavior to switch between the three views when viewing any of them.

Change-Id: Ibc4291689e913a3537bd621e8e579f5e198ae5f2
diff --git a/web/gui/src/main/webapp/app/view/group/group.css b/web/gui/src/main/webapp/app/view/group/group.css
index 182f44c..cf6b9af 100644
--- a/web/gui/src/main/webapp/app/view/group/group.css
+++ b/web/gui/src/main/webapp/app/view/group/group.css
@@ -23,7 +23,21 @@
 }
 
 #ov-group div.ctrl-btns {
-    width: 45px;
+    width: 240px;
+}
+
+.light #ov-group .current-view use {
+    fill: white;
+}
+.dark #ov-group .current-view use {
+    fill: #304860;
+}
+
+.light #ov-group .current-view rect {
+    fill: deepskyblue;
+}
+.dark #ov-group .current-view rect {
+    fill: #eee;
 }
 
 .light #ov-group tr:nth-child(4n + 1),
diff --git a/web/gui/src/main/webapp/app/view/group/group.html b/web/gui/src/main/webapp/app/view/group/group.html
index a2b38e0..2b09b94 100644
--- a/web/gui/src/main/webapp/app/view/group/group.html
+++ b/web/gui/src/main/webapp/app/view/group/group.html
@@ -25,6 +25,19 @@
             <div class="refresh" ng-class="{active: autoRefresh}"
                  icon icon-size="36" icon-id="refresh"
                  ng-click="toggleRefresh()"></div>
+
+            <div class="separator"></div>
+
+            <div class="active"
+                 icon icon-id="flowTable" icon-size="36"
+                 ng-click="nav('flow')"></div>
+
+            <div class="active"
+                 icon icon-id="portTable" icon-size="36"
+                 ng-click="nav('port')"></div>
+
+            <div class="current-view"
+                 icon icon-id="groupTable" icon-size="36"></div>
         </div>
     </div>
 
diff --git a/web/gui/src/main/webapp/app/view/group/group.js b/web/gui/src/main/webapp/app/view/group/group.js
index 64b6861..b8f4d45 100644
--- a/web/gui/src/main/webapp/app/view/group/group.js
+++ b/web/gui/src/main/webapp/app/view/group/group.js
@@ -22,20 +22,21 @@
     'use strict';
 
     // injected references
-    var $log, $scope, $location, fs, tbs;
+    var $log, $scope, $location, fs, tbs, ns;
 
     angular.module('ovGroup', [])
     .controller('OvGroupCtrl',
         ['$log', '$scope', '$location', '$sce',
-            'FnService', 'TableBuilderService',
+            'FnService', 'TableBuilderService', 'NavService',
 
-        function (_$log_, _$scope_, _$location_, $sce, _fs_, _tbs_) {
+        function (_$log_, _$scope_, _$location_, $sce, _fs_, _tbs_, _ns_) {
             var params;
             $log = _$log_;
             $scope = _$scope_;
             $location = _$location_;
             fs = _fs_;
             tbs = _tbs_;
+            ns = _ns_;
 
             params = $location.search();
             if (params.hasOwnProperty('devId')) {
@@ -56,6 +57,12 @@
                 }
             });
 
+            $scope.nav = function (path) {
+                if ($scope.devId) {
+                    ns.navTo(path, { devId: $scope.devId });
+                }
+            };
+
             $log.log('OvGroupCtrl has been created');
         }]);
 }());