2 * collection4 - collection.js
3 * Copyright (C) 2010 Florian octo Forster
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.
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.
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
21 * Florian octo Forster <ff at octo.it>
29 function value_to_string (value) /* {{{ */
32 var v2s = function (value)
34 var tmp = Math.round (100.0 * value) / 100.0;
43 abs_value = Math.abs (value);
45 if ((abs_value < 10000) && (abs_value >= 0.1))
47 else if (abs_value > 1)
49 if (abs_value < 10000000)
50 return (v2s (value / 1000) + "k");
51 else if (abs_value < 10000000000)
52 return (v2s (value / 1000000) + "M");
53 else if (abs_value < 10000000000000)
54 return (v2s (value / 1000000000) + "G");
56 return (v2s (value / 1000000000000) + "T");
60 if (abs_value >= 0.001)
61 return (v2s (value * 1000) + "m");
62 else if (abs_value >= 0.000001)
63 return (v2s (value * 1000000) + "u");
65 return (v2s (value * 1000000000) + "n");
67 } /* }}} function value_to_string */
69 function instance_get_params (inst) /* {{{ */
71 var graph_selector = inst.graph_selector;
72 var inst_selector = inst.instance_selector;
75 if (graph_selector.host == inst_selector.host)
77 selector.host = graph_selector.host;
81 selector.graph_host = graph_selector.host;
82 selector.inst_host = inst_selector.host;
85 if (graph_selector.plugin == inst_selector.plugin)
87 selector.plugin = graph_selector.plugin;
91 selector.graph_plugin = graph_selector.plugin;
92 selector.inst_plugin = inst_selector.plugin;
95 if (graph_selector.plugin_instance == inst_selector.plugin_instance)
97 selector.plugin_instance = graph_selector.plugin_instance;
101 selector.graph_plugin_instance = graph_selector.plugin_instance;
102 selector.inst_plugin_instance = inst_selector.plugin_instance;
105 if (graph_selector.type == inst_selector.type)
107 selector.type = graph_selector.type;
111 selector.graph_type = graph_selector.type;
112 selector.inst_type = inst_selector.type;
115 if (graph_selector.type_instance == inst_selector.type_instance)
117 selector.type_instance = graph_selector.type_instance;
121 selector.graph_type_instance = graph_selector.type_instance;
122 selector.inst_type_instance = inst_selector.type_instance;
126 } /* }}} instance_get_params */
128 function ident_clone (ident) /* {{{ */
132 ret.host = ident.host;
133 ret.plugin = ident.plugin;
134 ret.plugin_instance = ident.plugin_instance;
135 ret.type = ident.type;
136 ret.type_instance = ident.type_instance;
139 } /* }}} ident_clone */
141 function inst_get_defs (inst) /* {{{ */
145 var params = instance_get_params (inst);
146 params.action = "graph_def_json";
149 url: "collection.fcgi",
153 success: function (data)
165 } /* }}} inst_get_defs */
167 function ident_matches (selector, ident) /* {{{ */
169 var part_matches = function (s,p)
174 if ((s == "/any/") || (s == "/all/"))
186 if (!part_matches (selector.host, ident.host))
189 if (!part_matches (selector.plugin, ident.plugin))
192 if (!part_matches (selector.plugin_instance, ident.plugin_instance))
195 if (!part_matches (selector.type, ident.type))
198 if (!part_matches (selector.type_instance, ident.type_instance))
202 } /* }}} function ident_matches */
204 function ident_describe (ident, selector) /* {{{ */
207 var check_field = function (field)
209 if (ident[field].toLowerCase () != selector[field].toLowerCase ())
217 check_field ("host");
218 check_field ("plugin");
219 check_field ("plugin_instance");
220 check_field ("type");
221 check_field ("type_instance");
226 } /* }}} function ident_describe */
228 function def_draw_one (def, data, chart_opts) /* {{{ */
230 var chart_series = new Object ();
232 chart_series.type = 'line';
233 chart_series.pointInterval = data.interval * 1000;
234 chart_series.pointStart = data.first_value_time * 1000;
235 chart_series.data = data.data;
236 chart_series.lineWidth = 1;
237 chart_series.shadow = false;
238 chart_series.marker = { enabled: false };
241 chart_series.name = def.legend;
242 else if (def.ds_name)
243 chart_series.name = def.ds_name;
246 chart_series.type = 'area';
249 chart_series.stacking = 'normal';
251 if ((def.color) && (def.color != 'random'))
252 chart_series.color = def.color;
254 chart_opts.series.push (chart_series);
255 } /* }}} function def_draw_one */
257 function def_draw (def, data_list, chart_opts) /* {{{ */
261 for (i = 0; i < data_list.length; i++)
263 if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
265 if (!ident_matches (def.select, data_list[i].file))
268 def_draw_one (def, data_list[i], chart_opts);
270 } /* }}} function def_draw */
272 function instance_draw (inst, def, data_list) /* {{{ */
278 var chart_opts = new Object ();
280 if (!inst || !def || !data_list)
285 renderTo: inst.container,
291 maxZoom: 300, // five minutes
292 title: { text: null }
298 formatter: function () { return (value_to_string (this.value)); }
304 labelFormatter: function ()
307 var min = Number.MAX_VALUE;
308 var max = Number.NEGATIVE_INFINITY;
314 for (i = 0; i < this.data.length; i++)
342 return (this.name + " (" + value_to_string (min) + " min, "
343 + value_to_string (avg) + " avg, "
344 + value_to_string (max) + " max)");
347 chart_opts.series = new Array ();
350 chart_opts.title = { text: def.title };
352 for (i = def.defs.length - 1; i >= 0; i--)
353 def_draw (def.defs[i], data_list, chart_opts);
355 // if ((def.defs.length == 0) && (data_list.length == 1))
356 // def_draw_one (null, data_list[0], chart_opts);
358 inst.chart = new Highcharts.Chart (chart_opts);
359 } /* }}} function instance_draw */
361 function json_graph_update (index) /* {{{ */
367 inst = c4.instances[index];
371 def = inst_get_defs (inst);
376 inst.container = "c4-graph" + index;
378 params = instance_get_params (inst);
379 params.action = "instance_data_json";
380 params.begin = inst.begin;
381 params.end = inst.end;
383 $.getJSON ("collection.fcgi", params,
386 instance_draw (inst, def, data);
388 } /* }}} json_graph_update */
390 function format_instance(inst)
392 return ("<li class=\"instance\"><a href=\"" + location.pathname
393 + "?action=show_instance;" + inst.params + "\">" + inst.description
397 function format_instance_list(instances)
399 var ret = "<ul class=\"instance_list\">";
402 if (instances.length == 0)
405 for (i = 0; i < instances.length; i++)
406 ret += format_instance (instances[i]);
413 function format_graph(graph)
415 return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
418 function update_search_suggestions ()
420 var term = $("#search-input").val ();
423 $("#search-suggest").hide ();
427 $("#search-suggest").show ();
428 $.getJSON ("collection.fcgi",
429 { "action": "search_json", "q": term},
433 $("#search-suggest").html ("");
434 for (i = 0; i < data.length; i++)
437 $("#search-suggest").append (format_graph (graph));
441 } /* update_search_suggestions */
443 function zoom_redraw (jq_obj) /* {{{ */
445 var url = jq_obj.data ("base_url");
447 if ((jq_obj == null) || (url == null))
450 if (jq_obj.data ('begin') != null)
451 url += ";begin=" + jq_obj.data ('begin');
452 if (jq_obj.data ('end') != null)
453 url += ";end=" + jq_obj.data ('end');
455 jq_obj.attr ("src", url);
457 } /* }}} function zoom_redraw */
459 function zoom_reset (graph_id, diff) /* {{{ */
465 jq_obj = $("#" + graph_id);
469 end = new Number ((new Date ()).getTime () / 1000);
470 begin = new Number (end - diff);
472 jq_obj.data ('begin', begin.toFixed (0));
473 jq_obj.data ('end', end.toFixed (0));
475 return (zoom_redraw (jq_obj));
476 } /* }}} function zoom_reset */
478 function zoom_hour (graph_id) /* {{{ */
480 zoom_reset (graph_id, 3600);
481 } /* }}} function zoom_hour */
483 function zoom_day (graph_id) /* {{{ */
485 zoom_reset (graph_id, 86400);
486 } /* }}} function zoom_day */
488 function zoom_week (graph_id) /* {{{ */
490 zoom_reset (graph_id, 7 * 86400);
491 } /* }}} function zoom_week */
493 function zoom_month (graph_id) /* {{{ */
495 zoom_reset (graph_id, 31 * 86400);
496 } /* }}} function zoom_month */
498 function zoom_year (graph_id) /* {{{ */
500 zoom_reset (graph_id, 366 * 86400);
501 } /* }}} function zoom_year */
503 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
510 jq_obj = $("#" + graph_id);
514 begin = jq_obj.data ('begin');
515 end = jq_obj.data ('end');
516 if ((begin == null) || (end == null))
517 return (zoom_day (graph_id));
519 begin = new Number (begin);
520 end = new Number (end);
523 if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
526 jq_obj.data ('begin', begin + (diff * factor_begin));
527 jq_obj.data ('end', end + (diff * factor_end));
529 return (zoom_redraw (jq_obj));
530 } /* }}} function zoom_relative */
532 function zoom_reference (graph_id) /* {{{ */
538 jq_obj = $("#" + graph_id);
542 begin = jq_obj.data ('begin');
543 end = jq_obj.data ('end');
544 if ((begin == null) || (end == null))
547 $(".graph-img img").each (function ()
549 $(this).data ('begin', begin);
550 $(this).data ('end', end);
551 zoom_redraw ($(this));
553 } /* }}} function zoom_reference */
555 function zoom_earlier (graph_id) /* {{{ */
557 return (zoom_relative (graph_id, -0.2, -0.2));
558 } /* }}} function zoom_earlier */
560 function zoom_later (graph_id) /* {{{ */
562 return (zoom_relative (graph_id, +0.2, +0.2));
563 } /* }}} function zoom_later */
565 function zoom_in (graph_id) /* {{{ */
567 return (zoom_relative (graph_id, +0.2, -0.2));
568 } /* }}} function zoom_earlier */
570 function zoom_out (graph_id) /* {{{ */
572 return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
573 } /* }}} function zoom_earlier */
575 $(document).ready(function() {
576 /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
577 $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
578 $("#search-suggest").hide ();
580 $("#search-input").blur (function()
582 window.setTimeout (function ()
584 $("#search-suggest").hide ();
588 $("#search-input").focus (function()
590 var term = $("#search-input").val ();
593 $("#search-suggest").hide ();
597 $("#search-suggest").show ();
601 $("#search-input").keyup (function()
603 update_search_suggestions ();
607 $(".graph-img").each (function (index, elem)
609 var id = "graph" + graph_count;
612 $(this).find ("img").each (function (img_index, img_elem)
616 $(this).attr ("id", id);
618 base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
619 $(this).data ("base_url", base_url);
622 $(this).append ("<div class=\"graph-buttons presets\">"
623 + "<div class=\"graph-button\" onClick=\"zoom_hour ('"+id+"');\">H</div>"
624 + "<div class=\"graph-button\" onClick=\"zoom_day ('"+id+"');\">D</div>"
625 + "<div class=\"graph-button\" onClick=\"zoom_week ('"+id+"');\">W</div>"
626 + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
627 + "<div class=\"graph-button\" onClick=\"zoom_year ('"+id+"');\">Y</div>"
628 + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
630 + "<div class=\"graph-buttons navigation\">"
631 + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">←</div>"
632 + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">−</div>"
633 + "<div class=\"graph-button\" onClick=\"zoom_in ('"+id+"');\">+</div>"
634 + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">→</div>"
640 for (i = 0; i < c4.instances.length; i++)
642 json_graph_update (i);
646 /* vim: set sw=2 sts=2 et fdm=marker : */