plugins/slicestat/static/js/slicestat.js

   1 /**
   2  * MyPlugin:    demonstration plugin
   3  * Version:     0.1
   4  * Description: Template for writing new plugins and illustrating the different
   5  *              possibilities of the plugin API.
   6  *              This file is part of the Manifold project
   7  * Requires:    js/plugin.js
   8  * URL:         http://www.myslice.info
   9  * Author:      Jordan Augé <jordan.auge@lip6.fr>
  10  * Copyright:   Copyright 2012-2013 UPMC Sorbonne Universités
  11  * License:     GPLv3
  12  */
  13
  14 (function($){
  15
  16     var Slicestat = Plugin.extend({
  17
  18         /** XXX to check
  19          * @brief Plugin constructor
  20          * @param options : an associative array of setting values
  21          * @param element :
  22          * @return : a jQuery collection of objects on which the plugin is
  23          *     applied, which allows to maintain chainability of calls
  24          */
  25         init: function(options, element) {
  26             // Call the parent constructor, see FAQ when forgotten
  27             this._super(options, element);
  28
  29                         google.load("visualization", "1.0", {packages:["corechart"]});
  30
  31
  32
  33             /* Member variables */
  34
  35             /* Plugin events */
  36
  37             /* Setup query and record handlers */
  38
  39             // Explain this will allow query events to be handled
  40             // What happens when we don't define some events ?
  41             // Some can be less efficient
  42             this.listen_query(options.query_uuid);
  43
  44             /* GUI setup and event binding */
  45             // call function
  46
  47         },
  48
  49         /* PLUGIN EVENTS */
  50         // on_show like in hazelnut
  51
  52
  53         /* GUI EVENTS */
  54
  55         // a function to bind events here: click change
  56         // how to raise manifold events
  57
  58
  59         /* GUI MANIPULATION */
  60
  61         // We advise you to write function to change behaviour of the GUI
  62         // Will use naming helpers to access content _inside_ the plugin
  63         // always refer to these functions in the remaining of the code
  64
  65         show_hide_button: function()
  66         {
  67             // this.id, this.el, this.cl, this.elts
  68             // same output as a jquery selector with some guarantees
  69         },
  70
  71         /* TEMPLATES */
  72
  73         // see in the html template
  74         // How to load a template, use of mustache
  75
  76         /* QUERY HANDLERS */
  77
  78         // How to make sure the plugin is not desynchronized
  79         // He should manifest its interest in filters, fields or records
  80         // functions triggered only if the proper listen is done
  81
  82         // no prefix
  83
  84         on_filter_added: function(filter)
  85         {
  86
  87         },
  88
  89         // ... be sure to list all events here
  90
  91         /* RECORD HANDLERS */
  92         on_new_record: function(record)
  93         {
  94             console.log(record);
  95
  96             var node = record.hostname;
  97                         var slice = 'root';
  98
  99                         google.setOnLoadCallback(function() {
 100
 101                                 var options = {
 102                                                 pointSize: 2,
 103                                                 lineWidth: 1,
 104                                                 title: 'Slice '+slice+' last 24 hours', 'width':780, 'height':400,
 105                                         vAxes: {
 106                                                         0: {format: '###,##%'},
 107                                                         1: {format: '#Kb',}
 108                                                         },
 109                                         hAxis: { title: "", format: 'HH:mm'},
 110                                     series: {
 111                                         0: { type: "line", targetAxisIndex: 0},
 112                                         1: { type: "line", targetAxisIndex: 0},
 113                                         2: { type: "line", targetAxisIndex: 1},
 114                                         3: { type: "line", targetAxisIndex: 1}
 115                                     }
 116                                 };
 117
 118                                 var jsonData = $.ajax({
 119                                         type: 'POST',
 120                                         url: "/db/slice",
 121                                         dataType: "json",
 122                                         async: false,
 123                                         data: { period: 'day', resources: 'cpu,pmc_per,asb,arb', slice: slice, node: node },
 124                                         success: function(ret) {
 125                                                 var result = [];
 126                                                 var data = new google.visualization.DataTable();
 127                                                         data.addColumn('datetime', 'Date');
 128                                                         data.addColumn('number', 'CPU (%)');
 129                                                         data.addColumn('number', 'MEM (%)');
 130                                                         data.addColumn('number', 'Traffic Sent (Kb)');
 131                                                         data.addColumn('number', 'Traffic Received (Kb)');
 132                                                         $.each(ret, function() {
 133                                                                 result.push([new Date(this[0]), this[1], this[2], this[3], this[4]]);
 134                                                         });
 135                                                         data.addRows(result);
 136                                                         var chart = new google.visualization.LineChart(document.getElementById('graph'));
 137                                                         chart.draw(data, options);
 138                                         }
 139                                     }).responseText;
 140
 141                         });
 142         },
 143
 144         /* INTERNAL FUNCTIONS */
 145         _dummy: function() {
 146             // only convention, not strictly enforced at the moment
 147         },
 148
 149     });
 150
 151     /* Plugin registration */
 152     $.plugin('Slicestat', Slicestat);
 153
 154     // TODO Here use cases for instanciating plugins in different ways like in the pastie.
 155
 156 })(jQuery);