6aff20fb41d4883b00d366b5de64574a89bd005e
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 = Math.abs (value);
33 if ((abs_value < 10000) && (abs_value >= 0.1))
34 return ("" + value);
35 else if (abs_value > 1)
36 {
37 if (abs_value < 10000000)
38 return ("" + (value / 1000) + "k");
39 else if (abs_value < 10000000000)
40 return ("" + (value / 1000000) + "M");
41 else if (abs_value < 10000000000000)
42 return ("" + (value / 1000000000) + "G");
43 else
44 return ("" + (value / 1000000000000) + "T");
45 }
46 else
47 {
48 if (abs_value >= 0.001)
49 return ("" + (value * 1000) + "m");
50 else if (abs_value >= 0.000001)
51 return ("" + (value * 1000000) + "u");
52 else
53 return ("" + (value * 1000000000) + "n");
54 }
55 } /* }}} function value_to_string */
57 function instance_get_params (inst) /* {{{ */
58 {
59 var graph_selector = inst.graph_selector;
60 var inst_selector = inst.instance_selector;
61 var selector = {};
63 if (graph_selector.host == inst_selector.host)
64 {
65 selector.host = graph_selector.host;
66 }
67 else
68 {
69 selector.graph_host = graph_selector.host;
70 selector.inst_host = inst_selector.host;
71 }
73 if (graph_selector.plugin == inst_selector.plugin)
74 {
75 selector.plugin = graph_selector.plugin;
76 }
77 else
78 {
79 selector.graph_plugin = graph_selector.plugin;
80 selector.inst_plugin = inst_selector.plugin;
81 }
83 if (graph_selector.plugin_instance == inst_selector.plugin_instance)
84 {
85 selector.plugin_instance = graph_selector.plugin_instance;
86 }
87 else
88 {
89 selector.graph_plugin_instance = graph_selector.plugin_instance;
90 selector.inst_plugin_instance = inst_selector.plugin_instance;
91 }
93 if (graph_selector.type == inst_selector.type)
94 {
95 selector.type = graph_selector.type;
96 }
97 else
98 {
99 selector.graph_type = graph_selector.type;
100 selector.inst_type = inst_selector.type;
101 }
103 if (graph_selector.type_instance == inst_selector.type_instance)
104 {
105 selector.type_instance = graph_selector.type_instance;
106 }
107 else
108 {
109 selector.graph_type_instance = graph_selector.type_instance;
110 selector.inst_type_instance = inst_selector.type_instance;
111 }
113 return (selector);
114 } /* }}} instance_get_params */
116 function ident_clone (ident) /* {{{ */
117 {
118 var ret = {};
120 ret.host = ident.host;
121 ret.plugin = ident.plugin;
122 ret.plugin_instance = ident.plugin_instance;
123 ret.type = ident.type;
124 ret.type_instance = ident.type_instance;
126 return (ret);
127 } /* }}} ident_clone */
129 function inst_get_defs (inst) /* {{{ */
130 {
131 if (!inst.def)
132 {
133 var params = instance_get_params (inst);
134 params.action = "graph_def_json";
136 $.ajax({
137 url: "collection.fcgi",
138 async: false,
139 dataType: 'json',
140 data: params,
141 success: function (data)
142 {
143 if (!data)
144 return;
146 inst.def = data;
147 }});
148 }
150 if (inst.def)
151 return (inst.def);
152 return;
153 } /* }}} inst_get_defs */
155 function ident_matches (selector, ident) /* {{{ */
156 {
157 var part_matches = function (s,p)
158 {
159 if (s == null)
160 return (false);
162 if ((s == "/any/") || (s == "/all/"))
163 return (true);
165 if (p == null)
166 return (false);
168 if (s == p)
169 return (true);
171 return (false);
172 };
174 if (!part_matches (selector.host, ident.host))
175 return (false);
177 if (!part_matches (selector.plugin, ident.plugin))
178 return (false);
180 if (!part_matches (selector.plugin_instance, ident.plugin_instance))
181 return (false);
183 if (!part_matches (selector.type, ident.type))
184 return (false);
186 if (!part_matches (selector.type_instance, ident.type_instance))
187 return (false);
189 return (true);
190 } /* }}} function ident_matches */
192 function ident_describe (ident, selector) /* {{{ */
193 {
194 var ret = "";
195 var check_field = function (field)
196 {
197 if (ident[field].toLowerCase () != selector[field].toLowerCase ())
198 {
199 if (ret != "")
200 ret += "/";
201 ret += ident[field];
202 }
203 };
205 check_field ("host");
206 check_field ("plugin");
207 check_field ("plugin_instance");
208 check_field ("type");
209 check_field ("type_instance");
211 if (ret == "")
212 return (null);
213 return (ret);
214 } /* }}} function ident_describe */
216 function def_draw_one (def, data, chart_opts) /* {{{ */
217 {
218 var chart_series = new Object ();
220 chart_series.type = 'line';
221 chart_series.pointInterval = data.interval * 1000;
222 chart_series.pointStart = data.first_value_time * 1000;
223 chart_series.data = data.data;
224 chart_series.lineWidth = 1;
225 chart_series.shadow = false;
226 chart_series.marker = { enabled: false };
228 if (def.legend)
229 chart_series.name = def.legend;
230 else if (def.ds_name)
231 chart_series.name = def.ds_name;
233 if (def.area)
234 chart_series.type = 'area';
236 if (def.stack)
237 chart_series.stacking = 'normal';
239 if ((def.color) && (def.color != 'random'))
240 chart_series.color = def.color;
242 chart_opts.series.push (chart_series);
243 } /* }}} function def_draw_one */
245 function def_draw (def, data_list, chart_opts) /* {{{ */
246 {
247 var i;
249 for (i = 0; i < data_list.length; i++)
250 {
251 if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
252 continue;
253 if (!ident_matches (def.select, data_list[i].file))
254 continue;
256 def_draw_one (def, data_list[i], chart_opts);
257 }
258 } /* }}} function def_draw */
260 function instance_draw (inst, def, data_list) /* {{{ */
261 {
262 var x_data = [];
263 var y_data = [];
264 var i;
266 var chart_opts = new Object ();
268 if (!inst || !def || !data_list)
269 return;
271 chart_opts.chart =
272 {
273 renderTo: inst.container,
274 zoomType: 'x'
275 };
276 chart_opts.xAxis =
277 {
278 type: 'datetime',
279 maxZoom: 300, // five minutes
280 title: { text: null }
281 };
282 chart_opts.yAxis =
283 {
284 labels:
285 {
286 formatter: function () { return (value_to_string (this.value)); }
287 },
288 endOnTick: false
289 };
290 chart_opts.series = new Array ();
292 if (def.title)
293 chart_opts.title = { text: def.title };
295 for (i = def.defs.length - 1; i >= 0; i--)
296 def_draw (def.defs[i], data_list, chart_opts);
298 // if ((def.defs.length == 0) && (data_list.length == 1))
299 // def_draw_one (null, data_list[0], chart_opts);
301 inst.chart = new Highcharts.Chart (chart_opts);
302 } /* }}} function instance_draw */
304 function json_graph_update (index) /* {{{ */
305 {
306 var inst;
307 var def;
308 var params;
310 inst = c4.instances[index];
311 if (!inst)
312 return;
314 def = inst_get_defs (inst);
315 if (!def)
316 return;
318 if (!inst.container)
319 inst.container = "c4-graph" + index;
321 params = instance_get_params (inst);
322 params.action = "instance_data_json";
323 params.begin = inst.begin;
324 params.end = inst.end;
326 $.getJSON ("collection.fcgi", params,
327 function (data)
328 {
329 instance_draw (inst, def, data);
330 }); /* getJSON */
331 } /* }}} json_graph_update */
333 function format_instance(inst)
334 {
335 return ("<li class=\"instance\"><a href=\"" + location.pathname
336 + "?action=show_instance;" + inst.params + "\">" + inst.description
337 + "</a></li>");
338 }
340 function format_instance_list(instances)
341 {
342 var ret = "<ul class=\"instance_list\">";
343 var i;
345 if (instances.length == 0)
346 return ("");
348 for (i = 0; i < instances.length; i++)
349 ret += format_instance (instances[i]);
351 ret += "</ul>";
353 return (ret);
354 }
356 function format_graph(graph)
357 {
358 return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
359 }
361 function update_search_suggestions ()
362 {
363 var term = $("#search-input").val ();
364 if (term.length < 2)
365 {
366 $("#search-suggest").hide ();
367 return (true);
368 }
370 $("#search-suggest").show ();
371 $.getJSON ("collection.fcgi",
372 { "action": "search_json", "q": term},
373 function(data)
374 {
375 var i;
376 $("#search-suggest").html ("");
377 for (i = 0; i < data.length; i++)
378 {
379 var graph = data[i];
380 $("#search-suggest").append (format_graph (graph));
381 }
382 }
383 );
384 } /* update_search_suggestions */
386 function zoom_redraw (jq_obj) /* {{{ */
387 {
388 var url = jq_obj.data ("base_url");
390 if ((jq_obj == null) || (url == null))
391 return (false);
393 if (jq_obj.data ('begin') != null)
394 url += ";begin=" + jq_obj.data ('begin');
395 if (jq_obj.data ('end') != null)
396 url += ";end=" + jq_obj.data ('end');
398 jq_obj.attr ("src", url);
399 return (true);
400 } /* }}} function zoom_redraw */
402 function zoom_reset (graph_id, diff) /* {{{ */
403 {
404 var jq_obj;
405 var end;
406 var begin;
408 jq_obj = $("#" + graph_id);
409 if (jq_obj == null)
410 return (false);
412 end = new Number ((new Date ()).getTime () / 1000);
413 begin = new Number (end - diff);
415 jq_obj.data ('begin', begin.toFixed (0));
416 jq_obj.data ('end', end.toFixed (0));
418 return (zoom_redraw (jq_obj));
419 } /* }}} function zoom_reset */
421 function zoom_hour (graph_id) /* {{{ */
422 {
423 zoom_reset (graph_id, 3600);
424 } /* }}} function zoom_hour */
426 function zoom_day (graph_id) /* {{{ */
427 {
428 zoom_reset (graph_id, 86400);
429 } /* }}} function zoom_day */
431 function zoom_week (graph_id) /* {{{ */
432 {
433 zoom_reset (graph_id, 7 * 86400);
434 } /* }}} function zoom_week */
436 function zoom_month (graph_id) /* {{{ */
437 {
438 zoom_reset (graph_id, 31 * 86400);
439 } /* }}} function zoom_month */
441 function zoom_year (graph_id) /* {{{ */
442 {
443 zoom_reset (graph_id, 366 * 86400);
444 } /* }}} function zoom_year */
446 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
447 {
448 var jq_obj;
449 var end;
450 var begin;
451 var diff;
453 jq_obj = $("#" + graph_id);
454 if (jq_obj == null)
455 return (false);
457 begin = jq_obj.data ('begin');
458 end = jq_obj.data ('end');
459 if ((begin == null) || (end == null))
460 return (zoom_day (graph_id));
462 begin = new Number (begin);
463 end = new Number (end);
465 diff = end - begin;
466 if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
467 return (true);
469 jq_obj.data ('begin', begin + (diff * factor_begin));
470 jq_obj.data ('end', end + (diff * factor_end));
472 return (zoom_redraw (jq_obj));
473 } /* }}} function zoom_relative */
475 function zoom_reference (graph_id) /* {{{ */
476 {
477 var jq_obj;
478 var end;
479 var begin;
481 jq_obj = $("#" + graph_id);
482 if (jq_obj == null)
483 return (false);
485 begin = jq_obj.data ('begin');
486 end = jq_obj.data ('end');
487 if ((begin == null) || (end == null))
488 return (false);
490 $(".graph-img img").each (function ()
491 {
492 $(this).data ('begin', begin);
493 $(this).data ('end', end);
494 zoom_redraw ($(this));
495 });
496 } /* }}} function zoom_reference */
498 function zoom_earlier (graph_id) /* {{{ */
499 {
500 return (zoom_relative (graph_id, -0.2, -0.2));
501 } /* }}} function zoom_earlier */
503 function zoom_later (graph_id) /* {{{ */
504 {
505 return (zoom_relative (graph_id, +0.2, +0.2));
506 } /* }}} function zoom_later */
508 function zoom_in (graph_id) /* {{{ */
509 {
510 return (zoom_relative (graph_id, +0.2, -0.2));
511 } /* }}} function zoom_earlier */
513 function zoom_out (graph_id) /* {{{ */
514 {
515 return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
516 } /* }}} function zoom_earlier */
518 $(document).ready(function() {
519 /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
520 $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
521 $("#search-suggest").hide ();
523 $("#search-input").blur (function()
524 {
525 window.setTimeout (function ()
526 {
527 $("#search-suggest").hide ();
528 }, 500);
529 });
531 $("#search-input").focus (function()
532 {
533 var term = $("#search-input").val ();
534 if (term.length < 2)
535 {
536 $("#search-suggest").hide ();
537 }
538 else
539 {
540 $("#search-suggest").show ();
541 }
542 });
544 $("#search-input").keyup (function()
545 {
546 update_search_suggestions ();
547 });
549 var graph_count = 0;
550 $(".graph-img").each (function (index, elem)
551 {
552 var id = "graph" + graph_count;
553 graph_count++;
555 $(this).find ("img").each (function (img_index, img_elem)
556 {
557 var base_url;
559 $(this).attr ("id", id);
561 base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
562 $(this).data ("base_url", base_url);
563 });
565 $(this).append ("<div class=\"graph-buttons presets\">"
566 + "<div class=\"graph-button\" onClick=\"zoom_hour ('"+id+"');\">H</div>"
567 + "<div class=\"graph-button\" onClick=\"zoom_day ('"+id+"');\">D</div>"
568 + "<div class=\"graph-button\" onClick=\"zoom_week ('"+id+"');\">W</div>"
569 + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
570 + "<div class=\"graph-button\" onClick=\"zoom_year ('"+id+"');\">Y</div>"
571 + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
572 + "</div>"
573 + "<div class=\"graph-buttons navigation\">"
574 + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">←</div>"
575 + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">−</div>"
576 + "<div class=\"graph-button\" onClick=\"zoom_in ('"+id+"');\">+</div>"
577 + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">→</div>"
578 + "</div>"
579 );
580 });
582 var i;
583 for (i = 0; i < c4.instances.length; i++)
584 {
585 json_graph_update (i);
586 }
587 });
589 /* vim: set sw=2 sts=2 et fdm=marker : */