홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Steven Burrows
bbe3dda1 1 parent d576f64f

Removed blank lines 

Removed Weight from the Node Models
Removed console.log
Added new device and region icons

Change-Id: I3203bd5a3acf371088af0a71fc40b182c95e0b7b
Inline Side-by-side
Showing 5 changed files with 119 additions and 138 deletions
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
102 } 102 }
103 103
104 function incDevLabIndex() { 104 function incDevLabIndex() {
105 - setDevLabIndex(device3ndex+1); 105 + setDevLabIndex(deviceLabelIndex+1);
106 switch(deviceLabelIndex) { 106 switch(deviceLabelIndex) {
107 case 0: return 'Hide device labels'; 107 case 0: return 'Hide device labels';
108 case 1: return 'Show friendly device labels'; 108 case 1: return 'Show friendly device labels';
......
...@@ -22,16 +22,13 @@ ...@@ -22,16 +22,13 @@
22 (function () { 22 (function () {
23 'use strict'; 23 'use strict';
24 24
25 - var Collection, Model, is, sus, ts; 25 + var Collection, Model;
26 26
27 var remappedDeviceTypes = { 27 var remappedDeviceTypes = {
28 + switch: 'm_switch',
28 virtual: 'cord' 29 virtual: 'cord'
29 }; 30 };
30 31
31 - // configuration
32 - var devIconDim = 36,
33 - halfDevIcon = devIconDim / 2;
34 -
35 function createDeviceCollection(data, region) { 32 function createDeviceCollection(data, region) {
36 33
37 var DeviceCollection = Collection.extend({ 34 var DeviceCollection = Collection.extend({
...@@ -57,78 +54,23 @@ ...@@ -57,78 +54,23 @@
57 return deviceCollection; 54 return deviceCollection;
58 } 55 }
59 56
60 - function mapDeviceTypeToGlyph(type) {
61 - return remappedDeviceTypes[type] || type || 'unknown';
62 - }
63 -
64 - // note: these are the device icon colors without affinity (no master)
65 - var dColTheme = {
66 - light: {
67 - online: '#444444',
68 - offline: '#cccccc'
69 - },
70 - dark: {
71 - // TODO: theme
72 - online: '#444444',
73 - offline: '#cccccc'
74 - }
75 - };
76 -
77 - function deviceGlyphColor(d) {
78 - var o = this.node.online,
79 - id = this.node.master, // TODO: This should be from node.master
80 - otag = o ? 'online' : 'offline';
81 -
82 - return o ? sus.cat7().getColor(id, 0, ts.theme()) :
83 - dColTheme[ts.theme()][otag];
84 - }
85 -
86 - function setDeviceColor() {
87 - this.el.select('use')
88 - .style('fill', this.deviceGlyphColor());
89 - }
90 57
91 angular.module('ovTopo2') 58 angular.module('ovTopo2')
92 .factory('Topo2DeviceService', 59 .factory('Topo2DeviceService',
93 - ['Topo2Collection', 'Topo2NodeModel', 'IconService', 60 + ['Topo2Collection', 'Topo2NodeModel',
94 - 'SvgUtilService', 'ThemeService', 61 + function (_c_, _nm_) {
95 -
96 - function (_c_, _nm_, _is_, _sus_, _ts_, classnames) {
97 62
98 - is = _is_;
99 - sus = _sus_;
100 - ts = _ts_;
101 Collection = _c_; 63 Collection = _c_;
102 64
103 Model = _nm_.extend({ 65 Model = _nm_.extend({
104 initialize: function () { 66 initialize: function () {
105 - this.set('weight', 0); 67 + this.super = this.constructor.__super__;
106 - this.constructor.__super__.initialize.apply(this, arguments); 68 + this.super.initialize.apply(this, arguments);
107 }, 69 },
108 nodeType: 'device', 70 nodeType: 'device',
109 - deviceGlyphColor: deviceGlyphColor, 71 + icon: function () {
110 - mapDeviceTypeToGlyph: mapDeviceTypeToGlyph, 72 + var type = this.get('type');
111 - setDeviceColor: setDeviceColor, 73 + return remappedDeviceTypes[type] || type || 'unknown';
112 - onEnter: function (el) {
113 -
114 - var node = d3.select(el),
115 - glyphId = mapDeviceTypeToGlyph(this.get('type')),
116 - label = this.trimLabel(this.label()),
117 - glyph, labelWidth;
118 -
119 - this.el = node;
120 -
121 - // Label
122 - var labelElements = this.addLabelElements(label);
123 - labelWidth = label ? this.computeLabelWidth(node) : 0;
124 - labelElements.rect.attr(this.iconBox(devIconDim, labelWidth));
125 -
126 - // Icon
127 - glyph = is.addDeviceIcon(node, glyphId, devIconDim);
128 - glyph.attr(this.iconBox(devIconDim, 0));
129 -
130 - node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
131 - this.render();
132 }, 74 },
133 onExit: function () { 75 onExit: function () {
134 var node = this.el; 76 var node = this.el;
...@@ -142,9 +84,6 @@ ...@@ -142,9 +84,6 @@
142 .style('stroke-fill', '#555') 84 .style('stroke-fill', '#555')
143 .style('fill', '#888') 85 .style('fill', '#888')
144 .style('opacity', 0.5); 86 .style('opacity', 0.5);
145 - },
146 - render: function () {
147 - this.setDeviceColor();
148 } 87 }
149 }); 88 });
150 89
......
...@@ -14,10 +14,11 @@ ...@@ -14,10 +14,11 @@
14 * limitations under the License. 14 * limitations under the License.
15 */ 15 */
16 16
17 -/* 17 + /*
18 - ONOS GUI -- Topology Force Module. 18 + ONOS GUI -- Topology Map Dialog
19 - Visualization of the topology in an SVG layer, using a D3 Force Layout. 19 + Display of the dialog window to select a background map for the current topology view
20 - */ 20 + NOTE: This will be deprecated in the future
21 + */
21 22
22 (function () { 23 (function () {
23 'use strict'; 24 'use strict';
......
...@@ -22,16 +22,37 @@ ...@@ -22,16 +22,37 @@
22 (function () { 22 (function () {
23 'use strict'; 23 'use strict';
24 24
25 - var randomService, ps; 25 + var randomService, ps, sus, is, ts;
26 var fn; 26 var fn;
27 27
28 // Internal state; 28 // Internal state;
29 var nearDist = 15; 29 var nearDist = 15;
30 30
31 var devIconDim = 36, 31 var devIconDim = 36,
32 - labelPad = 10, 32 + labelPad = 5,
33 - halfDevIcon = devIconDim / 2, 33 + textPad = 5,
34 - nodeLabelIndex = 1; 34 + halfDevIcon = devIconDim / 2;
35 +
36 + // note: these are the device icon colors without affinity (no master)
37 + var dColTheme = {
38 + light: {
39 + online: '#444444',
40 + offline: '#cccccc'
41 + },
42 + dark: {
43 + // TODO: theme
44 + online: '#444444',
45 + offline: '#cccccc'
46 + }
47 + };
48 +
49 + function devGlyphColor(d) {
50 + var o = this.get('online'),
51 + id = this.get('master'),
52 + otag = o ? 'online' : 'offline';
53 + return o ? sus.cat7().getColor(id, 0, ts.theme()) :
54 + dColTheme[ts.theme()][otag];
55 + }
35 56
36 function positionNode(node, forUpdate) { 57 function positionNode(node, forUpdate) {
37 58
...@@ -108,20 +129,30 @@ ...@@ -108,20 +129,30 @@
108 angular.module('ovTopo2') 129 angular.module('ovTopo2')
109 .factory('Topo2NodeModel', 130 .factory('Topo2NodeModel',
110 ['Topo2Model', 'FnService', 'RandomService', 'Topo2PrefsService', 131 ['Topo2Model', 'FnService', 'RandomService', 'Topo2PrefsService',
111 - function (Model, _fn_, _RandomService_, _ps_) { 132 + 'SvgUtilService', 'IconService', 'ThemeService',
133 + function (Model, _fn_, _RandomService_, _ps_, _sus_, _is_, _ts_) {
112 134
113 randomService = _RandomService_; 135 randomService = _RandomService_;
136 + ts = _ts_;
114 fn = _fn_; 137 fn = _fn_;
115 ps = _ps_; 138 ps = _ps_;
139 + sus = _sus_;
140 + is = _is_;
116 141
117 return Model.extend({ 142 return Model.extend({
118 initialize: function () { 143 initialize: function () {
119 this.node = this.createNode(); 144 this.node = this.createNode();
120 }, 145 },
121 - onEnter: function () {}, // To be overridden by sub-class 146 + setUpEvents: function () {
122 - onExit: function () {}, // To be overridden by sub-class 147 + var _this = this;
148 + angular.forEach(this.events, function (handler, key) {
149 + _this.el.on(key, _this[handler].bind(_this));
150 + });
151 + },
152 + icon: function () {
153 + return 'unknown';
154 + },
123 label: function () { 155 label: function () {
124 -
125 var props = this.get('props'), 156 var props = this.get('props'),
126 id = this.get('id'), 157 id = this.get('id'),
127 friendlyName = props ? props.name : id, 158 friendlyName = props ? props.name : id,
...@@ -141,17 +172,39 @@ ...@@ -141,17 +172,39 @@
141 }, 172 },
142 addLabelElements: function (label) { 173 addLabelElements: function (label) {
143 var rect = this.el.append('rect'); 174 var rect = this.el.append('rect');
175 + var glythRect = this.el.append('rect')
176 + .attr('y', -halfDevIcon)
177 + .attr('x', -halfDevIcon)
178 + .attr('width', devIconDim)
179 + .attr('height', devIconDim)
180 + .style('fill', devGlyphColor.bind(this));
181 +
144 var text = this.el.append('text').text(label) 182 var text = this.el.append('text').text(label)
145 .attr('text-anchor', 'left') 183 .attr('text-anchor', 'left')
146 .attr('y', '0.3em') 184 .attr('y', '0.3em')
147 - .attr('x', halfDevIcon + labelPad); 185 + .attr('x', halfDevIcon + labelPad + textPad);
148 186
149 return { 187 return {
150 rect: rect, 188 rect: rect,
189 + glythRect: glythRect,
151 text: text 190 text: text
152 }; 191 };
153 }, 192 },
154 - iconBox: function(dim, labelWidth) { 193 + labelBox: function (dim, labelWidth) {
194 + var _textPad = (textPad * 2) - labelPad;
195 +
196 + if (labelWidth === 0) {
197 + _textPad = 0;
198 + }
199 +
200 + return {
201 + x: -dim / 2 - labelPad,
202 + y: -dim / 2 - labelPad,
203 + width: dim + labelWidth + (labelPad * 2) + _textPad,
204 + height: dim + (labelPad * 2)
205 + };
206 + },
207 + iconBox: function (dim, labelWidth) {
155 return { 208 return {
156 x: -dim / 2, 209 x: -dim / 2,
157 y: -dim / 2, 210 y: -dim / 2,
...@@ -181,10 +234,9 @@ ...@@ -181,10 +234,9 @@
181 234
182 node.select('rect') 235 node.select('rect')
183 .transition() 236 .transition()
184 - .attr(this.iconBox(devIconDim, labelWidth)); 237 + .attr(this.labelBox(devIconDim, labelWidth));
185 }, 238 },
186 createNode: function () { 239 createNode: function () {
187 -
188 var node = angular.extend({}, this.attributes); 240 var node = angular.extend({}, this.attributes);
189 241
190 // Augment as needed... 242 // Augment as needed...
...@@ -192,6 +244,32 @@ ...@@ -192,6 +244,32 @@
192 node.svgClass = this.svgClassName(); 244 node.svgClass = this.svgClassName();
193 positionNode(node); 245 positionNode(node);
194 return node; 246 return node;
247 + },
248 + onEnter: function (el) {
249 + this.el = d3.select(el);
250 + this.render();
251 + },
252 + render: function () {
253 + var node = this.el,
254 + glyphId = this.icon(this.get('type')),
255 + label = this.trimLabel(this.label()),
256 + glyph, labelWidth;
257 +
258 + // Label
259 + var labelElements = this.addLabelElements(label);
260 + labelWidth = label ? this.computeLabelWidth(node) : 0;
261 + labelElements.rect.attr(this.labelBox(devIconDim, labelWidth));
262 +
263 + // Icon
264 + glyph = is.addDeviceIcon(node, glyphId, devIconDim);
265 + glyph.attr(this.iconBox(devIconDim, 0));
266 + glyph.style('fill', 'white');
267 +
268 + node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
269 +
270 + if (this.events) {
271 + this.setUpEvents();
272 + }
195 } 273 }
196 }); 274 });
197 }] 275 }]
......
...@@ -22,17 +22,13 @@ ...@@ -22,17 +22,13 @@
22 (function () { 22 (function () {
23 'use strict'; 23 'use strict';
24 24
25 - var wss, is, sus; 25 + var wss;
26 var Collection, Model; 26 var Collection, Model;
27 27
28 var remappedDeviceTypes = { 28 var remappedDeviceTypes = {
29 virtual: 'cord' 29 virtual: 'cord'
30 }; 30 };
31 31
32 - // configuration
33 - var devIconDim = 36,
34 - halfDevIcon = devIconDim / 2;
35 -
36 function createSubRegionCollection(data, region) { 32 function createSubRegionCollection(data, region) {
37 33
38 var SubRegionCollection = Collection.extend({ 34 var SubRegionCollection = Collection.extend({
...@@ -42,39 +38,30 @@ ...@@ -42,39 +38,30 @@
42 return new SubRegionCollection(data); 38 return new SubRegionCollection(data);
43 } 39 }
44 40
45 - function mapDeviceTypeToGlyph(type) {
46 - return remappedDeviceTypes[type] || type || 'switch';
47 - }
48 -
49 - function iconBox(dim, labelWidth) {
50 - return {
51 - x: -dim / 2,
52 - y: -dim / 2,
53 - width: dim + labelWidth,
54 - height: dim
55 - };
56 - }
57 -
58 angular.module('ovTopo2') 41 angular.module('ovTopo2')
59 .factory('Topo2SubRegionService', 42 .factory('Topo2SubRegionService',
60 ['WebSocketService', 'Topo2Collection', 'Topo2NodeModel', 43 ['WebSocketService', 'Topo2Collection', 'Topo2NodeModel',
61 - 'IconService', 'SvgUtilService', 'ThemeService', 'Topo2ViewService', 44 + 'ThemeService', 'Topo2ViewService',
62 45
63 - function (_wss_, _c_, _NodeModel_, _is_, _sus_, _ts_, _t2vs_) { 46 + function (_wss_, _c_, _NodeModel_, _ts_, _t2vs_) {
64 47
65 wss = _wss_; 48 wss = _wss_;
66 - is = _is_;
67 - sus = _sus_;
68 Collection = _c_; 49 Collection = _c_;
69 50
70 Model = _NodeModel_.extend({ 51 Model = _NodeModel_.extend({
71 initialize: function () { 52 initialize: function () {
72 - this.set('weight', 0); 53 + this.super = this.constructor.__super__;
73 - this.constructor.__super__.initialize.apply(this, arguments); 54 + this.super.initialize.apply(this, arguments);
55 + },
56 + events: {
57 + 'dblclick': 'navigateToRegion'
74 }, 58 },
75 nodeType: 'sub-region', 59 nodeType: 'sub-region',
76 - mapDeviceTypeToGlyph: mapDeviceTypeToGlyph, 60 + icon: function () {
77 - onClick: function () { 61 + var type = this.get('type');
62 + return remappedDeviceTypes[type] || type || 'm_cloud';
63 + },
64 + navigateToRegion: function () {
78 65
79 if (d3.event.defaultPrevented) return; 66 if (d3.event.defaultPrevented) return;
80 67
...@@ -82,31 +69,7 @@ ...@@ -82,31 +69,7 @@
82 dir: 'down', 69 dir: 'down',
83 rid: this.get('id') 70 rid: this.get('id')
84 }); 71 });
85 - }, 72 + }
86 - onEnter: function (el) {
87 -
88 - var node = d3.select(el),
89 - glyphId = mapDeviceTypeToGlyph(this.get('type')),
90 - label = this.trimLabel(this.label()),
91 - glyph, labelWidth;
92 -
93 - this.el = node;
94 - this.el.on('click', this.onClick.bind(this));
95 -
96 - // Label
97 - var labelElements = this.addLabelElements(label);
98 - labelWidth = label ? this.computeLabelWidth(node) : 0;
99 - labelElements.rect.attr(iconBox(devIconDim, labelWidth));
100 -
101 - // Icon
102 - glyph = is.addDeviceIcon(node, glyphId, devIconDim);
103 - glyph.attr(iconBox(devIconDim, 0));
104 -
105 - node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
106 - this.render();
107 - },
108 - onExit: function () {},
109 - render: function () {}
110 }); 73 });
111 74
112 return { 75 return {
......