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">
diff --git a/xos/core/xoslib/static/js/xosDiagnostic.js b/xos/core/xoslib/static/js/xosDiagnostic.js
index 73cc41a..e89d7d5 100644
--- a/xos/core/xoslib/static/js/xosDiagnostic.js
+++ b/xos/core/xoslib/static/js/xosDiagnostic.js
@@ -18,7 +18,7 @@
angular.module("xos.diagnostic").run(["$templateCache", function($templateCache) {$templateCache.put("templates/diagnostic.tpl.html","<div class=\"container-fluid\">\n <div ng-hide=\"vm.error && vm.loader\" style=\"height: 900px\">\n <div class=\"onethird-height\">\n <div class=\"well\">\n Services Graph\n </div>\n <div class=\"well pull-right\" ng-click=\"vm.reloadGlobalScope()\" ng-show=\"vm.selectedSubscriber\">\n Reset subscriber\n </div>\n <service-topology service-chain=\"vm.serviceChain\"></service-topology>\n </div>\n <div class=\"twothird-height\">\n <div class=\"well\">\n Logical Resources\n </div>\n <logic-topology ng-if=\"vm.subscribers\" subscribers=\"vm.subscribers\" selected=\"vm.selectedSubscriber\"></logic-topology>\n </div>\n </div>\n <div class=\"row\" ng-if=\"vm.error\">\n <div class=\"col-xs-12\">\n <div class=\"alert alert-danger\">\n {{vm.error}}\n </div>\n </div>\n </div>\n <div class=\"row\" ng-if=\"vm.loader\">\n <div class=\"col-xs-12\">\n <div class=\"loader\">Loading</div>\n </div>\n </div>\n</div>");
$templateCache.put("templates/logicTopology.tpl.html","<select-subscriber-modal open=\"vm.openSelectSubscriberModal\" subscribers=\"vm.subscribers\"></select-subscriber-modal>\n<subscriber-status-modal open=\"vm.openSubscriberStatusModal\" subscriber=\"vm.currentSubscriber\"></subscriber-status-modal>\n<div class=\"instances-stats animate\" ng-hide=\"vm.hideInstanceStats\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-sm-offset-8\">\n <div class=\"panel panel-primary\" ng-repeat=\"instance in vm.selectedInstances\">\n <div class=\"panel-heading\">\n {{instance.humanReadableName}}\n </div>\n <ul class=\"list-group\">\n <li class=\"list-group-item\">Backend Status: {{instance.backend_status}}</li>\n <li class=\"list-group-item\">IP Address: {{instance.ip}}</li>\n </ul>\n <ul class=\"list-group\">\n <li class=\"list-group-item\" ng-repeat=\"stat in instance.stats\">\n <span class=\"badge\">{{stat.value}}</span>\n {{stat.meter}}\n </li>\n </ul>\n </div>\n </div> \n </div>\n </div>\n</div>");
$templateCache.put("templates/select-subscriber-modal.tpl.html","<div class=\"modal fade\" ng-class=\"{in: vm.open}\" tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-dialog modal-sm\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button ng-click=\"vm.close()\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>\n <h4 class=\"modal-title\">Select a subscriber:</h4>\n </div>\n <div class=\"modal-body\">\n <select class=\"form-control\" ng-options=\"s as s.humanReadableName for s in vm.subscribers\" ng-model=\"vm.selected\"></select>\n </div>\n <div class=\"modal-footer\">\n <button ng-click=\"vm.close()\" type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n <button ng-click=\"vm.select(vm.selected)\" type=\"button\" class=\"btn btn-primary\">Select</button>\n </div>\n </div><!-- /.modal-content -->\n </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->");
-$templateCache.put("templates/subscriber-status-modal.tpl.html","<div class=\"modal fade\" ng-class=\"{in: vm.open}\" tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-dialog modal-sm\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button ng-click=\"vm.close()\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>\n <h4 class=\"modal-title\">Manage subscriber:</h4>\n </div>\n <form name=\"vm.subscriber-detail\">\n <div class=\"modal-body\">\n <div class=\"row\">\n <div class=\"col-xs-12\">\n <label>Status</label>\n </div>\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'enabled\'\"\n class=\"btn btn-block\"\n ng-class=\"{\'btn-primary\': vm.subscriber.status === \'enabled\' ,\'btn-default\': vm.subscriber.status !== \'enabled\'}\"\n >Enabled</a>\n </div>\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'suspended\'\"\n class=\"btn btn-block\"\n ng-class=\"{\'btn-primary\': vm.subscriber.status === \'suspended\' ,\'btn-default\': vm.subscriber.status !== \'suspended\'}\"\n >Suspended</a>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'delinquent\'\"\n class=\"btn btn-block\"\n ng-class=\"{\'btn-primary\': vm.subscriber.status === \'delinquent\' ,\'btn-default\': vm.subscriber.status !== \'delinquent\'}\"\n >Delinquent <br> payment</a>\n </div>\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'copyrightviolation\'\"\n class=\"btn btn-block\"\n ng-class=\"{\'btn-primary\': vm.subscriber.status === \'copyrightviolation\' ,\'btn-default\': vm.subscriber.status !== \'copyrightviolation\'}\"\n >Copyright <br> violation</a>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6\">\n <label>Uplink Speed</label>\n <input type=\"number\" class=\"form-control\" ng-model=\"vm.subscriber.uplink_speed\"/>\n </div>\n <div class=\"col-xs-6\">\n <label>Downlink Speed</label>\n <input type=\"number\" class=\"form-control\" ng-model=\"vm.subscriber.downlink_speed\"/>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6\">\n <label>Enable Uverse</label>\n </div>\n <div class=\"col-xs-6\">\n <a \n ng-click=\"vm.subscriber.enable_uverse = !vm.subscriber.enable_uverse\" \n ng-class=\"{\'btn-success\': vm.subscriber.enable_uverse, \'btn-danger\': !vm.subscriber.enable_uverse}\"\n class=\"btn btn-block\">\n <span ng-show=\"vm.subscriber.enable_uverse === true\">Enabled</span>\n <span ng-show=\"vm.subscriber.enable_uverse !== true\">Disabled</span>\n </a>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\" ng-show=\"vm.success || vm.formError\">\n <div class=\"alert alert-success\" ng-show=\"vm.success\">\n {{vm.success}}\n </div>\n <div class=\"alert alert-danger\" ng-show=\"vm.formError\">\n {{vm.formError}}\n </div>\n </div>\n <div class=\"modal-footer\">\n <button ng-click=\"vm.close()\" type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n <button ng-click=\"vm.updateSubscriber(vm.subscriber)\" type=\"button\" class=\"btn btn-primary\">Save</button>\n </div>\n </form>\n </div><!-- /.modal-content -->\n </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->");}]);
+$templateCache.put("templates/subscriber-status-modal.tpl.html","<div class=\"modal fade\" ng-class=\"{in: vm.open}\" tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-dialog modal-sm\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button ng-click=\"vm.close()\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>\n <h4 class=\"modal-title\">Manage subscriber:</h4>\n </div>\n <form name=\"vm.subscriber-detail\">\n <div class=\"modal-body\">\n <div class=\"row\">\n <div class=\"col-xs-12\">\n <label>Status</label>\n </div>\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'enabled\'\"\n class=\"btn btn-block\"\n ng-class=\"{\'btn-primary\': vm.subscriber.status === \'enabled\' ,\'btn-default\': vm.subscriber.status !== \'enabled\'}\"\n >Enabled</a>\n </div>\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'suspended\'\"\n class=\"btn btn-block\"\n ng-class=\"{\'btn-primary\': vm.subscriber.status === \'suspended\' ,\'btn-default\': vm.subscriber.status !== \'suspended\'}\"\n >Suspended</a>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'delinquent\'\"\n class=\"btn btn-block\"\n ng-class=\"{\'btn-primary\': vm.subscriber.status === \'delinquent\' ,\'btn-default\': vm.subscriber.status !== \'delinquent\'}\"\n >Delinquent <br> payment</a>\n </div>\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'copyrightviolation\'\"\n class=\"btn btn-block\"\n ng-class=\"{\'btn-primary\': vm.subscriber.status === \'copyrightviolation\' ,\'btn-default\': vm.subscriber.status !== \'copyrightviolation\'}\"\n >Copyright <br> violation</a>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6\">\n <label>Uplink Speed</label>\n <div class=\"input-group\">\n <input type=\"number\" class=\"form-control\" ng-model=\"vm.subscriber.uplink_speed\"/>\n <span class=\"input-group-addon\">Gb</span>\n </div>\n </div>\n <div class=\"col-xs-6\">\n <label>Downlink Speed</label>\n <div class=\"input-group\">\n <input type=\"number\" class=\"form-control\" ng-model=\"vm.subscriber.downlink_speed\"/>\n <span class=\"input-group-addon\">Gb</span>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6\">\n <label>Enable Uverse</label>\n </div>\n <div class=\"col-xs-6\">\n <a \n ng-click=\"vm.subscriber.enable_uverse = !vm.subscriber.enable_uverse\" \n ng-class=\"{\'btn-success\': vm.subscriber.enable_uverse, \'btn-danger\': !vm.subscriber.enable_uverse}\"\n class=\"btn btn-block\">\n <span ng-show=\"vm.subscriber.enable_uverse === true\">Enabled</span>\n <span ng-show=\"vm.subscriber.enable_uverse !== true\">Disabled</span>\n </a>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\" ng-show=\"vm.success || vm.formError\">\n <div class=\"alert alert-success\" ng-show=\"vm.success\">\n {{vm.success}}\n </div>\n <div class=\"alert alert-danger\" ng-show=\"vm.formError\">\n {{vm.formError}}\n </div>\n </div>\n <div class=\"modal-footer\">\n <button ng-click=\"vm.close()\" type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n <button ng-click=\"vm.updateSubscriber(vm.subscriber)\" type=\"button\" class=\"btn btn-primary\">Save</button>\n </div>\n </form>\n </div><!-- /.modal-content -->\n </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->");}]);
'use strict';
(function () {
@@ -72,8 +72,8 @@
if (!_this2.subscriber) {
return;
}
- _this2.subscriber.uplink_speed = parseInt(_this2.subscriber.uplink_speed, 10);
- _this2.subscriber.downlink_speed = parseInt(_this2.subscriber.downlink_speed, 10);
+ _this2.subscriber.uplink_speed = parseInt(_this2.subscriber.uplink_speed, 10) / 1000000000;
+ _this2.subscriber.downlink_speed = parseInt(_this2.subscriber.downlink_speed, 10) / 1000000000;
});
this.close = function () {
@@ -82,6 +82,9 @@
this.updateSubscriber = function (subscriber) {
+ _this2.subscriber.uplink_speed = _this2.subscriber.uplink_speed * 1000000000;
+ _this2.subscriber.downlink_speed = _this2.subscriber.downlink_speed * 1000000000;
+
Subscribers.update(subscriber).$promise.then(function () {
_this2.success = 'Subscriber successfully updated!';
})['catch'](function (e) {
@@ -115,6 +118,8 @@
_el = el;
}
+ var targetWidth = _el.clientWidth - serviceTopologyConfig.widthMargin * 2;
+
//cache data
_svg = svg;
_layout = layout;
@@ -133,7 +138,7 @@
// Normalize for fixed-depth.
nodes.forEach(function (d) {
// position the child node horizontally
- var step = (_el.clientWidth - serviceTopologyConfig.widthMargin * 2) / maxDepth;
+ var step = (targetWidth - serviceTopologyConfig.widthMargin * 2) / (maxDepth - 1);
d.y = d.depth * step;
});
@@ -283,7 +288,7 @@
var el = $element[0];
- d3.select(window).on('resize', function () {
+ d3.select(window).on('resize.service', function () {
draw(_this.serviceChain);
});
@@ -308,7 +313,7 @@
svg = d3.select($element[0]).append('svg').style('width', el.clientWidth + 'px').style('height', el.clientHeight + 'px');
- var treeContainer = svg.append('g').attr('transform', 'translate(' + serviceTopologyConfig.widthMargin * 4 + ',' + serviceTopologyConfig.heightMargin + ')');
+ var treeContainer = svg.append('g').attr('transform', 'translate(' + serviceTopologyConfig.widthMargin * 2 + ',' + serviceTopologyConfig.heightMargin + ')');
root = tree;
root.x0 = height / 2;
@@ -902,7 +907,7 @@
nodes.each(function (n) {
var 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',
y: 40
@@ -918,7 +923,7 @@
});
}
- if (n.name === 'WAN' && angular.isDefined(n.subscriberIP)) {
+ if (n.name === 'WAN-Side' && angular.isDefined(n.subscriberIP)) {
currentNode.append('text').attr({
'text-anchor': 'middle',
y: 40
@@ -1516,6 +1521,8 @@
var handleSvg = function handleSvg(el) {
+ d3.select($element[0]).select('svg').remove();
+
svg = d3.select(el).append('svg').style('width', el.clientWidth + 'px').style('height', el.clientHeight + 'px');
};
@@ -1553,6 +1560,12 @@
});
});
+ d3.select(window).on('resize.logic', function () {
+ handleSvg($element[0]);
+ LogicTopologyHelper.setupTree(svg);
+ LogicTopologyHelper.updateTree(svg);
+ });
+
handleSvg($element[0]);
LogicTopologyHelper.setupTree(svg);
@@ -1661,7 +1674,7 @@
'use strict';
angular.module('xos.diagnostic').constant('serviceTopologyConfig', {
- widthMargin: 20,
+ widthMargin: 60,
heightMargin: 30,
duration: 750,
elWidths: [20, 104, 105, 104, 20], //this is not true
@@ -1730,7 +1743,7 @@
computeNodes: [],
children: [{
name: 'LAN-Side',
- subtitle: 'Virtual Networks',
+ subtitle: 'Virtual Network',
type: 'network',
children: [{
name: 'Subscriber',