2 * MyPlugin: demonstration plugin
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
16 var Slicestat = Plugin.extend({
19 * @brief Plugin constructor
20 * @param options : an associative array of setting values
22 * @return : a jQuery collection of objects on which the plugin is
23 * applied, which allows to maintain chainability of calls
25 init: function(options, element) {
26 // Call the parent constructor, see FAQ when forgotten
27 this._super(options, element);
29 google.load("visualization", "1.0", {packages:["corechart"]});
33 /* Member variables */
37 /* Setup query and record handlers */
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);
44 /* GUI setup and event binding */
50 // on_show like in hazelnut
55 // a function to bind events here: click change
56 // how to raise manifold events
59 /* GUI MANIPULATION */
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
65 show_hide_button: function()
67 // this.id, this.el, this.cl, this.elts
68 // same output as a jquery selector with some guarantees
73 // see in the html template
74 // How to load a template, use of mustache
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
84 on_filter_added: function(filter)
89 // ... be sure to list all events here
92 on_new_record: function(record)
96 var node = record.hostname;
99 google.setOnLoadCallback(function() {
104 title: 'Slice '+slice+' last 24 hours', 'width':780, 'height':400,
106 0: {format: '###,##%'},
109 hAxis: { title: "", format: 'HH:mm'},
111 0: { type: "line", targetAxisIndex: 0},
112 1: { type: "line", targetAxisIndex: 0},
113 2: { type: "line", targetAxisIndex: 1},
114 3: { type: "line", targetAxisIndex: 1}
118 var jsonData = $.ajax({
123 data: { period: 'day', resources: 'cpu,pmc_per,asb,arb', slice: slice, node: node },
124 success: function(ret) {
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]]);
135 data.addRows(result);
136 var chart = new google.visualization.LineChart(document.getElementById('graph'));
137 chart.draw(data, options);
144 /* INTERNAL FUNCTIONS */
146 // only convention, not strictly enforced at the moment
151 /* Plugin registration */
152 $.plugin('Slicestat', Slicestat);
154 // TODO Here use cases for instanciating plugins in different ways like in the pastie.