Skip to content

Commit

Permalink
Closes-Bug:#1581650
Browse files Browse the repository at this point in the history 
Did the following UI changes in monitor infra config node summary page
1)Aligned the time axis tick values in line bar chart and stack chart
2)Reduced the bar width of the stack chart and line bar chart, current bucket size is 2 mins
for stacked chart and 4 mins in line bar chart.
3)Adjusted the font size of tick label and thickness of tick line to be in sync with other charts
4)Removed the fetching data label in line bar chart and donut chart
5)Aligned the base of stack chart and donut chart
6)Added the timestamp in stack chart tooltip.
7)Fixed the issue line bar chart is not showing complete 2 hrs data.

Change-Id: I7e17fe78bcec69c2bf00ed63a0d6ea0979f5d8e4
  • Loading branch information
@vishnuvv
vishnuvv committed Jun 6, 2016
1 parent 32ed3f0 commit 9c8b6c8
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 39 deletions.
2 changes: 1 addition & 1 deletion webroot/common/ui/js/controller.app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ function getControllerAppPaths (ctBaseDir, ctBuildDir,env) {
'monitor-infra-controlnode-model' : ctWebDir + '/monitor/infrastructure/common/ui/js/models/ControlNodeListModel',
'monitor-infra-vrouter-model' : ctWebDir + '/monitor/infrastructure/common/ui/js/models/VRouterListModel',
'monitor-infra-utils' : ctWebDir + '/monitor/infrastructure/common/ui/js/utils/monitor.infra.utils',
'confignode-scatterchart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/ConfigNodeScatterChartView',
'confignode-chart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/ConfigNodeChartsView',
'controlnode-scatterchart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/ControlNodeScatterChartView',
'dbnode-scatterchart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/DatabaseNodeScatterChartView',
'analyticsnode-scatterchart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/AnalyticsNodeScatterChartView',
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -40,7 +40,7 @@ define([
this.HOST_DPDK = 'HOST_DPDK';

//Config Summary page Constants
this.CONFIGNODESTATS_BUCKET_DURATION = 240000000;
this.CONFIGNODESTATS_BUCKET_DURATION = 150000000;
this.CONFIGNODE_COLORS = ['#b0c8c3', '#bf94e0', '#5d6e7e', '#b2a198', '#eccc9b'];
this.CONFIGNODE_FAILEDREQUESTS_TITLE = 'Failed Requests';
this.CONFIGNODE_FAILEDREQUESTS_COLOR = '#d95436';
Expand Down
31 changes: 12 additions & 19 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 @@ -788,13 +788,6 @@ define(
y0: y0,
y1: y0 += totalFailedReqs
});
parsedData.push({
colorCodes: colorCodes,
counts: counts,
total: totalFailedReqs,
timestampExtent: timestampExtent,
date: new Date(i / 1000)
});
for(var j=0,len=reqCntData.length;j<len;j++) {
var nodeName = reqCntData[j]['key'];
var nodeReqCnt = reqCntData[j]['value'];
Expand All @@ -804,32 +797,33 @@ define(
failedReqPerNodePercent = Math.round((failedReqPerNode/nodeReqCnt) * 100);
}
var avgResTime = Math.round((ifNull(resTimeNodeMap[nodeName], 0)/nodeReqCnt)) / 1000; //Converting to millisecs
var toTime = new XDate(timestampExtent[0]/1000).toString('yyyy-MM-dd HH:mm');
var fromTime = new XDate(timestampExtent[1]/1000).toString('yyyy-MM-dd HH:mm');
var fromTime = new XDate((timestampExtent[0]/1000)).toString('HH:mm');
var toTime = new XDate((timestampExtent[1]/1000)).toString('HH:mm');
counts.push({
name: nodeName,
color: colorCodes[j],
avgResTime: contrail.format('{0} {1}', avgResTime, 'ms'),
nodeReqCnt: nodeReqCnt,
reqFailPercent: failedReqPerNodePercent,
bucketDuration: contrail.format('{1} - {0}', fromTime, toTime),
time: contrail.format('{0}', fromTime),
y0:y0,
y1:y0 += nodeReqCnt
});
parsedData.push({
counts: counts,
total: totalReqs,
timestampExtent: timestampExtent,
date: new Date(i / 1000)
});
}
parsedData.push({
colorCodes: colorCodes,
counts: counts,
total: totalReqs,
timestampExtent: timestampExtent,
date: new Date(i / 1000)
});
}
return parsedData;
};
this.parseConfigNodeResponseStackedChartData = function (apiStats) {
var buckets = this.bucketizeConfigNodeStats(apiStats, 600000000);
var colors = monitorInfraConstants.CONFIGNODE_COLORS;
var cf = crossfilter(apiStats);
var buckets = this.bucketizeConfigNodeStats(apiStats, 240000000);
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 Down Expand Up @@ -902,7 +896,6 @@ define(
var cf = crossfilter(apiStats),
parsedData = [],
colors = monitorInfraConstants.CONFIGNODE_COLORS;

if (!$.isArray(reqType)) {
reqType = [reqType];
}
Expand Down
40 changes: 29 additions & 11 deletions webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeChartsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ define(['underscore', 'contrail-view',
view: "WidgetView",
viewConfig: {
header: {
title: 'Request served',
title: 'Requests Served',
},
controls: {
top: {
Expand All @@ -42,20 +42,21 @@ define(['underscore', 'contrail-view',
chartOptions:{
brush: false,
height: 380,
xAxisLabel: 'Time (hrs)',
yAxisLabel: 'Requests Served',
xAxisLabel: 'Time',
yAxisLabel: 'Requests served',
yAxisOffset: 25,
axisLabelFontSize: 11,
tickPadding: 8,
margin: {
left: 45,
top: 25,
left: 40,
top: 35,
right: 0,
bottom: 40
},
bucketSize: monitorInfraConstants.CONFIGNODESTATS_BUCKET_DURATION/(1000 * 1000 * 60),//converting to minutes
sliceTooltipFn: function (data) {
var tooltipConfig = {};
var tooltipConfig = {},
time = data['time'];
if (data['name'] != monitorInfraConstants.CONFIGNODE_FAILEDREQUESTS_TITLE) {
tooltipConfig['title'] = {
name : data['name'],
Expand All @@ -64,6 +65,9 @@ define(['underscore', 'contrail-view',
tooltipConfig['content'] = {
iconClass : false,
info : [{
label: 'Time',
value: time
}, {
label: 'Requests',
value: ifNull(data['nodeReqCnt'], '-')
}, {
Expand All @@ -82,6 +86,9 @@ define(['underscore', 'contrail-view',
tooltipConfig['content'] = {
iconClass : false,
info : [{
label: 'Time',
value: time
},{
label: 'Total Requests',
value: ifNull(data['totalReqs'], '-')
}, {
Expand Down Expand Up @@ -184,16 +191,27 @@ define(['underscore', 'contrail-view',
chartOptions: {
y1AxisLabel:ctwl.RESPONSE_TIME,
y2AxisLabel:ctwl.RESPONSE_SIZE,
xAxisTicksCnt: 8, //(for every 15 mins, total duration is 2 hrs)
margin: {top: 20, right: 70, bottom: 40, left: 60},
xAxisTicksCnt: 8, //In case of time scale for every 15 mins one tick
margin: {top: 20, right: 50, bottom: 40, left: 50},
axisLabelDistance: -10,
y2AxisWidth: 50,
//forceY1: [0, 1],
focusEnable: false,
height: 190,
showLegend: true,
xAxisLabel: 'Time (hrs)',
xFormatter: function (xValue) {
return d3.time.format('%H:%M')(new Date(xValue));
xAxisLabel: 'Time',
xAxisMaxMin: false,
defaultDataStatusMessage: false,
xFormatter: function (xValue, tickCnt) {
// Same function is called for
// axis ticks and the tool tip
// title
var date = new Date(xValue);
if (tickCnt != null) {
var mins = date.getMinutes();
date.setMinutes(Math.ceil(mins/15) * 15);
}
return d3.time.format('%H:%M')(date);
},
y1Formatter: function (y1Value) {
var formattedValue = Math.round(y1Value) + ' ms';
Expand Down
10 changes: 6 additions & 4 deletions webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeDonutChartView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ define(['underscore', 'contrail-view'],function(_, ContrailView){
parseFn: function (response) {
return monitorInfraParsers
.parseConfigNodeRequestForDonutChart(
response, ['GET']);
response, ['POST', 'PUT', 'DELETE']);
},
chartOptions: {
height: 160,
Expand All @@ -39,7 +39,8 @@ define(['underscore', 'contrail-view'],function(_, ContrailView){
top: 10
},
showLabels: false,
title: 'Read',
title: 'Write',
defaultDataStatusMessage: false
},
}
}, {
Expand All @@ -50,7 +51,7 @@ define(['underscore', 'contrail-view'],function(_, ContrailView){
parseFn: function (response) {
return monitorInfraParsers
.parseConfigNodeRequestForDonutChart(
response, 'POST', 'PUT', 'DELETE');
response, ['GET']);
},
chartOptions: {
height: 160,
Expand All @@ -60,7 +61,8 @@ define(['underscore', 'contrail-view'],function(_, ContrailView){
},
showLabels: false,
showLegend: true,
title: 'Write',
title: 'Read',
defaultDataStatusMessage: false,
legendFn: function (data, svg, chart) {
if (data != null && svg != null && chart != null) {
$(svg).find('g.contrail-legendWrap').remove();
Expand Down
6 changes: 3 additions & 3 deletions webroot/monitor/infrastructure/dashboard/ui/js/views/ControllerDashboardView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
define([
'underscore',
'backbone',
// 'confignode-scatterchart-view',
// 'config node charts view'
'controller-basedir/monitor/infrastructure/common/ui/js/views/ConfigNodeChartsView',
// 'controlnode-scatterchart-view',
'controller-basedir/monitor/infrastructure/common/ui/js/views/ControlNodeScatterChartView',
Expand All @@ -20,7 +20,7 @@ define([
'monitor-infra-confignode-model',
'monitor-infra-controlnode-model',
'monitor-infra-vrouter-model'
], function(_,Backbone,ConfigNodeScatterChartView,
], function(_,Backbone,ConfigNodeChartsView,
ControlNodeScatterChartView,DatabaseNodeScatterChartView,
AnalyticsNodeScatterChartView,MonitorInfraDashboardView,VRouterDashboardView,
AnalyticsNodeListModel,DatabaseNodeListModel,ConfigNodeListModel,
Expand Down Expand Up @@ -60,7 +60,7 @@ define([
downCntFn: dashboardUtils.getDownNodeCnt
},{
title: 'Config Nodes',
view: ConfigNodeScatterChartView,
view: ConfigNodeChartsView,
model: configNodeListModel,
downCntFn: dashboardUtils.getDownNodeCnt
},{
Expand Down

0 comments on commit 9c8b6c8

Please sign in to comment.