홍길동 / 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 @@ ...@@ -43,7 +43,9 @@
43 var winWidth = fs.windowSize().width, 43 var winWidth = fs.windowSize().width,
44 winHeight = fs.windowSize().height, 44 winHeight = fs.windowSize().height,
45 style = { 45 style = {
46 - display: 'inline-block' 46 + display: 'inline-block',
47 + left: 'auto',
48 + right: 'auto'
47 }; 49 };
48 50
49 if (mouseX <= (winWidth / 2)) { 51 if (mouseX <= (winWidth / 2)) {
......
...@@ -85,6 +85,17 @@ ...@@ -85,6 +85,17 @@
85 top: 320px; 85 top: 320px;
86 } 86 }
87 87
88 +#topo-p-detail .actionBtns {
89 + text-align: center;
90 +}
91 +#topo-p-detail .actionBtns .actionBtn {
92 + display: inline-block;
93 +}
94 +#topo-p-detail .actionBtns .actionBtn svg {
95 + width: 30px;
96 + height: 30px;
97 +}
98 +
88 /* --- general topo-panel styling --- */ 99 /* --- general topo-panel styling --- */
89 100
90 .topo-p svg { 101 .topo-p svg {
...@@ -161,38 +172,6 @@ ...@@ -161,38 +172,6 @@
161 color: #888; 172 color: #888;
162 } 173 }
163 174
164 -
165 -.topo-p .actionBtn {
166 - margin: 6px 12px;
167 - padding: 2px 6px;
168 - font-size: 9pt;
169 - cursor: pointer;
170 - width: 200px;
171 - text-align: center;
172 - border-radius: 4px;
173 -}
174 -.light .topo-p .actionBtn {
175 - border: 2px solid #ddd;
176 - color: #eee;
177 - background: #888;
178 -}
179 -.dark .topo-p .actionBtn {
180 - border: 2px solid #222;
181 - color: #888;
182 - background: #444;
183 -}
184 -
185 -.light .topo-p .actionBtn:hover {
186 - color: #eee;
187 - background: #444;
188 -}
189 -.dark .topo-p .actionBtn:hover {
190 - color: #eee;
191 - background: #666;
192 -}
193 -
194 -
195 -
196 /* --- Topo Instance Panel --- */ 175 /* --- Topo Instance Panel --- */
197 176
198 #topo-p-instance { 177 #topo-p-instance {
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 'use strict'; 23 'use strict';
24 24
25 // injected refs 25 // injected refs
26 - var $log, fs, ps, gs, flash, wss; 26 + var $log, fs, ps, gs, flash, wss, bns;
27 27
28 // constants 28 // constants
29 var pCls = 'topo-p', 29 var pCls = 'topo-p',
...@@ -50,7 +50,12 @@ ...@@ -50,7 +50,12 @@
50 50
51 function addProp(tbody, label, value) { 51 function addProp(tbody, label, value) {
52 var tr = tbody.append('tr'), 52 var tr = tbody.append('tr'),
53 + lab;
54 + if (typeof label === 'string') {
53 lab = label.replace(/_/g, ' '); 55 lab = label.replace(/_/g, ' ');
56 + } else {
57 + lab = label;
58 + }
54 59
55 function addCell(cls, txt) { 60 function addCell(cls, txt) {
56 tr.append('td').attr('class', cls).html(txt); 61 tr.append('td').attr('class', cls).html(txt);
...@@ -110,6 +115,7 @@ ...@@ -110,6 +115,7 @@
110 title.text(data.id); 115 title.text(data.id);
111 listProps(tbody, data); 116 listProps(tbody, data);
112 dpa('hr'); 117 dpa('hr');
118 + dpa('div').classed('actionBtns', true);
113 } 119 }
114 120
115 function displayMulti(ids) { 121 function displayMulti(ids) {
...@@ -124,13 +130,15 @@ ...@@ -124,13 +130,15 @@
124 addProp(tbody, i+1, d); 130 addProp(tbody, i+1, d);
125 }); 131 });
126 dpa('hr'); 132 dpa('hr');
133 + dpa('div').classed('actionBtns', true);
127 } 134 }
128 135
129 - function addAction(text, cb) { 136 + function addAction(o) {
130 - dpa('div') 137 + var btnDiv = d3.select('#' + idDet)
131 - .classed('actionBtn', true) 138 + .select('.actionBtns')
132 - .text(text) 139 + .append('div')
133 - .on('click', cb); 140 + .classed('actionBtn', true);
141 + bns.button(btnDiv, idDet + o.id, o.gid, o.cb, o.tt);
134 } 142 }
135 143
136 var friendlyIndex = { 144 var friendlyIndex = {
...@@ -336,15 +344,16 @@ ...@@ -336,15 +344,16 @@
336 angular.module('ovTopo') 344 angular.module('ovTopo')
337 .factory('TopoPanelService', 345 .factory('TopoPanelService',
338 ['$log', 'FnService', 'PanelService', 'GlyphService', 346 ['$log', 'FnService', 'PanelService', 'GlyphService',
339 - 'FlashService', 'WebSocketService', 347 + 'FlashService', 'WebSocketService', 'ButtonService',
340 348
341 - function (_$log_, _fs_, _ps_, _gs_, _flash_, _wss_) { 349 + function (_$log_, _fs_, _ps_, _gs_, _flash_, _wss_, _bns_) {
342 $log = _$log_; 350 $log = _$log_;
343 fs = _fs_; 351 fs = _fs_;
344 ps = _ps_; 352 ps = _ps_;
345 gs = _gs_; 353 gs = _gs_;
346 flash = _flash_; 354 flash = _flash_;
347 wss = _wss_; 355 wss = _wss_;
356 + bns = _bns_;
348 357
349 return { 358 return {
350 initPanels: initPanels, 359 initPanels: initPanels,
......
...@@ -186,13 +186,28 @@ ...@@ -186,13 +186,28 @@
186 tps.displayMulti(selectOrder); 186 tps.displayMulti(selectOrder);
187 187
188 // always add the 'show traffic' action 188 // always add the 'show traffic' action
189 - tps.addAction('Show Related Traffic', tts.showRelatedIntentsAction); 189 + tps.addAction({
190 + id: '-mult-rel-traf-btn',
191 + gid: 'allTraffic',
192 + cb: tts.showRelatedIntentsAction,
193 + tt: 'Show Related Traffic'
194 + });
190 195
191 // add other actions, based on what is selected... 196 // add other actions, based on what is selected...
192 if (nSel() === 2 && allSelectionsClass('host')) { 197 if (nSel() === 2 && allSelectionsClass('host')) {
193 - tps.addAction('Create Host-to-Host Flow', tts.addHostIntentAction); 198 + tps.addAction({
199 + id: 'host-flow-btn',
200 + gid: 'endstation',
201 + cb: tts.addHostIntentAction,
202 + tt: 'Create Host-to-Host Flow'
203 + });
194 } else if (nSel() >= 2 && allSelectionsClass('host')) { 204 } else if (nSel() >= 2 && allSelectionsClass('host')) {
195 - tps.addAction('Create Multi-Source Flow', tts.addMultiSourceIntentAction); 205 + tps.addAction({
206 + id: 'mult-src-flow-btn',
207 + gid: 'flows',
208 + cb: tts.addMultiSourceIntentAction,
209 + tt: 'Create Multi-Source Flow'
210 + });
196 } 211 }
197 212
198 tts.cancelTraffic(); 213 tts.cancelTraffic();
...@@ -209,11 +224,21 @@ ...@@ -209,11 +224,21 @@
209 tps.displaySingle(data); 224 tps.displaySingle(data);
210 225
211 // always add the 'show traffic' action 226 // always add the 'show traffic' action
212 - tps.addAction('Show Related Traffic', tts.showRelatedIntentsAction); 227 + tps.addAction({
228 + id: '-sin-rel-traf-btn',
229 + gid: 'intentTraffic',
230 + cb: tts.showRelatedIntentsAction,
231 + tt: 'Show Related Traffic'
232 + });
213 233
214 // add other actions, based on what is selected... 234 // add other actions, based on what is selected...
215 if (data.type === 'switch') { 235 if (data.type === 'switch') {
216 - tps.addAction('Show Device Flows', tts.showDeviceLinkFlowsAction); 236 + tps.addAction({
237 + id: 'sin-dev-flows-btn',
238 + gid: 'flows',
239 + cb: tts.showDeviceLinkFlowsAction,
240 + tt: 'Show Device Flows'
241 + });
217 } 242 }
218 243
219 tps.displaySomething(); 244 tps.displaySomething();
......
...@@ -18,14 +18,17 @@ ...@@ -18,14 +18,17 @@
18 ONOS GUI -- Topo View -- Topo Event Service - Unit Tests 18 ONOS GUI -- Topo View -- Topo Event Service - Unit Tests
19 */ 19 */
20 describe('factory: view/topo/topoEvent.js', function() { 20 describe('factory: view/topo/topoEvent.js', function() {
21 - var $log, fs, tes; 21 + var $log, fs, tes, bns;
22 22
23 - beforeEach(module('ovTopo', 'onosNav', 'onosUtil', 'onosLayer', 'ngRoute')); 23 + beforeEach(module('ovTopo', 'onosNav', 'onosUtil', 'onosLayer', 'ngRoute',
24 + 'onosWidget'));
24 25
25 - beforeEach(inject(function (_$log_, FnService, TopoEventService) { 26 + beforeEach(inject(function (_$log_, FnService,
27 + TopoEventService, ButtonService) {
26 $log = _$log_; 28 $log = _$log_;
27 fs = FnService; 29 fs = FnService;
28 tes = TopoEventService; 30 tes = TopoEventService;
31 + bns = ButtonService;
29 })); 32 }));
30 33
31 it('should define TopoEventService', function () { 34 it('should define TopoEventService', function () {
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
18 ONOS GUI -- Topo View -- Topo Filter Service - Unit Tests 18 ONOS GUI -- Topo View -- Topo Filter Service - Unit Tests
19 */ 19 */
20 describe('factory: view/topo/topoFilter.js', function() { 20 describe('factory: view/topo/topoFilter.js', function() {
21 - var $log, fs, fltr, api; 21 + var $log, fs, fltr, bns, api;
22 22
23 var mockNodes = { 23 var mockNodes = {
24 each: function () {}, 24 each: function () {},
...@@ -29,12 +29,15 @@ describe('factory: view/topo/topoFilter.js', function() { ...@@ -29,12 +29,15 @@ describe('factory: view/topo/topoFilter.js', function() {
29 classed: function () {} 29 classed: function () {}
30 }; 30 };
31 31
32 - beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav')); 32 + beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
33 + 'onosWidget'));
33 34
34 - beforeEach(inject(function (_$log_, FnService, TopoFilterService) { 35 + beforeEach(inject(function (_$log_, FnService,
36 + TopoFilterService, ButtonService) {
35 $log = _$log_; 37 $log = _$log_;
36 fs = FnService; 38 fs = FnService;
37 fltr = TopoFilterService; 39 fltr = TopoFilterService;
40 + bns = ButtonService;
38 41
39 api = { 42 api = {
40 node: function () { return mockNodes; }, 43 node: function () { return mockNodes; },
......
...@@ -18,14 +18,17 @@ ...@@ -18,14 +18,17 @@
18 ONOS GUI -- Topo View -- Topo Force Service - Unit Tests 18 ONOS GUI -- Topo View -- Topo Force Service - Unit Tests
19 */ 19 */
20 describe('factory: view/topo/topoForce.js', function() { 20 describe('factory: view/topo/topoForce.js', function() {
21 - var $log, fs, tfs; 21 + var $log, fs, tfs, bns;
22 22
23 - beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav')); 23 + beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
24 + 'onosWidget'));
24 25
25 - beforeEach(inject(function (_$log_, FnService, TopoForceService) { 26 + beforeEach(inject(function (_$log_, FnService,
27 + TopoForceService, ButtonService) {
26 $log = _$log_; 28 $log = _$log_;
27 fs = FnService; 29 fs = FnService;
28 tfs = TopoForceService; 30 tfs = TopoForceService;
31 + bns = ButtonService;
29 })); 32 }));
30 33
31 it('should define TopoForceService', function () { 34 it('should define TopoForceService', function () {
......
...@@ -18,14 +18,17 @@ ...@@ -18,14 +18,17 @@
18 ONOS GUI -- Topo View -- Topo Panel Service - Unit Tests 18 ONOS GUI -- Topo View -- Topo Panel Service - Unit Tests
19 */ 19 */
20 describe('factory: view/topo/topoPanel.js', function() { 20 describe('factory: view/topo/topoPanel.js', function() {
21 - var $log, fs, tps; 21 + var $log, fs, tps, bns;
22 22
23 - beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav')); 23 + beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
24 + 'onosWidget'));
24 25
25 - beforeEach(inject(function (_$log_, FnService, TopoPanelService) { 26 + beforeEach(inject(function (_$log_, FnService,
27 + TopoPanelService, ButtonService) {
26 $log = _$log_; 28 $log = _$log_;
27 fs = FnService; 29 fs = FnService;
28 tps = TopoPanelService; 30 tps = TopoPanelService;
31 + bns = ButtonService;
29 })); 32 }));
30 33
31 it('should define TopoPanelService', function () { 34 it('should define TopoPanelService', function () {
......
...@@ -18,14 +18,17 @@ ...@@ -18,14 +18,17 @@
18 ONOS GUI -- Topo View -- Topo Selection Service - Unit Tests 18 ONOS GUI -- Topo View -- Topo Selection Service - Unit Tests
19 */ 19 */
20 describe('factory: view/topo/topoSelect.js', function() { 20 describe('factory: view/topo/topoSelect.js', function() {
21 - var $log, fs, tss; 21 + var $log, fs, tss, bns;
22 22
23 - beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav')); 23 + beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
24 + 'onosWidget'));
24 25
25 - beforeEach(inject(function (_$log_, FnService, TopoSelectService) { 26 + beforeEach(inject(function (_$log_, FnService,
27 + TopoSelectService, ButtonService) {
26 $log = _$log_; 28 $log = _$log_;
27 fs = FnService; 29 fs = FnService;
28 tss = TopoSelectService; 30 tss = TopoSelectService;
31 + bns = ButtonService;
29 })); 32 }));
30 33
31 it('should define TopoSelectService', function () { 34 it('should define TopoSelectService', function () {
......