Added Instance stats to d3 and drawing container
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 3007fd2..0249b3d 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -9,7 +9,7 @@
var instanceId = 0;
angular.module('xos.serviceTopology')
- .service('NodeDrawer', function(d3, serviceTopologyConfig, RackHelper){
+ .service('NodeDrawer', function(d3, serviceTopologyConfig, RackHelper, lodash){
var _this = this;
@@ -64,6 +64,9 @@
nodes.each(d => {
let [w, h] = RackHelper.getRackSize(d.computeNodes);
+ // TODO update instead of delete and redraw
+ nodes.select('g').remove();
+
let rack = nodes
.append('g');
@@ -74,7 +77,7 @@
.transition()
.duration(serviceTopologyConfig.duration)
.attr({
- transform: d => `translate(${- (w / 2)}, ${- (h / 2)})`
+ transform: () => `translate(${- (w / 2)}, ${- (h / 2)})`
});
rack
@@ -177,11 +180,120 @@
return name
.replace('app_', '')
.replace('service_', '')
- .replace('ovs_', '')
+ // .replace('ovs_', '')
.replace('mysite_', '')
.replace('_instance', '');
};
+ const getInstanceStatusColor = (instance) => {
+ function startWith(val, string){
+ return string.substring(0, val.length) === val;
+ }
+
+ if(startWith('0 - ', instance.backend_status)){
+ return 'provisioning';
+ }
+ if(startWith('1 - ', instance.backend_status)){
+ return 'good';
+ }
+ if(startWith('2 - ', instance.backend_status)){
+ return 'bad';
+ }
+ else {
+ return '';
+ }
+ };
+
+ const showInstanceStats = (container, instance) => {
+
+ // NOTE this should be dinamically positioned
+ // base on the number of element present
+ const statsContainer = container.append('g')
+ .attr({
+ transform: `translate(200, -32)`,
+ class: 'stats-container'
+ });
+
+
+ statsContainer.append('line')
+ .attr({
+ x1: -120,
+ y1: 50,
+ x2: 0,
+ y2: 50,
+ stroke: 'black'
+ })
+
+ // NOTE rect should be dinamically sized base on the presence of a container
+ let statsHeight = 110;
+ let statsWidth = 200;
+
+ if (instance.container){
+ statsHeight += serviceTopologyConfig.container.height + (serviceTopologyConfig.container.margin * 2)
+ }
+
+ statsContainer.append('rect')
+ .attr({
+ width: statsWidth,
+ height: statsHeight
+ });
+
+ // add instance info
+ statsContainer.append('text')
+ .attr({
+ y: 15,
+ x: serviceTopologyConfig.instance.margin,
+ class: 'name'
+ })
+ .text(instance.humanReadableName)
+
+ statsContainer.append('text')
+ .attr({
+ y: 30,
+ x: serviceTopologyConfig.instance.margin,
+ class: 'ip'
+ })
+ .text(instance.ip)
+
+ // add stats
+ const interestingMeters = ['memory', 'memory.usage', 'cpu', 'vcpus'];
+
+ interestingMeters.forEach((m, i) => {
+ const meter = lodash.find(instance.stats, {meter: m});
+ statsContainer.append('text')
+ .attr({
+ y: 55 + (i * 15),
+ x: serviceTopologyConfig.instance.margin
+ })
+ .text(`${meter.description}: ${meter.value} ${meter.unit}`);
+ });
+
+ if(instance.container){
+ // draw container
+
+ const containerBox = statsContainer.append('g')
+ .attr({
+ class: 'container',
+ transform: `translate(${serviceTopologyConfig.instance.margin}, 115)`
+ });
+
+ containerBox.append('rect')
+ .attr({
+ width: statsWidth - (serviceTopologyConfig.container.margin * 2),
+ height: serviceTopologyConfig.container.height,
+ });
+
+ containerBox.append('text')
+ .attr({
+ y: 20,
+ x: (statsWidth - (serviceTopologyConfig.container.margin * 2)) / 2,
+ 'text-anchor': 'middle'
+ })
+ .text(instance.container.name)
+ }
+
+ };
+
this.drawInstances = (container, instances) => {
// TODO check for stats field in instance and draw popup
@@ -196,7 +308,7 @@
instanceContainer
.attr({
transform: `translate(${width / 2}, ${ height / 2})`,
- class: d => `instance ${d.selected ? 'active' : ''}`,
+ class: d => `instance ${d.selected ? 'active' : ''} ${getInstanceStatusColor(d)}`,
})
.transition()
.duration(serviceTopologyConfig.duration)
@@ -223,16 +335,27 @@
x: 40, //FIXME
opacity: 0
})
- .text(d => formatInstanceName(d.name))
+ .text(d => formatInstanceName(d.humanReadableName))
.transition()
.duration(serviceTopologyConfig.duration)
.attr({
opacity: 1
});
+ // if stats are attached and instance is active,
+ // draw stats
+ instanceContainer.each(function(instance){
+
+ const container = d3.select(this);
+
+ if(angular.isDefined(instance.stats) && instance.selected){
+ showInstanceStats(container, instance);
+ }
+ });
+
instanceContainer
- .on('click', d => {
- console.log(d);
+ .on('click', function(d){
+ console.log(`Draw vignette with stats for instance: ${d.name}`);
});
};