mirrors/onos
1
0
Fork 0
mirror of https://github.com/opennetworkinglab/onos.git synced 2025-10-23 21:31:00 +02:00
Code Issues Projects Releases Wiki Activity

ONOS-1783 - GUI -- Refresh buttons for tabular views added. Minor table.js refactor.

Browse Source 
Change-Id: Iee6c65fa8477b367e40a556c3c820ca454601a5f
This commit is contained in:
Bri Prebilic Cole 2015-04-30 13:48:36 -07:00 committed by Gerrit Code Review
parent 35fa3d4169
commit 3d4d01cb74
25 changed files with 288 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/gui/src/main/webapp/app/common.css
View File

@ -24,3 +24,63 @@
padding-top: 20px;
padding-bottom: 20px;
}
/* Tabular view upper right control buttons */
div.ctrl-btns {
display: inline-block;
float: right;
height: 44px;
margin-right: 24px;
margin-top: 7px;
}
div.ctrl-btns div {
display: inline-block;
padding: 4px;
cursor: pointer;
}
/* Inactive */
.light .ctrl-btns div g.icon rect,
.light .ctrl-btns div:hover g.icon rect {
fill: #eee;
}
.dark .ctrl-btns div g.icon rect,
.dark .ctrl-btns div:hover g.icon rect {
fill: #222;
}
.light .ctrl-btns div g.icon use {
fill: #ddd;
}
.dark .ctrl-btns div g.icon use {
fill: #333;
}
/* Active hover */
.light .ctrl-btns div.active:hover g.icon rect {
fill: #800;
}
.dark .ctrl-btns div.active:hover g.icon rect {
fill: #CE5650;
}
/* Active */
.light .ctrl-btns div.active g.icon use {
fill: #fff;
}
.dark .ctrl-btns div.active g.icon use {
fill: #eee;
}
.light .ctrl-btns div.active g.icon rect {
fill: #bbb;
}
.dark .ctrl-btns div.active g.icon rect {
fill: #444;
}

6
web/gui/src/main/webapp/app/fw/svg/icon.js
View File

@ -37,6 +37,8 @@
play: 'play',
stop: 'stop',
crown: 'crown',
upArrow: 'triangleUp',
downArrow: 'triangleDown',
@ -191,7 +193,7 @@
return g;
}
function createSortIcon() {
function sortIcons() {
function sortAsc(div) {
div.style('display', 'inline-block');
loadEmbeddedIcon(div, 'upArrow', 10);
@ -236,7 +238,7 @@
addDeviceIcon: addDeviceIcon,
addHostIcon: addHostIcon,
iconConfig: function () { return config; },
createSortIcon: createSortIcon
sortIcons: sortIcons
};
}]);

73
web/gui/src/main/webapp/app/fw/widget/table.js
View File

