Skip to content

Commit

Permalink
Closes-Bug:#1581650
Browse files Browse the repository at this point in the history 
1)Fixed the issue legends for monitor infra config node charts are not rendered in firefox and IE
& made a common function for adding the legend.
2)Created a separate css file for monitor infrastructure changes.
Change-Id: I7b377ab5921132991fb4ea4046ed0bb5a9269c3b
  • Loading branch information
@vishnuvv
vishnuvv committed Jun 8, 2016
1 parent f2976f8 commit ecd5946
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 98 deletions.
3 changes: 2 additions & 1 deletion webroot/menu.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ and need to add the iconClass tag wherever we need to show some icons
<init>/monitor/infrastructure/common/ui/js/monitor.infra.init.js</init>
<resources>
<resource>
<rootDir>/monitor/infra/common/ui</rootDir>
<rootDir>/monitor/infrastructure/common/ui</rootDir>
<css>monitor.infra.css</css>
</resource>
</resources>
<iconClass>icon-desktop</iconClass>
Expand Down
26 changes: 26 additions & 0 deletions webroot/monitor/infrastructure/common/ui/css/monitor.infra.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.confignode-chart .widget-box .widget-header > :first-child {
line-height: 23px;
}
.confignode-chart .widget-box .widget-main {
padding: 0px;
}
.confignode-chart g.nv-barsWrap g.nv-group {
fill-opacity: 1 !important;
}
.confignode-chart .contrail-legend text {
font: normal 11px Open Sans;
opacity: 1;
}
.confignode-chart .widget-box {
margin: 0px;
}
.confignode-chart .contrail-chart-title text {
font-size: 11px;
}
.confignode-chart .widget-box .widget-header {
border-bottom: none;
font-size: 14px;
height: 23px;
cursor: auto;
padding: 3px 0px;
}
43 changes: 43 additions & 0 deletions 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 @@ -2303,6 +2303,49 @@ define([
}
);
};

