Added legend
diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index 4bb0b99..6dad523 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -4,7 +4,7 @@
display: block;
}
-service-canvas select.subscriber-select{
+service-canvas .subscriber-select{
z-index: 1000;
position: absolute;
width: 200px;
@@ -17,6 +17,19 @@
top: 0;
}
+/* LEGEND */
+
+.legend {
+ fill: #fff;
+ stroke: #ccc;
+ stroke-width: 1px;
+ position: relative;
+}
+
+.legend text {
+ stroke: #000;
+}
+
.node {
cursor: pointer;
}
@@ -29,7 +42,7 @@
.node.subscriber circle,
.node.internet circle {
- stroke: #ffdb07;
+ stroke: #05ffcb;
}
.node.slice circle {
@@ -37,7 +50,7 @@
}
.node.instance circle {
- stroke: #ea25ff;
+ stroke: #ff8b00;
}
.node rect.slice-detail{
@@ -56,10 +69,12 @@
stroke-width: 2px;
}
-.link.slice,
-.link.instance {
+.link.slice {
stroke: rgba(157, 4, 183, 0.29);
}
+.link.instance{
+ stroke: rgba(255, 138, 0, 0.65);
+}
.service-details{
width: 200px;
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
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index 4c992b1..aef5014 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -1,30 +1,6 @@
-<select class="form-control subscriber-select" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber" ng-change="vm.getServiceChain(vm.selectedSubscriber)">
- <option value="">Select a subscriber...</option>
-</select>
-<!--<div class="service-details">-->
- <!--<div class="service-slices animate" ng-hide="vm.slices.length == 0">-->
- <!--<div class="panel panel-info">-->
- <!--<div class="panel-heading">-->
- <!--Slices for service:-->
- <!--<h3 class="panel-title">{{vm.selectedService.name}}</h3>-->
- <!--</div>-->
- <!--<ul class="list-group">-->
- <!--<li class="list-group-item" ng-repeat="slice in vm.slices" ng-click="vm.getInstances(slice)" ng-class="{active: slice.id === vm.selectedSlice.id}">-->
- <!--{{slice.humanReadableName}}-->
- <!--</li>-->
- <!--</ul>-->
- <!--</div>-->
- <!--</div>-->
- <!--<div class="service-instances animate" ng-hide="vm.instances.length == 0">-->
- <!--<div class="panel panel-warning">-->
- <!--<div class="panel-heading">-->
- <!--Instances:-->
- <!--</div>-->
- <!--<ul class="list-group">-->
- <!--<li class="list-group-item" ng-repeat="instance in vm.instances">-->
- <!--{{instance.humanReadableName}}-->
- <!--</li>-->
- <!--</ul>-->
- <!--</div>-->
- <!--</div>-->
-<!--</div>-->
\ No newline at end of file
+<div class="subscriber-select">
+ Select a subscriber:
+ <select class="form-control" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber" ng-change="vm.getServiceChain(vm.selectedSubscriber)">
+ <option value="">Select a subscriber...</option>
+ </select>
+</div>
\ No newline at end of file