@ -27,11 +27,15 @@
var tableIconTdSize = 33,
pdg = 12,
colWidth = 'col-width',
tableIcon = 'table-icon';
tableIcon = 'table-icon',
asc = 'asc',
desc = 'desc',
none = 'none';
// internal state
var currCol = {},
prevCol = {};
prevCol = {},
sortIconAPI;
// Functions for creating a fixed header on a table (Angular Directive)
@ -115,48 +119,49 @@
setTableHeight(th, tb);
}
// Functions for sorting table rows by header and choosing appropriate icon
// Functions for sorting table rows by header
function updateSortingIcons(thElem, api) {
var div;
function updateSortDirection(thElem) {
sortIconAPI.sortNone(thElem.select('div'));
currCol.div = thElem.append('div');
currCol.colId = thElem.attr('colId');
if (currCol.colId === prevCol.colId) {
(currCol.icon === 'downArrow') ?
currCol.icon = 'upArrow' :
currCol.icon = 'downArrow';
prevCol.icon = currCol.icon;
(currCol.dir === desc) ? currCol.dir = asc : currCol.dir = desc;
prevCol.dir = currCol.dir;
} else {
currCol.icon = 'upArrow';
prevCol.icon = 'tableColSortNone';
currCol.dir = asc;
prevCol.dir = none;
}
(currCol.dir === asc) ?
sortIconAPI.sortAsc(currCol.div) : sortIconAPI.sortDesc(currCol.div);
div = thElem.select('div');
api.sortNone(div);
div = thElem.append('div');
if (currCol.icon === 'upArrow') {
api.sortAsc(div);
} else {
api.sortDesc(div);
}
if (prevCol.colId !== undefined &&
prevCol.icon === 'tableColSortNone') {
api.sortNone(prevCol.elem.select('div'));
if (prevCol.colId && prevCol.dir === none) {
sortIconAPI.sortNone(prevCol.div);
}
prevCol.colId = currCol.colId;
prevCol.elem = thElem;
prevCol.div = currCol.div;
}
function sortRequestParams() {
return {
sortCol: currCol.colId,
sortDir: (currCol.icon === 'upArrow' ? 'asc' : 'desc')
sortDir: currCol.dir
};
}
function resetSortIcons() {
if (currCol.div) {
sortIconAPI.sortNone(currCol.div);
}
if (prevCol.div) {
sortIconAPI.sortNone(prevCol.div);
}
currCol = {};
prevCol = {};
}
angular.module('onosWidget')
.directive('onosFixedHeader', ['$window', 'FnService', 'MastService',
function (_$window_, _fs_, _mast_) {
@ -210,8 +215,8 @@
link: function (scope, element) {
$log = _$log_;
is = _is_;
var table = d3.select(element[0]),
sortIconAPI = is.createSortIcon();
var table = d3.select(element[0]);
sortIconAPI = is.sortIcons();
// when a header is clicked, change its icon tag
// and get sorting order to send to the server.
@ -219,7 +224,7 @@
var thElem = d3.select(this);
if (thElem.attr('sortable') === '') {
updateSortingIcons(thElem, sortIconAPI);
updateSortDirection(thElem);
scope.ctrlCallback({
requestParams: sortRequestParams()
});
@ -227,6 +232,16 @@
});
}
};
}])
.factory('TableService', ['$log', 'IconService',
function ($log, is) {
sortIconAPI = is.sortIcons();
return {
resetSortIcons: resetSortIcons
};
}]);
}());

58
web/gui/src/main/webapp/app/view/app/app.css
View File

@ -23,59 +23,11 @@
}
#ov-app div.ctrl-btns {
display:inline-block;
float: right;
width: 200px;
height: 44px;
margin-right: 24px;
margin-top: 7px;
width: 290px;
}
div.ctrl-btns div {
display: inline-block;
padding: 4px;
cursor: pointer;
#ov-app 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 {
fill: #eee;
}
.dark .ctrl-btns div g.icon rect,
.dark .ctrl-btns div:hover g.icon rect {
fill: #222;
}
.light .ctrl-btns div g.icon use {
fill: #ddd;
}
.dark .ctrl-btns div g.icon use {
fill: #333;
}
/* Active hover */
.light .ctrl-btns div.active:hover g.icon rect {
fill: #800;
}
.dark .ctrl-btns div.active:hover g.icon rect {
fill: #CE5650;
}
/* Active */
.light .ctrl-btns div.active g.icon use {
fill: #fff;
}
.dark .ctrl-btns div.active g.icon use {
fill: #eee;
}
.light .ctrl-btns div.active g.icon rect {
fill: #bbb;
}
.dark .ctrl-btns div.active g.icon rect {
fill: #444;
}

4
web/gui/src/main/webapp/app/view/app/app.html
View File

