Fixed customer care label position
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 6ac0342..29972fb 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -315,19 +315,65 @@
// NOTE this should be dinamically positioned
// base on the number of element present
+
+ // fake the position
+ let translation = {
+ 'mysite_vsg-1': '200, -120',
+ 'mysite_vsg-2': '-300, 30',
+ 'mysite_vsg-3': '-300, -250',
+ };
+
const statsContainer = container.append('g')
.attr({
- transform: `translate(200, -120)`,
+ transform: `translate(${translation[instance.humanReadableName]})`,
class: 'stats-container'
+ })
+ .on('click', function(d) {
+ // toggling visisbility
+ d.fade = !d.fade;
+ let opacity;
+ if(d.fade){
+ opacity = 0.1;
+ }
+ else{
+ opacity = 1;
+ }
+
+ d3.select(this)
+ .transition()
+ .duration(serviceTopologyConfig.duration)
+ .attr({
+ opacity: opacity
+ })
});
-
- statsContainer.append('line')
- .attr({
+ let lines = {
+ 'mysite_vsg-1': {
x1: -160,
y1: 120,
x2: 0,
y2: 50,
+ },
+ 'mysite_vsg-2': {
+ x1: 250,
+ y1: 50,
+ x2: 300,
+ y2: -10
+ },
+ 'mysite_vsg-3': {
+ x1: 250,
+ y1: 50,
+ x2: 300,
+ y2: 270
+ }
+ }
+
+ statsContainer.append('line')
+ .attr({
+ x1: d => lines[d.humanReadableName].x1,
+ y1: d => lines[d.humanReadableName].y1,
+ x2: d => lines[d.humanReadableName].x2,
+ y2: d => lines[d.humanReadableName].y2,
stroke: 'black',
opacity: 0
})
@@ -345,7 +391,7 @@
statsHeight += serviceTopologyConfig.container.height + (serviceTopologyConfig.container.margin * 2)
}
- statsContainer.append('rect')
+ const statsVignette = statsContainer.append('rect')
.attr({
width: statsWidth,
height: statsHeight,
@@ -357,6 +403,7 @@
opacity: 1
});
+
// add instance info
statsContainer.append('text')
.attr({
@@ -387,22 +434,27 @@
})
// add stats
- const interestingMeters = ['memory', 'memory.usage', 'cpu', 'vcpus'];
+ const interestingMeters = ['memory', 'memory.usage', 'cpu', 'cpu_util'];
interestingMeters.forEach((m, i) => {
const meter = lodash.find(instance.stats, {meter: m});
- statsContainer.append('text')
- .attr({
- y: 55 + (i * 15),
- x: serviceTopologyConfig.instance.margin,
- opacity: 0
- })
- .text(`${meter.description}: ${Math.round(meter.value)} ${meter.unit}`)
- .transition()
- .duration(serviceTopologyConfig.duration)
- .attr({
- opacity: 1
- });
+
+ if(meter){
+
+ statsContainer.append('text')
+ .attr({
+ y: 55 + (i * 15),
+ x: serviceTopologyConfig.instance.margin,
+ opacity: 0
+ })
+ .text(`${meter.description}: ${Math.round(meter.value)} ${meter.unit}`)
+ .transition()
+ .duration(serviceTopologyConfig.duration)
+ .attr({
+ opacity: 1
+ });
+ }
+
});
if(instance.container){
@@ -471,10 +523,10 @@
}
});
- instanceContainer
- .on('click', function(d){
- console.log(`Draw vignette with stats for instance: ${d.name}`);
- });
+ // instanceContainer
+ // .on('click', function(d){
+ // console.log(`Draw vignette with stats for instance: ${d.name}`);
+ // });
};
this.addPhisical = (nodes) => {