Merge branch 'onelab' of ssh://git.onelab.eu/git/myslice into fibre

[unfold.git] / portal / templates / _widget-stats-top-slices.html

diff --git a/portal/templates/_widget-stats-top-slices.html b/portal/templates/_widget-stats-top-slices.html
new file mode 100644 (file)
index 0000000..80d9aed
--- /dev/null
+++ b/portal/templates/_widget-stats-top-slices.html
@@ -0,0 +1,145 @@
+<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<script type="text/javascript">
+google.load("visualization", "1.0", {packages:["corechart"]});
+google.setOnLoadCallback(function() {
+       drawChart("experiments","cpu","day");
+       drawChart("resources","cpu","day");
+});
+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},
+                2: { type: "bar", targetAxisIndex: 1},
+                3: { type: "bar", targetAxisIndex: 1},
+            }
+               };
+       
+       var jsonData = $.ajax({
+            type: 'GET',
+               url: "http://slicestat.onelab.eu/top/" + graph,
+               dataType: "json",
+               async: false,
+               data: { orderby: orderby, period: period },
+            success: function(ret) {
+               var result = [];
+               var data = new google.visualization.DataTable();
+                               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() {
+                                       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));
+                               chart.draw(data, options);
+            }
+        }).responseText;
+
+    // var data = google.visualization.arrayToDataTable(obj, false);
+       
+       
+  }
+  $(document).ready(function () {
+       var orderby = "cpu";
+       var period = "day";
+       $('a.stats-orderby').click(function(event) {
+               event.preventDefault();
+                 
+               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');
+       });
+  });
+</script>
+<style>div#graph {margin:0;padding:0;border:0;}</style>
+<div class="stats">
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+               <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> &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="resources"></div>
+               </div>
+       </div>
+</div>
+</div>