/*
* This function adds the legend to the component
* which accepts
* colors - checks the color object if it is not there
* takes the color from the data
* cssClass - any custom css to the legend
* label - label for the legend
* clickFn - Handler for the click event
*/
self.addLegendToSummaryPageCharts = function (options) {
var container = options['container'],
data = options['data'],
color = options['colors'],
offset = options['offset'] != null ? options['offset'] : 0,
label = options['label'],
cssClass = options['cssClass'] != null ? options['cssClass'] : 'contrail-legend',
dataLen = data.length,
clickFn = options['clickFn'];
if (color != null && !$.isArray(color)) {
color = [color];
}
container.selectAll('g.'+cssClass)
.data(data)
.enter()
.append('g')
.attr('transform', function (d, i) {
return 'translate('+ (- ((dataLen - i) * 20 + offset)) +', 0)';
}).attr('class', 'contrail-legend '+cssClass)
.append('rect')
.attr('width', 8)
.attr('height', 8)
.attr('fill', function (d, i) {
return (color != null && color[i] != null) ? color[i] : d['color'];
});
container.append('g')
.attr('transform', 'translate('+ (- ((dataLen * 20 + 10) + offset))+', 0)')
.attr('class', 'contrail-legend '+cssClass)
.append('text')
.attr('dy', 8)
.attr('text-anchor', 'end')
.text(label);
}
};
return MonitorInfraUtils;
});
103 changes: 29 additions & 74 deletions webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeChartsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,41 +122,22 @@ define(['underscore', 'contrail-view',
var legendWrap = d3.select($(svg)[0]).append('g')
.attr('class','legend-wrap')
.attr('transform','translate('+width+',0)')
//legend for failure requests
legendWrap.selectAll('.contrail-legend')
.data([data])
.enter()
.append('g')
.attr('transform','translate('+(-10)+',0)')
.attr('class', 'contrail-legend')
.append('rect')
.style('fill', monitorInfraConstants.CONFIGNODE_FAILEDREQUESTS_COLOR);
legendWrap.append('g')
.attr('class', 'contrail-legend')
.attr('transform','translate('+(- 20)+',0)')
.append('text')
.attr('dy', 8)
.attr('text-anchor', 'end')
.text('Failures');
var legend = legendWrap.selectAll('.contrail-slegend')
.data(colorCodes)
.enter()
.append('g')
.attr('class','contrail-legend')
.attr('transform',function (d, i) { return 'translate('+ - (( colorCodes.length - i) * 20 + 70)+',0)';})
legend.append('rect')
.style('fill', function (d, i) {
return colorCodes[i];
}).on('click', function () {
//need to write the click handler
});
legendWrap.append('g')
.attr('class','contrail-legend')
.attr('transform','translate('+ (-((colorCodes.length * 20) + 10 + 70)) +',0)')
.append('text')
.attr('dy', 8)
.attr('text-anchor', 'end')
.text('Config Nodes');
monitorInfraUtils.addLegendToSummaryPageCharts({
container: legendWrap,
cssClass: 'contrail-legend-error',
data: [data],
offset: -10,
colors: monitorInfraConstants.CONFIGNODE_FAILEDREQUESTS_COLOR,
label: 'Failures',
});
monitorInfraUtils.addLegendToSummaryPageCharts({
container: legendWrap,
cssClass: 'contrail-legend-stackedbar',
data: colorCodes,
offset: 70,
colors: colorCodes,
label: 'Config Nodes',
});
}
}
},
Expand Down Expand Up @@ -252,45 +233,19 @@ define(['underscore', 'contrail-view',
.append('g')
.attr('transform', 'translate('+width+', 0)')
.attr('class', 'contrail-legendWrap');
//Appending the line chart legend
legendWrap.selectAll('g')
.data(lineData)
.enter()
.append('g')
.attr('transform', function (d, i) {
return 'translate('+ (- (i + 1) * 20) +', 0)';
}).attr('class','contrail-legend')
.append('rect')
.attr('fill', function (d, i) {
return d['color'];
})
legendWrap.append('g')
.attr('transform', 'translate('+ (- ((lineCnt * 20 ) + 10))+', 0)')
.attr('class', 'contrail-legend')
.append('text')
.attr('dy', 8)
.attr('text-anchor', 'end')
.text(ctwl.RESPONSE_SIZE);
//Appending the bar chart legend
var legend = legendWrap.selectAll('g.contrail-legend-bar')
.data(barsData)
.enter()
.append('g')
.attr('transform', function (d, i) {
return 'translate('+ (- (((barsData.length - i) + lineCnt + 1) * 20 + 80) )+', 0)';
})
.attr('class', 'contrail-legend')
.append('rect')
.attr('fill', function (d, i) {
return d['color'];
});
legendWrap.append('g')
.attr('transform', 'translate('+(- ((lineCnt + barsCnt + 1) * 20 + 90))+', 0)')
.attr('class', 'contrail-legend')
.append('text')
.attr('text-anchor', 'end')
.attr('dy', 8)
.text('Config Nodes');
monitorInfraUtils.addLegendToSummaryPageCharts({
container: legendWrap,
cssClass: 'contrail-legend-line',
data: lineData,
label: ctwl.RESPONSE_SIZE
});
monitorInfraUtils.addLegendToSummaryPageCharts({
container: legendWrap,
cssClass: 'contrail-legend-bar',
data: barsData,
offset: 90 + lineCnt * 20,
label: 'Config Nodes'
});
}
}
},
Expand Down
29 changes: 6 additions & 23 deletions webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeDonutChartView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,33 +67,16 @@ define(['underscore', 'contrail-view'],function(_, ContrailView){
if (data != null && svg != null && chart != null) {
$(svg).find('g.contrail-legendWrap').remove();
var width = parseInt($(svg).css('width') || svg.getBBox()['width']);
// adding 20 px to the width, so that
// the legends of top line plus bar chart
// and the current chart will be in
// same vertical line.
width += 20;
var legendWrap = d3.select(svg)
.append('g')
.attr('transform', 'translate('+width+', 0)')
.attr('class', 'contrail-legendWrap');
legendWrap.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform', function (d, i) {
return 'translate('+ (- (data.length - i + 1) * 20) +', 0)';
}).attr('class','contrail-legend')
.append('rect')
.attr('fill', function (d, i) {
return monitorInfraConstants.CONFIGNODE_COLORS[i];
})
legendWrap.append('g')
.attr('transform', 'translate('+ (- ((data.length + 1) * 20 + 10))+',0)')
.attr('class', 'contrail-legend')
.append('text')
.attr('dy', 8)
.attr('text-anchor', 'end')
.text('Config Nodes');
monitorInfraUtils.addLegendToSummaryPageCharts({
container: legendWrap,
cssClass: 'contrail-legend-donut',
data: data,
label: 'Config Nodes'
});
}
}
},
Expand Down

0 comments on commit ecd5946

Please sign in to comment.