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) => {
diff --git a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
index 6754702..b2375c7 100644
--- a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
@@ -3,14 +3,14 @@
<service-topology service-chain="vm.serviceChain"></service-topology>
</div>
<div class="half-height">
- <div class="panel panel-primary subscriber-select">
+ <!-- <div class="panel panel-primary subscriber-select">
<div class="panel-heading">Select a subscriber:</div>
<div class="panel-body">
<select class="form-control" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber">
<option value="">Select a subscriber...</option>
</select>
</div>
- </div>
+ </div> -->
<logic-topology ng-if="vm.subscribers" subscribers="vm.subscribers" selected="vm.selectedSubscriber"></logic-topology>
</div>
</div>
\ No newline at end of file