Code

c7200868b0417c56165d485d94f192181ea2d268
[collection4.git] / share / collection.js
1 /**
2  * collection4 - collection.js
3  * Copyright (C) 2010  Florian octo Forster
4  * 
5  * This program is free software; you can redistribute it and/or
6  * modify it under the terms of the GNU Lesser General Public
7  * License as published by the Free Software Foundation; either
8  * version 2.1 of the License, or (at your option) any later version.
9  * 
10  * This program is distributed in the hope that it will be useful,
11  * but WITHOUT ANY WARRANTY; without even the implied warranty of
12  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
13  * Lesser General Public License for more details.
14  * 
15  * You should have received a copy of the GNU Lesser General Public
16  * License along with this program; if not, write to the Free Software
17  * Foundation, Inc., 51 Franklin Street, Fifth Floor,
18  * Boston, MA  02110-1301  USA
19  *
20  * Authors:
21  *   Florian octo Forster <ff at octo.it>
22  **/
24 var c4 =
25 {
26   instances: []
27 };
29 function value_to_string (value) /* {{{ */
30 {
31   var abs_value = Math.abs (value);
33   if ((abs_value < 10000) && (abs_value >= 0.1))
34     return ("" + value);
35   else if (abs_value > 1)
36   {
37     if (abs_value < 10000000)
38       return ("" + (value / 1000) + "k");
39     else if (abs_value < 10000000000)
40       return ("" + (value / 1000000) + "M");
41     else if (abs_value < 10000000000000)
42       return ("" + (value / 1000000000) + "G");
43     else
44       return ("" + (value / 1000000000000) + "T");
45   }
46   else
47   {
48     if (abs_value >= 0.001)
49       return ("" + (value * 1000) + "m");
50     else if (abs_value >= 0.000001)
51       return ("" + (value * 1000000) + "u");
52     else
53       return ("" + (value * 1000000000) + "n");
54   }
55 } /* }}} function value_to_string */
57 function instance_get_params (inst) /* {{{ */
58 {
59   var graph_selector = inst.graph_selector;
60   var inst_selector = inst.instance_selector;
61   var selector = {};
63   if (graph_selector.host == inst_selector.host)
64   {
65     selector.host = graph_selector.host;
66   }
67   else
68   {
69     selector.graph_host = graph_selector.host;
70     selector.inst_host = inst_selector.host;
71   }
73   if (graph_selector.plugin == inst_selector.plugin)
74   {
75     selector.plugin = graph_selector.plugin;
76   }
77   else
78   {
79     selector.graph_plugin = graph_selector.plugin;
80     selector.inst_plugin = inst_selector.plugin;
81   }
83   if (graph_selector.plugin_instance == inst_selector.plugin_instance)
84   {
85     selector.plugin_instance = graph_selector.plugin_instance;
86   }
87   else
88   {
89     selector.graph_plugin_instance = graph_selector.plugin_instance;
90     selector.inst_plugin_instance = inst_selector.plugin_instance;
91   }
93   if (graph_selector.type == inst_selector.type)
94   {
95     selector.type = graph_selector.type;
96   }
97   else
98   {
99     selector.graph_type = graph_selector.type;
100     selector.inst_type = inst_selector.type;
101   }
103   if (graph_selector.type_instance == inst_selector.type_instance)
104   {
105     selector.type_instance = graph_selector.type_instance;
106   }
107   else
108   {
109     selector.graph_type_instance = graph_selector.type_instance;
110     selector.inst_type_instance = inst_selector.type_instance;
111   }
113   return (selector);
114 } /* }}} instance_get_params */
116 function ident_clone (ident) /* {{{ */
118   var ret = {};
120   ret.host = ident.host;
121   ret.plugin = ident.plugin;
122   ret.plugin_instance = ident.plugin_instance;
123   ret.type = ident.type;
124   ret.type_instance = ident.type_instance;
126   return (ret);
127 } /* }}} ident_clone */
129 function inst_get_defs (inst) /* {{{ */
131   if (!inst.def)
132   {
133     var params = instance_get_params (inst);
134     params.action = "graph_def_json";
136     $.ajax({
137       url: "collection.fcgi",
138       async: false,
139       dataType: 'json',
140       data: params,
141       success: function (data)
142       {
143         if (!data)
144           return;
146         inst.def = data;
147       }});
148   }
150   if (inst.def)
151     return (inst.def);
152   return;
153 } /* }}} inst_get_defs */
155 function ident_matches (selector, ident) /* {{{ */
157   var part_matches = function (s,p)
158   {
159     if (s == null)
160       return (false);
162     if ((s == "/any/") || (s == "/all/"))
163       return (true);
165     if (p == null)
166       return (false);
168     if (s == p)
169       return (true);
171     return (false);
172   };
174   if (!part_matches (selector.host, ident.host))
175     return (false);
177   if (!part_matches (selector.plugin, ident.plugin))
178     return (false);
180   if (!part_matches (selector.plugin_instance, ident.plugin_instance))
181     return (false);
183   if (!part_matches (selector.type, ident.type))
184     return (false);
186   if (!part_matches (selector.type_instance, ident.type_instance))
187     return (false);
189   return (true);
190 } /* }}} function ident_matches */
192 function ident_describe (ident, selector) /* {{{ */
194   var ret = "";
195   var check_field = function (field)
196   {
197     if (ident[field].toLowerCase () != selector[field].toLowerCase ())
198     {
199       if (ret != "")
200         ret += "/";
201       ret += ident[field];
202     }
203   };
205   check_field ("host");
206   check_field ("plugin");
207   check_field ("plugin_instance");
208   check_field ("type");
209   check_field ("type_instance");
211   if (ret == "")
212     return (null);
213   return (ret);
214 } /* }}} function ident_describe */
216 function def_draw_one (def, data, chart_opts) /* {{{ */
218   var chart_series = new Object ();
220   chart_series.type = 'line';
221   chart_series.name = def.legend || def.data_source;
222   chart_series.pointInterval = data.interval * 1000;
223   chart_series.pointStart = data.first_value_time * 1000;
224   chart_series.data = data.data;
225   chart_series.lineWidth = 1;
226   chart_series.shadow = false;
227   chart_series.marker = { enabled: false };
229   if (def.area)
230     chart_series.type = 'area';
232   if (def.stack)
233     chart_series.stacking = 'normal';
235   if ((def.color) && (def.color != 'random'))
236     chart_series.color = def.color;
238   chart_opts.series.push (chart_series);
239 } /* }}} function def_draw_one */
241 function def_draw (def, data_list, chart_opts) /* {{{ */
243   var i;
245   for (i = 0; i < data_list.length; i++)
246   {
247     if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
248       continue;
249     if (!ident_matches (def.select, data_list[i].file))
250       continue;
252     def_draw_one (def, data_list[i], chart_opts);
253   }
254 } /* }}} function def_draw */
256 function instance_draw (inst, def, data_list) /* {{{ */
258   var x_data = [];
259   var y_data = [];
260   var i;
262   var chart_opts = new Object ();
264   if (!inst || !def || !data_list)
265     return;
267   chart_opts.chart =
268   {
269     renderTo: inst.container,
270     zoomType: 'x'
271   };
272   chart_opts.xAxis =
273   {
274     type: 'datetime',
275     maxZoom: 300, // five minutes
276     title: { text: null }
277   };
278   chart_opts.yAxis =
279   {
280     labels:
281     {
282       formatter: function () { return (value_to_string (this.value)); }
283     },
284     endOnTick: false
285   };
286   chart_opts.series = new Array ();
288   if (def.title)
289     chart_opts.title = { text: def.title };
291   for (i = def.defs.length - 1; i >= 0; i--)
292     def_draw (def.defs[i], data_list, chart_opts);
294 //  if ((def.defs.length == 0) && (data_list.length == 1))
295 //    def_draw_one (null, data_list[0], chart_opts);
297   inst.chart = new Highcharts.Chart (chart_opts);
298 } /* }}} function instance_draw */
300 function json_graph_update (index) /* {{{ */
302   var inst;
303   var def;
304   var params;
306   inst = c4.instances[index];
307   if (!inst)
308     return;
310   def = inst_get_defs (inst);
311   if (!def)
312     return;
314   if (!inst.container)
315     inst.container = "c4-graph" + index;
317   params = instance_get_params (inst);
318   params.action = "instance_data_json";
319   params.begin = inst.begin;
320   params.end = inst.end;
322   $.getJSON ("collection.fcgi", params,
323       function (data)
324       {
325         instance_draw (inst, def, data);
326       }); /* getJSON */
327 } /* }}} json_graph_update */
329 function format_instance(inst)
331   return ("<li class=\"instance\"><a href=\"" + location.pathname
332       + "?action=show_instance;" + inst.params + "\">" + inst.description
333       + "</a></li>");
336 function format_instance_list(instances)
338   var ret = "<ul class=\"instance_list\">";
339   var i;
341   if (instances.length == 0)
342     return ("");
344   for (i = 0; i < instances.length; i++)
345     ret += format_instance (instances[i]);
346   
347   ret += "</ul>";
349   return (ret);
352 function format_graph(graph)
354   return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
357 function update_search_suggestions ()
359   var term = $("#search-input").val ();
360   if (term.length < 2)
361   {
362     $("#search-suggest").hide ();
363     return (true);
364   }
366   $("#search-suggest").show ();
367   $.getJSON ("collection.fcgi",
368     { "action": "search_json", "q": term},
369     function(data)
370     {
371       var i;
372       $("#search-suggest").html ("");
373       for (i = 0; i < data.length; i++)
374       {
375         var graph = data[i];
376         $("#search-suggest").append (format_graph (graph));
377       }
378     }
379   );
380 } /* update_search_suggestions */
382 function zoom_redraw (jq_obj) /* {{{ */
384   var url = jq_obj.data ("base_url");
386   if ((jq_obj == null) || (url == null))
387     return (false);
389   if (jq_obj.data ('begin') != null)
390     url += ";begin=" + jq_obj.data ('begin');
391   if (jq_obj.data ('end') != null)
392     url += ";end=" + jq_obj.data ('end');
394   jq_obj.attr ("src", url);
395   return (true);
396 } /* }}} function zoom_redraw */
398 function zoom_reset (graph_id, diff) /* {{{ */
400   var jq_obj;
401   var end;
402   var begin;
404   jq_obj = $("#" + graph_id);
405   if (jq_obj == null)
406     return (false);
408   end = new Number ((new Date ()).getTime () / 1000);
409   begin = new Number (end - diff);
411   jq_obj.data ('begin', begin.toFixed (0));
412   jq_obj.data ('end', end.toFixed (0));
414   return (zoom_redraw (jq_obj));
415 } /* }}} function zoom_reset */
417 function zoom_hour (graph_id) /* {{{ */
419   zoom_reset (graph_id, 3600);
420 } /* }}} function zoom_hour */
422 function zoom_day (graph_id) /* {{{ */
424   zoom_reset (graph_id, 86400);
425 } /* }}} function zoom_day */
427 function zoom_week (graph_id) /* {{{ */
429   zoom_reset (graph_id, 7 * 86400);
430 } /* }}} function zoom_week */
432 function zoom_month (graph_id) /* {{{ */
434   zoom_reset (graph_id, 31 * 86400);
435 } /* }}} function zoom_month */
437 function zoom_year (graph_id) /* {{{ */
439   zoom_reset (graph_id, 366 * 86400);
440 } /* }}} function zoom_year */
442 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
444   var jq_obj;
445   var end;
446   var begin;
447   var diff;
449   jq_obj = $("#" + graph_id);
450   if (jq_obj == null)
451     return (false);
453   begin = jq_obj.data ('begin');
454   end = jq_obj.data ('end');
455   if ((begin == null) || (end == null))
456     return (zoom_day (graph_id));
458   begin = new Number (begin);
459   end = new Number (end);
461   diff = end - begin;
462   if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
463     return (true);
465   jq_obj.data ('begin', begin + (diff * factor_begin));
466   jq_obj.data ('end', end + (diff * factor_end));
468   return (zoom_redraw (jq_obj));
469 } /* }}} function zoom_relative */
471 function zoom_reference (graph_id) /* {{{ */
473   var jq_obj;
474   var end;
475   var begin;
477   jq_obj = $("#" + graph_id);
478   if (jq_obj == null)
479     return (false);
481   begin = jq_obj.data ('begin');
482   end = jq_obj.data ('end');
483   if ((begin == null) || (end == null))
484     return (false);
486   $(".graph-img img").each (function ()
487   {
488     $(this).data ('begin', begin);
489     $(this).data ('end', end);
490     zoom_redraw ($(this));
491   });
492 } /* }}} function zoom_reference */
494 function zoom_earlier (graph_id) /* {{{ */
496   return (zoom_relative (graph_id, -0.2, -0.2));
497 } /* }}} function zoom_earlier */
499 function zoom_later (graph_id) /* {{{ */
501   return (zoom_relative (graph_id, +0.2, +0.2));
502 } /* }}} function zoom_later */
504 function zoom_in (graph_id) /* {{{ */
506   return (zoom_relative (graph_id, +0.2, -0.2));
507 } /* }}} function zoom_earlier */
509 function zoom_out (graph_id) /* {{{ */
511   return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
512 } /* }}} function zoom_earlier */
514 $(document).ready(function() {
515     /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
516     $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
517     $("#search-suggest").hide ();
519     $("#search-input").blur (function()
520     {
521       window.setTimeout (function ()
522       {
523         $("#search-suggest").hide ();
524       }, 500);
525     });
527     $("#search-input").focus (function()
528     {
529       var term = $("#search-input").val ();
530       if (term.length < 2)
531       {
532         $("#search-suggest").hide ();
533       }
534       else
535       {
536         $("#search-suggest").show ();
537       }
538     });
540     $("#search-input").keyup (function()
541     {
542       update_search_suggestions ();
543     });
545     var graph_count = 0;
546     $(".graph-img").each (function (index, elem)
547     {
548       var id = "graph" + graph_count;
549       graph_count++;
551       $(this).find ("img").each (function (img_index, img_elem)
552       {
553         var base_url;
555         $(this).attr ("id", id);
557         base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
558         $(this).data ("base_url", base_url);
559       });
561       $(this).append ("<div class=\"graph-buttons presets\">"
562         + "<div class=\"graph-button\" onClick=\"zoom_hour  ('"+id+"');\">H</div>"
563         + "<div class=\"graph-button\" onClick=\"zoom_day   ('"+id+"');\">D</div>"
564         + "<div class=\"graph-button\" onClick=\"zoom_week  ('"+id+"');\">W</div>"
565         + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
566         + "<div class=\"graph-button\" onClick=\"zoom_year  ('"+id+"');\">Y</div>"
567         + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
568         + "</div>"
569         + "<div class=\"graph-buttons navigation\">"
570         + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">←</div>"
571         + "<div class=\"graph-button\" onClick=\"zoom_out     ('"+id+"');\">−</div>"
572         + "<div class=\"graph-button\" onClick=\"zoom_in      ('"+id+"');\">+</div>"
573         + "<div class=\"graph-button\" onClick=\"zoom_later   ('"+id+"');\">→</div>"
574         + "</div>"
575         );
576     });
578     var i;
579     for (i = 0; i < c4.instances.length; i++)
580     {
581       json_graph_update (i);
582     }
583 });
585 /* vim: set sw=2 sts=2 et fdm=marker : */