Switch the Scoreboard stats into charts
This makes it more easy to 'at a glance' see what a system is up to. Its using the same counts of success, fail, and unknown as before but now using EZBC-js to display them as a vertical bar chart. In addition it shows how many results are 'missing', whether that be that the system missed the patcheset or just hasn't voted yet. Change-Id: Ia9d57a74754d64c9faf3826e78ddfb9db574deb7
This commit is contained in:
Patrick East
parent
3c302b99b5
commit
b3e806d131
88
monitoring/scoreboard/static/ezbc.js
Normal file
88
monitoring/scoreboard/static/ezbc.js
Normal file
@ -0,0 +1,88 @@
|
||||
/*
|
||||
* Easy Bar Charts
|
||||
*
|
||||
* https://github.com/patrick-east/EZBC-js
|
||||
*
|
||||
* This only makes vertical stacked bar charts. The will be the size of
|
||||
* whatever container you draw it in. It does not retain data, handle
|
||||
* resize, make other types of graphs, deliver beer, or anything special.
|
||||
*/
|
||||
var EZBC = (function () {
|
||||
var chart = {};
|
||||
/*
|
||||
* Expect a container element reference and data in the format of:
|
||||
* [
|
||||
* {
|
||||
* value: 50,
|
||||
* color: "#FF00FF",
|
||||
* label: "wins",
|
||||
* border: true,
|
||||
* borderColor: "#000000"
|
||||
* },
|
||||
* {
|
||||
* value: 10,
|
||||
* color: "yellow",
|
||||
* label: "loses"
|
||||
* },
|
||||
* ]
|
||||
*
|
||||
* Note: The order of elements is how they will be drawn from bottom to top.
|
||||
*/
|
||||
chart.draw = function (container, data, borderSize, borderColor) {
|
||||
var totalValue = 0;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
totalValue += data[i]['value'];
|
||||
|
||||
// check for some 'required' fields and try some defaults...
|
||||
if (!data[i].hasOwnProperty('color')) {
|
||||
data[i].color = '#'+Math.floor(Math.random()*16777215).toString(16);
|
||||
}
|
||||
|
||||
if (!data[i].hasOwnProperty('border')) {
|
||||
data[i].border = false;
|
||||
}
|
||||
else if (!data[i].hasOwnProperty('borderColor')) {
|
||||
data[i].borderColor = '#000000';
|
||||
}
|
||||
}
|
||||
|
||||
var chartHeight = parseFloat(container.style.height);
|
||||
var chartWidth = parseFloat(container.style.width);
|
||||
|
||||
var chartSVG = '<svg ';
|
||||
chartSVG += 'width="' + chartWidth + '" ';
|
||||
chartSVG += 'height="' + chartHeight + '" ';
|
||||
chartSVG += 'style="border: ' + borderSize + 'px ' + borderColor + '">';
|
||||
|
||||
// adjust for the border width...
|
||||
chartHeight -= borderSize * 2;
|
||||
chartWidth -= borderSize * 2;
|
||||
|
||||
var currentY = chartHeight;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (!data[i].value) {
|
||||
continue; // skip empty ones
|
||||
}
|
||||
var rectHeight = Math.round(chartHeight * (data[i].value / totalValue));
|
||||
chartSVG += '<rect ';
|
||||
chartSVG += 'width="' + chartWidth + '" ';
|
||||
chartSVG += 'height="' + currentY + '" ';
|
||||
chartSVG += 'x=' + borderSize + ' ';
|
||||
chartSVG += 'y=' + borderSize + ' ';
|
||||
chartSVG += 'style="fill:' + data[i].color + ';';
|
||||
if (data[i].border) {
|
||||
chartSVG += 'stroke-width:' + borderSize + ';stroke:' + data[i].borderColor + ';';
|
||||
}
|
||||
chartSVG += '">';
|
||||
if (data[i].hasOwnProperty('label')) {
|
||||
chartSVG += '<title>' + data[i].label + '</title>';
|
||||
}
|
||||
chartSVG += '</rect>';
|
||||
currentY -= rectHeight;
|
||||
}
|
||||
chartSVG += '</svg>';
|
||||
container.innerHTML = chartSVG;
|
||||
};
|
||||
|
||||
return chart;
|
||||
}());
|
||||
@ -301,24 +301,71 @@ var Scoreboard = (function () {
|
||||
var score_row = null;
|
||||
var label = null;
|
||||
|
||||
var scores = Object.keys(score);
|
||||
score_row = $(document.createElement('tr'));
|
||||
|
||||
for (var i = 0; i < scores.length; i++) {
|
||||
var result_type = scores[i];
|
||||
score_row = $(document.createElement('tr'));
|
||||
label = create_header();
|
||||
label.html('Score');
|
||||
label.appendTo(score_row);
|
||||
$(score_row).insertAfter($('table tr.table_header'));
|
||||
|
||||
label = create_header();
|
||||
label.html(result_type);
|
||||
label.appendTo(score_row);
|
||||
for (var j = 0; j < ci_accounts.length; j++) {
|
||||
var ci = ci_accounts[j]
|
||||
|
||||
for (var j = 0; j < ci_accounts.length; j++) {
|
||||
var ci = ci_accounts[j]
|
||||
score_header = create_header();
|
||||
score_header.appendTo(score_row);
|
||||
score_header.css({
|
||||
width: '75px',
|
||||
height: '75px',
|
||||
})
|
||||
|
||||
label = create_header();
|
||||
label.html(score[result_type][ci._id] || 0);
|
||||
label.appendTo(score_row);
|
||||
var data = []
|
||||
var count = 0;
|
||||
if (score['SUCCESS'] && score['SUCCESS'][ci._id] > 0) {
|
||||
data.push({
|
||||
value: score['SUCCESS'][ci._id],
|
||||
color:'#00FF00',
|
||||
label: 'Success: ' + score['SUCCESS'][ci._id],
|
||||
border: true,
|
||||
borderColor: 'grey'
|
||||
});
|
||||
count += score['SUCCESS'][ci._id];
|
||||
}
|
||||
$(score_row).insertAfter($('table tr.table_header'));
|
||||
|
||||
if (score['FAIL'] && score['FAIL'][ci._id] > 0) {
|
||||
data.push({
|
||||
value: score['FAIL'][ci._id],
|
||||
color:'#FF3300',
|
||||
label: 'Fail: ' + score['FAIL'][ci._id],
|
||||
border: true,
|
||||
borderColor: 'grey'
|
||||
});
|
||||
count += score['FAIL'][ci._id];
|
||||
}
|
||||
if (score['UNKNOWN'] && score['UNKNOWN'][ci._id] > 0) {
|
||||
data.push({
|
||||
value: score['UNKNOWN'][ci._id],
|
||||
color:'#FF0000',
|
||||
label: 'Unknown: ' + score['UNKNOWN'][ci._id],
|
||||
border: true,
|
||||
borderColor: 'grey'
|
||||
});
|
||||
count += score['UNKNOWN'][ci._id];
|
||||
}
|
||||
|
||||
var table = $('#scoreboard > table > tbody > tr')
|
||||
var total_count = $('#scoreboard > table > tbody > tr').length - 2; // don't count the first two rows
|
||||
var missing = total_count - count;
|
||||
if (missing > 0) {
|
||||
data.push({
|
||||
value: missing,
|
||||
color:'#FFFFFF',
|
||||
label: 'Missing: ' + missing,
|
||||
border: true,
|
||||
borderColor: 'grey'
|
||||
});
|
||||
}
|
||||
|
||||
EZBC.draw(score_header[0], data, 3, 'grey');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<script type='text/javascript' src='/static/jquery-2.1.3.min.js'></script>
|
||||
<script type='text/javascript' src='/static/scoreboard.js'></script>
|
||||
<script type='text/javascript' src='http://fgnass.github.io/spin.js/spin.js'></script>
|
||||
<script type='text/javascript' src='/static/ezbc.js'></script>
|
||||
<link rel='stylesheet' type='text/css' href='/static/scoreboard.css'>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user