홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
f5e48b14 1 parent db320abb

GUI -- Action buttons changed to glyphs, tooltip and multiselect nodes bugs fixed 

Change-Id: Idf800e589f12f139b6a39cdcd8144be9214ceb23
Inline Side-by-side
Showing 9 changed files with 91 additions and 61 deletions
......@@ -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)) {
......
......@@ -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 {
......
......@@ -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,
......
......@@ -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();
......
......@@ -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 () {
......
......@@ -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 @@ describe('factory: view/topo/topoFilter.js', function() {
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; },
......
......@@ -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 () {
......
......@@ -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 () {
......
......@@ -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 () {
......