Added Slice and Instances info in modal popup
diff --git a/gui/ngXosViews/serviceTopology/bower.json b/gui/ngXosViews/serviceTopology/bower.json
index 3d01c48..d942aad 100644
--- a/gui/ngXosViews/serviceTopology/bower.json
+++ b/gui/ngXosViews/serviceTopology/bower.json
@@ -26,6 +26,6 @@
"angular-cookies": "~1.4.7",
"angular-resource": "~1.4.7",
"ng-lodash": "~0.3.0",
- "bootstrap-css": "2.3.2"
+ "bootstrap-css": "~3.3.6"
}
}
diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index 05b06ed..c233858 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -22,4 +22,11 @@
fill: none;
stroke: #ccc;
stroke-width: 2px;
+}
+
+.service-details{
+ width: 200px;
+ position: absolute;
+ top: 20px;
+ right: 20px;
}
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/index.html b/gui/ngXosViews/serviceTopology/src/index.html
index c2a289e..1312a76 100644
--- a/gui/ngXosViews/serviceTopology/src/index.html
+++ b/gui/ngXosViews/serviceTopology/src/index.html
@@ -1,6 +1,6 @@
<!-- browserSync -->
<!-- bower:css -->
-<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.css" />
+<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
<!-- endbower --><!-- endcss -->
<!-- inject:css -->
<link rel="stylesheet" href="/css/dev.css">
@@ -13,6 +13,7 @@
<!-- bower:js -->
<script src="vendor/d3/d3.js"></script>
+<script src="vendor/lodash/lodash.js"></script>
<script src="vendor/jquery/dist/jquery.js"></script>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-mocks/angular-mocks.js"></script>
@@ -20,8 +21,7 @@
<script src="vendor/angular-cookies/angular-cookies.js"></script>
<script src="vendor/angular-resource/angular-resource.js"></script>
<script src="vendor/ng-lodash/build/ng-lodash.js"></script>
-<script src="vendor/bootstrap-css/js/bootstrap.js"></script>
-<script src="vendor/lodash/lodash.js"></script>
+<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
<!-- endbower --><!-- endjs -->
<!-- inject:js -->
<script src="/xosHelpers/src/xosHelpers.module.js"></script>
diff --git a/gui/ngXosViews/serviceTopology/src/js/services.js b/gui/ngXosViews/serviceTopology/src/js/services.js
index 640182d..21ca9aa 100644
--- a/gui/ngXosViews/serviceTopology/src/js/services.js
+++ b/gui/ngXosViews/serviceTopology/src/js/services.js
@@ -8,6 +8,12 @@
.service('Tenant', function($resource){
return $resource('/xos/tenants');
})
+ .service('Slice', function($resource){
+ return $resource('/xos/slices', {id: '@id'});
+ })
+ .service('Instances', function($resource){
+ return $resource('/xos/instances', {id: '@id'});
+ })
.service('ServiceRelation', function($q, _, lodash, Services, Tenant){
// find all the relation defined for a given root
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index 8206194..d0e86b3 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -9,7 +9,7 @@
bindToController: true,
controllerAs: 'vm',
templateUrl: 'templates/topology_canvas.tpl.html',
- controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation){
+ controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances){
// count the mas depth of an object
const depthOf = (obj) => {
@@ -25,38 +25,6 @@
return 1 + depth
};
- ServiceRelation.get()
- .then(res => {
- //console.log(res);
- });
-
- const treeData = [
- {
- 'name': 'Top Level',
- 'parent': 'null',
- 'children': [
- {
- 'name': 'Level 2: A',
- 'parent': 'Top Level',
- 'children': [
- {
- 'name': 'Son of A',
- 'parent': 'Level 2: A'
- },
- {
- 'name': 'Daughter of A',
- 'parent': 'Level 2: A'
- }
- ]
- },
- {
- 'name': 'Level 2: B',
- 'parent': 'Top Level'
- }
- ]
- }
- ];
-
const width = $window.innerWidth - serviceTopologyConfig.widthMargin;
const height = $window.innerHeight - serviceTopologyConfig.heightMargin;
@@ -128,8 +96,8 @@
.attr('transform', function(d) {
// this is the starting position
return 'translate(' + source.y0 + ',' + source.x0 + ')';
- });
- //.on('click', click);
+ })
+ .on('click', click);
nodeEnter.append('circle')
.attr('r', 1e-6)
@@ -137,6 +105,12 @@
nodeEnter.append('text')
.attr('x', function(d) { return d.children || d._children ? -13 : 13; })
+ .attr('transform', function(d) {
+ if((d.children || d._children) && d.parent || d._parent){
+ return 'rotate(30)';
+ }
+ return;
+ })
.attr('dy', '.35em')
.attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start'; })
.text(function(d) { return d.name; })
@@ -201,12 +175,32 @@
});
}
+ const click = (d) => {
+ console.log(d);
+ this.selectedService = {
+ id: d.id,
+ name: d.name
+ };
+ Slice.query({service: d.id}).$promise
+ .then(slices => {
+ this.instances = null;
+ this.slices = slices;
+ })
+ };
+
ServiceRelation.get()
.then((tree) => {
console.log(tree);
draw(tree);
});
- //draw(treeData[0]);
+
+ this.getInstances = (slice) => {
+ Instances.query({slice: slice.id}).$promise
+ .then((instances) => {
+ this.selectedSlice = slice;
+ this.instances = instances;
+ })
+ };
}
}
});
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index e69de29..7806733 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -0,0 +1,27 @@
+<div class="service-details">
+ <div ng-show="vm.slices.length > 0" class="service-slices">
+ <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" ng-show="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