Style fixes
diff --git a/views/ngXosViews/diagnostic/src/js/config.js b/views/ngXosViews/diagnostic/src/js/config.js
index a8ab7dc..fec991a 100644
--- a/views/ngXosViews/diagnostic/src/js/config.js
+++ b/views/ngXosViews/diagnostic/src/js/config.js
@@ -6,7 +6,7 @@
widthMargin: 20,
heightMargin: 30,
duration: 750,
- elWidths: [20, 104, 105, 104, 20, 150],
+ elWidths: [20, 104, 105, 104, 20, 150], //this is not true
circle: {
radius: 10,
r: 10,
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 7e52abb..5bf0dc8 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -97,6 +97,17 @@
};
+ // NOTE Stripping unuseful names to shorten labels.
+ // This is not elegant
+ const formatInstanceName = (name) => {
+ return name
+ .replace('app_', '')
+ .replace('service_', '')
+ .replace('ovs_', '')
+ .replace('mysite_', '')
+ .replace('_instance', '');
+ };
+
this.drawInstances = (container, instances) => {
let elements = container.selectAll('.instances')
@@ -116,11 +127,16 @@
instanceContainer.append('text')
.attr({
- 'text-anchor': 'start',
- y: 13, //FIXME
- x: 5 //FIXME
+ 'text-anchor': 'middle',
+ y: 23, //FIXME
+ x: 40 //FIXME
})
- .text(d => d.name);
+ .text(d => formatInstanceName(d.name));
+
+ instanceContainer
+ .on('click', d => {
+ console.log(d);
+ });
};
this.addPhisical = (nodes) => {