홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
1894d798 1 parent f8a0f6c2

GUI -- Added handling of hosts and links. (Still WIP). 

Change-Id: I0ad3b16d47b264b6812f732f220230a2ae92de02
Expand all
Inline Side-by-side
Showing 10 changed files with 205 additions and 30 deletions
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 (function () { 20 (function () {
21 'use strict'; 21 'use strict';
22 22
23 - var $log, fs, gs; 23 + var $log, fs, gs, sus;
24 24
25 var vboxSize = 50, 25 var vboxSize = 50,
26 cornerSize = vboxSize / 10, 26 cornerSize = vboxSize / 10,
...@@ -144,8 +144,21 @@ ...@@ -144,8 +144,21 @@
144 return g; 144 return g;
145 } 145 }
146 146
147 - function addHostIcon(elem, glyphId) { 147 + function addHostIcon(elem, radius, glyphId) {
148 - // TODO: 148 + var dim = radius * 1.5,
149 + xlate = -dim / 2,
150 + g = elem.append('g')
151 + .attr('class', 'svgIcon hostIcon');
152 +
153 + g.append('circle').attr('r', radius);
154 +
155 + g.append('use').attr({
156 + 'xlink:href': '#' + glyphId,
157 + width: dim,
158 + height: dim,
159 + transform: sus.translate(xlate,xlate)
160 + });
161 + return g;
149 } 162 }
150 163
151 164
...@@ -154,10 +167,13 @@ ...@@ -154,10 +167,13 @@
154 167
155 angular.module('onosSvg') 168 angular.module('onosSvg')
156 .factory('IconService', ['$log', 'FnService', 'GlyphService', 169 .factory('IconService', ['$log', 'FnService', 'GlyphService',
157 - function (_$log_, _fs_, _gs_) { 170 + 'SvgUtilService',
171 +
172 + function (_$log_, _fs_, _gs_, _sus_) {
158 $log = _$log_; 173 $log = _$log_;
159 fs = _fs_; 174 fs = _fs_;
160 gs = _gs_; 175 gs = _gs_;
176 + sus = _sus_;
161 177
162 return { 178 return {
163 loadIcon: loadIcon, 179 loadIcon: loadIcon,
......
...@@ -325,19 +325,121 @@ ...@@ -325,19 +325,121 @@
325 /* Host Nodes */ 325 /* Host Nodes */
326 326
327 #ov-topo svg .node.host { 327 #ov-topo svg .node.host {
328 - stroke: #000;
329 } 328 }
330 329
331 #ov-topo svg .node.host text { 330 #ov-topo svg .node.host text {
332 - fill: #846;
333 stroke: none; 331 stroke: none;
334 font: 9pt sans-serif; 332 font: 9pt sans-serif;
335 } 333 }
334 +.light #ov-topo svg .node.host text {
335 + fill: #846;
336 +}
337 +.dark #ov-topo svg .node.host text {
338 + fill: #BB809D;
339 +}
336 340
337 -svg .node.host circle { 341 +.light svg .node.host circle {
338 stroke: #000; 342 stroke: #000;
339 fill: #edb; 343 fill: #edb;
340 } 344 }
345 +.dark svg .node.host circle {
346 + stroke: #eee;
347 + fill: #B2A180;
348 +}
349 +
350 +.light svg .node.host .svgIcon {
351 + fill: #444;
352 +}
353 +.dark svg .node.host .svgIcon {
354 + fill: #222;
355 +}
356 +
357 +/* --- Topo Links --- */
358 +
359 +#ov-topo svg .link {
360 + opacity: .9;
361 +}
362 +
363 +#ov-topo svg .link.inactive {
364 + opacity: .5;
365 + stroke-dasharray: 8 4;
366 +}
367 +
368 +#ov-topo svg .link.secondary {
369 + stroke-width: 3px;
370 +}
371 +.light #ov-topo svg .link.secondary {
372 + stroke: rgba(0,153,51,0.5);
373 +}
374 +.dark #ov-topo svg .link.secondary {
375 + stroke: rgba(121,231,158,0.5);
376 +}
377 +
378 +#ov-topo svg .link.primary {
379 + stroke-width: 4px;
380 +}
381 +.light #ov-topo svg .link.primary {
382 + stroke: #ffA300;
383 +}
384 +.dark #ov-topo svg .link.primary {
385 + stroke: #D58E0F;
386 +}
387 +
388 +.light #ov-topo svg .link.animated {
389 + stroke: #ffA300;
390 +}
391 +.dark #ov-topo svg .link.animated {
392 + stroke: #D58E0F;
393 +}
394 +
395 +#ov-topo svg .link.secondary.optical {
396 + stroke-width: 4px;
397 +}
398 +.light #ov-topo svg .link.secondary.optical {
399 + stroke: rgba(128,64,255,0.5);
400 +}
401 +.dark #ov-topo svg .link.secondary.optical {
402 + stroke: rgba(164,139,215,0.5);
403 +}
341 404
405 +#ov-topo svg .link.primary.optical {
406 + stroke-width: 6px;
407 +}
408 +.light #ov-topo svg .link.primary.optical {
409 + stroke: #74f;
410 +}
411 +.dark #ov-topo svg .link.primary.optical {
412 + stroke: #7352CD;
413 +}
414 +
415 +#ov-topo svg .link.animated.optical {
416 + stroke-width: 10px;
417 +}
418 +.light #ov-topo svg .link.animated.optical {
419 + stroke: #74f;
420 +}
421 +.dark #ov-topo svg .link.animated.optical {
422 + stroke: #7352CD;
423 +}
342 424
425 +#ov-topo svg .linkLabel rect {
426 + stroke: none;
427 +}
428 +.light #ov-topo svg .linkLabel rect {
429 + fill: #eee;
430 +}
431 +.dark #ov-topo svg .linkLabel rect {
432 + fill: #eee;
433 +}
343 434
435 +#ov-topo svg .linkLabel text {
436 + text-anchor: middle;
437 + stroke-width: 0.1;
438 + font-size: 9pt;
439 +}
440 +.light #ov-topo svg .linkLabel text {
441 + stroke: #777;
442 +}
443 +.dark #ov-topo svg .linkLabel text {
444 + stroke: #777;
445 +}
......
...@@ -198,12 +198,6 @@ ...@@ -198,12 +198,6 @@
198 return ms.loadMapInto(mapG, '*continental_us'); 198 return ms.loadMapInto(mapG, '*continental_us');
199 } 199 }
200 200
201 - // --- Force Layout --------------------------------------------------
202 -
203 - function setUpForce(xlink) {
204 - forceG = zoomLayer.append('g').attr('id', 'topo-force');
205 - tfs.initForce(forceG, xlink, svg.attr('width'), svg.attr('height'));
206 - }
207 201
208 // --- Controller Definition ----------------------------------------- 202 // --- Controller Definition -----------------------------------------
209 203
...@@ -219,8 +213,12 @@ ...@@ -219,8 +213,12 @@
219 function ($scope, _$log_, $loc, $timeout, _fs_, mast, 213 function ($scope, _$log_, $loc, $timeout, _fs_, mast,
220 _ks_, _zs_, _gs_, _ms_, _sus_, tes, _tfs_, tps, _tis_) { 214 _ks_, _zs_, _gs_, _ms_, _sus_, tes, _tfs_, tps, _tis_) {
221 var self = this, 215 var self = this,
222 - xlink = { 216 + projection,
223 - showNoDevs: showNoDevs 217 + uplink = {
218 + // provides function calls back into this space
219 + showNoDevs: showNoDevs,
220 + projection: function () { return projection; },
221 + sendEvent: tes.sendEvent
224 }; 222 };
225 223
226 $log = _$log_; 224 $log = _$log_;
...@@ -255,9 +253,15 @@ ...@@ -255,9 +253,15 @@
255 setUpDefs(); 253 setUpDefs();
256 setUpZoom(); 254 setUpZoom();
257 setUpNoDevs(); 255 setUpNoDevs();
258 - xlink.projectionPromise = setUpMap(); 256 + setUpMap().then(
259 - setUpForce(xlink); 257 + function (proj) {
260 - 258 + projection = proj;
259 + $log.debug('** We installed the projection: ', proj);
260 + }
261 + );
262 +
263 + forceG = zoomLayer.append('g').attr('id', 'topo-force');
264 + tfs.initForce(forceG, uplink, svg.attr('width'), svg.attr('height'));
261 tis.initInst(); 265 tis.initInst();
262 tps.initPanels(); 266 tps.initPanels();
263 tes.openSock(); 267 tes.openSock();
......
...@@ -34,9 +34,16 @@ ...@@ -34,9 +34,16 @@
34 updateInstance: updateInstance, 34 updateInstance: updateInstance,
35 removeInstance: removeInstance, 35 removeInstance: removeInstance,
36 addDevice: addDevice, 36 addDevice: addDevice,
37 - updateDevice: updateDevice 37 + updateDevice: updateDevice,
38 - // TODO: implement remaining handlers.. 38 + removeDevice: removeDevice,
39 + addHost: addHost,
40 + updateHost: updateHost,
41 + removeHost: removeHost,
42 + addLink: addLink,
43 + updateLink: updateLink,
44 + removeLink: removeLink
39 45
46 + // TODO: implement remaining handlers..
40 }; 47 };
41 48
42 function unknownEvent(ev) { 49 function unknownEvent(ev) {
...@@ -45,6 +52,9 @@ ...@@ -45,6 +52,9 @@
45 52
46 // === Event Handlers === 53 // === Event Handlers ===
47 54
55 + // NOTE: --- once these are done, we will collapse them into
56 + // a more compact data structure... but for now, write in full..
57 +
48 function showSummary(ev) { 58 function showSummary(ev) {
49 $log.debug(' **** Show Summary **** ', ev.payload); 59 $log.debug(' **** Show Summary **** ', ev.payload);
50 tps.showSummary(ev.payload); 60 tps.showSummary(ev.payload);
...@@ -75,6 +85,42 @@ ...@@ -75,6 +85,42 @@
75 tfs.updateDevice(ev.payload); 85 tfs.updateDevice(ev.payload);
76 } 86 }
77 87
88 + function removeDevice(ev) {
89 + $log.debug(' **** Remove Device **** ', ev.payload);
90 + tfs.removeDevice(ev.payload);
91 + }
92 +
93 + function addHost(ev) {
94 + $log.debug(' **** Add Host **** ', ev.payload);
95 + tfs.addHost(ev.payload);
96 + }
97 +
98 + function updateHost(ev) {
99 + $log.debug(' **** Update Host **** ', ev.payload);
100 + tfs.updateHost(ev.payload);
101 + }
102 +
103 + function removeHost(ev) {
104 + $log.debug(' **** Remove Host **** ', ev.payload);
105 + tfs.removeHost(ev.payload);
106 + }
107 +
108 + function addLink(ev) {
109 + $log.debug(' **** Add Link **** ', ev.payload);
110 + tfs.addLink(ev.payload);
111 + }
112 +
113 + function updateLink(ev) {
114 + $log.debug(' **** Update Link **** ', ev.payload);
115 + tfs.updateLink(ev.payload);
116 + }
117 +
118 + function removeLink(ev) {
119 + $log.debug(' **** Remove Link **** ', ev.payload);
120 + tfs.removeLink(ev.payload);
121 + }
122 +
123 +
78 // ========================== 124 // ==========================
79 125
80 var dispatcher = { 126 var dispatcher = {
...@@ -122,14 +168,9 @@ ...@@ -122,14 +168,9 @@
122 tis = _tis_; 168 tis = _tis_;
123 tfs = _tfs_; 169 tfs = _tfs_;
124 170
125 - function bindDispatcher(TopoDomElementsPassedHere) {
126 - // TODO: store refs to topo DOM elements...
127 -
128 - return dispatcher;
129 - }
130 -
131 // TODO: handle "guiSuccessor" functionality (replace host) 171 // TODO: handle "guiSuccessor" functionality (replace host)
132 // TODO: implement retry on close functionality 172 // TODO: implement retry on close functionality
173 +
133 function openSock() { 174 function openSock() {
134 wsock = wss.createWebSocket('topology', { 175 wsock = wss.createWebSocket('topology', {
135 onOpen: onWsOpen, 176 onOpen: onWsOpen,
...@@ -151,9 +192,9 @@ ...@@ -151,9 +192,9 @@
151 } 192 }
152 193
153 return { 194 return {
154 - bindDispatcher: bindDispatcher,
155 openSock: openSock, 195 openSock: openSock,
156 - closeSock: closeSock 196 + closeSock: closeSock,
197 + sendEvent: dispatcher.sendEvent
157 }; 198 };
158 }]); 199 }]);
159 }()); 200 }());
......
...@@ -323,9 +323,11 @@ ...@@ -323,9 +323,11 @@
323 return { 323 return {
324 initInst: initInst, 324 initInst: initInst,
325 destroyInst: destroyInst, 325 destroyInst: destroyInst,
326 +
326 addInstance: addInstance, 327 addInstance: addInstance,
327 updateInstance: updateInstance, 328 updateInstance: updateInstance,
328 removeInstance: removeInstance, 329 removeInstance: removeInstance,
330 +
329 isVisible: function () { return oiBox.isVisible(); }, 331 isVisible: function () { return oiBox.isVisible(); },
330 show: function () { oiBox.show(); }, 332 show: function () { oiBox.show(); },
331 hide: function () { oiBox.hide(); } 333 hide: function () { oiBox.hide(); }
......
...@@ -34,7 +34,7 @@ describe('factory: view/topo/topoEvent.js', function() { ...@@ -34,7 +34,7 @@ describe('factory: view/topo/topoEvent.js', function() {
34 34
35 it('should define api functions', function () { 35 it('should define api functions', function () {
36 expect(fs.areFunctions(tes, [ 36 expect(fs.areFunctions(tes, [
37 - 'bindDispatcher', 'openSock', 'closeSock' 37 + 'openSock', 'closeSock', 'sendEvent'
38 ])).toBeTruthy(); 38 ])).toBeTruthy();
39 }); 39 });
40 40
......
...@@ -35,7 +35,9 @@ describe('factory: view/topo/topoForce.js', function() { ...@@ -35,7 +35,9 @@ describe('factory: view/topo/topoForce.js', function() {
35 it('should define api functions', function () { 35 it('should define api functions', function () {
36 expect(fs.areFunctions(tfs, [ 36 expect(fs.areFunctions(tfs, [
37 'initForce', 'resize', 'updateDeviceColors', 37 'initForce', 'resize', 'updateDeviceColors',
38 - 'addDevice', 'updateDevice' 38 + 'addDevice', 'updateDevice', 'removeDevice',
39 + 'addHost', 'updateHost', 'removeHost',
40 + 'addLink', 'updateLink', 'removeLink'
39 ])).toBeTruthy(); 41 ])).toBeTruthy();
40 }); 42 });
41 43
......
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
12 "unknown", 12 "unknown",
13 "0E:2A:69:30:13:86" 13 "0E:2A:69:30:13:86"
14 ], 14 ],
15 + "metaUi": {
16 + "x": 800,
17 + "y": 180
18 + },
15 "props": {} 19 "props": {}
16 } 20 }
17 } 21 }
......
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
12 "unknown", 12 "unknown",
13 "A6:96:E5:03:52:5F" 13 "A6:96:E5:03:52:5F"
14 ], 14 ],
15 + "metaUi": {
16 + "x": 520,
17 + "y": 250
18 + },
15 "props": {} 19 "props": {}
16 } 20 }
17 } 21 }
......