blob: 163ee340bff43740d51df5668ac91adb5d88c63f [file] [log] [blame]
(function () {
'use strict';
angular.module('xos.serviceTopology')
.directive('serviceTopology', function(){
return {
restrict: 'E',
scope: {
serviceChain: '='
},
bindToController: true,
controllerAs: 'vm',
template: '',
controller: function($element, $window, $scope, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){
const el = $element[0];
d3.select(window)
.on('resize', () => {
console.log('resize');
draw(this.serviceChain);
});
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);
};
this.getInstances = (slice) => {
Instances.query({slice: slice.id}).$promise
.then((instances) => {
this.selectedSlice = slice;
this.instances = instances;
})
};
$scope.$watch(() => this.serviceChain, (chain) => {
if(chain){
draw(chain);
}
});
}
}
});
}());