Removed blank lines
Removed Weight from the Node Models
Removed console.log
Added new device and region icons
Change-Id: I3203bd5a3acf371088af0a71fc40b182c95e0b7b
diff --git a/web/gui/src/main/webapp/app/view/topo/topoD3.js b/web/gui/src/main/webapp/app/view/topo/topoD3.js
index 3219012..5b669ce 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -102,7 +102,7 @@
}
function incDevLabIndex() {
- setDevLabIndex(device3ndex+1);
+ setDevLabIndex(deviceLabelIndex+1);
switch(deviceLabelIndex) {
case 0: return 'Hide device labels';
case 1: return 'Show friendly device labels';
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
index ac3e244..12b0a13 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
@@ -22,16 +22,13 @@
(function () {
'use strict';
- var Collection, Model, is, sus, ts;
+ var Collection, Model;
var remappedDeviceTypes = {
+ switch: 'm_switch',
virtual: 'cord'
};
- // configuration
- var devIconDim = 36,
- halfDevIcon = devIconDim / 2;
-
function createDeviceCollection(data, region) {
var DeviceCollection = Collection.extend({
@@ -57,78 +54,23 @@
return deviceCollection;
}
- function mapDeviceTypeToGlyph(type) {
- return remappedDeviceTypes[type] || type || 'unknown';
- }
-
- // note: these are the device icon colors without affinity (no master)
- var dColTheme = {
- light: {
- online: '#444444',
- offline: '#cccccc'
- },
- dark: {
- // TODO: theme
- online: '#444444',
- offline: '#cccccc'
- }
- };
-
- function deviceGlyphColor(d) {
- var o = this.node.online,
- id = this.node.master, // TODO: This should be from node.master
- otag = o ? 'online' : 'offline';
-
- return o ? sus.cat7().getColor(id, 0, ts.theme()) :
- dColTheme[ts.theme()][otag];
- }
-
- function setDeviceColor() {
- this.el.select('use')
- .style('fill', this.deviceGlyphColor());
- }
angular.module('ovTopo2')
.factory('Topo2DeviceService',
- ['Topo2Collection', 'Topo2NodeModel', 'IconService',
- 'SvgUtilService', 'ThemeService',
+ ['Topo2Collection', 'Topo2NodeModel',
+ function (_c_, _nm_) {
- function (_c_, _nm_, _is_, _sus_, _ts_, classnames) {
-
- is = _is_;
- sus = _sus_;
- ts = _ts_;
Collection = _c_;
Model = _nm_.extend({
initialize: function () {
- this.set('weight', 0);
- this.constructor.__super__.initialize.apply(this, arguments);
+ this.super = this.constructor.__super__;
+ this.super.initialize.apply(this, arguments);
},
nodeType: 'device',
- deviceGlyphColor: deviceGlyphColor,
- mapDeviceTypeToGlyph: mapDeviceTypeToGlyph,
- setDeviceColor: setDeviceColor,
- onEnter: function (el) {
-
- var node = d3.select(el),
- glyphId = mapDeviceTypeToGlyph(this.get('type')),
- label = this.trimLabel(this.label()),
- glyph, labelWidth;
-
- this.el = node;
-
- // Label
- var labelElements = this.addLabelElements(label);
- labelWidth = label ? this.computeLabelWidth(node) : 0;
- labelElements.rect.attr(this.iconBox(devIconDim, labelWidth));
-
- // Icon
- glyph = is.addDeviceIcon(node, glyphId, devIconDim);
- glyph.attr(this.iconBox(devIconDim, 0));
-
- node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
- this.render();
+ icon: function () {
+ var type = this.get('type');
+ return remappedDeviceTypes[type] || type || 'unknown';
},
onExit: function () {
var node = this.el;
@@ -142,9 +84,6 @@
.style('stroke-fill', '#555')
.style('fill', '#888')
.style('opacity', 0.5);
- },
- render: function () {
- this.setDeviceColor();
}
});
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2MapDialog.js b/web/gui/src/main/webapp/app/view/topo2/topo2MapDialog.js
index 85b67b6..cf93883 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2MapDialog.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2MapDialog.js
@@ -14,10 +14,11 @@
* limitations under the License.
*/
-/*
- ONOS GUI -- Topology Force Module.
- Visualization of the topology in an SVG layer, using a D3 Force Layout.
- */
+ /*
+ ONOS GUI -- Topology Map Dialog
+ Display of the dialog window to select a background map for the current topology view
+ NOTE: This will be deprecated in the future
+ */
(function () {
'use strict';
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
index 2b91781..3f781c4 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
@@ -22,16 +22,37 @@
(function () {
'use strict';
- var randomService, ps;
+ var randomService, ps, sus, is, ts;
var fn;
// Internal state;
var nearDist = 15;
var devIconDim = 36,
- labelPad = 10,
- halfDevIcon = devIconDim / 2,
- nodeLabelIndex = 1;
+ labelPad = 5,
+ textPad = 5,
+ halfDevIcon = devIconDim / 2;
+
+ // note: these are the device icon colors without affinity (no master)
+ var dColTheme = {
+ light: {
+ online: '#444444',
+ offline: '#cccccc'
+ },
+ dark: {
+ // TODO: theme
+ online: '#444444',
+ offline: '#cccccc'
+ }
+ };
+
+ function devGlyphColor(d) {
+ var o = this.get('online'),
+ id = this.get('master'),
+ otag = o ? 'online' : 'offline';
+ return o ? sus.cat7().getColor(id, 0, ts.theme()) :
+ dColTheme[ts.theme()][otag];
+ }
function positionNode(node, forUpdate) {
@@ -108,20 +129,30 @@
angular.module('ovTopo2')
.factory('Topo2NodeModel',
['Topo2Model', 'FnService', 'RandomService', 'Topo2PrefsService',
- function (Model, _fn_, _RandomService_, _ps_) {
+ 'SvgUtilService', 'IconService', 'ThemeService',
+ function (Model, _fn_, _RandomService_, _ps_, _sus_, _is_, _ts_) {
randomService = _RandomService_;
+ ts = _ts_;
fn = _fn_;
ps = _ps_;
+ sus = _sus_;
+ is = _is_;
return Model.extend({
initialize: function () {
this.node = this.createNode();
},
- onEnter: function () {}, // To be overridden by sub-class
- onExit: function () {}, // To be overridden by sub-class
+ setUpEvents: function () {
+ var _this = this;
+ angular.forEach(this.events, function (handler, key) {
+ _this.el.on(key, _this[handler].bind(_this));
+ });
+ },
+ icon: function () {
+ return 'unknown';
+ },
label: function () {
-
var props = this.get('props'),
id = this.get('id'),
friendlyName = props ? props.name : id,
@@ -141,17 +172,39 @@
},
addLabelElements: function (label) {
var rect = this.el.append('rect');
+ var glythRect = this.el.append('rect')
+ .attr('y', -halfDevIcon)
+ .attr('x', -halfDevIcon)
+ .attr('width', devIconDim)
+ .attr('height', devIconDim)
+ .style('fill', devGlyphColor.bind(this));
+
var text = this.el.append('text').text(label)
.attr('text-anchor', 'left')
.attr('y', '0.3em')
- .attr('x', halfDevIcon + labelPad);
+ .attr('x', halfDevIcon + labelPad + textPad);
return {
rect: rect,
+ glythRect: glythRect,
text: text
};
},
- iconBox: function(dim, labelWidth) {
+ labelBox: function (dim, labelWidth) {
+ var _textPad = (textPad * 2) - labelPad;
+
+ if (labelWidth === 0) {
+ _textPad = 0;
+ }
+
+ return {
+ x: -dim / 2 - labelPad,
+ y: -dim / 2 - labelPad,
+ width: dim + labelWidth + (labelPad * 2) + _textPad,
+ height: dim + (labelPad * 2)
+ };
+ },
+ iconBox: function (dim, labelWidth) {
return {
x: -dim / 2,
y: -dim / 2,
@@ -181,10 +234,9 @@
node.select('rect')
.transition()
- .attr(this.iconBox(devIconDim, labelWidth));
+ .attr(this.labelBox(devIconDim, labelWidth));
},
createNode: function () {
-
var node = angular.extend({}, this.attributes);
// Augment as needed...
@@ -192,6 +244,32 @@
node.svgClass = this.svgClassName();
positionNode(node);
return node;
+ },
+ onEnter: function (el) {
+ this.el = d3.select(el);
+ this.render();
+ },
+ render: function () {
+ var node = this.el,
+ glyphId = this.icon(this.get('type')),
+ label = this.trimLabel(this.label()),
+ glyph, labelWidth;
+
+ // Label
+ var labelElements = this.addLabelElements(label);
+ labelWidth = label ? this.computeLabelWidth(node) : 0;
+ labelElements.rect.attr(this.labelBox(devIconDim, labelWidth));
+
+ // Icon
+ glyph = is.addDeviceIcon(node, glyphId, devIconDim);
+ glyph.attr(this.iconBox(devIconDim, 0));
+ glyph.style('fill', 'white');
+
+ node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
+
+ if (this.events) {
+ this.setUpEvents();
+ }
}
});
}]
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js b/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js
index 2dd7997..bb64578 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js
@@ -22,17 +22,13 @@
(function () {
'use strict';
- var wss, is, sus;
+ var wss;
var Collection, Model;
var remappedDeviceTypes = {
virtual: 'cord'
};
- // configuration
- var devIconDim = 36,
- halfDevIcon = devIconDim / 2;
-
function createSubRegionCollection(data, region) {
var SubRegionCollection = Collection.extend({
@@ -42,39 +38,30 @@
return new SubRegionCollection(data);
}
- function mapDeviceTypeToGlyph(type) {
- return remappedDeviceTypes[type] || type || 'switch';
- }
-
- function iconBox(dim, labelWidth) {
- return {
- x: -dim / 2,
- y: -dim / 2,
- width: dim + labelWidth,
- height: dim
- };
- }
-
angular.module('ovTopo2')
.factory('Topo2SubRegionService',
['WebSocketService', 'Topo2Collection', 'Topo2NodeModel',
- 'IconService', 'SvgUtilService', 'ThemeService', 'Topo2ViewService',
+ 'ThemeService', 'Topo2ViewService',
- function (_wss_, _c_, _NodeModel_, _is_, _sus_, _ts_, _t2vs_) {
+ function (_wss_, _c_, _NodeModel_, _ts_, _t2vs_) {
wss = _wss_;
- is = _is_;
- sus = _sus_;
Collection = _c_;
Model = _NodeModel_.extend({
initialize: function () {
- this.set('weight', 0);
- this.constructor.__super__.initialize.apply(this, arguments);
+ this.super = this.constructor.__super__;
+ this.super.initialize.apply(this, arguments);
+ },
+ events: {
+ 'dblclick': 'navigateToRegion'
},
nodeType: 'sub-region',
- mapDeviceTypeToGlyph: mapDeviceTypeToGlyph,
- onClick: function () {
+ icon: function () {
+ var type = this.get('type');
+ return remappedDeviceTypes[type] || type || 'm_cloud';
+ },
+ navigateToRegion: function () {
if (d3.event.defaultPrevented) return;
@@ -82,31 +69,7 @@
dir: 'down',
rid: this.get('id')
});
- },
- onEnter: function (el) {
-
- var node = d3.select(el),
- glyphId = mapDeviceTypeToGlyph(this.get('type')),
- label = this.trimLabel(this.label()),
- glyph, labelWidth;
-
- this.el = node;
- this.el.on('click', this.onClick.bind(this));
-
- // Label
- var labelElements = this.addLabelElements(label);
- labelWidth = label ? this.computeLabelWidth(node) : 0;
- labelElements.rect.attr(iconBox(devIconDim, labelWidth));
-
- // Icon
- glyph = is.addDeviceIcon(node, glyphId, devIconDim);
- glyph.attr(iconBox(devIconDim, 0));
-
- node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
- this.render();
- },
- onExit: function () {},
- render: function () {}
+ }
});
return {