Redrawing service chart on resize
diff --git a/views/ngXosViews/diagnostic/env/default.js b/views/ngXosViews/diagnostic/env/default.js
index 94f3385..956e8bb 100644
--- a/views/ngXosViews/diagnostic/env/default.js
+++ b/views/ngXosViews/diagnostic/env/default.js
@@ -8,6 +8,6 @@
module.exports = {
host: 'http://clnode067.clemson.cloudlab.us:9999/',
- xoscsrftoken: 'IZ52y2rmIxizNDeRfaHdmcRNQsSd9mDV',
- xossessionid: 'tmsqxdnf8og252ydu94sbfr1u63lht50'
+ xoscsrftoken: 'fPiSLn5CPCiTxWMtobv8g9bHS9y8pBYG',
+ xossessionid: 'tdhglvaav1tzemclbw0nc8k1olgiztgr'
};
diff --git a/views/ngXosViews/diagnostic/src/index.html b/views/ngXosViews/diagnostic/src/index.html
index f7282b9..2c0e84d 100644
--- a/views/ngXosViews/diagnostic/src/index.html
+++ b/views/ngXosViews/diagnostic/src/index.html
@@ -35,6 +35,7 @@
<script src="/.tmp/main.js"></script>
<script src="/.tmp/services.js"></script>
<script src="/.tmp/serviceTopology.js"></script>
+<script src="/.tmp/logicTopology.js"></script>
<script src="/.tmp/diagnostic.js"></script>
<script src="/.tmp/d3.js"></script>
<script src="/.tmp/config.js"></script>
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index 7f433f6..0a02b04 100644
--- a/views/ngXosViews/diagnostic/src/js/diagnostic.js
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -8,11 +8,11 @@
templateUrl: 'templates/diagnostic.tpl.html',
controllerAs: 'vm',
controller: function(Subscribers, ServiceRelation){
- Subscribers.query().$promise
+ Subscribers.queryWithDevices().$promise
.then((subscribers) => {
+ console.log(subscribers);
this.subscribers = subscribers;
- this.selectedSubscriber = subscribers[0];
- return ServiceRelation.get(this.selectedSubscriber);
+ return ServiceRelation.get(subscribers[0]);
})
.then((serviceChain) => {
this.serviceChain = serviceChain;
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
new file mode 100644
index 0000000..c00b5b6
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -0,0 +1,20 @@
+(function () {
+ 'use strict';
+ angular.module('xos.serviceTopology')
+ .directive('logicTopology', function(){
+ return {
+ restrict: 'E',
+ scope: {
+ serviceChain: '='
+ },
+ bindToController: true,
+ controllerAs: 'vm',
+ template: '',
+ controller: function($element, $log){
+ $log.info('Logic Plane');
+
+
+ }
+ };
+ });
+})();
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index d30122c..163ee34 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -15,35 +15,41 @@
const el = $element[0];
- this.instances = [];
- this.slices = [];
+ d3.select(window)
+ .on('resize', () => {
+ console.log('resize');
+ draw(this.serviceChain);
+ });
- const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
- const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
-
- const treeLayout = d3.layout.tree()
- .size([height, width]);
-
- const svg = d3.select($element[0])
- .append('svg')
- .style('width', `${el.clientWidth}px`)
- .style('height', `${el.clientHeight}px`)
-
- const treeContainer = svg.append('g')
- .attr('transform', `translate(${serviceTopologyConfig.widthMargin * 4},${serviceTopologyConfig.heightMargin})`);
-
- var root;
+ var root, svg;
const draw = (tree) => {
+
+ // clean
+ d3.select($element[0]).select('svg').remove();
+
+ const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
+ const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
+
+ const treeLayout = d3.layout.tree()
+ .size([height, width]);
+
+ svg = d3.select($element[0])
+ .append('svg')
+ .style('width', `${el.clientWidth}px`)
+ .style('height', `${el.clientHeight}px`)
+
+ const treeContainer = svg.append('g')
+ .attr('transform', `translate(${serviceTopologyConfig.widthMargin * 4},${serviceTopologyConfig.heightMargin})`);
+
root = tree;
root.x0 = height / 2;
root.y0 = width / 2;
+ TreeLayout.drawLegend(svg);
TreeLayout.updateTree(treeContainer, treeLayout, root);
};
- TreeLayout.drawLegend(svg);
-
this.getInstances = (slice) => {
Instances.query({slice: slice.id}).$promise
.then((instances) => {
diff --git a/views/ngXosViews/diagnostic/src/js/services.js b/views/ngXosViews/diagnostic/src/js/services.js
index 60a20d2..669d028 100644
--- a/views/ngXosViews/diagnostic/src/js/services.js
+++ b/views/ngXosViews/diagnostic/src/js/services.js
@@ -14,8 +14,39 @@
.service('Instances', function($resource){
return $resource('/xos/instances', {id: '@id'});
})
- .service('Subscribers', function($resource){
- return $resource('/xos/subscribers', {id: '@id'});
+ .service('Subscribers', function($resource, $q, SubscriberDevice){
+ return $resource('/xos/subscribers', {id: '@id'}, {
+ queryWithDevices: {
+ method: 'GET',
+ isArray: true,
+ interceptor: {
+ response: function(res){
+ const deferred = $q.defer();
+
+ let requests = [];
+
+ angular.forEach(res.data, (subscriber) => {
+ requests.push(SubscriberDevice.query({id: subscriber.id}));
+ })
+
+ $q.all(requests)
+ .then((list) => {
+ console.log(list);
+ res.data.map((subscriber, i) => {
+ subscriber.devices = list[i];
+ return subscriber;
+ });
+ deferred.resolve(res.data);
+ })
+
+ return deferred.promise;
+ }
+ }
+ }
+ });
+ })
+ .service('SubscriberDevice', function($resource){
+ return $resource('/xoslib/rs/subscriber/:id/users/', {id: '@id'});
})
.service('ServiceRelation', function($q, lodash, Services, Tenant, Slice, Instances){
diff --git a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
index a8b2d3a..6a13d57 100644
--- a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
@@ -1,3 +1,18 @@
-<div class="half-height">
- <service-topology service-chain="vm.serviceChain"></service-topology>
-</div>
+<div class="container-fluid">
+ <div class="half-height">
+ <service-topology service-chain="vm.serviceChain"></service-topology>
+ </div>
+ <div class="half-height">
+ <div class="row col-sm-3">
+ <div class="panel panel-default">
+ <div class="panel-heading">Select a subscriber:</div>
+ <div class="panel-body">
+ <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>
+ </div>
+ <logic-topology></logic-topology>
+ </div>
+ </div>
+</div>
\ No newline at end of file