e071f2fe6bfb5fcf379863f13b1a090f1a79fc9a
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: 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 function def_draw_one (def, data, series_array) /* {{{ */
234 {
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 };
245 if (def.legend)
246 chart_series.name = def.legend;
247 else if (def.ds_name)
248 chart_series.name = def.ds_name;
250 if (def.area)
251 chart_series.type = 'area';
253 if (def.stack)
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) /* {{{ */
263 {
264 var i;
266 for (i = 0; i < data_list.length; i++)
267 {
268 if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
269 continue;
270 if (!ident_matches (def.select, data_list[i].file))
271 continue;
273 def_draw_one (def, data_list[i], series_array);
274 }
275 } /* }}} function def_draw */
277 function inst_get_chart_opts (inst, def) /* {{{ */
278 {
279 var chart_opts = new Object ();
281 chart_opts.chart =
282 {
283 renderTo: inst.container,
284 zoomType: 'x'
285 };
286 chart_opts.xAxis =
287 {
288 type: 'datetime',
289 maxZoom: 300, // five minutes
290 title: { text: null },
291 events:
292 {
293 setExtremes: function (event)
294 {
295 var begin = null;
296 var end = null;
298 if ((event.min) && (event.max))
299 {
300 begin = event.min / 1000.0;
301 end = event.max / 1000.0;
302 }
303 inst_fetch_data (inst, begin, end);
304 }
305 }
306 };
307 chart_opts.yAxis =
308 {
309 labels:
310 {
311 formatter: function () { return (value_to_string (this.value)); }
312 },
313 startOnTick: false,
314 endOnTick: false
315 };
316 chart_opts.legend =
317 {
318 labelFormatter: function ()
319 {
320 var series = this;
321 var min = Number.MAX_VALUE;
322 var max = Number.NEGATIVE_INFINITY;
323 var num = 0;
324 var sum = 0;
325 var avg;
326 var i;
328 for (i = 0; i < this.data.length; i++)
329 {
330 var v;
332 v = this.data[i].y;
333 if (v == null)
334 continue;
336 if (min > v)
337 min = v;
338 if (max < v)
339 max = v;
341 sum += v;
342 num++;
343 }
345 if (num == 0)
346 {
347 min = null;
348 max = null;
349 avg = null;
350 }
351 else
352 {
353 avg = sum / num;
354 }
356 return (this.name + " (" + value_to_string (min) + " min, "
357 + value_to_string (avg) + " avg, "
358 + value_to_string (max) + " max)");
359 }
360 };
361 chart_opts.series = new Array ();
363 if (def.title)
364 chart_opts.title = { text: def.title };
366 if (def.vertical_label)
367 chart_opts.yAxis.title = { text: def.vertical_label };
369 return (chart_opts);
370 } /* }}} function chart_opts_get */
372 function inst_draw (inst, def, data_list) /* {{{ */
373 {
374 var chart_opts;
375 var i;
377 if (!inst || !def || !data_list)
378 return;
380 chart_opts = inst_get_chart_opts (inst, def);
382 for (i = def.defs.length - 1; i >= 0; i--)
383 def_draw (def.defs[i], data_list, chart_opts.series);
385 inst.chart = new Highcharts.Chart (chart_opts);
386 } /* }}} function inst_draw */
388 function inst_redraw (inst, def, data_list) /* {{{ */
389 {
390 var series_array;
391 var i;
393 if (!inst.chart)
394 return (inst_draw (inst, def, data_list));
396 series_array = new Array ();
397 for (i = def.defs.length - 1; i >= 0; i--)
398 def_draw (def.defs[i], data_list, series_array);
400 if (inst.chart.series.length != series_array.length)
401 {
402 alert ("inst.chart.series.length != series_array.length");
403 return;
404 }
406 for (i = inst.chart.series.length - 1; i >= 0; i--)
407 {
408 series_array[i].visible = inst.chart.series[i].visible;
409 inst.chart.series[i].remove (/* redraw = */ false);
410 }
412 for (i = 0; i < series_array.length; i++)
413 inst.chart.addSeries (series_array[i], /* redraw = */ false);
415 inst.chart.redraw ();
416 } /* }}} function inst_redraw */
418 function inst_fetch_data (inst, begin, end) /* {{{ */
419 {
420 var def;
421 var params;
423 def = inst_get_defs (inst);
424 if (!def)
425 return;
427 params = instance_get_params (inst);
428 params.action = "instance_data_json";
429 params.begin = begin || inst.begin;
430 params.end = end || inst.end;
431 params.resolution = Math.round ((params.end - params.begin) / c4.config.width);
433 $.getJSON ("collection.fcgi", params,
434 function (data)
435 {
436 inst_redraw (inst, def, data);
437 }); /* getJSON */
438 } /* }}} inst_fetch_data */
440 function json_graph_update (index) /* {{{ */
441 {
442 var inst;
444 inst = c4.instances[index];
445 if (!inst)
446 return;
448 if (!inst.container)
449 inst.container = "c4-graph" + index;
451 inst_fetch_data (inst);
452 } /* }}} json_graph_update */
454 function format_instance(inst)
455 {
456 return ("<li class=\"instance\"><a href=\"" + location.pathname
457 + "?action=show_instance;" + inst.params + "\">" + inst.description
458 + "</a></li>");
459 }
461 function format_instance_list(instances)
462 {
463 var ret = "<ul class=\"instance_list\">";
464 var i;
466 if (instances.length == 0)
467 return ("");
469 for (i = 0; i < instances.length; i++)
470 ret += format_instance (instances[i]);
472 ret += "</ul>";
474 return (ret);
475 }
477 function format_graph(graph)
478 {
479 return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
480 }
482 function update_search_suggestions ()
483 {
484 var term = $("#search-input").val ();
485 if (term.length < 2)
486 {
487 $("#search-suggest").hide ();
488 return (true);
489 }
491 $("#search-suggest").show ();
492 $.getJSON ("collection.fcgi",
493 { "action": "search_json", "q": term},
494 function(data)
495 {
496 var i;
497 $("#search-suggest").html ("");
498 for (i = 0; i < data.length; i++)
499 {
500 var graph = data[i];
501 $("#search-suggest").append (format_graph (graph));
502 }
503 }
504 );
505 } /* update_search_suggestions */
507 function zoom_redraw (jq_obj) /* {{{ */
508 {
509 var url = jq_obj.data ("base_url");
511 if ((jq_obj == null) || (url == null))
512 return (false);
514 if (jq_obj.data ('begin') != null)
515 url += ";begin=" + jq_obj.data ('begin');
516 if (jq_obj.data ('end') != null)
517 url += ";end=" + jq_obj.data ('end');
519 jq_obj.attr ("src", url);
520 return (true);
521 } /* }}} function zoom_redraw */
523 function zoom_reset (graph_id, diff) /* {{{ */
524 {
525 var jq_obj;
526 var end;
527 var begin;
529 jq_obj = $("#" + graph_id);
530 if (jq_obj == null)
531 return (false);
533 end = new Number ((new Date ()).getTime () / 1000);
534 begin = new Number (end - diff);
536 jq_obj.data ('begin', begin.toFixed (0));
537 jq_obj.data ('end', end.toFixed (0));
539 return (zoom_redraw (jq_obj));
540 } /* }}} function zoom_reset */
542 function zoom_hour (graph_id) /* {{{ */
543 {
544 zoom_reset (graph_id, 3600);
545 } /* }}} function zoom_hour */
547 function zoom_day (graph_id) /* {{{ */
548 {
549 zoom_reset (graph_id, 86400);
550 } /* }}} function zoom_day */
552 function zoom_week (graph_id) /* {{{ */
553 {
554 zoom_reset (graph_id, 7 * 86400);
555 } /* }}} function zoom_week */
557 function zoom_month (graph_id) /* {{{ */
558 {
559 zoom_reset (graph_id, 31 * 86400);
560 } /* }}} function zoom_month */
562 function zoom_year (graph_id) /* {{{ */
563 {
564 zoom_reset (graph_id, 366 * 86400);
565 } /* }}} function zoom_year */
567 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
568 {
569 var jq_obj;
570 var end;
571 var begin;
572 var diff;
574 jq_obj = $("#" + graph_id);
575 if (jq_obj == null)
576 return (false);
578 begin = jq_obj.data ('begin');
579 end = jq_obj.data ('end');
580 if ((begin == null) || (end == null))
581 return (zoom_day (graph_id));
583 begin = new Number (begin);
584 end = new Number (end);
586 diff = end - begin;
587 if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
588 return (true);
590 jq_obj.data ('begin', begin + (diff * factor_begin));
591 jq_obj.data ('end', end + (diff * factor_end));
593 return (zoom_redraw (jq_obj));
594 } /* }}} function zoom_relative */
596 function zoom_reference (graph_id) /* {{{ */
597 {
598 var jq_obj;
599 var end;
600 var begin;
602 jq_obj = $("#" + graph_id);
603 if (jq_obj == null)
604 return (false);
606 begin = jq_obj.data ('begin');
607 end = jq_obj.data ('end');
608 if ((begin == null) || (end == null))
609 return (false);
611 $(".graph-img img").each (function ()
612 {
613 $(this).data ('begin', begin);
614 $(this).data ('end', end);
615 zoom_redraw ($(this));
616 });
617 } /* }}} function zoom_reference */
619 function zoom_earlier (graph_id) /* {{{ */
620 {
621 return (zoom_relative (graph_id, -0.2, -0.2));
622 } /* }}} function zoom_earlier */
624 function zoom_later (graph_id) /* {{{ */
625 {
626 return (zoom_relative (graph_id, +0.2, +0.2));
627 } /* }}} function zoom_later */
629 function zoom_in (graph_id) /* {{{ */
630 {
631 return (zoom_relative (graph_id, +0.2, -0.2));
632 } /* }}} function zoom_earlier */
634 function zoom_out (graph_id) /* {{{ */
635 {
636 return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
637 } /* }}} function zoom_earlier */
639 function graph_recalc_width () /* {{{ */
640 {
641 var tmp;
643 tmp = $("#layout-middle-center").width ();
644 if (!tmp)
645 return;
647 if (tmp < 324)
648 tmp = 324;
650 c4.config.width = tmp;
651 c4.config.height = Math.round (tmp / 1.61803398874989484820);
652 $(".graph-json").each (function ()
653 {
654 $(this).width (c4.config.width);
655 $(this).height (c4.config.height);
656 });
657 } /* }}} function graph_recalc_width */
659 $(document).ready(function() {
660 /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
661 $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
662 $("#search-suggest").hide ();
664 $("#search-input").blur (function()
665 {
666 window.setTimeout (function ()
667 {
668 $("#search-suggest").hide ();
669 }, 500);
670 });
672 $("#search-input").focus (function()
673 {
674 var term = $("#search-input").val ();
675 if (term.length < 2)
676 {
677 $("#search-suggest").hide ();
678 }
679 else
680 {
681 $("#search-suggest").show ();
682 }
683 });
685 $("#search-input").keyup (function()
686 {
687 update_search_suggestions ();
688 });
690 var graph_count = 0;
691 $(".graph-img").each (function (index, elem)
692 {
693 var id = "graph" + graph_count;
694 graph_count++;
696 $(this).find ("img").each (function (img_index, img_elem)
697 {
698 var base_url;
700 $(this).attr ("id", id);
702 base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
703 $(this).data ("base_url", base_url);
704 });
706 $(this).append ("<div class=\"graph-buttons presets\">"
707 + "<div class=\"graph-button\" onClick=\"zoom_hour ('"+id+"');\">H</div>"
708 + "<div class=\"graph-button\" onClick=\"zoom_day ('"+id+"');\">D</div>"
709 + "<div class=\"graph-button\" onClick=\"zoom_week ('"+id+"');\">W</div>"
710 + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
711 + "<div class=\"graph-button\" onClick=\"zoom_year ('"+id+"');\">Y</div>"
712 + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
713 + "</div>"
714 + "<div class=\"graph-buttons navigation\">"
715 + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">←</div>"
716 + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">−</div>"
717 + "<div class=\"graph-button\" onClick=\"zoom_in ('"+id+"');\">+</div>"
718 + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">→</div>"
719 + "</div>"
720 );
721 });
723 graph_recalc_width ();
725 var i;
726 for (i = 0; i < c4.instances.length; i++)
727 {
728 json_graph_update (i);
729 }
730 });
732 /* vim: set sw=2 sts=2 et fdm=marker : */