Skip to content

Commit

Permalink
Closes-Bug:#1581650
Browse files Browse the repository at this point in the history 
Handled the following in monitor infra config & Analytics nodes summary page
1)Irrespective of the response of chart queries legends will show all nodes
2)Add the tooltips for the legend which will show the node name
3)Fixed the issue, same node is getting assigned different colors across the charts in same page.

Change-Id: I7ea1a327d50c47d382c9a0448d692342c7851f1c
(cherry picked from commit 8ee6d09)
  • Loading branch information
@vishnuvv
vishnuvv committed Jul 31, 2016
1 parent d39d45d commit 2fa023e
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 41 deletions.
1 change: 1 addition & 0 deletions webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ define([
this.CONFIGNODE_COLORS = ['#b0c8c3', '#bf94e0', '#5d6e7e', '#b2a198', '#eccc9b'];
this.CONFIGNODE_FAILEDREQUESTS_TITLE = 'Failed Requests';
this.CONFIGNODE_FAILEDREQUESTS_COLOR = '#d95436';
this.CONFIGNODE_RESPONSESIZE_COLOR = '#7f9d92';

this.monitorInfraUrls = {
TENANT_API_URL : "/api/tenant/get-data",
Expand Down
17 changes: 11 additions & 6 deletions webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.parsers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -764,6 +764,7 @@ define(
for (var j =0 ; j < totalResMessagesArrLen; j++) {
totalReqs += totalResMessagesArr[j]['value']
}
totalResMessagesArr = _.sortBy(totalResMessagesArr, 'key');
for(var j=0;j<totalResMessagesArrLen;j++) {
var nodeName = totalResMessagesArr[j]['key'];
var nodeReqCnt = totalResMessagesArr[j]['value'];
Expand Down Expand Up @@ -851,6 +852,7 @@ define(
y0: y0,
y1: y0 += totalFailedReqs
});
queriesCntData = _.sortBy(queriesCntData, 'key');
for(var j=0,len=queriesCntData.length;j<len;j++) {
var nodeName = queriesCntData[j]['key'];
var nodeReqCnt = queriesCntData[j]['value'];
Expand Down Expand Up @@ -937,6 +939,7 @@ define(
y0: y0,
y1: y0 += totalFailedReqs
});
totalResReadWriteDataArr = _.sortBy(totalResReadWriteDataArr, 'key');
for (var j = 0; j < totalResReadWriteDataArrLen; j++) {
var nodeName = totalResReadWriteDataArr[j]['key'];
var nodeReqCnt = totalResReadWriteDataArr[j]['value'];
Expand Down Expand Up @@ -1029,6 +1032,7 @@ define(
y0: y0,
y1: y0 += totalFailedReqs
});
reqCntData = _.sortBy(reqCntData, 'key');
for(var j=0,len=reqCntData.length;j<len;j++) {
var nodeName = reqCntData[j]['key'];
var nodeReqCnt = reqCntData[j]['value'];
Expand Down Expand Up @@ -1066,10 +1070,9 @@ define(
}
return parsedData;
};
this.parseConfigNodeResponseStackedChartData = function (apiStats) {
this.parseConfigNodeResponseStackedChartData = function (apiStats, colorMap) {
var cf = crossfilter(apiStats);
var buckets = this.bucketizeConfigNodeStats(apiStats, 240000000, false);
var colors = monitorInfraConstants.CONFIGNODE_COLORS;
var tsDim = cf.dimension(function (d) {return d.T});
var sourceDim = cf.dimension(function (d) {return d.Source});
var sourceGroupedData = sourceDim.group().all();
Expand All @@ -1080,14 +1083,15 @@ define(
key: obj['key'],
values: [],
bar: true,
color: colors[idx] != null ? colors[idx] : cowc.D3_COLOR_CATEGORY5[1]
color: colorMap[obj['key']] != null ? colorMap[obj['key']]:
(colors[idx] != null ? colors[idx] : cowc.D3_COLOR_CATEGORY5[1])
};
chartData.push(nodeMap[obj['key']]);
});
var lineChartData = {
key: ctwl.RESPONSE_SIZE,
values: [],
color: '#7f9d92'
color: monitorInfraConstants.CONFIGNODE_RESPONSESIZE_COLOR
}
for (var i in buckets) {
var timestampExtent = buckets[i]['timestampExtent'],
Expand All @@ -1097,6 +1101,7 @@ define(
tsDim.filter(timestampExtent);
var bucketRequestsCnt = tsDim.top(Infinity).length;
sourceGroupedData = sourceDim.group().all();
sourceGroupedData = _.sortBy(sourceGroupedData, 'key');
$.each(sourceGroupedData, function(idx, obj) {
nodeReqMap[obj['key']] = obj['value'];
});
Expand Down Expand Up @@ -1139,7 +1144,7 @@ define(
return chartData;

};
this.parseConfigNodeRequestForDonutChart = function (apiStats, reqType) {
this.parseConfigNodeRequestForDonutChart = function (apiStats, reqType, nodeColorMap) {
var cf = crossfilter(apiStats),
parsedData = [],
colors = [];
Expand All @@ -1161,7 +1166,7 @@ define(
parsedData.push({
label: value['key'],
value: value['value'],
color: colors[key]
color: nodeColorMap[value['key']] != null ? nodeColorMap[value['key']] : colors[key]
});
});
return parsedData;
Expand Down
23 changes: 22 additions & 1 deletion webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2340,10 +2340,16 @@ define([
label = options['label'],
cssClass = options['cssClass'] != null ? options['cssClass'] : 'contrail-legend',
dataLen = data.length,
nodeColorMap = options['nodeColorMap'],
clickFn = options['clickFn'];
if (color != null && !$.isArray(color)) {
color = [color];
}
if (nodeColorMap != null && !cowu.isEmptyObject(nodeColorMap)) {
color = _.values(nodeColorMap);
data = _.keys(nodeColorMap);
dataLen = data.length;
}
container.selectAll('g.'+cssClass)
.data(data)
.enter()
Expand All @@ -2356,6 +2362,10 @@ define([
.attr('height', 8)
.attr('fill', function (d, i) {
return (color != null && color[i] != null) ? color[i] : d['color'];
})
.append('title')
.text(function (d){
return d;
});
container.append('g')
.attr('transform', 'translate('+ (- ((dataLen * 20 + 10) + offset))+', 0)')
Expand All @@ -2365,7 +2375,18 @@ define([
.attr('text-anchor', 'end')
.text(label);
}

self.constructNodeColorMap = function (nodeList) {
nodeList = ifNull(nodeList, []);
nodeList = _.sortBy(nodeList, 'name');
var colors = self.getMonitorInfraNodeColors(nodeList.length);
var colorMap = {};
$.each(nodeList, function (idx, obj){
if (colorMap[obj['name']] == null && colors[idx] != null) {
colorMap[obj['name']] = colors[idx];
}
});
return colorMap;
}
self.getMonitorInfraNodeColors = function (nodeCnt) {
var colors = [];
if (nodeCnt == 1) {
Expand Down
71 changes: 49 additions & 22 deletions webroot/monitor/infrastructure/common/ui/js/views/AnalyticsNodesSummaryChartsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,40 @@ define(['underscore', 'contrail-view',
render : function (){
var anlyticsTemplate = contrail.getTemplate4Id(
cowc.TMPL_4COLUMN__2ROW_CONTENT_VIEW);
var self = this;
this.$el.html(anlyticsTemplate);
var topleftColumn = this.$el.find(".top-container .left-column"),
toprightCoulmn = this.$el.find(".top-container .right-column"),
bottomleftColumn = this.$el.find(".bottom-container .left-column"),
bottomrightCoulmn = this.$el.find(".bottom-container .right-column"),
sandeshModel = new AnalyticsNodeSandeshChartModel(),
queriesModel = new AnalyticsNodeQueriesChartModel(),
databseReadWritemodel = new AnalyticsNodeDataBaseReadWriteChartModel();
var self = this,
analyticsNodeList = [];
self.$el.html(anlyticsTemplate);
if (self.model != null) {
var callBackExecuted = false;
self.model.onDataUpdate.subscribe(function (e, obj) {
if (self.model.isPrimaryRequestInProgress() == false
&& callBackExecuted == false) {
callBackExecuted = true;
analyticsNodeList = self.model.getItems();
var topleftColumn = self.$el.find(".top-container .left-column"),
toprightCoulmn = self.$el.find(".top-container .right-column"),
bottomleftColumn = self.$el.find(".bottom-container .left-column"),
bottomrightCoulmn = self.$el.find(".bottom-container .right-column"),
sandeshModel = new AnalyticsNodeSandeshChartModel(),
queriesModel = new AnalyticsNodeQueriesChartModel(),
databseReadWritemodel = new AnalyticsNodeDataBaseReadWriteChartModel();
var colorMap = monitorInfraUtils.constructNodeColorMap(analyticsNodeList);
self.renderView4Config(topleftColumn, sandeshModel,
getAnalyticsNodeSandeshChartViewConfig(colorMap));

self.renderView4Config(topleftColumn, sandeshModel,
getAnalyticsNodeSandeshChartViewConfig());
self.renderView4Config(toprightCoulmn, queriesModel,
getAnalyticsNodeQueriesChartViewConfig(colorMap));

self.renderView4Config(toprightCoulmn, queriesModel,
getAnalyticsNodeQueriesChartViewConfig());
self.renderView4Config(bottomrightCoulmn, databseReadWritemodel,
getAnalyticsNodeDatabaseReadChartViewConfig(colorMap));

self.renderView4Config(bottomrightCoulmn, databseReadWritemodel,
getAnalyticsNodeDatabaseReadChartViewConfig());

self.renderView4Config(bottomleftColumn, databseReadWritemodel,
getAnalyticsNodeDatabaseWriteChartViewConfig());
self.renderView4Config(bottomleftColumn, databseReadWritemodel,
getAnalyticsNodeDatabaseWriteChartViewConfig(colorMap));}
});
}
}
});
function getAnalyticsNodeSandeshChartViewConfig() {
function getAnalyticsNodeSandeshChartViewConfig(colorMap) {
return {
elementId : ctwl.ANALYTICS_CHART_SANDESH_SECTION_ID,
view : "SectionView",
Expand All @@ -43,6 +53,7 @@ define(['underscore', 'contrail-view',
viewConfig : {
class: 'mon-infra-chart chartMargin',
chartOptions:{
colorMap: colorMap,
brush: false,
height: 230,
xAxisLabel: '',
Expand Down Expand Up @@ -103,6 +114,7 @@ define(['underscore', 'contrail-view',
cssClass: 'contrail-legend-stackedbar',
data: colorCodes,
colors: colorCodes,
nodeColorMap: colorMap,
label: ctwl.ANALYTICS_NODES,
});
}
Expand All @@ -119,7 +131,7 @@ define(['underscore', 'contrail-view',

}

function getAnalyticsNodeQueriesChartViewConfig() {
function getAnalyticsNodeQueriesChartViewConfig(colorMap) {
return {
elementId : ctwl.ANALYTICS_CHART_QUERIES_SECTION_ID,
view : "SectionView",
Expand All @@ -132,6 +144,7 @@ define(['underscore', 'contrail-view',
viewConfig : {
class: 'mon-infra-chart chartMargin',
chartOptions:{
colorMap: colorMap,
brush: false,
height: 230,
xAxisLabel: '',
Expand Down Expand Up @@ -214,6 +227,9 @@ define(['underscore', 'contrail-view',
cssClass: 'contrail-legend-error',
data: [data],
offset: -10,
nodeColorMap: {
'Failures': monitorInfraConstants.CONFIGNODE_FAILEDREQUESTS_COLOR,
},
colors: monitorInfraConstants.CONFIGNODE_FAILEDREQUESTS_COLOR,
label: 'Failures',
});
Expand All @@ -223,6 +239,7 @@ define(['underscore', 'contrail-view',
data: colorCodes,
offset: 70,
colors: colorCodes,
nodeColorMap: colorMap,
label: ctwl.ANALYTICS_NODES,
});
}
Expand All @@ -239,7 +256,7 @@ define(['underscore', 'contrail-view',

}

function getAnalyticsNodeDatabaseReadChartViewConfig() {
function getAnalyticsNodeDatabaseReadChartViewConfig(colorMap) {
return {
elementId : ctwl.ANALYTICS_CHART_DATABASE_READ_SECTION_ID,
view : "SectionView",
Expand All @@ -252,6 +269,7 @@ define(['underscore', 'contrail-view',
viewConfig : {
class: 'mon-infra-chart chartMargin',
chartOptions:{
colorMap: colorMap,
brush: false,
height: 230,
xAxisLabel: '',
Expand Down Expand Up @@ -335,6 +353,9 @@ define(['underscore', 'contrail-view',
data: [data],
offset: -10,
colors: monitorInfraConstants.CONFIGNODE_FAILEDREQUESTS_COLOR,
nodeColorMap: {
'Failures': monitorInfraConstants.CONFIGNODE_FAILEDREQUESTS_COLOR,
},
label: 'Failures',
});
monitorInfraUtils.addLegendToSummaryPageCharts({
Expand All @@ -343,6 +364,7 @@ define(['underscore', 'contrail-view',
data: colorCodes,
offset: 70,
colors: colorCodes,
nodeColorMap: colorMap,
label: ctwl.ANALYTICS_NODES,
});
}
Expand All @@ -361,7 +383,7 @@ define(['underscore', 'contrail-view',

}

function getAnalyticsNodeDatabaseWriteChartViewConfig() {
function getAnalyticsNodeDatabaseWriteChartViewConfig(colorMap) {
return {
elementId : ctwl.ANALYTICS_CHART_DATABASE_WRITE_SECTION_ID,
view : "SectionView",
Expand All @@ -374,6 +396,7 @@ define(['underscore', 'contrail-view',
viewConfig : {
class: 'mon-infra-chart chartMargin',
chartOptions:{
colorMap: colorMap,
brush: false,
height: 230,
xAxisLabel: '',
Expand Down Expand Up @@ -457,6 +480,9 @@ define(['underscore', 'contrail-view',
data: [data],
offset: -10,
colors: monitorInfraConstants.CONFIGNODE_FAILEDREQUESTS_COLOR,
nodeColorMap: {
'Failures': monitorInfraConstants.CONFIGNODE_FAILEDREQUESTS_COLOR,
},
label: 'Failures',
});
monitorInfraUtils.addLegendToSummaryPageCharts({
Expand All @@ -465,6 +491,7 @@ define(['underscore', 'contrail-view',
data: colorCodes,
offset: 70,
colors: colorCodes,
nodeColorMap: colorMap,
label: ctwl.ANALYTICS_NODES,
});
}
Expand Down

0 comments on commit 2fa023e

Please sign in to comment.