Layout fixes for customer care portal
diff --git a/views/ngXosViews/diagnostic/src/js/chart_data_service.js b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
index 6f57ef0..19825a1 100644
--- a/views/ngXosViews/diagnostic/src/js/chart_data_service.js
+++ b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
@@ -22,7 +22,7 @@
children: [
{
name: 'LAN-Side',
- subtitle: 'Virtual Networks',
+ subtitle: 'Virtual Network',
type: 'network',
children: [{
name: 'Subscriber',
diff --git a/views/ngXosViews/diagnostic/src/js/config.js b/views/ngXosViews/diagnostic/src/js/config.js
index 75b5fe7..ac0f989 100644
--- a/views/ngXosViews/diagnostic/src/js/config.js
+++ b/views/ngXosViews/diagnostic/src/js/config.js
@@ -3,7 +3,7 @@
angular.module('xos.diagnostic')
.constant('serviceTopologyConfig', {
- widthMargin: 20,
+ widthMargin: 60,
heightMargin: 30,
duration: 750,
elWidths: [20, 104, 105, 104, 20], //this is not true
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index 722328d..f88b80a 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -20,6 +20,8 @@
const handleSvg = (el) => {
+ d3.select($element[0]).select('svg').remove();
+
svg = d3.select(el)
.append('svg')
.style('width', `${el.clientWidth}px`)
@@ -59,7 +61,14 @@
.then((instances) => {
LogicTopologyHelper.updateTree(svg);
})
- })
+ });
+
+ d3.select(window)
+ .on('resize.logic', () => {
+ handleSvg($element[0]);
+ LogicTopologyHelper.setupTree(svg);
+ LogicTopologyHelper.updateTree(svg);
+ });
handleSvg($element[0]);
LogicTopologyHelper.setupTree(svg);
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 229b629..6ac0342 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -41,7 +41,7 @@
nodes.each(function(n){
let currentNode = d3.select(this);
// cicle trouch node to add Tags and Public IP
- if(n.name === 'LAN' && angular.isDefined(n.subscriberTag)){
+ if(n.name === 'LAN-Side' && angular.isDefined(n.subscriberTag)){
currentNode.append('text')
.attr({
'text-anchor': 'middle',
@@ -57,7 +57,7 @@
.text(() => `S-Tag: ${n.subscriberTag.sTag}`);
}
- if(n.name === 'WAN' && angular.isDefined(n.subscriberIP)){
+ if(n.name === 'WAN-Side' && angular.isDefined(n.subscriberIP)){
currentNode.append('text')
.attr({
'text-anchor': 'middle',
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index 925e7c0..832e6fa 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -16,7 +16,7 @@
const el = $element[0];
d3.select(window)
- .on('resize', () => {
+ .on('resize.service', () => {
draw(this.serviceChain);
});
@@ -47,7 +47,7 @@
.style('height', `${el.clientHeight}px`)
const treeContainer = svg.append('g')
- .attr('transform', `translate(${serviceTopologyConfig.widthMargin * 4},${serviceTopologyConfig.heightMargin})`);
+ .attr('transform', `translate(${serviceTopologyConfig.widthMargin * 2},${serviceTopologyConfig.heightMargin})`);
root = tree;
root.x0 = height / 2;
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
index 3759017..61ec1e2 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -10,10 +10,11 @@
// given a canvas, a layout and a data source, draw a tree layout
const updateTree = (svg, layout, source, el = _el) => {
-
if(el){
_el = el;
}
+
+ let targetWidth = _el.clientWidth - serviceTopologyConfig.widthMargin * 2;
//cache data
_svg = svg;
@@ -32,7 +33,7 @@
// Normalize for fixed-depth.
nodes.forEach(function(d) {
// position the child node horizontally
- const step = ((_el.clientWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
+ const step = ((targetWidth - (serviceTopologyConfig.widthMargin * 2)) / (maxDepth - 1));
d.y = d.depth * step;
});
diff --git a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
index 47b6a8d..7870386 100644
--- a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
+++ b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
@@ -45,8 +45,8 @@
if(!this.subscriber){
return;
}
- this.subscriber.uplink_speed = parseInt(this.subscriber.uplink_speed, 10);
- this.subscriber.downlink_speed = parseInt(this.subscriber.downlink_speed, 10);
+ this.subscriber.uplink_speed = parseInt(this.subscriber.uplink_speed, 10) / 1000000000;
+ this.subscriber.downlink_speed = parseInt(this.subscriber.downlink_speed, 10) / 1000000000;
});
this.close = () => {
@@ -55,6 +55,10 @@
this.updateSubscriber = (subscriber) => {
+ this.subscriber.uplink_speed = this.subscriber.uplink_speed * 1000000000;
+ this.subscriber.downlink_speed = this.subscriber.downlink_speed * 1000000000;
+
+
Subscribers.update(subscriber).$promise
.then(() => {
this.success = 'Subscriber successfully updated!';
diff --git a/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html b/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
index 7f87999..ffc039f 100644
--- a/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
@@ -41,11 +41,17 @@
<div class="row">
<div class="col-xs-6">
<label>Uplink Speed</label>
- <input type="number" class="form-control" ng-model="vm.subscriber.uplink_speed"/>
+ <div class="input-group">
+ <input type="number" class="form-control" ng-model="vm.subscriber.uplink_speed"/>
+ <span class="input-group-addon">Gb</span>
+ </div>
</div>
<div class="col-xs-6">
<label>Downlink Speed</label>
- <input type="number" class="form-control" ng-model="vm.subscriber.downlink_speed"/>
+ <div class="input-group">
+ <input type="number" class="form-control" ng-model="vm.subscriber.downlink_speed"/>
+ <span class="input-group-addon">Gb</span>
+ </div>
</div>
</div>
<div class="row">