<script type="text/javascript">
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(function() {
- drawChart("cpu");
+ drawChart("experiments","cpu","day");
+ drawChart("resources","cpu","day");
});
-function drawChart(orderby) {
- var options = {
- 'height':280,
-
+function drawChart(graph, orderby, period) {
+ var options = { 'height':260,
+ vAxes:[
+ {title: 'CPU, Memory usage (%)',textStyle:{color: '#302562'}},
+ {title: 'Bandwidth (Kbps)',textStyle:{color: '#302562'}}
+ ],
series: {
0: { type: "bar", targetAxisIndex: 0},
1: { type: "bar", targetAxisIndex: 0},
var jsonData = $.ajax({
type: 'GET',
- url: "http://slicestat.onelab.eu/top/slices",
+ url: "http://slicestat.onelab.eu/top/" + graph,
dataType: "json",
async: false,
- data: { orderby: orderby },
+ data: { orderby: orderby, period: period },
success: function(ret) {
var result = [];
var data = new google.visualization.DataTable();
- data.addColumn('string', 'Slice');
+ data.addColumn('string', graph);
data.addColumn('number', 'CPU (%)');
data.addColumn('number', 'MEM (%)');
- data.addColumn('number', 'SND (Kb)');
- data.addColumn('number', 'RCV (Kb)');
+ data.addColumn('number', 'SND (Kbps)');
+ data.addColumn('number', 'RCV (Kbps)');
$.each(ret, function() {
- result.push([this[0] + " | number of nodes: " + this[1], this[2], this[3], this[4], this[5]]);
+ switch(graph) {
+ case "experiments":
+ result.push([this[0] + " | number of resources: " + this[1], this[2], this[3], this[4], this[5]]);
+ break;
+ case "resources":
+ result.push([this[0] + " | number of experiments: " + this[1], this[2], this[3], this[4], this[5]]);
+ break;
+ }
});
data.addRows(result);
- var chart = new google.visualization.ColumnChart(document.getElementById('graph'));
+ var chart = new google.visualization.ColumnChart(document.getElementById(graph));
chart.draw(data, options);
}
}).responseText;
}
$(document).ready(function () {
+ var orderby = "cpu";
+ var period = "day";
$('a.stats-orderby').click(function(event) {
- $('a.stats-orderby').removeClass('current');
event.preventDefault();
- drawChart($(this).data('orderby'));
+
+ orderby = $(this).data('orderby');
+ graph = $(this).data('graph');
+
+ $('a.stats-orderby[data-graph='+graph+']').removeClass('current');
+
+ drawChart(graph, orderby, period);
+ $(this).addClass('current');
+ });
+
+ $('a.stats-period').click(function(event) {
+ event.preventDefault();
+ period = $(this).data('period');
+ graph = $(this).data('graph');
+
+ $('a.stats-period[data-graph='+graph+']').removeClass('current');
+
+ $('#stats-period-'+graph+'-txt').text($(this).text());
+
+ drawChart(graph, orderby, period);
$(this).addClass('current');
});
});
<div class="container">
<div class="row">
<div class="col-md-12">
- <h1>Statistics <span class="htitle">top experiments per resource usage in the last 24 hours</span></h1>
+ <h1>Experiment statistics <span class="htitle">top experiments per resource usage in the <span id="stats-period-experiments-txt">last day</span></span></h1>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-7">
+ Order by:
+ <a class="stats-orderby current" data-orderby="cpu" data-graph="experiments" href="#">CPU usage</a> ·
+ <a class="stats-orderby" data-orderby="mem" data-graph="experiments" href="#">Memory usage</a> ·
+ <a class="stats-orderby" data-orderby="snd" data-graph="experiments" href="#">Sending bandwidth</a> ·
+ <a class="stats-orderby" data-orderby="rcv" data-graph="experiments" href="#">Receiving bandwidth</a>
+ </div>
+ <div class="col-md-5">
+ Period:
+ <a class="stats-period current" data-period="day" data-graph="experiments" href="#">Last day</a> ·
+ <a class="stats-period" data-period="week" data-graph="experiments" href="#">Last week</a> ·
+ <a class="stats-period" data-period="month" data-graph="experiments" href="#">Last month</a> ·
+ <a class="stats-period" data-period="3months" data-graph="experiments" href="#">Last three months</a>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <div id="experiments"></div>
+ </div>
+ </div>
+</div>
+<div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <h1>Resource statistics <span class="htitle">top resources per usage in the <span id="stats-period-resources-txt">last day</span></span></h1>
</div>
</div>
<div class="row">
- <div class="col-md-6">
+ <div class="col-md-7">
Order by:
- <a class="stats-orderby current" data-orderby="cpu" href="#">CPU usage</a> -
- <a class="stats-orderby" data-orderby="mem" href="#">Memory usage</a> -
- <a class="stats-orderby" data-orderby="snd" href="#">Sent traffic</a> -
- <a class="stats-orderby" data-orderby="rcv" href="#">Received traffic</a>
+ <a class="stats-orderby current" data-orderby="cpu" data-graph="resources" href="#">CPU usage</a> ·
+ <a class="stats-orderby" data-orderby="mem" data-graph="resources" href="#">Memory usage</a> ·
+ <a class="stats-orderby" data-orderby="snd" data-graph="resources" href="#">Sending bandwidth</a> ·
+ <a class="stats-orderby" data-orderby="rcv" data-graph="resources" href="#">Receiving bandwidth</a>
+ </div>
+ <div class="col-md-5">
+ Period:
+ <a class="stats-period current" data-period="day" data-graph="resources" href="#">Last day</a> ·
+ <a class="stats-period" data-period="week" data-graph="resources" href="#">Last week</a> ·
+ <a class="stats-period" data-period="month" data-graph="resources" href="#">Last month</a> ·
+ <a class="stats-period" data-period="3months" data-graph="resources" href="#">Last three months</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
- <div id="graph"></div>
+ <div id="resources"></div>
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>