1 /**
2 * collection4 - collection.js
3 * Copyright (C) 2010-2013 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 <octo at collectd.org>
22 **/
24 var c4 =
25 {
26 instances: new Array (),
27 config:
28 {
29 width: 324,
30 height: 200
31 }
32 };
34 function value_to_string (value) /* {{{ */
35 {
36 var abs_value;
37 var v2s = function (value)
38 {
39 var tmp = Math.round (100.0 * value) / 100.0;
40 return ("" + tmp);
41 }
43 if (value == null)
44 return ('NaN');
45 else if (value == 0)
46 return ('0');
48 abs_value = Math.abs (value);
50 if ((abs_value < 10000) && (abs_value >= 0.1))
51 return (v2s (value));
52 else if (abs_value > 1)
53 {
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");
60 else
61 return (v2s (value / 1000000000000) + "T");
62 }
63 else
64 {
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");
69 else
70 return (v2s (value * 1000000000) + "n");
71 }
72 } /* }}} function value_to_string */
74 function instance_get_params (inst) /* {{{ */
75 {
76 var graph_selector = inst.graph_selector;
77 var inst_selector = inst.instance_selector;
78 var selector = {};
80 if (graph_selector.host == inst_selector.host)
81 {
82 selector.host = graph_selector.host;
83 }
84 else
85 {
86 selector.graph_host = graph_selector.host;
87 selector.inst_host = inst_selector.host;
88 }
90 if (graph_selector.plugin == inst_selector.plugin)
91 {
92 selector.plugin = graph_selector.plugin;
93 }
94 else
95 {
96 selector.graph_plugin = graph_selector.plugin;
97 selector.inst_plugin = inst_selector.plugin;
98 }
100 if (graph_selector.plugin_instance == inst_selector.plugin_instance)
101 {
102 selector.plugin_instance = graph_selector.plugin_instance;
103 }
104 else
105 {
106 selector.graph_plugin_instance = graph_selector.plugin_instance;
107 selector.inst_plugin_instance = inst_selector.plugin_instance;
108 }
110 if (graph_selector.type == inst_selector.type)
111 {
112 selector.type = graph_selector.type;
113 }
114 else
115 {
116 selector.graph_type = graph_selector.type;
117 selector.inst_type = inst_selector.type;
118 }
120 if (graph_selector.type_instance == inst_selector.type_instance)
121 {
122 selector.type_instance = graph_selector.type_instance;
123 }
124 else
125 {
126 selector.graph_type_instance = graph_selector.type_instance;
127 selector.inst_type_instance = inst_selector.type_instance;
128 }
130 return (selector);
131 } /* }}} instance_get_params */
133 function ident_clone (ident) /* {{{ */
134 {
135 var ret = {};
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;
143 return (ret);
144 } /* }}} ident_clone */
146 function inst_get_defs (inst) /* {{{ */
147 {
148 if (!inst.def)
149 {
150 var params = instance_get_params (inst);
151 params.action = "graph_def_json";
153 $.ajax({
154 url: "collection.fcgi",
155 async: false,
156 dataType: 'json',
157 data: params,
158 success: function (data)
159 {
160 if (!data)
161 return;
163 inst.def = data;
164 }});
165 }
167 if (inst.def)
168 return (inst.def);
169 return;
170 } /* }}} inst_get_defs */
172 function ident_matches (selector, ident) /* {{{ */
173 {
174 var part_matches = function (s,p)
175 {
176 if (s == null)
177 return (false);
179 if ((s == "/any/") || (s == "/all/"))
180 return (true);
182 if (p == null)
183 return (false);
185 if (s == p)
186 return (true);
188 return (false);
189 };
191 if (!part_matches (selector.host, ident.host))
192 return (false);
194 if (!part_matches (selector.plugin, ident.plugin))
195 return (false);
197 if (!part_matches (selector.plugin_instance, ident.plugin_instance))
198 return (false);
200 if (!part_matches (selector.type, ident.type))
201 return (false);
203 if (!part_matches (selector.type_instance, ident.type_instance))
204 return (false);
206 return (true);
207 } /* }}} function ident_matches */
209 function ident_describe (ident, selector) /* {{{ */
210 {
211 var ret = "";
212 var check_field = function (field)
213 {
214 if (ident[field].toLowerCase () != selector[field].toLowerCase ())
215 {
216 if (ret != "")
217 ret += "/";
218 ret += ident[field];
219 }
220 };
222 check_field ("host");
223 check_field ("plugin");
224 check_field ("plugin_instance");
225 check_field ("type");
226 check_field ("type_instance");
228 if (ret == "")
229 return (null);
230 return (ret);
231 } /* }}} function ident_describe */
233 /*
234 * Given one metric definition, returns the appropriate metric data from the
235 * graph data (data list). */
236 function metric_def_get_data (metric_def, graph_data)
237 {
238 var i;
240 for (i = 0; i < graph_data.length; i++)
241 {
242 if ((metric_def.ds_name) && (metric_def.ds_name != graph_data[i].data_source))
243 continue;
244 if (!ident_matches (metric_def.select, graph_data[i].file))
245 continue;
247 return (graph_data[i]);
248 }
249 return;
250 }
252 function metric_def_to_rickshaw_series (metric_def, metric_data)
253 {
254 var series = {
255 data: []
256 };
257 var i;
259 if (metric_def.legend)
260 series.name = metric_def.legend;
262 if (metric_def.color)
263 series.color = metric_def.color;
265 for (i = 0; i < metric_data.data.length; i++)
266 {
267 var x = metric_data.first_value_time + (i * metric_data.interval);
268 var y = metric_data.data[i];
270 series.data.push ({'x': x, 'y': y});
271 }
273 return (series);
274 }
276 function graph_def_to_rickshaw_config (root_element, graph_def, data_list)
277 {
278 var graph_config = {
279 element: root_element,
280 renderer: 'line',
281 series: []
282 };
283 var graph;
284 var i;
286 for (i = 0; i < graph_def.defs.length; i++)
287 {
288 var metric_def = graph_def.defs[i];
289 var metric_data = metric_def_get_data (metric_def, data_list);
290 var series;
292 if (!metric_data)
293 continue;
295 series = metric_def_to_rickshaw_series (metric_def, metric_data);
296 if (series)
297 graph_config.series.push (series);
298 }
300 return (graph_config);
301 }
303 function graph_def_to_rickshaw_graph (root_element, graph_def, graph_data)
304 {
305 var graph_config = graph_def_to_rickshaw_config (root_element, graph_def, graph_data);
307 var graph = new Rickshaw.Graph (graph_config);
308 graph.render ();
310 var x_axis = new Rickshaw.Graph.Axis.Time({
311 graph: graph
312 });
313 x_axis.render ();
315 var y_axis = new Rickshaw.Graph.Axis.Y({
316 graph: graph
317 });
318 y_axis.render ();
319 }
321 function inst_draw_rickshaw (inst, graph_def, graph_data)
322 {
323 var root_element = document.getElementById (inst.container);
325 inst.chart = graph_def_to_rickshaw_graph (root_element, graph_def, graph_data);
326 }
328 function inst_draw (inst, graph_def, graph_data)
329 {
330 inst_draw_rickshaw (inst, graph_def, graph_data);
331 }
333 function inst_redraw (inst, graph_def, graph_data) /* {{{ */
334 {
335 var series_array;
336 var i;
338 if (!inst.chart)
339 return (inst_draw (inst, graph_def, graph_data));
340 else
341 return; /* TODO: Insert new data into the graph */
342 } /* }}} function inst_redraw */
344 function inst_fetch_data (inst, begin, end) /* {{{ */
345 {
346 var graph_def;
347 var params;
349 graph_def = inst_get_defs (inst);
350 if (!graph_def)
351 return;
353 params = instance_get_params (inst);
354 params.action = "instance_data_json";
355 params.begin = begin || inst.begin;
356 params.end = end || inst.end;
357 params.resolution = (params.end - params.begin) / c4.config.width;
359 $.getJSON ("collection.fcgi", params,
360 function (data)
361 {
362 inst_redraw (inst, graph_def, data);
363 }); /* getJSON */
364 } /* }}} inst_fetch_data */
366 function json_graph_update (index) /* {{{ */
367 {
368 var inst;
370 inst = c4.instances[index];
371 if (!inst)
372 return;
374 if (!inst.container)
375 inst.container = "c4-graph" + index;
377 inst_fetch_data (inst);
378 } /* }}} json_graph_update */
380 function format_instance(inst)
381 {
382 return ("<li class=\"instance\"><a href=\"" + location.pathname
383 + "?action=show_instance;" + inst.params + "\">" + inst.description
384 + "</a></li>");
385 }
387 function format_instance_list(instances)
388 {
389 var ret = "<ul class=\"instance_list\">";
390 var i;
392 if (instances.length == 0)
393 return ("");
395 for (i = 0; i < instances.length; i++)
396 ret += format_instance (instances[i]);
398 ret += "</ul>";
400 return (ret);
401 }
403 function format_graph(graph)
404 {
405 return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
406 }
408 function update_search_suggestions ()
409 {
410 var term = $("#search-input").val ();
411 if (term.length < 2)
412 {
413 $("#search-suggest").hide ();
414 return (true);
415 }
417 $("#search-suggest").show ();
418 $.getJSON ("collection.fcgi",
419 { "action": "search_json", "q": term},
420 function(data)
421 {
422 var i;
423 $("#search-suggest").html ("");
424 for (i = 0; i < data.length; i++)
425 {
426 var graph = data[i];
427 $("#search-suggest").append (format_graph (graph));
428 }
429 }
430 );
431 } /* update_search_suggestions */
433 function zoom_redraw (jq_obj) /* {{{ */
434 {
435 var url = jq_obj.data ("base_url");
437 if ((jq_obj == null) || (url == null))
438 return (false);
440 if (jq_obj.data ('begin') != null)
441 url += ";begin=" + jq_obj.data ('begin');
442 if (jq_obj.data ('end') != null)
443 url += ";end=" + jq_obj.data ('end');
445 jq_obj.attr ("src", url);
446 return (true);
447 } /* }}} function zoom_redraw */
449 function zoom_reset (graph_id, diff) /* {{{ */
450 {
451 var jq_obj;
452 var end;
453 var begin;
455 jq_obj = $("#" + graph_id);
456 if (jq_obj == null)
457 return (false);
459 end = new Number ((new Date ()).getTime () / 1000);
460 begin = new Number (end - diff);
462 jq_obj.data ('begin', begin.toFixed (0));
463 jq_obj.data ('end', end.toFixed (0));
465 return (zoom_redraw (jq_obj));
466 } /* }}} function zoom_reset */
468 function zoom_hour (graph_id) /* {{{ */
469 {
470 zoom_reset (graph_id, 3600);
471 } /* }}} function zoom_hour */
473 function zoom_day (graph_id) /* {{{ */
474 {
475 zoom_reset (graph_id, 86400);
476 } /* }}} function zoom_day */
478 function zoom_week (graph_id) /* {{{ */
479 {
480 zoom_reset (graph_id, 7 * 86400);
481 } /* }}} function zoom_week */
483 function zoom_month (graph_id) /* {{{ */
484 {
485 zoom_reset (graph_id, 31 * 86400);
486 } /* }}} function zoom_month */
488 function zoom_year (graph_id) /* {{{ */
489 {
490 zoom_reset (graph_id, 366 * 86400);
491 } /* }}} function zoom_year */
493 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
494 {
495 var jq_obj;
496 var end;
497 var begin;
498 var diff;
500 jq_obj = $("#" + graph_id);
501 if (jq_obj == null)
502 return (false);
504 begin = jq_obj.data ('begin');
505 end = jq_obj.data ('end');
506 if ((begin == null) || (end == null))
507 return (zoom_day (graph_id));
509 begin = new Number (begin);
510 end = new Number (end);
512 diff = end - begin;
513 if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
514 return (true);
516 jq_obj.data ('begin', begin + (diff * factor_begin));
517 jq_obj.data ('end', end + (diff * factor_end));
519 return (zoom_redraw (jq_obj));
520 } /* }}} function zoom_relative */
522 function zoom_reference (graph_id) /* {{{ */
523 {
524 var jq_obj;
525 var end;
526 var begin;
528 jq_obj = $("#" + graph_id);
529 if (jq_obj == null)
530 return (false);
532 begin = jq_obj.data ('begin');
533 end = jq_obj.data ('end');
534 if ((begin == null) || (end == null))
535 return (false);
537 $(".graph-img img").each (function ()
538 {
539 $(this).data ('begin', begin);
540 $(this).data ('end', end);
541 zoom_redraw ($(this));
542 });
543 } /* }}} function zoom_reference */
545 function zoom_earlier (graph_id) /* {{{ */
546 {
547 return (zoom_relative (graph_id, -0.2, -0.2));
548 } /* }}} function zoom_earlier */
550 function zoom_later (graph_id) /* {{{ */
551 {
552 return (zoom_relative (graph_id, +0.2, +0.2));
553 } /* }}} function zoom_later */
555 function zoom_in (graph_id) /* {{{ */
556 {
557 return (zoom_relative (graph_id, +0.2, -0.2));
558 } /* }}} function zoom_earlier */
560 function zoom_out (graph_id) /* {{{ */
561 {
562 return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
563 } /* }}} function zoom_earlier */
565 function graph_recalc_width () /* {{{ */
566 {
567 var tmp;
569 tmp = $("#layout-middle-center").width ();
570 if (!tmp)
571 return;
573 if (tmp < 324)
574 tmp = 324;
576 c4.config.width = tmp;
577 c4.config.height = Math.round (tmp / 1.61803398874989484820);
578 $(".graph-json").each (function ()
579 {
580 $(this).width (c4.config.width);
581 $(this).height (c4.config.height);
582 });
583 } /* }}} function graph_recalc_width */
585 $(document).ready(function() {
586 /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
587 $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
588 $("#search-suggest").hide ();
590 $("#search-input").blur (function()
591 {
592 window.setTimeout (function ()
593 {
594 $("#search-suggest").hide ();
595 }, 500);
596 });
598 $("#search-input").focus (function()
599 {
600 var term = $("#search-input").val ();
601 if (term.length < 2)
602 {
603 $("#search-suggest").hide ();
604 }
605 else
606 {
607 $("#search-suggest").show ();
608 }
609 });
611 $("#search-input").keyup (function()
612 {
613 update_search_suggestions ();
614 });
616 var graph_count = 0;
617 $(".graph-img").each (function (index, elem)
618 {
619 var id = "graph" + graph_count;
620 graph_count++;
622 $(this).find ("img").each (function (img_index, img_elem)
623 {
624 var base_url;
626 $(this).attr ("id", id);
628 base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
629 $(this).data ("base_url", base_url);
630 });
632 $(this).append ("<div class=\"graph-buttons presets\">"
633 + "<div class=\"graph-button\" onClick=\"zoom_hour ('"+id+"');\">H</div>"
634 + "<div class=\"graph-button\" onClick=\"zoom_day ('"+id+"');\">D</div>"
635 + "<div class=\"graph-button\" onClick=\"zoom_week ('"+id+"');\">W</div>"
636 + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
637 + "<div class=\"graph-button\" onClick=\"zoom_year ('"+id+"');\">Y</div>"
638 + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
639 + "</div>"
640 + "<div class=\"graph-buttons navigation\">"
641 + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">\u2190</div>"
642 + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">\u2212</div>"
643 + "<div class=\"graph-button\" onClick=\"zoom_in ('"+id+"');\">+</div>"
644 + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">\u2192</div>"
645 + "</div>"
646 );
647 });
649 graph_recalc_width ();
651 var i;
652 for (i = 0; i < c4.instances.length; i++)
653 {
654 json_graph_update (i);
655 }
656 });
658 /* vim: set sw=2 sts=2 et fdm=marker : */