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/port/port.css b/web/gui/src/main/webapp/app/view/port/port.css
index 860f879..6639539 100644
--- a/web/gui/src/main/webapp/app/view/port/port.css
+++ b/web/gui/src/main/webapp/app/view/port/port.css
@@ -23,9 +23,23 @@
}
#ov-port div.ctrl-btns {
- width: 45px;
+ width: 240px;
}
-#ov-port tr:not(.no-data) td {
+.light #ov-port .current-view use {
+ fill: white;
+}
+.dark #ov-port .current-view use {
+ fill: #304860;
+}
+
+.light #ov-port .current-view rect {
+ fill: deepskyblue;
+}
+.dark #ov-port .current-view rect {
+ fill: #eee;
+}
+
+#ov-port td {
text-align: right;
}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/port/port.html b/web/gui/src/main/webapp/app/view/port/port.html
index 5e48cbf..326aebb 100644
--- a/web/gui/src/main/webapp/app/view/port/port.html
+++ b/web/gui/src/main/webapp/app/view/port/port.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="current-view"
+ icon icon-id="portTable" icon-size="36"></div>
+
+ <div class="active"
+ icon icon-id="groupTable" icon-size="36"
+ ng-click="nav('group')"></div>
</div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/port/port.js b/web/gui/src/main/webapp/app/view/port/port.js
index b596ef5..9cb8a04 100644
--- a/web/gui/src/main/webapp/app/view/port/port.js
+++ b/web/gui/src/main/webapp/app/view/port/port.js
@@ -22,19 +22,21 @@
'use strict';
// injected references
- var $log, $scope, $location, fs, tbs;
+ var $log, $scope, $location, fs, tbs, ns;
angular.module('ovPort', [])
.controller('OvPortCtrl',
- ['$log', '$scope', '$location', 'FnService', 'TableBuilderService',
+ ['$log', '$scope', '$location',
+ 'FnService', 'TableBuilderService', 'NavService',
- function (_$log_, _$scope_, _$location_, _fs_, _tbs_) {
+ function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _ns_) {
var params;
$log = _$log_;
$scope = _$scope_;
$location = _$location_;
fs = _fs_;
tbs = _tbs_;
+ ns = _ns_;
params = $location.search();
if (params.hasOwnProperty('devId')) {
@@ -47,6 +49,12 @@
query: params
});
+ $scope.nav = function (path) {
+ if ($scope.devId) {
+ ns.navTo(path, { devId: $scope.devId });
+ }
+ };
+
$log.log('OvPortCtrl has been created');
}]);
}());