slicestat plugin show function called on click on tabs

[unfold.git] / plugins / slicestat / static / js / slicestat.js

diff --git a/plugins/slicestat/static/js/slicestat.js b/plugins/slicestat/static/js/slicestat.js
index 4c63b84..22277a5 100644 (file)
--- a/plugins/slicestat/static/js/slicestat.js
+++ b/plugins/slicestat/static/js/slicestat.js
@@ -13,7 +13,7 @@
 
 (function($){
 
-    var Slicestat = Plugin.extend({
+    var SliceStat = Plugin.extend({
 
         /** XXX to check
          * @brief Plugin constructor
@@ -23,13 +23,11 @@
          *     applied, which allows to maintain chainability of calls
          */
         init: function(options, element) {
+           this.classname="slicestat";
             // Call the parent constructor, see FAQ when forgotten
-            this._super(options, element);
+            this._super(options, element);                      
                        
-                       google.load("visualization", "1.0", {packages:["corechart"]});
-                        
                        
-
             /* Member variables */
 
             /* Plugin events */
@@ -40,14 +38,21 @@
             // What happens when we don't define some events ?
             // Some can be less efficient
             this.listen_query(options.query_uuid);
-
+                       
             /* GUI setup and event binding */
             // call function
-
+                       if (typeof options.slicename != 'undefined') {
+                       options.slicename = options.slicename.replace("ple.","").replace(".","_");
+               }
+               if (typeof options.o == 'undefined') {
+                       //options.o = 'cpu';
+               }
+               
+               this.elmt().on('show', options, this.on_show);
         },
 
         /* PLUGIN EVENTS */
-        // on_show like in hazelnut
+        // on_show like in querytable
 
 
         /* GUI EVENTS */
@@ -67,7 +72,12 @@
             // this.id, this.el, this.cl, this.elts
             // same output as a jquery selector with some guarantees
         },
-
+               
+               on_show: function(ev) 
+               {
+            console.log('slicestat show triggered');
+                       $('iframe#' + ev.target.id + '-iframe').attr('src','http://plestats.planet-lab.eu/nodes.php?slice='+ev.data.slicename+'&order='+ev.data.o);
+               },
         /* TEMPLATES */
 
         // see in the html template
@@ -91,54 +101,7 @@
         /* RECORD HANDLERS */
         on_new_record: function(record)
         {
-            console.log(record);
-            
-            var node = record.hostname;
-                       var slice = 'root';
-                       
-                       google.setOnLoadCallback(function() {
-                       
-                               var options = {
-                                               pointSize: 2,
-                                               lineWidth: 1,
-                                               title: 'Slice '+slice+' last 24 hours', 'width':780, 'height':400,
-                                       vAxes: { 
-                                                       0: {format: '###,##%'},
-                                                       1: {format: '#Kb',}
-                                                       },
-                                       hAxis: { title: "", format: 'HH:mm'},
-                                   series: {
-                                       0: { type: "line", targetAxisIndex: 0},
-                                       1: { type: "line", targetAxisIndex: 0},
-                                       2: { type: "line", targetAxisIndex: 1},
-                                       3: { type: "line", targetAxisIndex: 1}
-                                   }
-                               };
-                       
-                               var jsonData = $.ajax({
-                                       type: 'POST',
-                                       url: "/db/slice",
-                                       dataType: "json",
-                                       async: false,
-                                       data: { period: 'day', resources: 'cpu,pmc_per,asb,arb', slice: slice, node: node },
-                                       success: function(ret) {
-                                               var result = [];
-                                               var data = new google.visualization.DataTable();
-                                                       data.addColumn('datetime', 'Date');
-                                                       data.addColumn('number', 'CPU (%)');
-                                                       data.addColumn('number', 'MEM (%)');
-                                                       data.addColumn('number', 'Traffic Sent (Kb)');
-                                                       data.addColumn('number', 'Traffic Received (Kb)');
-                                                       $.each(ret, function() {
-                                                               result.push([new Date(this[0]), this[1], this[2], this[3], this[4]]);
-                                                       });
-                                                       data.addRows(result);
-                                                       var chart = new google.visualization.LineChart(document.getElementById('graph'));
-                                                       chart.draw(data, options);
-                                       }
-                                   }).responseText;
-                       
-                       });
+               $('iframe#' + this.elmt().attr('id') + '-iframe').attr('src','http://plestats.planet-lab.eu/node.php?node='+record.hostname);            
         },
 
         /* INTERNAL FUNCTIONS */
@@ -149,7 +112,7 @@
     });
 
     /* Plugin registration */
-    $.plugin('Slicestat', Slicestat);
+    $.plugin('SliceStat', SliceStat);
 
     // TODO Here use cases for instanciating plugins in different ways like in the pastie.