Resolved remove subscriber and increased font
diff --git a/views/ngXosViews/diagnostic/src/css/diagnostic.css b/views/ngXosViews/diagnostic/src/css/diagnostic.css
index d9d1470..5db9d7f 100644
--- a/views/ngXosViews/diagnostic/src/css/diagnostic.css
+++ b/views/ngXosViews/diagnostic/src/css/diagnostic.css
@@ -105,6 +105,10 @@
stroke-width: 1px;
}
+logic-topology .compute-node > text{
+ font-size: 16px;
+}
+
/* INSTANCE */
logic-topology .instance > rect{
@@ -203,6 +207,10 @@
}
.node text {
+ font: 18px sans-serif;
+}
+
+.node .instance text {
font: 12px sans-serif;
}
diff --git a/views/ngXosViews/diagnostic/src/js/chart_data_service.js b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
index 5d65b2b..ff2d31b 100644
--- a/views/ngXosViews/diagnostic/src/js/chart_data_service.js
+++ b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
@@ -81,6 +81,10 @@
serviceTopologyConfig.elWidths.pop();
}
+ //remove tags and ip
+ delete this.logicTopologyData.children[0].children[0].children[0].subscriberTag;
+ delete this.logicTopologyData.children[0].subscriberIP;
+
this.highlightInstances([]);
delete this.logicTopologyData.children[0].children[0].children[0].children[0].children;
}
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 7649374..6828abb 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -14,10 +14,14 @@
var _this = this;
this.addNetworks = (nodes) => {
+
+ // clean childs
+ nodes.selectAll('*').remove();
+
nodes.append('path')
.attr({
d: shapes.cloud,
- transform: 'translate(-63, -52), scale(0.5)',
+ transform: 'translate(-100, -72), scale(0.7)',
class: 'cloud'
});
@@ -45,14 +49,14 @@
currentNode.append('text')
.attr({
'text-anchor': 'middle',
- y: 40
+ y: 50
})
.text(() => `C-Tag: ${n.subscriberTag.cTag}`);
currentNode.append('text')
.attr({
'text-anchor': 'middle',
- y: 60
+ y: 70
})
.text(() => `S-Tag: ${n.subscriberTag.sTag}`);
}
@@ -61,7 +65,7 @@
currentNode.append('text')
.attr({
'text-anchor': 'middle',
- y: 40
+ y: 50
})
.text(() => `Public IP: ${n.subscriberIP}`);
}
@@ -164,7 +168,7 @@
nodeContainer.append('text')
.attr({
'text-anchor': 'start',
- y: 15, //FIXME
+ y: 17, //FIXME
x: 10, //FIXME
opacity: 0
})
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
index 61ec1e2..bb7ba5d 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -71,8 +71,13 @@
nodeEnter.append('text')
.attr({
- x: d => d.children ? -serviceTopologyConfig.circle.selectedRadius -3 : serviceTopologyConfig.circle.selectedRadius + 3,
+ x: d => d.children ? -serviceTopologyConfig.circle.selectedRadius -5 : serviceTopologyConfig.circle.selectedRadius + 5,
dy: '.35em',
+ y: d => {
+ if (d.children && d.parent){
+ return '-5';
+ }
+ },
transform: d => {
if (d.children && d.parent){
if(d.parent.x < d.x){
diff --git a/xos/core/xoslib/static/css/xosDiagnostic.css b/xos/core/xoslib/static/css/xosDiagnostic.css
index b5fb8d6..0c1de20 100644
--- a/xos/core/xoslib/static/css/xosDiagnostic.css
+++ b/xos/core/xoslib/static/css/xosDiagnostic.css
@@ -1 +1 @@
-#xosDiagnostic,[ui-view]{min-height:700px;position:relative}diagnostic-container .form-control.small-padding{padding:6px}diagnostic-container .half-height{position:relative;height:50%}diagnostic-container .onethird-height{position:relative;height:33%;border-bottom:1px solid #999}diagnostic-container .twothird-height{position:relative;height:67%}diagnostic-container .subscriber-select{max-width:200px;position:absolute;top:20px;right:20px;z-index:1}diagnostic-container .onethird-height .well,diagnostic-container .twothird-height .well{font-weight:700;max-width:165px;text-align:center;margin-top:15px;background:#eee;border-color:steelblue;padding:10px}diagnostic-container .onethird-height .well.pull-right{position:absolute;right:0;top:-15px;cursor:pointer;z-index:200}subscriber-status-modal .row+.row{margin-top:20px}.half-height+.half-height{border-top:1px solid black}service-topology,logic-topology{height:100%;width:100%;display:block;position:absolute;top:0}logic-topology .subscriber circle,logic-topology .device circle{fill:#fff;stroke:green;stroke-width:1px}logic-topology>svg{position:absolute;top:0}logic-topology .network .cloud{fill:#fff;stroke:green;stroke-width:1px}logic-topology .node.rack>g>rect{fill:#ccc;stroke:steelblue;stroke-width:1px}logic-topology .compute-node>rect{fill:#fff;stroke:steelblue;stroke-width:1px}logic-topology .instance>rect{fill:#eee;stroke:steelblue;stroke-width:1px}logic-topology .node .instance.active rect{fill:lightsteelblue;stroke:steelblue;stroke-width:1px}logic-topology .node .instance.active.good>rect{fill:green}logic-topology .node .instance.active.provisioning>rect{fill:yellow}logic-topology .node .instance.active.bad>rect{fill:red}logic-topology .node .instance .stats-container rect{fill:white}logic-topology .node .instance .stats-container text.name{font-weight:700}logic-topology .node .instance .stats-container text.ip{font-style:italic;font-size:10px}logic-topology .node .instance .stats-container .container rect{fill:#eee;stroke:steelblue;stroke-width:1px}.legend{fill:#fff;stroke:#ccc;stroke-width:1px;position:relative}.legend text{stroke:#000}.node{cursor:pointer}.node circle,.node rect{fill:#fff;stroke:steelblue;stroke-width:1px}.node.subscriber circle,.node.subscriber rect,.node.router circle,.node.router rect{stroke:#05ffcb}.node.slice rect{stroke:#b01dff}.node.instance rect{stroke:#ccc}.node.instance rect.active{stroke:#ff8b00}.node rect.slice-detail{fill:#fff;stroke:steelblue;stroke-width:3px}.node text{font:12px sans-serif}.node text.small{font-size:10px}.link,.device-link{fill:none;stroke:#ccc;stroke-width:2px}.link.slice{stroke:rgba(157,4,183,.29)}.link.instance{stroke:#ccc}.link.instance.active{stroke:rgba(255,138,0,.65)}.service-details{width:200px;position:absolute;top:20px;right:20px}.animate.ng-hide-remove{animation:.5s bounceInRight ease}.animate.ng-hide-add{animation:.5s bounceOutRight ease}.loader{font-size:10px;margin:150px auto;text-indent:-9999em;width:11em;height:11em;border-radius:50%;background:#fff;background:linear-gradient(to right,#fff 10%,rgba(255,255,255,0) 42%);position:relative;animation:load3 1.4s infinite linear;transform:translateZ(0)}.loader:before{width:50%;height:50%;background:#105e9e;border-radius:100% 0 0;position:absolute;top:0;left:0;content:''}.loader:after{background:#fff;width:75%;height:75%;border-radius:50%;content:'';margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}@keyframes load3{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.modal.fade.in{display:block}@keyframes bounceInRight{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1.000)}from{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}
\ No newline at end of file
+#xosDiagnostic,[ui-view]{min-height:700px;position:relative}diagnostic-container .form-control.small-padding{padding:6px}diagnostic-container .half-height{position:relative;height:50%}diagnostic-container .onethird-height{position:relative;height:33%;border-bottom:1px solid #999}diagnostic-container .twothird-height{position:relative;height:67%}diagnostic-container .subscriber-select{max-width:200px;position:absolute;top:20px;right:20px;z-index:1}diagnostic-container .onethird-height .well,diagnostic-container .twothird-height .well{font-weight:700;max-width:165px;text-align:center;margin-top:15px;background:#eee;border-color:steelblue;padding:10px}diagnostic-container .onethird-height .well.pull-right{position:absolute;right:0;top:-15px;cursor:pointer;z-index:200}subscriber-status-modal .row+.row{margin-top:20px}.half-height+.half-height{border-top:1px solid black}service-topology,logic-topology{height:100%;width:100%;display:block;position:absolute;top:0}logic-topology .subscriber circle,logic-topology .device circle{fill:#fff;stroke:green;stroke-width:1px}logic-topology>svg{position:absolute;top:0}logic-topology .network .cloud{fill:#fff;stroke:green;stroke-width:1px}logic-topology .node.rack>g>rect{fill:#ccc;stroke:steelblue;stroke-width:1px}logic-topology .compute-node>rect{fill:#fff;stroke:steelblue;stroke-width:1px}logic-topology .compute-node>text{font-size:16px}logic-topology .instance>rect{fill:#eee;stroke:steelblue;stroke-width:1px}logic-topology .node .instance.active rect{fill:lightsteelblue;stroke:steelblue;stroke-width:1px}logic-topology .node .instance.active.good>rect{fill:green}logic-topology .node .instance.active.provisioning>rect{fill:yellow}logic-topology .node .instance.active.bad>rect{fill:red}logic-topology .node .instance .stats-container rect{fill:white}logic-topology .node .instance .stats-container text.name{font-weight:700}logic-topology .node .instance .stats-container text.ip{font-style:italic;font-size:10px}logic-topology .node .instance .stats-container .container rect{fill:#eee;stroke:steelblue;stroke-width:1px}.legend{fill:#fff;stroke:#ccc;stroke-width:1px;position:relative}.legend text{stroke:#000}.node{cursor:pointer}.node circle,.node rect{fill:#fff;stroke:steelblue;stroke-width:1px}.node.subscriber circle,.node.subscriber rect,.node.router circle,.node.router rect{stroke:#05ffcb}.node.slice rect{stroke:#b01dff}.node.instance rect{stroke:#ccc}.node.instance rect.active{stroke:#ff8b00}.node rect.slice-detail{fill:#fff;stroke:steelblue;stroke-width:3px}.node text{font:18px sans-serif}.node .instance text{font:12px sans-serif}.node text.small{font-size:10px}.link,.device-link{fill:none;stroke:#ccc;stroke-width:2px}.link.slice{stroke:rgba(157,4,183,.29)}.link.instance{stroke:#ccc}.link.instance.active{stroke:rgba(255,138,0,.65)}.service-details{width:200px;position:absolute;top:20px;right:20px}.animate.ng-hide-remove{animation:.5s bounceInRight ease}.animate.ng-hide-add{animation:.5s bounceOutRight ease}.loader{font-size:10px;margin:150px auto;text-indent:-9999em;width:11em;height:11em;border-radius:50%;background:#fff;background:linear-gradient(to right,#fff 10%,rgba(255,255,255,0) 42%);position:relative;animation:load3 1.4s infinite linear;transform:translateZ(0)}.loader:before{width:50%;height:50%;background:#105e9e;border-radius:100% 0 0;position:absolute;top:0;left:0;content:''}.loader:after{background:#fff;width:75%;height:75%;border-radius:50%;content:'';margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}@keyframes load3{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.modal.fade.in{display:block}@keyframes bounceInRight{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1.000)}from{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}
\ No newline at end of file
diff --git a/xos/core/xoslib/static/js/xosDiagnostic.js b/xos/core/xoslib/static/js/xosDiagnostic.js
index 2c46d49..6066a5c 100644
--- a/xos/core/xoslib/static/js/xosDiagnostic.js
+++ b/xos/core/xoslib/static/js/xosDiagnostic.js
@@ -184,9 +184,14 @@
nodeEnter.append('text').attr({
x: function x(d) {
- return d.children ? -serviceTopologyConfig.circle.selectedRadius - 3 : serviceTopologyConfig.circle.selectedRadius + 3;
+ return d.children ? -serviceTopologyConfig.circle.selectedRadius - 5 : serviceTopologyConfig.circle.selectedRadius + 5;
},
dy: '.35em',
+ y: function y(d) {
+ if (d.children && d.parent) {
+ return '-5';
+ }
+ },
transform: function transform(d) {
if (d.children && d.parent) {
if (d.parent.x < d.x) {
@@ -890,9 +895,13 @@
var _this = this;
this.addNetworks = function (nodes) {
+
+ // clean childs
+ nodes.selectAll('*').remove();
+
nodes.append('path').attr({
d: shapes.cloud,
- transform: 'translate(-63, -52), scale(0.5)',
+ transform: 'translate(-100, -72), scale(0.7)',
'class': 'cloud'
});
@@ -919,14 +928,14 @@
if (n.name === 'LAN-Side' && angular.isDefined(n.subscriberTag)) {
currentNode.append('text').attr({
'text-anchor': 'middle',
- y: 40
+ y: 50
}).text(function () {
return 'C-Tag: ' + n.subscriberTag.cTag;
});
currentNode.append('text').attr({
'text-anchor': 'middle',
- y: 60
+ y: 70
}).text(function () {
return 'S-Tag: ' + n.subscriberTag.sTag;
});
@@ -935,7 +944,7 @@
if (n.name === 'WAN-Side' && angular.isDefined(n.subscriberIP)) {
currentNode.append('text').attr({
'text-anchor': 'middle',
- y: 40
+ y: 50
}).text(function () {
return 'Public IP: ' + n.subscriberIP;
});
@@ -1030,7 +1039,7 @@
nodeContainer.append('text').attr({
'text-anchor': 'start',
- y: 15, //FIXME
+ y: 17, //FIXME
x: 10, //FIXME
opacity: 0
}).text(function (d) {
@@ -1862,6 +1871,10 @@
serviceTopologyConfig.elWidths.pop();
}
+ //remove tags and ip
+ delete _this.logicTopologyData.children[0].children[0].children[0].subscriberTag;
+ delete _this.logicTopologyData.children[0].subscriberIP;
+
_this.highlightInstances([]);
delete _this.logicTopologyData.children[0].children[0].children[0].children[0].children;
};