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;
32 var v2s = function (value)
33 {
34 var tmp = Math.round (100.0 * value) / 100.0;
35 return ("" + tmp);
36 }
38 if (value == null)
39 return ('NaN');
40 else if (value == 0)
41 return ('0');
43 abs_value = Math.abs (value);
45 if ((abs_value < 10000) && (abs_value >= 0.1))
46 return (v2s (value));
47 else if (abs_value > 1)
48 {
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");
55 else
56 return (v2s (value / 1000000000000) + "T");
57 }
58 else
59 {
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");
64 else
65 return (v2s (value * 1000000000) + "n");
66 }
67 } /* }}} function value_to_string */
69 function instance_get_params (inst) /* {{{ */
70 {
71 var graph_selector = inst.graph_selector;
72 var inst_selector = inst.instance_selector;
73 var selector = {};
75 if (graph_selector.host == inst_selector.host)
76 {
77 selector.host = graph_selector.host;
78 }
79 else
80 {
81 selector.graph_host = graph_selector.host;
82 selector.inst_host = inst_selector.host;
83 }
85 if (graph_selector.plugin == inst_selector.plugin)
86 {
87 selector.plugin = graph_selector.plugin;
88 }
89 else
90 {
91 selector.graph_plugin = graph_selector.plugin;
92 selector.inst_plugin = inst_selector.plugin;
93 }
95 if (graph_selector.plugin_instance == inst_selector.plugin_instance)
96 {
97 selector.plugin_instance = graph_selector.plugin_instance;
98 }
99 else
100 {
101 selector.graph_plugin_instance = graph_selector.plugin_instance;
102 selector.inst_plugin_instance = inst_selector.plugin_instance;
103 }
105 if (graph_selector.type == inst_selector.type)
106 {
107 selector.type = graph_selector.type;
108 }
109 else
110 {
111 selector.graph_type = graph_selector.type;
112 selector.inst_type = inst_selector.type;
113 }
115 if (graph_selector.type_instance == inst_selector.type_instance)
116 {
117 selector.type_instance = graph_selector.type_instance;
118 }
119 else
120 {
121 selector.graph_type_instance = graph_selector.type_instance;
122 selector.inst_type_instance = inst_selector.type_instance;
123 }
125 return (selector);
126 } /* }}} instance_get_params */
128 function ident_clone (ident) /* {{{ */
129 {
130 var ret = {};
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;
138 return (ret);
139 } /* }}} ident_clone */
141 function inst_get_defs (inst) /* {{{ */
142 {
143 if (!inst.def)
144 {
145 var params = instance_get_params (inst);
146 params.action = "graph_def_json";
148 $.ajax({
149 url: "collection.fcgi",
150 async: false,
151 dataType: 'json',
152 data: params,
153 success: function (data)
154 {
155 if (!data)
156 return;
158 inst.def = data;
159 }});
160 }
162 if (inst.def)
163 return (inst.def);
164 return;
165 } /* }}} inst_get_defs */
167 function ident_matches (selector, ident) /* {{{ */
168 {
169 var part_matches = function (s,p)
170 {
171 if (s == null)
172 return (false);
174 if ((s == "/any/") || (s == "/all/"))
175 return (true);
177 if (p == null)
178 return (false);
180 if (s == p)
181 return (true);
183 return (false);
184 };
186 if (!part_matches (selector.host, ident.host))
187 return (false);
189 if (!part_matches (selector.plugin, ident.plugin))
190 return (false);
192 if (!part_matches (selector.plugin_instance, ident.plugin_instance))
193 return (false);
195 if (!part_matches (selector.type, ident.type))
196 return (false);
198 if (!part_matches (selector.type_instance, ident.type_instance))
199 return (false);
201 return (true);
202 } /* }}} function ident_matches */
204 function ident_describe (ident, selector) /* {{{ */
205 {
206 var ret = "";
207 var check_field = function (field)
208 {
209 if (ident[field].toLowerCase () != selector[field].toLowerCase ())
210 {
211 if (ret != "")
212 ret += "/";
213 ret += ident[field];
214 }
215 };
217 check_field ("host");
218 check_field ("plugin");
219 check_field ("plugin_instance");
220 check_field ("type");
221 check_field ("type_instance");
223 if (ret == "")
224 return (null);
225 return (ret);
226 } /* }}} function ident_describe */
228 function def_draw_one (def, data, series_array) /* {{{ */
229 {
230 var chart_series = new Object ();
232 chart_series.type = 'line';
233 chart_series.pointInterval = data.interval * 1000.0;
234 chart_series.pointStart = data.first_value_time * 1000.0;
235 chart_series.data = data.data;
236 chart_series.lineWidth = 1;
237 chart_series.shadow = false;
238 chart_series.marker = { enabled: false };
240 if (def.legend)
241 chart_series.name = def.legend;
242 else if (def.ds_name)
243 chart_series.name = def.ds_name;
245 if (def.area)
246 chart_series.type = 'area';
248 if (def.stack)
249 chart_series.stacking = 'normal';
251 if ((def.color) && (def.color != 'random'))
252 chart_series.color = def.color;
254 series_array.push (chart_series);
255 } /* }}} function def_draw_one */
257 function def_draw (def, data_list, series_array) /* {{{ */
258 {
259 var i;
261 for (i = 0; i < data_list.length; i++)
262 {
263 if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
264 continue;
265 if (!ident_matches (def.select, data_list[i].file))
266 continue;
268 def_draw_one (def, data_list[i], series_array);
269 }
270 } /* }}} function def_draw */
272 function inst_get_chart_opts (inst, def) /* {{{ */
273 {
274 var chart_opts = new Object ();
276 chart_opts.chart =
277 {
278 renderTo: inst.container,
279 zoomType: 'x'
280 };
281 chart_opts.xAxis =
282 {
283 type: 'datetime',
284 maxZoom: 300, // five minutes
285 title: { text: null },
286 events:
287 {
288 setExtremes: function (event)
289 {
290 var begin = null;
291 var end = null;
293 if ((event.min) && (event.max))
294 {
295 begin = event.min / 1000.0;
296 end = event.max / 1000.0;
297 }
298 inst_fetch_data (inst, begin, end);
299 }
300 }
301 };
302 chart_opts.yAxis =
303 {
304 labels:
305 {
306 formatter: function () { return (value_to_string (this.value)); }
307 },
308 startOnTick: false,
309 endOnTick: false
310 };
311 chart_opts.legend =
312 {
313 labelFormatter: function ()
314 {
315 var series = this;
316 var min = Number.MAX_VALUE;
317 var max = Number.NEGATIVE_INFINITY;
318 var num = 0;
319 var sum = 0;
320 var avg;
321 var i;
323 for (i = 0; i < this.data.length; i++)
324 {
325 var v;
327 v = this.data[i].y;
328 if (v == null)
329 continue;
331 if (min > v)
332 min = v;
333 if (max < v)
334 max = v;
336 sum += v;
337 num++;
338 }
340 if (num == 0)
341 {
342 min = null;
343 max = null;
344 avg = null;
345 }
346 else
347 {
348 avg = sum / num;
349 }
351 return (this.name + " (" + value_to_string (min) + " min, "
352 + value_to_string (avg) + " avg, "
353 + value_to_string (max) + " max)");
354 }
355 };
356 chart_opts.series = new Array ();
358 if (def.title)
359 chart_opts.title = { text: def.title };
361 if (def.vertical_label)
362 chart_opts.yAxis.title = { text: def.vertical_label };
364 return (chart_opts);
365 } /* }}} function chart_opts_get */
367 function inst_draw (inst, def, data_list) /* {{{ */
368 {
369 var chart_opts;
370 var i;
372 if (!inst || !def || !data_list)
373 return;
375 chart_opts = inst_get_chart_opts (inst, def);
377 for (i = def.defs.length - 1; i >= 0; i--)
378 def_draw (def.defs[i], data_list, chart_opts.series);
380 inst.chart = new Highcharts.Chart (chart_opts);
381 } /* }}} function inst_draw */
383 function inst_redraw (inst, def, data_list) /* {{{ */
384 {
385 var series_array;
386 var i;
388 if (!inst.chart)
389 return (inst_draw (inst, def, data_list));
391 series_array = new Array ();
392 for (i = def.defs.length - 1; i >= 0; i--)
393 def_draw (def.defs[i], data_list, series_array);
395 if (inst.chart.series.length != series_array.length)
396 {
397 alert ("inst.chart.series.length != series_array.length");
398 return;
399 }
401 for (i = inst.chart.series.length - 1; i >= 0; i--)
402 {
403 series_array[i].visible = inst.chart.series[i].visible;
404 inst.chart.series[i].remove (/* redraw = */ false);
405 }
407 for (i = 0; i < series_array.length; i++)
408 inst.chart.addSeries (series_array[i], /* redraw = */ false);
410 inst.chart.redraw ();
411 } /* }}} function inst_redraw */
413 function inst_fetch_data (inst, begin, end) /* {{{ */
414 {
415 var def;
416 var params;
418 def = inst_get_defs (inst);
419 if (!def)
420 return;
422 params = instance_get_params (inst);
423 params.action = "instance_data_json";
424 params.begin = begin || inst.begin;
425 params.end = end || inst.end;
427 $.getJSON ("collection.fcgi", params,
428 function (data)
429 {
430 inst_redraw (inst, def, data);
431 }); /* getJSON */
432 } /* }}} inst_fetch_data */
434 function json_graph_update (index) /* {{{ */
435 {
436 var inst;
438 inst = c4.instances[index];
439 if (!inst)
440 return;
442 if (!inst.container)
443 inst.container = "c4-graph" + index;
445 inst_fetch_data (inst);
446 } /* }}} json_graph_update */
448 function format_instance(inst)
449 {
450 return ("<li class=\"instance\"><a href=\"" + location.pathname
451 + "?action=show_instance;" + inst.params + "\">" + inst.description
452 + "</a></li>");
453 }
455 function format_instance_list(instances)
456 {
457 var ret = "<ul class=\"instance_list\">";
458 var i;
460 if (instances.length == 0)
461 return ("");
463 for (i = 0; i < instances.length; i++)
464 ret += format_instance (instances[i]);
466 ret += "</ul>";
468 return (ret);
469 }
471 function format_graph(graph)
472 {
473 return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
474 }
476 function update_search_suggestions ()
477 {
478 var term = $("#search-input").val ();
479 if (term.length < 2)
480 {
481 $("#search-suggest").hide ();
482 return (true);
483 }
485 $("#search-suggest").show ();
486 $.getJSON ("collection.fcgi",
487 { "action": "search_json", "q": term},
488 function(data)
489 {
490 var i;
491 $("#search-suggest").html ("");
492 for (i = 0; i < data.length; i++)
493 {
494 var graph = data[i];
495 $("#search-suggest").append (format_graph (graph));
496 }
497 }
498 );
499 } /* update_search_suggestions */
501 function zoom_redraw (jq_obj) /* {{{ */
502 {
503 var url = jq_obj.data ("base_url");
505 if ((jq_obj == null) || (url == null))
506 return (false);
508 if (jq_obj.data ('begin') != null)
509 url += ";begin=" + jq_obj.data ('begin');
510 if (jq_obj.data ('end') != null)
511 url += ";end=" + jq_obj.data ('end');
513 jq_obj.attr ("src", url);
514 return (true);
515 } /* }}} function zoom_redraw */
517 function zoom_reset (graph_id, diff) /* {{{ */
518 {
519 var jq_obj;
520 var end;
521 var begin;
523 jq_obj = $("#" + graph_id);
524 if (jq_obj == null)
525 return (false);
527 end = new Number ((new Date ()).getTime () / 1000);
528 begin = new Number (end - diff);
530 jq_obj.data ('begin', begin.toFixed (0));
531 jq_obj.data ('end', end.toFixed (0));
533 return (zoom_redraw (jq_obj));
534 } /* }}} function zoom_reset */
536 function zoom_hour (graph_id) /* {{{ */
537 {
538 zoom_reset (graph_id, 3600);
539 } /* }}} function zoom_hour */
541 function zoom_day (graph_id) /* {{{ */
542 {
543 zoom_reset (graph_id, 86400);
544 } /* }}} function zoom_day */
546 function zoom_week (graph_id) /* {{{ */
547 {
548 zoom_reset (graph_id, 7 * 86400);
549 } /* }}} function zoom_week */
551 function zoom_month (graph_id) /* {{{ */
552 {
553 zoom_reset (graph_id, 31 * 86400);
554 } /* }}} function zoom_month */
556 function zoom_year (graph_id) /* {{{ */
557 {
558 zoom_reset (graph_id, 366 * 86400);
559 } /* }}} function zoom_year */
561 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
562 {
563 var jq_obj;
564 var end;
565 var begin;
566 var diff;
568 jq_obj = $("#" + graph_id);
569 if (jq_obj == null)
570 return (false);
572 begin = jq_obj.data ('begin');
573 end = jq_obj.data ('end');
574 if ((begin == null) || (end == null))
575 return (zoom_day (graph_id));
577 begin = new Number (begin);
578 end = new Number (end);
580 diff = end - begin;
581 if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
582 return (true);
584 jq_obj.data ('begin', begin + (diff * factor_begin));
585 jq_obj.data ('end', end + (diff * factor_end));
587 return (zoom_redraw (jq_obj));
588 } /* }}} function zoom_relative */
590 function zoom_reference (graph_id) /* {{{ */
591 {
592 var jq_obj;
593 var end;
594 var begin;
596 jq_obj = $("#" + graph_id);
597 if (jq_obj == null)
598 return (false);
600 begin = jq_obj.data ('begin');
601 end = jq_obj.data ('end');
602 if ((begin == null) || (end == null))
603 return (false);
605 $(".graph-img img").each (function ()
606 {
607 $(this).data ('begin', begin);
608 $(this).data ('end', end);
609 zoom_redraw ($(this));
610 });
611 } /* }}} function zoom_reference */
613 function zoom_earlier (graph_id) /* {{{ */
614 {
615 return (zoom_relative (graph_id, -0.2, -0.2));
616 } /* }}} function zoom_earlier */
618 function zoom_later (graph_id) /* {{{ */
619 {
620 return (zoom_relative (graph_id, +0.2, +0.2));
621 } /* }}} function zoom_later */
623 function zoom_in (graph_id) /* {{{ */
624 {
625 return (zoom_relative (graph_id, +0.2, -0.2));
626 } /* }}} function zoom_earlier */
628 function zoom_out (graph_id) /* {{{ */
629 {
630 return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
631 } /* }}} function zoom_earlier */
633 $(document).ready(function() {
634 /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
635 $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
636 $("#search-suggest").hide ();
638 $("#search-input").blur (function()
639 {
640 window.setTimeout (function ()
641 {
642 $("#search-suggest").hide ();
643 }, 500);
644 });
646 $("#search-input").focus (function()
647 {
648 var term = $("#search-input").val ();
649 if (term.length < 2)
650 {
651 $("#search-suggest").hide ();
652 }
653 else
654 {
655 $("#search-suggest").show ();
656 }
657 });
659 $("#search-input").keyup (function()
660 {
661 update_search_suggestions ();
662 });
664 var graph_count = 0;
665 $(".graph-img").each (function (index, elem)
666 {
667 var id = "graph" + graph_count;
668 graph_count++;
670 $(this).find ("img").each (function (img_index, img_elem)
671 {
672 var base_url;
674 $(this).attr ("id", id);
676 base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
677 $(this).data ("base_url", base_url);
678 });
680 $(this).append ("<div class=\"graph-buttons presets\">"
681 + "<div class=\"graph-button\" onClick=\"zoom_hour ('"+id+"');\">H</div>"
682 + "<div class=\"graph-button\" onClick=\"zoom_day ('"+id+"');\">D</div>"
683 + "<div class=\"graph-button\" onClick=\"zoom_week ('"+id+"');\">W</div>"
684 + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
685 + "<div class=\"graph-button\" onClick=\"zoom_year ('"+id+"');\">Y</div>"
686 + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
687 + "</div>"
688 + "<div class=\"graph-buttons navigation\">"
689 + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">←</div>"
690 + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">−</div>"
691 + "<div class=\"graph-button\" onClick=\"zoom_in ('"+id+"');\">+</div>"
692 + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">→</div>"
693 + "</div>"
694 );
695 });
697 var i;
698 for (i = 0; i < c4.instances.length; i++)
699 {
700 json_graph_update (i);
701 }
702 });
704 /* vim: set sw=2 sts=2 et fdm=marker : */