@ -3,6 +3,10 @@
<div class="tabular-header">
<h2>Applications ({{ctrl.tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="crown"
ng-click="refresh()"></div>
<div class="separator"></div>
<div id="app-install" icon icon-size="36" icon-id="plus" class="active"></div>
<div id="app-activate" icon icon-size="36" icon-id="play"></div>
<div id="app-deactivate" icon icon-size="36" icon-id="stop"></div>

10
web/gui/src/main/webapp/app/view/app/app.js
View File

@ -25,9 +25,9 @@
angular.module('ovApp', [])
.controller('OvAppCtrl',
['$log', '$scope', 'TableBuilderService', 'WebSocketService',
['$log', '$scope', 'TableService', 'TableBuilderService', 'WebSocketService',
function ($log, $scope, tbs, wss) {
function ($log, $scope, ts, tbs, wss) {
function selCb($event, row) {
selRow = angular.element($event.currentTarget);
selection = row;
@ -45,6 +45,12 @@
document.getElementById('file').dispatchEvent(evt);
});
$scope.refresh = function () {
$log.debug('Refreshing application page');
ts.resetSortIcons();
$scope.sortCallback();
};
function appAction(action) {
if (selection) {
$log.debug('Initiating uninstall of', selection);

7
web/gui/src/main/webapp/app/view/cluster/cluster.css
View File

@ -18,5 +18,10 @@
ONOS GUI -- Cluster View -- CSS file
*/
#ov-cluster td {
#ov-cluster h2 {
display: inline-block;
}
#ov-cluster div.ctrl-btns {
width: 45px;
}

5
web/gui/src/main/webapp/app/view/cluster/cluster.html
View File

@ -18,6 +18,11 @@
<div id="ov-cluster">
<div class="tabular-header">
<h2>Cluster Nodes ({{ctrl.tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="crown"
ng-click="refresh()"></div>
</div>
</div>
<table class="summary-list"

10
web/gui/src/main/webapp/app/view/cluster/cluster.js
View File

@ -23,15 +23,21 @@
angular.module('ovCluster', [])
.controller('OvClusterCtrl',
['$log', '$scope', 'TableBuilderService',
['$log', '$scope', 'TableService', 'TableBuilderService',
function ($log, $scope, tbs) {
function ($log, $scope, ts, tbs) {
tbs.buildTable({
self: this,
scope: $scope,
tag: 'cluster'
});
$scope.refresh = function () {
$log.debug('Refreshing cluster nodes page');
ts.resetSortIcons();
$scope.sortCallback();
};
$log.log('OvClusterCtrl has been created');
}]);
}());

8
web/gui/src/main/webapp/app/view/device/device.css
View File

@ -18,6 +18,14 @@
ONOS GUI -- Device View -- CSS file
*/
#ov-device h2 {
display: inline-block;
}
#ov-device div.ctrl-btns {
width: 45px;
}
/* More in generic panel.css */
#device-details-panel.floatpanel {

5
web/gui/src/main/webapp/app/view/device/device.html
View File

@ -2,6 +2,11 @@
<div id="ov-device">
<div class="tabular-header">
<h2>Devices ({{ctrl.tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="crown"
ng-click="refresh()"></div>
</div>
</div>
<table class="summary-list"

10
web/gui/src/main/webapp/app/view/device/device.js
View File

@ -203,12 +203,12 @@
angular.module('ovDevice', [])
.controller('OvDeviceCtrl',
['$log', '$scope', 'TableBuilderService', 'FnService',
['$log', '$scope', 'TableService', 'TableBuilderService', 'FnService',
'MastService', 'PanelService', 'WebSocketService', 'IconService',
'ButtonService', 'NavService', 'TooltipService',
function (_$log_, _$scope_,
tbs, _fs_, _mast_, _ps_, _wss_, _is_, _bns_, _ns_, _ttip_) {
ts, tbs, _fs_, _mast_, _ps_, _wss_, _is_, _bns_, _ns_, _ttip_) {
$log = _$log_;
$scope = _$scope_;
fs = _fs_;
@ -243,6 +243,12 @@
tag: 'device',
selCb: selCb
});
$scope.refresh = function () {
$log.debug('Refreshing devices page');
ts.resetSortIcons();
$scope.sortCallback();
};
createDetailsPane();
// details panel handlers

8
web/gui/src/main/webapp/app/view/flow/flow.css
View File

@ -18,6 +18,14 @@
ONOS GUI -- Flow View -- CSS file
*/
#ov-flow h2 {
display: inline-block;
}
#ov-flow div.ctrl-btns {
width: 45px;
}
.light #ov-flow tr:nth-child(6n + 2),
.light #ov-flow tr:nth-child(6n + 3),
.light #ov-flow tr:nth-child(6n + 4) {

7
web/gui/src/main/webapp/app/view/flow/flow.html
View File

@ -2,9 +2,14 @@
<div id="ov-flow">
<div class="tabular-header">
<h2>
Flows for Device {{ctrl.devId || "none"}}
Flows for Device {{ctrl.devId || "(No device selected)"}}
({{ctrl.tableData.length}} total)
</h2>
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="crown"
ng-click="refresh()"></div>
</div>
</div>
<table class="summary-list"

14
web/gui/src/main/webapp/app/view/flow/flow.js
View File

@ -22,19 +22,21 @@
'use strict';
// injected references
var $log, $scope, $location, fs, tbs;
var $log, $scope, $location, fs, ts, tbs;
angular.module('ovFlow', [])
.controller('OvFlowCtrl',
['$log', '$scope', '$location', 'FnService', 'TableBuilderService',
['$log', '$scope', '$location',
'FnService', 'TableService', 'TableBuilderService',
function (_$log_, _$scope_, _$location_, _fs_, _tbs_) {
function (_$log_, _$scope_, _$location_, _fs_, _ts_, _tbs_) {
var self = this,
params;
$log = _$log_;
$scope = _$scope_;
$location = _$location_;
fs = _fs_;
ts = _ts_;
tbs = _tbs_;
params = $location.search();
@ -49,6 +51,12 @@
query: params
});
$scope.refresh = function () {
$log.debug('Refreshing flows page');
ts.resetSortIcons();
$scope.sortCallback();
};
$log.log('OvFlowCtrl has been created');
}]);
}());

7
web/gui/src/main/webapp/app/view/host/host.css
View File

@ -18,5 +18,10 @@
ONOS GUI -- Host View -- CSS file
*/
#ov-host td {
#ov-host h2 {
display: inline-block;
}
#ov-host div.ctrl-btns {
width: 45px;
}

5
web/gui/src/main/webapp/app/view/host/host.html
View File

@ -2,6 +2,11 @@
<div id="ov-host">
<div class="tabular-header">
<h2>Hosts ({{ctrl.tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="crown"
ng-click="refresh()"></div>
</div>
</div>
<table class="summary-list"

10
web/gui/src/main/webapp/app/view/host/host.js
View File

@ -23,15 +23,21 @@
angular.module('ovHost', [])
.controller('OvHostCtrl',
['$log', '$scope', 'TableBuilderService',
['$log', '$scope', 'TableService', 'TableBuilderService',
function ($log, $scope, tbs) {
function ($log, $scope, ts, tbs) {
tbs.buildTable({
self: this,
scope: $scope,
tag: 'host'
});
$scope.refresh = function () {
$log.debug('Refreshing hosts page');
ts.resetSortIcons();
$scope.sortCallback();
};
$log.log('OvHostCtrl has been created');
}]);
}());

8
web/gui/src/main/webapp/app/view/intent/intent.css
View File

@ -18,6 +18,14 @@
ONOS GUI -- Intent View -- CSS file
*/
#ov-intent h2 {
display: inline-block;
}
#ov-intent div.ctrl-btns {
width: 45px;
}
.light #ov-intent tr:nth-child(6n + 2),
.light #ov-intent tr:nth-child(6n + 3),
.light #ov-intent tr:nth-child(6n + 4) {

5
web/gui/src/main/webapp/app/view/intent/intent.html
View File

@ -18,6 +18,11 @@
<div id="ov-intent">
<div class="tabular-header">
<h2>Intents ({{ctrl.tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="crown"
ng-click="refresh()"></div>
</div>
</div>
<table class="summary-list"
onos-fixed-header

10
web/gui/src/main/webapp/app/view/intent/intent.js
View File

@ -23,15 +23,21 @@
angular.module('ovIntent', [])
.controller('OvIntentCtrl',
['$log', '$scope', 'TableBuilderService',
['$log', '$scope', 'TableService', 'TableBuilderService',
function ($log, $scope, tbs) {
function ($log, $scope, ts, tbs) {
tbs.buildTable({
self: this,
scope: $scope,
tag: 'intent'
});
$scope.refresh = function () {
$log.debug('Refreshing intents page');
ts.resetSortIcons();
$scope.sortCallback();
};
$log.log('OvIntentCtrl has been created');
}]);
}());

7
web/gui/src/main/webapp/app/view/link/link.css
View File

@ -18,5 +18,10 @@
ONOS GUI -- Link View -- CSS file
*/
#ov-link td {
#ov-link h2 {
display: inline-block;
}
#ov-link div.ctrl-btns {
width: 45px;
}

5
web/gui/src/main/webapp/app/view/link/link.html
View File

@ -18,6 +18,11 @@
<div id="ov-link">
<div class="tabular-header">
<h2>Links ({{ctrl.tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="crown"
ng-click="refresh()"></div>
</div>
</div>
<table class="summary-list"

10
web/gui/src/main/webapp/app/view/link/link.js
View File

@ -23,15 +23,21 @@
angular.module('ovLink', [])
.controller('OvLinkCtrl',
['$log', '$scope', 'TableBuilderService',
['$log', '$scope', 'TableService', 'TableBuilderService',
function ($log, $scope, tbs) {
function ($log, $scope, ts, tbs) {
tbs.buildTable({
self: this,
scope: $scope,
tag: 'link'
});
$scope.refresh = function () {
$log.debug('Refreshing links page');
ts.resetSortIcons();
$scope.sortCallback();
};
$log.log('OvLinkCtrl has been created');
}]);
}());

70
web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
View File

@ -19,7 +19,7 @@
*/
describe('factory: fw/widget/table.js', function () {
var $log, $compile, $rootScope,
fs, mast, is,
fs, ts, mast, is,
scope, compiled,
table, thead, tbody, mockHeader,
mockH2Height = 20,
@ -99,11 +99,12 @@ describe('factory: fw/widget/table.js', function () {
});
beforeEach(inject(function (_$log_, _$compile_, _$rootScope_,
FnService, MastService, IconService) {
FnService, TableService, MastService, IconService) {
$log = _$log_;
$compile = _$compile_;
$rootScope = _$rootScope_;
fs = FnService;
ts = TableService;
mast = MastService;
is = IconService;
}));
@ -127,6 +128,16 @@ describe('factory: fw/widget/table.js', function () {
mockHeader.remove();
});
it('should define TableBuilderService', function () {
expect(ts).toBeDefined();
});
it('should define api functions', function () {
expect(fs.areFunctions(ts, [
'resetSortIcons'
])).toBeTruthy();
});
function compileTable() {
compiled = $compile(table);
compiled(scope);
@ -204,26 +215,22 @@ describe('factory: fw/widget/table.js', function () {
thElems[1].click();
currentTh = angular.element(thElems[1]);
div = currentTh.find('div');
expect(div.html()).toBe('<svg class="embeddedIcon" ' +
'width="10" height="10" viewBox="0 0 50 50">' +
'<g class="icon upArrow">' +
'<rect width="50" height="50" rx="5"></rect>' +
'<use width="50" height="50" class="glyph" ' +
'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
'xlink:href="#triangleUp">' +
'</use>' +
'</g></svg>');
expect(div.html()).toBe(
'<svg class="embeddedIcon" width="10" height="10" viewBox="0 0 ' +
'50 50"><g class="icon upArrow"><rect width="50" height="50" ' +
'rx="5"></rect><use width="50" height="50" class="glyph" xmlns:' +
'xlink="http://www.w3.org/1999/xlink" xlink:href="#triangleUp">' +
'</use></g></svg>'
);
thElems[1].click();
div = currentTh.find('div');
expect(div.html()).toBe('<svg class="embeddedIcon" ' +
'width="10" height="10" viewBox="0 0 50 50">' +
'<g class="icon downArrow">' +
'<rect width="50" height="50" rx="5"></rect>' +
'<use width="50" height="50" class="glyph" ' +
'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
'xlink:href="#triangleDown">' +
'</use>' +
'</g></svg>');
expect(div.html()).toBe(
'<svg class="embeddedIcon" width="10" height="10" viewBox="0 0 ' +
'50 50"><g class="icon downArrow"><rect width="50" height="50" ' +
'rx="5"></rect><use width="50" height="50" class="glyph" xmlns:' +
'xlink="http://www.w3.org/1999/xlink" xlink:href="#triangleDown">' +
'</use></g></svg>'
);
thElems[2].click();
div = currentTh.children();
@ -233,15 +240,13 @@ describe('factory: fw/widget/table.js', function () {
// the new element should have the ascending icon
currentTh = angular.element(thElems[2]);
div = currentTh.children();
expect(div.html()).toBe('<svg class="embeddedIcon" ' +
'width="10" height="10" viewBox="0 0 50 50">' +
'<g class="icon upArrow">' +
'<rect width="50" height="50" rx="5"></rect>' +
'<use width="50" height="50" class="glyph" ' +
'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
'xlink:href="#triangleUp">' +
'</use>' +
'</g></svg>');
expect(div.html()).toBe(
'<svg class="embeddedIcon" width="10" height="10" viewBox="0 0 ' +
'50 50"><g class="icon upArrow"><rect width="50" height="50" ' +
'rx="5"></rect><use width="50" height="50" class="glyph" xmlns:' +
'xlink="http://www.w3.org/1999/xlink" xlink:href="#triangleUp">' +
'</use></g></svg>'
);
}
it('should affirm that onos-fixed-header is working', function () {
@ -264,8 +269,7 @@ describe('factory: fw/widget/table.js', function () {
compileTable();
verifyGivenTags('onos-sortable-header');
// ctrlCallback functionality is tested in device-spec
// only checking that it has been called correctly in the directive
scope.sortCallback = jasmine.createSpy('sortCallback');
thElems = thead.find('th');
@ -273,4 +277,8 @@ describe('factory: fw/widget/table.js', function () {
verifyIcons(thElems);
});
// Note: testing resetSortIcons isn't feasible because due to the nature of
// directive compilation: they are jQuery elements, not d3 elements,
// so the function doesn't work.
});