Merge branch 'master' of github.com:open-cloud/xos
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\">&times;</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\">&times;</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\">&times;</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',