Topo2: initial service to add sprites to topology
Change-Id: I3d7ea53c94c875ad0590fc02025f2b389087b0b2
diff --git a/web/gui/src/main/webapp/app/fw/svg/sprite.js b/web/gui/src/main/webapp/app/fw/svg/sprite.js
index 2f24f9b..3799fd5 100644
--- a/web/gui/src/main/webapp/app/fw/svg/sprite.js
+++ b/web/gui/src/main/webapp/app/fw/svg/sprite.js
@@ -237,7 +237,7 @@
// Returns the layout with the given ID, or undefined otherwise.
function layout(id) {
- layouts.get(id);
+ return layouts.get(id);
}
// Returns a count of registered sprites and layouts.
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.js b/web/gui/src/main/webapp/app/view/topo2/topo2.js
index 632dd14..be3f65b 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js
@@ -86,14 +86,14 @@
'Topo2EventService', 'Topo2ForceService', 'Topo2InstanceService',
'Topo2BreadcrumbService', 'Topo2KeyCommandService', 'Topo2MapService',
'Topo2MapConfigService', 'Topo2ZoomService',
- 'Topo2SummaryPanelService', 'Topo2DeviceDetailsPanel',
+ 'Topo2SummaryPanelService', 'Topo2DeviceDetailsPanel', 'Topo2SpriteLayerService',
function (_$scope_, _$log_, _$loc_,
_fs_, _mast_, _ks_,
_gs_, _ms_, _sus_, _flash_,
_wss_, _ps_, _th_,
_t2es_, _t2fs_, _t2is_, _t2bcs_, _t2kcs_, _t2ms_, _t2mcs_,
- _t2zs_, summaryPanel, detailsPanel
+ _t2zs_, summaryPanel, detailsPanel, t2sls
) {
var params = _$loc_.search(),
@@ -192,6 +192,7 @@
}
);
+ t2sls.init(svg, zoomLayer);
t2fs.init(svg, forceG, uplink, dim, zoomer);
t2bcs.init();
t2kcs.init(t2fs);
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js
index d6238a2..eca6750 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js
@@ -91,7 +91,7 @@
angular.module('ovTopo2')
.factory('Topo2HostsPanelService', [
'Topo2DetailsPanelService', 'GlyphService', 'FlashService', 'ListService',
- function (_ps_, _gs_, _wss_, _flash_, _ls_) {
+ function (_ps_, _gs_, _flash_, _ls_) {
panel = _ps_;
gs = _gs_;
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
index 596524f..9a639bf 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
@@ -157,9 +157,10 @@
.on("start", function () {
// TODO: Find a better way to do this
- setTimeout(function () {
- _this.centerLayout();
- }, 500);
+ // TODO: BROKEN - Click and dragging and element triggers this event
+// setTimeout(function () {
+// _this.centerLayout();
+// }, 500);
})
.start();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index 09c6ce7..5fa2390 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -35,8 +35,8 @@
.factory('Topo2RegionService', [
'$log', 'Topo2Model', 'Topo2SubRegionService', 'Topo2DeviceService',
'Topo2HostService', 'Topo2LinkService', 'Topo2ZoomService', 'Topo2DetailsPanelService',
- 'Topo2BreadcrumbService', 'Topo2ViewController',
- function ($log, _Model_, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs, ViewController) {
+ 'Topo2BreadcrumbService', 'Topo2ViewController', 'Topo2SpriteLayerService',
+ function ($log, _Model_, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs, ViewController, t2sls) {
Model = _Model_;
@@ -72,6 +72,14 @@
if (this.isRootRegion() && !this.model.get('subregions').models.length) {
t2bcs.hide();
}
+
+ // TODO: This should load the sprite layer from the region data
+ if (this.model.get('id') === 'c01') {
+ t2sls.loadLayout('segmentRouting');
+ t2sls.show();
+ } else {
+ t2sls.hide();
+ }
},
isRootRegion: function () {
return this.model.get('id') === ROOT;
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
new file mode 100644
index 0000000..95a785e
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
@@ -0,0 +1,136 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Topology Sprite Module.
+ Defines behavior for loading sprites into the sprite layer.
+ */
+
+ (function() {
+ 'use strict';
+
+ var instance,
+ renderer;
+
+ function vbox(w, h) {
+ return '0 0 ' + w + ' ' + h;
+ }
+
+ angular.module('ovTopo2')
+ .factory('Topo2SpriteLayerService', [
+ 'Topo2ViewController', 'SpriteService',
+
+ function (ViewController, ss) {
+
+ var SpriteLayer = ViewController.extend({
+ init: function(svg, zoomLayer) {
+ this.svg = svg;
+ this.createSpriteDefs();
+ this.container = zoomLayer.append('g').attr('id', 'topo-sprites');
+ },
+ loadLayout: function (id) {
+ this.container.selectAll("*").remove();
+ this.layout = ss.layout(id);
+ this.renderLayout();
+ },
+ createSpriteDefs: function () {
+ this.defs = this.svg.append('defs')
+ .attr('id', 'sprites');
+ },
+
+ renderSprite: function (spriteData) {
+
+ var id = spriteData.sprite.data.id,
+ definition = d3.select('#' + id);
+
+ if (definition.empty()) {
+
+ var data = spriteData.sprite.data,
+ spriteEl = this.defs.append('symbol')
+ .attr('viewBox', vbox(data.w, data.h))
+ .attr('id', id);
+
+ _.each(spriteData.sprite.paths, function (path) {
+ spriteEl.append('path')
+ .attr('d', path)
+ .style('fill', 'none')
+ .style('stroke', 'black');
+ });
+
+ _.each(spriteData.sprite.rects, function (rect) {
+ spriteEl.append('rect')
+ .attr('width', rect.w)
+ .attr('height', rect.h)
+ .attr('x', rect.x)
+ .attr('y', rect.y)
+ .style('fill', 'rgba(0,0,0,0.5)')
+ });
+ }
+
+ return spriteEl
+ },
+ renderLayout: function () {
+
+ var _this = this;
+
+ var layout = this.container.append('svg')
+ .attr('class', layout)
+ .attr('viewBox', vbox(this.layout.data.w, this.layout.data.h));
+
+ _.each(this.layout.sprites, function (spriteData) {
+ _this.renderSprite(spriteData);
+
+ layout
+ .append('g')
+ .append("use")
+ .attr('xlink:href', '#rack')
+ .attr('width', 20)
+ .attr('height', 25)
+ .attr('x', spriteData.x)
+ .attr('y', spriteData.y);
+ });
+ },
+
+ hide: function () {
+ if (this.visible) {
+ this.container
+ .style('opacity', 1)
+ .transition()
+ .duration(400)
+ .style('opacity', 0);
+ }
+ this.visible = false;
+ },
+ show: function () {
+ if (!this.visible) {
+ this.container
+ .style('opacity', 0)
+ .transition()
+ .duration(400)
+ .style('opacity', 1);
+ }
+ this.visible = true;
+ }
+ });
+
+ function getInstance() {
+ return instance || new SpriteLayer();
+ }
+
+ return getInstance();
+ }
+ ])
+ })();
\ No newline at end of file