Committed by
Gerrit Code Review
GUI -- Action buttons changed to glyphs, tooltip and multiselect nodes bugs fixed
Change-Id: Idf800e589f12f139b6a39cdcd8144be9214ceb23
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 () { | ... | ... |
-
Please register or login to post a comment