Added legend
diff --git a/gui/ngXosViews/serviceTopology/src/js/d3.js b/gui/ngXosViews/serviceTopology/src/js/d3.js
index f12ce5b..c8649aa 100644
--- a/gui/ngXosViews/serviceTopology/src/js/d3.js
+++ b/gui/ngXosViews/serviceTopology/src/js/d3.js
@@ -7,6 +7,100 @@
})
.service('TreeLayout', function($window, lodash, ServiceRelation, serviceTopologyConfig, Slice, Instances){
+ const drawLegend = (svg) => {
+ const legendContainer = svg.append('g')
+ .attr({
+ class: 'legend'
+ });
+
+ legendContainer.append('rect')
+ .attr({
+ transform: d => `translate(10, 80)`,
+ width: 100,
+ height: 130
+ });
+
+ // service
+ const service = legendContainer.append('g')
+ .attr({
+ class: 'node service'
+ });
+
+ service.append('circle')
+ .attr({
+ r: serviceTopologyConfig.circle.radius,
+ transform: d => `translate(30, 100)`
+ });
+
+ service.append('text')
+ .attr({
+ transform: d => `translate(45, 100)`,
+ dy: '.35em'
+ })
+ .text('Service')
+ .style('fill-opacity', 1);
+
+ // endpoints
+ const endpoints = legendContainer.append('g')
+ .attr({
+ class: 'node internet'
+ });
+
+ endpoints.append('circle')
+ .attr({
+ r: serviceTopologyConfig.circle.radius,
+ transform: d => `translate(30, 130)`
+ });
+
+ endpoints.append('text')
+ .attr({
+ transform: d => `translate(45, 130)`,
+ dy: '.35em'
+ })
+ .text('Enpoints')
+ .style('fill-opacity', 1);
+
+ // slice
+ const slice = legendContainer.append('g')
+ .attr({
+ class: 'node slice'
+ });
+
+ slice.append('circle')
+ .attr({
+ r: serviceTopologyConfig.circle.radius,
+ transform: d => `translate(30, 160)`
+ });
+
+ slice.append('text')
+ .attr({
+ transform: d => `translate(45, 160)`,
+ dy: '.35em'
+ })
+ .text('Slices')
+ .style('fill-opacity', 1);
+
+ // instance
+ const instance = legendContainer.append('g')
+ .attr({
+ class: 'node instance'
+ });
+
+ instance.append('circle')
+ .attr({
+ r: serviceTopologyConfig.circle.radius,
+ transform: d => `translate(30, 190)`
+ });
+
+ instance.append('text')
+ .attr({
+ transform: d => `translate(45, 190)`,
+ dy: '.35em'
+ })
+ .text('Instances')
+ .style('fill-opacity', 1);
+ };
+
var _svg, _layout, _source;
var i = 0;
@@ -165,6 +259,7 @@
};
this.updateTree = updateTree;
+ this.drawLegend = drawLegend;
});
}());
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index 600e301..8fce43d 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -11,7 +11,7 @@
templateUrl: 'templates/topology_canvas.tpl.html',
controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){
- // TODO draw legend
+ // NOTE $window is not the right reference, we should refer to container size
this.instances = [];
this.slices = [];
@@ -26,7 +26,8 @@
.append('svg')
.style('width', `${$window.innerWidth}px`)
.style('height', `${$window.innerHeight}px`)
- .append('g')
+
+ const treeContainer = svg.append('g')
.attr('transform', 'translate(' + serviceTopologyConfig.widthMargin+ ',' + serviceTopologyConfig.heightMargin + ')');
//const resizeCanvas = () => {
@@ -52,9 +53,11 @@
root.x0 = $window.innerHeight / 2;
root.y0 = 0;
- TreeLayout.updateTree(svg, treeLayout, root);
+ TreeLayout.updateTree(treeContainer, treeLayout, root);
};
+ TreeLayout.drawLegend(svg);
+
var _this = this;
Subscribers.query().$promise