홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
9b1fb9aa 1 parent f3ae3fb9

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
Inline Side-by-side
Showing 16 changed files with 154 additions and 65 deletions
......@@ -47,6 +47,9 @@
devIcon_SWITCH: 'switch',
devIcon_ROADM: 'roadm',
flowTable: 'flowTable',
portTable: 'portTable',
groupTable: 'groupTable',
hostIcon_endstation: 'endstation',
hostIcon_router: 'router',
......
......@@ -115,6 +115,12 @@ div.ctrl-btns div {
cursor: pointer;
}
div.ctrl-btns div.separator {
cursor: auto;
width: 24px;
border: none;
}
/* Inactive */
.light .ctrl-btns div g.icon rect,
.light .ctrl-btns div:hover g.icon rect {
......
......@@ -26,12 +26,6 @@
width: 290px;
}
#ov-app div.ctrl-btns div.separator {
cursor: auto;
width: 24px;
border: none;
}
#ov-app form#inputFileForm,
#ov-app input#uploadFile {
display: none;
......
......@@ -23,7 +23,7 @@
}
#ov-device div.ctrl-btns {
width: 45px;
width: 240px;
}
/* More in generic panel.css */
......
......@@ -4,8 +4,21 @@
<h2>Devices ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
icon icon-id="refresh" icon-size="36"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div ng-class="{active: !!selId}"
icon icon-id="flowTable" icon-size="36"
ng-click="nav('flow')"></div>
<div ng-class="{active: !!selId}"
icon icon-id="portTable" icon-size="36"
ng-click="nav('port')"></div>
<div ng-class="{active: !!selId}"
icon icon-id="groupTable" icon-size="36"
ng-click="nav('group')"></div>
</div>
</div>
......
......@@ -22,7 +22,7 @@
'use strict';
// injected refs
var $log, $scope, fs, mast, ps, wss, is, bns, ns, ttip;
var $log, $scope, fs, mast, ps, wss, is, ns;
// internal state
var detailsPanel,
......@@ -35,12 +35,8 @@
ctnrPdg = 24,
scrollSize = 17,
portsTblPdg = 50,
flowPath = 'flow',
portPath = 'port',
groupPath = 'group',
pName = 'device-details-panel',
bName = 'dev-dets-p',
detailsReq = 'deviceDetailsRequest',
detailsResp = 'deviceDetailsResponse',
......@@ -85,7 +81,6 @@
tblDiv.append('div').classed('left', true).append('table');
tblDiv.append('div').classed('right', true).append('table');
top.append('div').classed('actionBtns', true);
top.append('hr');
bottom = container.append('div').classed('bottom', true);
......@@ -103,7 +98,7 @@
addCell('value', value);
}
function populateTop(tblDiv, btnsDiv, details) {
function populateTop(tblDiv, details) {
var leftTbl = tblDiv.select('.left')
.select('table')
.append('tbody'),
......@@ -118,34 +113,6 @@
// properties are split into two tables
addProp(i < 3 ? leftTbl : rightTbl, i, details[prop]);
});
bns.button(
btnsDiv,
bName + '-flows',
'flowTable',
function () {
ns.navTo(flowPath, { devId: details.id });
},
'Show flow view for this device'
);
bns.button(
btnsDiv,
bName + '-ports',
'portTable',
function () {
ns.navTo(portPath, { devId: details.id });
},
'Show port view for this device'
);
bns.button(
btnsDiv,
bName + '-groups',
'groupTable',
function () {
ns.navTo(groupPath, { devId: details.id });
},
'Show group view for this device'
);
}
function addPortRow(tbody, port) {
......@@ -187,15 +154,14 @@
}
function populateDetails(details) {
var topTbs, btnsDiv, btmTbl, ports;
var topTbs, btmTbl, ports;
setUpPanel();
topTbs = top.select('.top-tables');
btnsDiv = top.select('.actionBtns');
btmTbl = bottom.select('table');
ports = details.ports;
populateTop(topTbs, btnsDiv, details);
populateTop(topTbs, details);
populateBottom(btmTbl, ports);
detailsPanel.height(pHeight);
......@@ -223,10 +189,10 @@
.controller('OvDeviceCtrl',
['$log', '$scope', 'TableBuilderService', 'FnService',
'MastService', 'PanelService', 'WebSocketService', 'IconService',
'ButtonService', 'NavService', 'TooltipService',
'NavService',
function (_$log_, _$scope_,
tbs, _fs_, _mast_, _ps_, _wss_, _is_, _bns_, _ns_, _ttip_) {
tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_) {
$log = _$log_;
$scope = _$scope_;
fs = _fs_;
......@@ -234,9 +200,7 @@
ps = _ps_;
wss = _wss_;
is = _is_;
bns = _bns_;
ns = _ns_;
ttip = _ttip_;
var handlers = {};
$scope.panelData = [];
......@@ -260,6 +224,12 @@
handlers[detailsResp] = respDetailsCb;
wss.bindHandlers(handlers);
$scope.nav = function (path) {
if ($scope.selId) {
ns.navTo(path, { devId: $scope.selId });
}
};
$scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
});
......@@ -293,7 +263,7 @@
return {
h: $window.innerHeight,
w: $window.innerWidth
}
};
}, function () {
if (!fs.isEmptyObject(scope.panelData)) {
heightCalc();
......
......@@ -23,7 +23,21 @@
}
#ov-flow div.ctrl-btns {
width: 45px;
width: 240px;
}
.light #ov-flow .current-view use {
fill: white;
}
.dark #ov-flow .current-view use {
fill: #304860;
}
.light #ov-flow .current-view rect {
fill: deepskyblue;
}
.dark #ov-flow .current-view rect {
fill: #eee;
}
.light #ov-flow tr:nth-child(6n + 1),
......
......@@ -9,6 +9,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="current-view"
icon icon-id="flowTable" icon-size="36"></div>
<div class="active"
icon icon-id="portTable" icon-size="36"
ng-click="nav('port')"></div>
<div class="active"
icon icon-id="groupTable" icon-size="36"
ng-click="nav('group')"></div>
</div>
</div>
......
......@@ -22,20 +22,21 @@
'use strict';
// injected references
var $log, $scope, $location, fs, tbs;
var $log, $scope, $location, fs, tbs, ns;
angular.module('ovFlow', [])
.controller('OvFlowCtrl',
['$log', '$scope', '$location',
'FnService', 'TableBuilderService',
'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')) {
......@@ -48,6 +49,12 @@
query: params
});
$scope.nav = function (path) {
if ($scope.devId) {
ns.navTo(path, { devId: $scope.devId });
}
};
$log.log('OvFlowCtrl has been created');
}]);
}());
......
......@@ -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),
......
......@@ -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>
......
......@@ -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');
}]);
}());
......
......@@ -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
......
......@@ -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>
......
......@@ -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');
}]);
}());
......
......@@ -81,7 +81,7 @@
self.$route = $route;
self.$routeParams = $routeParams;
self.$location = $location;
self.version = '1.2.0';
self.version = '1.3.0';
// initialize services...
ts.init();
......