From 3aa0dee457cd16b1bfc7e27a0624a5de0e066753 Mon Sep 17 00:00:00 2001
From: Ciro Scognamiglio <ciro.scognamiglio@cslash.net>
Date: Mon, 11 Aug 2014 12:57:24 +0200
Subject: [PATCH] statistics graph: added period choice

statistics graph: added period choice
---
 portal/static/css/onelab.css                  |   3 +
 .../templates/_widget-stats-top-slices.html   | 103 ++++++++++++++----
 2 files changed, 87 insertions(+), 19 deletions(-)

diff --git a/portal/static/css/onelab.css b/portal/static/css/onelab.css
index 5f15c77a..83f1d10e 100644
--- a/portal/static/css/onelab.css
+++ b/portal/static/css/onelab.css
@@ -797,3 +797,6 @@ div.monitor h1 {
 div.s-monitor {
     padding-bottom:25px;
 }
+span#stats-period-txt {
+    text-transform:lowercase;
+}
diff --git a/portal/templates/_widget-stats-top-slices.html b/portal/templates/_widget-stats-top-slices.html
index cb82247a..4625d7d1 100644
--- a/portal/templates/_widget-stats-top-slices.html
+++ b/portal/templates/_widget-stats-top-slices.html
@@ -2,12 +2,15 @@
 <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},
@@ -18,25 +21,32 @@ function drawChart(orderby) {
 	
    	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 (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;
@@ -46,10 +56,30 @@ function drawChart(orderby) {
 	
   }
   $(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');
   	});
   });
@@ -59,21 +89,56 @@ function drawChart(orderby) {
 <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-8">
+		<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="#">Sending bandwidth</a> -
-			<a class="stats-orderby" data-orderby="rcv" href="#">Receiving bandwidth</a>
+			<a class="stats-orderby current" data-orderby="cpu" data-graph="experiments" href="#">CPU usage</a> &middot;
+			<a class="stats-orderby" data-orderby="mem" data-graph="experiments" href="#">Memory usage</a> &middot;
+			<a class="stats-orderby" data-orderby="snd" data-graph="experiments" href="#">Sending bandwidth</a> &middot;
+			<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> &middot;
+			<a class="stats-period" data-period="week" data-graph="experiments" href="#">Last week</a> &middot;
+			<a class="stats-period" data-period="month" data-graph="experiments" href="#">Last month</a> &middot;
+			<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-7">
+			Order by: 
+			<a class="stats-orderby current" data-orderby="cpu" data-graph="resources" href="#">CPU usage</a> &middot;
+			<a class="stats-orderby" data-orderby="mem" data-graph="resources" href="#">Memory usage</a> &middot;
+			<a class="stats-orderby" data-orderby="snd" data-graph="resources" href="#">Sending bandwidth</a> &middot;
+			<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> &middot;
+			<a class="stats-period" data-period="week" data-graph="resources" href="#">Last week</a> &middot;
+			<a class="stats-period" data-period="month" data-graph="resources" href="#">Last month</a> &middot;
+			<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>
-- 
2.43.0