Layout fix on diagnostic and added subscriber status handling
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index b12bfb5..edd64ea 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -57,14 +57,37 @@
handleSvg($element[0]);
LogicTopologyHelper.setupTree(svg);
- this.openSubscriberModal = () => {
- this.subscriberModal = true;
+ this.selectSubscriberModal = () => {
+ this.openSelectSubscriberModal = true;
+ $scope.$apply();
+ };
+
+ this.subscriberStatusModal = () => {
+ this.openSubscriberStatusModal = true;
$scope.$apply();
};
// listen for subscriber modal event
$rootScope.$on('subscriber.modal.open', () => {
- this.openSubscriberModal();
+
+ if(ChartData.currentSubscriber){
+ this.subscriberStatusModal();
+ }
+ else{
+ this.selectSubscriberModal();
+ }
+ });
+
+ // listen for subscriber modal event
+ $rootScope.$on('subscriber.modal.open', () => {
+
+ if(ChartData.currentSubscriber){
+ this.currentSubscriber = ChartData.currentSubscriber;
+ this.subscriberStatusModal();
+ }
+ else{
+ this.selectSubscriberModal();
+ }
});
}
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index 2755620..925e7c0 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -34,6 +34,7 @@
// clean
d3.select($element[0]).select('svg').remove();
+
const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
@@ -53,7 +54,7 @@
root.y0 = width / 2;
// ServiceTopologyHelper.drawLegend(svg);
- ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root);
+ ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root, el);
};
$scope.$watch(() => this.serviceChain, (chain) => {
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
index 28794c2..3759017 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -4,12 +4,16 @@
angular.module('xos.diagnostic')
.service('ServiceTopologyHelper', function($rootScope, $window, $log, lodash, ServiceRelation, serviceTopologyConfig, d3){
- var _svg, _layout, _source;
+ var _svg, _layout, _source, _el;
var i = 0;
// given a canvas, a layout and a data source, draw a tree layout
- const updateTree = (svg, layout, source) => {
+ const updateTree = (svg, layout, source, el = _el) => {
+
+ if(el){
+ _el = el;
+ }
//cache data
_svg = svg;
@@ -28,7 +32,7 @@
// Normalize for fixed-depth.
nodes.forEach(function(d) {
// position the child node horizontally
- const step = (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
+ const step = ((_el.clientWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
d.y = d.depth * step;
});
@@ -50,7 +54,11 @@
const serviceNodes = nodeEnter.filter('.service');
subscriberNodes.append('rect')
- .attr(serviceTopologyConfig.square);
+ .attr(serviceTopologyConfig.square)
+ // add event listener to subscriber
+ .on('click', () => {
+ $rootScope.$emit('subscriber.modal.open');
+ });
internetNodes.append('rect')
.attr(serviceTopologyConfig.square);
diff --git a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
index 0620277..a8b93f5 100644
--- a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
+++ b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
@@ -1,7 +1,7 @@
(function () {
'use strict';
angular.module('xos.diagnostic')
- .directive('subscriberModal', function(){
+ .directive('selectSubscriberModal', function(){
return {
scope: {
subscribers: '=',
@@ -9,7 +9,7 @@
},
bindToController: true,
restrict: 'E',
- templateUrl: 'templates/subscriber-modal.tpl.html',
+ templateUrl: 'templates/select-subscriber-modal.tpl.html',
controllerAs: 'vm',
controller: function($rootScope){
@@ -23,5 +23,35 @@
};
}
};
+ })
+ .directive('subscriberStatusModal', function(){
+ return {
+ scope: {
+ open: '=',
+ subscriber: '='
+ },
+ bindToController: true,
+ restrict: 'E',
+ templateUrl: 'templates/subscriber-status-modal.tpl.html',
+ controllerAs: 'vm',
+ controller: function($log, $scope){
+
+ // mock until api
+ $scope.$watch(() => this.subscriber, (subscriber) => {
+ if(subscriber){
+ subscriber.status = 'enabled';
+ }
+ });
+
+ this.close = () => {
+ this.open = false;
+ };
+
+ this.setStatus = (status) => {
+ this.subscriber.status = status;
+ $log.info(`Set subscriber status to: ${status}`);
+ };
+ }
+ };
});
})();