GUI -- Action buttons changed to glyphs, tooltip and multiselect nodes bugs fixed
Change-Id: Idf800e589f12f139b6a39cdcd8144be9214ceb23
diff --git a/web/gui/src/main/webapp/app/fw/widget/tooltip.js b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
index 8996ec8..163a01d 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tooltip.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
@@ -43,7 +43,9 @@
var winWidth = fs.windowSize().width,
winHeight = fs.windowSize().height,
style = {
- display: 'inline-block'
+ display: 'inline-block',
+ left: 'auto',
+ right: 'auto'
};
if (mouseX <= (winWidth / 2)) {
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 23ef0b5..d65df90 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -85,6 +85,17 @@
top: 320px;
}
+#topo-p-detail .actionBtns {
+ text-align: center;
+}
+#topo-p-detail .actionBtns .actionBtn {
+ display: inline-block;
+}
+#topo-p-detail .actionBtns .actionBtn svg {
+ width: 30px;
+ height: 30px;
+}
+
/* --- general topo-panel styling --- */
.topo-p svg {
@@ -161,38 +172,6 @@
color: #888;
}
-
-.topo-p .actionBtn {
- margin: 6px 12px;
- padding: 2px 6px;
- font-size: 9pt;
- cursor: pointer;
- width: 200px;
- text-align: center;
- border-radius: 4px;
-}
-.light .topo-p .actionBtn {
- border: 2px solid #ddd;
- color: #eee;
- background: #888;
-}
-.dark .topo-p .actionBtn {
- border: 2px solid #222;
- color: #888;
- background: #444;
-}
-
-.light .topo-p .actionBtn:hover {
- color: #eee;
- background: #444;
-}
-.dark .topo-p .actionBtn:hover {
- color: #eee;
- background: #666;
-}
-
-
-
/* --- Topo Instance Panel --- */
#topo-p-instance {
diff --git a/web/gui/src/main/webapp/app/view/topo/topoPanel.js b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
index 579ebde..af6e879 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
@@ -23,7 +23,7 @@
'use strict';
// injected refs
- var $log, fs, ps, gs, flash, wss;
+ var $log, fs, ps, gs, flash, wss, bns;
// constants
var pCls = 'topo-p',
@@ -50,7 +50,12 @@
function addProp(tbody, label, value) {
var tr = tbody.append('tr'),
+ lab;
+ if (typeof label === 'string') {
lab = label.replace(/_/g, ' ');
+ } else {
+ lab = label;
+ }
function addCell(cls, txt) {
tr.append('td').attr('class', cls).html(txt);
@@ -110,6 +115,7 @@
title.text(data.id);
listProps(tbody, data);
dpa('hr');
+ dpa('div').classed('actionBtns', true);
}
function displayMulti(ids) {
@@ -124,13 +130,15 @@
addProp(tbody, i+1, d);
});
dpa('hr');
+ dpa('div').classed('actionBtns', true);
}
- function addAction(text, cb) {
- dpa('div')
- .classed('actionBtn', true)
- .text(text)
- .on('click', cb);
+ function addAction(o) {
+ var btnDiv = d3.select('#' + idDet)
+ .select('.actionBtns')
+ .append('div')
+ .classed('actionBtn', true);
+ bns.button(btnDiv, idDet + o.id, o.gid, o.cb, o.tt);
}
var friendlyIndex = {
@@ -336,15 +344,16 @@
angular.module('ovTopo')
.factory('TopoPanelService',
['$log', 'FnService', 'PanelService', 'GlyphService',
- 'FlashService', 'WebSocketService',
+ 'FlashService', 'WebSocketService', 'ButtonService',
- function (_$log_, _fs_, _ps_, _gs_, _flash_, _wss_) {
+ function (_$log_, _fs_, _ps_, _gs_, _flash_, _wss_, _bns_) {
$log = _$log_;
fs = _fs_;
ps = _ps_;
gs = _gs_;
flash = _flash_;
wss = _wss_;
+ bns = _bns_;
return {
initPanels: initPanels,
diff --git a/web/gui/src/main/webapp/app/view/topo/topoSelect.js b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
index c83373c..44fd14a 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoSelect.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
@@ -186,13 +186,28 @@
tps.displayMulti(selectOrder);
// always add the 'show traffic' action
- tps.addAction('Show Related Traffic', tts.showRelatedIntentsAction);
+ tps.addAction({
+ id: '-mult-rel-traf-btn',
+ gid: 'allTraffic',
+ cb: tts.showRelatedIntentsAction,
+ tt: 'Show Related Traffic'
+ });
// add other actions, based on what is selected...
if (nSel() === 2 && allSelectionsClass('host')) {
- tps.addAction('Create Host-to-Host Flow', tts.addHostIntentAction);
+ tps.addAction({
+ id: 'host-flow-btn',
+ gid: 'endstation',
+ cb: tts.addHostIntentAction,
+ tt: 'Create Host-to-Host Flow'
+ });
} else if (nSel() >= 2 && allSelectionsClass('host')) {
- tps.addAction('Create Multi-Source Flow', tts.addMultiSourceIntentAction);
+ tps.addAction({
+ id: 'mult-src-flow-btn',
+ gid: 'flows',
+ cb: tts.addMultiSourceIntentAction,
+ tt: 'Create Multi-Source Flow'
+ });
}
tts.cancelTraffic();
@@ -209,11 +224,21 @@
tps.displaySingle(data);
// always add the 'show traffic' action
- tps.addAction('Show Related Traffic', tts.showRelatedIntentsAction);
+ tps.addAction({
+ id: '-sin-rel-traf-btn',
+ gid: 'intentTraffic',
+ cb: tts.showRelatedIntentsAction,
+ tt: 'Show Related Traffic'
+ });
// add other actions, based on what is selected...
if (data.type === 'switch') {
- tps.addAction('Show Device Flows', tts.showDeviceLinkFlowsAction);
+ tps.addAction({
+ id: 'sin-dev-flows-btn',
+ gid: 'flows',
+ cb: tts.showDeviceLinkFlowsAction,
+ tt: 'Show Device Flows'
+ });
}
tps.displaySomething();
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoEvent-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoEvent-spec.js
index 7e35dd9..ef94711 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoEvent-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoEvent-spec.js
@@ -18,14 +18,17 @@
ONOS GUI -- Topo View -- Topo Event Service - Unit Tests
*/
describe('factory: view/topo/topoEvent.js', function() {
- var $log, fs, tes;
+ var $log, fs, tes, bns;
- beforeEach(module('ovTopo', 'onosNav', 'onosUtil', 'onosLayer', 'ngRoute'));
+ beforeEach(module('ovTopo', 'onosNav', 'onosUtil', 'onosLayer', 'ngRoute',
+ 'onosWidget'));
- beforeEach(inject(function (_$log_, FnService, TopoEventService) {
+ beforeEach(inject(function (_$log_, FnService,
+ TopoEventService, ButtonService) {
$log = _$log_;
fs = FnService;
tes = TopoEventService;
+ bns = ButtonService;
}));
it('should define TopoEventService', function () {
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoFilter-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoFilter-spec.js
index fc5b512..eebccfc 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoFilter-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoFilter-spec.js
@@ -18,7 +18,7 @@
ONOS GUI -- Topo View -- Topo Filter Service - Unit Tests
*/
describe('factory: view/topo/topoFilter.js', function() {
- var $log, fs, fltr, api;
+ var $log, fs, fltr, bns, api;
var mockNodes = {
each: function () {},
@@ -29,12 +29,15 @@
classed: function () {}
};
- beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav'));
+ beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
+ 'onosWidget'));
- beforeEach(inject(function (_$log_, FnService, TopoFilterService) {
+ beforeEach(inject(function (_$log_, FnService,
+ TopoFilterService, ButtonService) {
$log = _$log_;
fs = FnService;
fltr = TopoFilterService;
+ bns = ButtonService;
api = {
node: function () { return mockNodes; },
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoForce-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoForce-spec.js
index 37fe0ef..edb1cc5 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoForce-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoForce-spec.js
@@ -18,14 +18,17 @@
ONOS GUI -- Topo View -- Topo Force Service - Unit Tests
*/
describe('factory: view/topo/topoForce.js', function() {
- var $log, fs, tfs;
+ var $log, fs, tfs, bns;
- beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav'));
+ beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
+ 'onosWidget'));
- beforeEach(inject(function (_$log_, FnService, TopoForceService) {
+ beforeEach(inject(function (_$log_, FnService,
+ TopoForceService, ButtonService) {
$log = _$log_;
fs = FnService;
tfs = TopoForceService;
+ bns = ButtonService;
}));
it('should define TopoForceService', function () {
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js
index b4ad55c..1b2a573 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js
@@ -18,14 +18,17 @@
ONOS GUI -- Topo View -- Topo Panel Service - Unit Tests
*/
describe('factory: view/topo/topoPanel.js', function() {
- var $log, fs, tps;
+ var $log, fs, tps, bns;
- beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav'));
+ beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
+ 'onosWidget'));
- beforeEach(inject(function (_$log_, FnService, TopoPanelService) {
+ beforeEach(inject(function (_$log_, FnService,
+ TopoPanelService, ButtonService) {
$log = _$log_;
fs = FnService;
tps = TopoPanelService;
+ bns = ButtonService;
}));
it('should define TopoPanelService', function () {
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js
index d78a4fd..c8c051c 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js
@@ -18,14 +18,17 @@
ONOS GUI -- Topo View -- Topo Selection Service - Unit Tests
*/
describe('factory: view/topo/topoSelect.js', function() {
- var $log, fs, tss;
+ var $log, fs, tss, bns;
- beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav'));
+ beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
+ 'onosWidget'));
- beforeEach(inject(function (_$log_, FnService, TopoSelectService) {
+ beforeEach(inject(function (_$log_, FnService,
+ TopoSelectService, ButtonService) {
$log = _$log_;
fs = FnService;
tss = TopoSelectService;
+ bns = ButtonService;
}));
it('should define TopoSelectService', function () {