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>
26 instances: new Array (),
34 function value_to_string (value) /* {{{ */
37 var v2s = function (value)
39 var tmp = Math.round (100.0 * value) / 100.0;
48 abs_value = Math.abs (value);
50 if ((abs_value < 10000) && (abs_value >= 0.1))
52 else if (abs_value > 1)
54 if (abs_value < 10000000)
55 return (v2s (value / 1000) + "k");
56 else if (abs_value < 10000000000)
57 return (v2s (value / 1000000) + "M");
58 else if (abs_value < 10000000000000)
59 return (v2s (value / 1000000000) + "G");
61 return (v2s (value / 1000000000000) + "T");
65 if (abs_value >= 0.001)
66 return (v2s (value * 1000) + "m");
67 else if (abs_value >= 0.000001)
68 return (v2s (value * 1000000) + "u");
70 return (v2s (value * 1000000000) + "n");
72 } /* }}} function value_to_string */
74 function instance_get_params (inst) /* {{{ */
76 var graph_selector = inst.graph_selector;
77 var inst_selector = inst.instance_selector;
80 if (graph_selector.host == inst_selector.host)
82 selector.host = graph_selector.host;
86 selector.graph_host = graph_selector.host;
87 selector.inst_host = inst_selector.host;
90 if (graph_selector.plugin == inst_selector.plugin)
92 selector.plugin = graph_selector.plugin;
96 selector.graph_plugin = graph_selector.plugin;
97 selector.inst_plugin = inst_selector.plugin;
100 if (graph_selector.plugin_instance == inst_selector.plugin_instance)
102 selector.plugin_instance = graph_selector.plugin_instance;
106 selector.graph_plugin_instance = graph_selector.plugin_instance;
107 selector.inst_plugin_instance = inst_selector.plugin_instance;
110 if (graph_selector.type == inst_selector.type)
112 selector.type = graph_selector.type;
116 selector.graph_type = graph_selector.type;
117 selector.inst_type = inst_selector.type;
120 if (graph_selector.type_instance == inst_selector.type_instance)
122 selector.type_instance = graph_selector.type_instance;
126 selector.graph_type_instance = graph_selector.type_instance;
127 selector.inst_type_instance = inst_selector.type_instance;
131 } /* }}} instance_get_params */
133 function ident_clone (ident) /* {{{ */
137 ret.host = ident.host;
138 ret.plugin = ident.plugin;
139 ret.plugin_instance = ident.plugin_instance;
140 ret.type = ident.type;
141 ret.type_instance = ident.type_instance;
144 } /* }}} ident_clone */
146 function inst_get_defs (inst) /* {{{ */
150 var params = instance_get_params (inst);
151 params.action = "graph_def_json";
154 url: "collection.fcgi",
158 success: function (data)
170 } /* }}} inst_get_defs */
172 function ident_matches (selector, ident) /* {{{ */
174 var part_matches = function (s,p)
179 if ((s == "/any/") || (s == "/all/"))
191 if (!part_matches (selector.host, ident.host))
194 if (!part_matches (selector.plugin, ident.plugin))
197 if (!part_matches (selector.plugin_instance, ident.plugin_instance))
200 if (!part_matches (selector.type, ident.type))
203 if (!part_matches (selector.type_instance, ident.type_instance))
207 } /* }}} function ident_matches */
209 function ident_describe (ident, selector) /* {{{ */
212 var check_field = function (field)
214 if (ident[field].toLowerCase () != selector[field].toLowerCase ())
222 check_field ("host");
223 check_field ("plugin");
224 check_field ("plugin_instance");
225 check_field ("type");
226 check_field ("type_instance");
231 } /* }}} function ident_describe */
233 function def_draw_one (def, data, series_array) /* {{{ */
235 var chart_series = new Object ();
237 chart_series.type = 'line';
238 chart_series.pointInterval = data.interval * 1000.0;
239 chart_series.pointStart = data.first_value_time * 1000.0;
240 chart_series.data = data.data;
241 chart_series.lineWidth = 1;
242 chart_series.shadow = false;
243 chart_series.marker = { enabled: false };
246 chart_series.name = def.legend;
247 else if (def.ds_name)
248 chart_series.name = def.ds_name;
251 chart_series.type = 'area';
254 chart_series.stacking = 'normal';
256 if ((def.color) && (def.color != 'random'))
257 chart_series.color = def.color;
259 series_array.push (chart_series);
260 } /* }}} function def_draw_one */
262 function def_draw (def, data_list, series_array) /* {{{ */
266 for (i = 0; i < data_list.length; i++)
268 if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
270 if (!ident_matches (def.select, data_list[i].file))
273 def_draw_one (def, data_list[i], series_array);
275 } /* }}} function def_draw */
278 * Given one metric definition, returns the appropriate data from the data
280 function def_get_data (def, data_list)
284 for (i = 0; i < data_list.length; i++)
286 if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
288 if (!ident_matches (def.select, data_list[i].file))
291 return (data_list[i]);
296 function def_to_rickshaw_one (def, data)
304 series.name = def.legend;
307 series.color = def.color;
309 for (i = 0; i < data.data.length; i++)
311 var x = data.first_value_time + (i * data.interval);
312 var y = data.data[i];
314 series.data.push ({'x': x, 'y': y});
320 function def_to_rickshaw (graph_def, data_list)
329 for (i = 0; i < graph_def.defs.length; i++)
331 var def = graph_def.defs[i];
332 var data = def_get_data (def, data_list);
338 series = def_to_rickshaw_one (def, data);
340 graph_config.series.push (series);
343 // graph_config.renderer = 'area';
346 return (graph_config);
349 function inst_draw_rickshaw (inst, def, data_list)
351 var graph_config = def_to_rickshaw (def, data_list);
353 graph_config.element = document.getElementById (inst.container);
355 inst.chart = new Rickshaw.Graph (graph_config);
356 inst.chart.render ();
358 var x_axis = new Rickshaw.Graph.Axis.Time({
363 var y_axis = new Rickshaw.Graph.Axis.Y({
369 function inst_draw (inst, def, data_list)
371 inst_draw_rickshaw (inst, def, data_list);
374 function inst_redraw (inst, def, data_list) /* {{{ */
380 return (inst_draw (inst, def, data_list));
382 series_array = new Array ();
383 for (i = def.defs.length - 1; i >= 0; i--)
384 def_draw (def.defs[i], data_list, series_array);
386 if (inst.chart.series.length != series_array.length)
388 alert ("inst.chart.series.length != series_array.length");
392 for (i = inst.chart.series.length - 1; i >= 0; i--)
394 series_array[i].visible = inst.chart.series[i].visible;
395 inst.chart.series[i].remove (/* redraw = */ false);
398 for (i = 0; i < series_array.length; i++)
399 inst.chart.addSeries (series_array[i], /* redraw = */ false);
401 inst.chart.redraw ();
402 } /* }}} function inst_redraw */
404 function inst_fetch_data (inst, begin, end) /* {{{ */
409 def = inst_get_defs (inst);
413 params = instance_get_params (inst);
414 params.action = "instance_data_json";
415 params.begin = begin || inst.begin;
416 params.end = end || inst.end;
417 params.resolution = (params.end - params.begin) / c4.config.width;
419 $.getJSON ("collection.fcgi", params,
422 inst_redraw (inst, def, data);
424 } /* }}} inst_fetch_data */
426 function json_graph_update (index) /* {{{ */
430 inst = c4.instances[index];
435 inst.container = "c4-graph" + index;
437 inst_fetch_data (inst);
438 } /* }}} json_graph_update */
440 function format_instance(inst)
442 return ("<li class=\"instance\"><a href=\"" + location.pathname
443 + "?action=show_instance;" + inst.params + "\">" + inst.description
447 function format_instance_list(instances)
449 var ret = "<ul class=\"instance_list\">";
452 if (instances.length == 0)
455 for (i = 0; i < instances.length; i++)
456 ret += format_instance (instances[i]);
463 function format_graph(graph)
465 return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
468 function update_search_suggestions ()
470 var term = $("#search-input").val ();
473 $("#search-suggest").hide ();
477 $("#search-suggest").show ();
478 $.getJSON ("collection.fcgi",
479 { "action": "search_json", "q": term},
483 $("#search-suggest").html ("");
484 for (i = 0; i < data.length; i++)
487 $("#search-suggest").append (format_graph (graph));
491 } /* update_search_suggestions */
493 function zoom_redraw (jq_obj) /* {{{ */
495 var url = jq_obj.data ("base_url");
497 if ((jq_obj == null) || (url == null))
500 if (jq_obj.data ('begin') != null)
501 url += ";begin=" + jq_obj.data ('begin');
502 if (jq_obj.data ('end') != null)
503 url += ";end=" + jq_obj.data ('end');
505 jq_obj.attr ("src", url);
507 } /* }}} function zoom_redraw */
509 function zoom_reset (graph_id, diff) /* {{{ */
515 jq_obj = $("#" + graph_id);
519 end = new Number ((new Date ()).getTime () / 1000);
520 begin = new Number (end - diff);
522 jq_obj.data ('begin', begin.toFixed (0));
523 jq_obj.data ('end', end.toFixed (0));
525 return (zoom_redraw (jq_obj));
526 } /* }}} function zoom_reset */
528 function zoom_hour (graph_id) /* {{{ */
530 zoom_reset (graph_id, 3600);
531 } /* }}} function zoom_hour */
533 function zoom_day (graph_id) /* {{{ */
535 zoom_reset (graph_id, 86400);
536 } /* }}} function zoom_day */
538 function zoom_week (graph_id) /* {{{ */
540 zoom_reset (graph_id, 7 * 86400);
541 } /* }}} function zoom_week */
543 function zoom_month (graph_id) /* {{{ */
545 zoom_reset (graph_id, 31 * 86400);
546 } /* }}} function zoom_month */
548 function zoom_year (graph_id) /* {{{ */
550 zoom_reset (graph_id, 366 * 86400);
551 } /* }}} function zoom_year */
553 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
560 jq_obj = $("#" + graph_id);
564 begin = jq_obj.data ('begin');
565 end = jq_obj.data ('end');
566 if ((begin == null) || (end == null))
567 return (zoom_day (graph_id));
569 begin = new Number (begin);
570 end = new Number (end);
573 if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
576 jq_obj.data ('begin', begin + (diff * factor_begin));
577 jq_obj.data ('end', end + (diff * factor_end));
579 return (zoom_redraw (jq_obj));
580 } /* }}} function zoom_relative */
582 function zoom_reference (graph_id) /* {{{ */
588 jq_obj = $("#" + graph_id);
592 begin = jq_obj.data ('begin');
593 end = jq_obj.data ('end');
594 if ((begin == null) || (end == null))
597 $(".graph-img img").each (function ()
599 $(this).data ('begin', begin);
600 $(this).data ('end', end);
601 zoom_redraw ($(this));
603 } /* }}} function zoom_reference */
605 function zoom_earlier (graph_id) /* {{{ */
607 return (zoom_relative (graph_id, -0.2, -0.2));
608 } /* }}} function zoom_earlier */
610 function zoom_later (graph_id) /* {{{ */
612 return (zoom_relative (graph_id, +0.2, +0.2));
613 } /* }}} function zoom_later */
615 function zoom_in (graph_id) /* {{{ */
617 return (zoom_relative (graph_id, +0.2, -0.2));
618 } /* }}} function zoom_earlier */
620 function zoom_out (graph_id) /* {{{ */
622 return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
623 } /* }}} function zoom_earlier */
625 function graph_recalc_width () /* {{{ */
629 tmp = $("#layout-middle-center").width ();
636 c4.config.width = tmp;
637 c4.config.height = Math.round (tmp / 1.61803398874989484820);
638 $(".graph-json").each (function ()
640 $(this).width (c4.config.width);
641 $(this).height (c4.config.height);
643 } /* }}} function graph_recalc_width */
645 $(document).ready(function() {
646 /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
647 $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
648 $("#search-suggest").hide ();
650 $("#search-input").blur (function()
652 window.setTimeout (function ()
654 $("#search-suggest").hide ();
658 $("#search-input").focus (function()
660 var term = $("#search-input").val ();
663 $("#search-suggest").hide ();
667 $("#search-suggest").show ();
671 $("#search-input").keyup (function()
673 update_search_suggestions ();
677 $(".graph-img").each (function (index, elem)
679 var id = "graph" + graph_count;
682 $(this).find ("img").each (function (img_index, img_elem)
686 $(this).attr ("id", id);
688 base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
689 $(this).data ("base_url", base_url);
692 $(this).append ("<div class=\"graph-buttons presets\">"
693 + "<div class=\"graph-button\" onClick=\"zoom_hour ('"+id+"');\">H</div>"
694 + "<div class=\"graph-button\" onClick=\"zoom_day ('"+id+"');\">D</div>"
695 + "<div class=\"graph-button\" onClick=\"zoom_week ('"+id+"');\">W</div>"
696 + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
697 + "<div class=\"graph-button\" onClick=\"zoom_year ('"+id+"');\">Y</div>"
698 + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
700 + "<div class=\"graph-buttons navigation\">"
701 + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">\u2190</div>"
702 + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">\u2212</div>"
703 + "<div class=\"graph-button\" onClick=\"zoom_in ('"+id+"');\">+</div>"
704 + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">\u2192</div>"
709 graph_recalc_width ();
712 for (i = 0; i < c4.instances.length; i++)
714 json_graph_update (i);
718 /* vim: set sw=2 sts=2 et fdm=marker : */