share/collection.js

   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  **/
  23
  24 var c4 =
  25 {
  26   instances: []
  27 };
  28
  29 function value_to_string (value) /* {{{ */
  30 {
  31   var abs_value = Math.abs (value);
  32
  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 */
  56
  57 function instance_get_params (inst) /* {{{ */
  58 {
  59   var graph_selector = inst.graph_selector;
  60   var inst_selector = inst.instance_selector;
  61   var selector = {};
  62
  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   }
  72
  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   }
  82
  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   }
  92
  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   }
 102
 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   }
 112
 113   return (selector);
 114 } /* }}} instance_get_params */
 115
 116 function ident_clone (ident) /* {{{ */
 117 {
 118   var ret = {};
 119
 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;
 125
 126   return (ret);
 127 } /* }}} ident_clone */
 128
 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";
 135
 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;
 145
 146         inst.def = data;
 147       }});
 148   }
 149
 150   if (inst.def)
 151     return (inst.def);
 152   return;
 153 } /* }}} inst_get_defs */
 154
 155 function ident_matches (selector, ident) /* {{{ */
 156 {
 157   var part_matches = function (s,p)
 158   {
 159     if (s == null)
 160       return (false);
 161
 162     if ((s == "/any/") || (s == "/all/"))
 163       return (true);
 164
 165     if (p == null)
 166       return (false);
 167
 168     if (s == p)
 169       return (true);
 170
 171     return (false);
 172   };
 173
 174   if (!part_matches (selector.host, ident.host))
 175     return (false);
 176
 177   if (!part_matches (selector.plugin, ident.plugin))
 178     return (false);
 179
 180   if (!part_matches (selector.plugin_instance, ident.plugin_instance))
 181     return (false);
 182
 183   if (!part_matches (selector.type, ident.type))
 184     return (false);
 185
 186   if (!part_matches (selector.type_instance, ident.type_instance))
 187     return (false);
 188
 189   return (true);
 190 } /* }}} function ident_matches */
 191
 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   };
 204
 205   check_field ("host");
 206   check_field ("plugin");
 207   check_field ("plugin_instance");
 208   check_field ("type");
 209   check_field ("type_instance");
 210
 211   if (ret == "")
 212     return (null);
 213   return (ret);
 214 } /* }}} function ident_describe */
 215
 216 function def_draw_one (def, data, chart_opts) /* {{{ */
 217 {
 218   var chart_series = new Object ();
 219
 220   chart_series.type = 'line';
 221   chart_series.name = def.legend || def.data_source;
 222   chart_series.pointInterval = data.interval * 1000;
 223   chart_series.pointStart = data.first_value_time * 1000;
 224   chart_series.data = data.data;
 225   chart_series.lineWidth = 1;
 226   chart_series.shadow = false;
 227   chart_series.marker = { enabled: false };
 228
 229   if (def.area)
 230     chart_series.type = 'area';
 231
 232   if (def.stack)
 233     chart_series.stacking = 'normal';
 234
 235   if ((def.color) && (def.color != 'random'))
 236     chart_series.color = def.color;
 237
 238   chart_opts.series.push (chart_series);
 239 } /* }}} function def_draw_one */
 240
 241 function def_draw (def, data_list, chart_opts) /* {{{ */
 242 {
 243   var i;
 244
 245   for (i = 0; i < data_list.length; i++)
 246   {
 247     if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
 248       continue;
 249     if (!ident_matches (def.select, data_list[i].file))
 250       continue;
 251
 252     def_draw_one (def, data_list[i], chart_opts);
 253   }
 254 } /* }}} function def_draw */
 255
 256 function instance_draw (inst, def, data_list) /* {{{ */
 257 {
 258   var x_data = [];
 259   var y_data = [];
 260   var i;
 261
 262   var chart_opts = new Object ();
 263
 264   if (!inst || !def || !data_list)
 265     return;
 266
 267   chart_opts.chart =
 268   {
 269     renderTo: inst.container,
 270     zoomType: 'x'
 271   };
 272   chart_opts.xAxis =
 273   {
 274     type: 'datetime',
 275     maxZoom: 300, // five minutes
 276     title: { text: null }
 277   };
 278   chart_opts.yAxis =
 279   {
 280     labels:
 281     {
 282       formatter: function () { return (value_to_string (this.value)); }
 283     },
 284     endOnTick: false
 285   };
 286   chart_opts.series = new Array ();
 287
 288   if (def.title)
 289     chart_opts.title = { text: def.title };
 290
 291   for (i = def.defs.length - 1; i >= 0; i--)
 292     def_draw (def.defs[i], data_list, chart_opts);
 293
 294 //  if ((def.defs.length == 0) && (data_list.length == 1))
 295 //    def_draw_one (null, data_list[0], chart_opts);
 296
 297   inst.chart = new Highcharts.Chart (chart_opts);
 298 } /* }}} function instance_draw */
 299
 300 function json_graph_update (index) /* {{{ */
 301 {
 302   var inst;
 303   var def;
 304   var params;
 305
 306   inst = c4.instances[index];
 307   if (!inst)
 308     return;
 309
 310   def = inst_get_defs (inst);
 311   if (!def)
 312     return;
 313
 314   if (!inst.container)
 315     inst.container = "c4-graph" + index;
 316
 317   params = instance_get_params (inst);
 318   params.action = "instance_data_json";
 319   params.begin = inst.begin;
 320   params.end = inst.end;
 321
 322   $.getJSON ("collection.fcgi", params,
 323       function (data)
 324       {
 325         instance_draw (inst, def, data);
 326       }); /* getJSON */
 327 } /* }}} json_graph_update */
 328
 329 function format_instance(inst)
 330 {
 331   return ("<li class=\"instance\"><a href=\"" + location.pathname
 332       + "?action=show_instance;" + inst.params + "\">" + inst.description
 333       + "</a></li>");
 334 }
 335
 336 function format_instance_list(instances)
 337 {
 338   var ret = "<ul class=\"instance_list\">";
 339   var i;
 340
 341   if (instances.length == 0)
 342     return ("");
 343
 344   for (i = 0; i < instances.length; i++)
 345     ret += format_instance (instances[i]);
 346
 347   ret += "</ul>";
 348
 349   return (ret);
 350 }
 351
 352 function format_graph(graph)
 353 {
 354   return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
 355 }
 356
 357 function update_search_suggestions ()
 358 {
 359   var term = $("#search-input").val ();
 360   if (term.length < 2)
 361   {
 362     $("#search-suggest").hide ();
 363     return (true);
 364   }
 365
 366   $("#search-suggest").show ();
 367   $.getJSON ("collection.fcgi",
 368     { "action": "search_json", "q": term},
 369     function(data)
 370     {
 371       var i;
 372       $("#search-suggest").html ("");
 373       for (i = 0; i < data.length; i++)
 374       {
 375         var graph = data[i];
 376         $("#search-suggest").append (format_graph (graph));
 377       }
 378     }
 379   );
 380 } /* update_search_suggestions */
 381
 382 function zoom_redraw (jq_obj) /* {{{ */
 383 {
 384   var url = jq_obj.data ("base_url");
 385
 386   if ((jq_obj == null) || (url == null))
 387     return (false);
 388
 389   if (jq_obj.data ('begin') != null)
 390     url += ";begin=" + jq_obj.data ('begin');
 391   if (jq_obj.data ('end') != null)
 392     url += ";end=" + jq_obj.data ('end');
 393
 394   jq_obj.attr ("src", url);
 395   return (true);
 396 } /* }}} function zoom_redraw */
 397
 398 function zoom_reset (graph_id, diff) /* {{{ */
 399 {
 400   var jq_obj;
 401   var end;
 402   var begin;
 403
 404   jq_obj = $("#" + graph_id);
 405   if (jq_obj == null)
 406     return (false);
 407
 408   end = new Number ((new Date ()).getTime () / 1000);
 409   begin = new Number (end - diff);
 410
 411   jq_obj.data ('begin', begin.toFixed (0));
 412   jq_obj.data ('end', end.toFixed (0));
 413
 414   return (zoom_redraw (jq_obj));
 415 } /* }}} function zoom_reset */
 416
 417 function zoom_hour (graph_id) /* {{{ */
 418 {
 419   zoom_reset (graph_id, 3600);
 420 } /* }}} function zoom_hour */
 421
 422 function zoom_day (graph_id) /* {{{ */
 423 {
 424   zoom_reset (graph_id, 86400);
 425 } /* }}} function zoom_day */
 426
 427 function zoom_week (graph_id) /* {{{ */
 428 {
 429   zoom_reset (graph_id, 7 * 86400);
 430 } /* }}} function zoom_week */
 431
 432 function zoom_month (graph_id) /* {{{ */
 433 {
 434   zoom_reset (graph_id, 31 * 86400);
 435 } /* }}} function zoom_month */
 436
 437 function zoom_year (graph_id) /* {{{ */
 438 {
 439   zoom_reset (graph_id, 366 * 86400);
 440 } /* }}} function zoom_year */
 441
 442 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
 443 {
 444   var jq_obj;
 445   var end;
 446   var begin;
 447   var diff;
 448
 449   jq_obj = $("#" + graph_id);
 450   if (jq_obj == null)
 451     return (false);
 452
 453   begin = jq_obj.data ('begin');
 454   end = jq_obj.data ('end');
 455   if ((begin == null) || (end == null))
 456     return (zoom_day (graph_id));
 457
 458   begin = new Number (begin);
 459   end = new Number (end);
 460
 461   diff = end - begin;
 462   if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
 463     return (true);
 464
 465   jq_obj.data ('begin', begin + (diff * factor_begin));
 466   jq_obj.data ('end', end + (diff * factor_end));
 467
 468   return (zoom_redraw (jq_obj));
 469 } /* }}} function zoom_relative */
 470
 471 function zoom_reference (graph_id) /* {{{ */
 472 {
 473   var jq_obj;
 474   var end;
 475   var begin;
 476
 477   jq_obj = $("#" + graph_id);
 478   if (jq_obj == null)
 479     return (false);
 480
 481   begin = jq_obj.data ('begin');
 482   end = jq_obj.data ('end');
 483   if ((begin == null) || (end == null))
 484     return (false);
 485
 486   $(".graph-img img").each (function ()
 487   {
 488     $(this).data ('begin', begin);
 489     $(this).data ('end', end);
 490     zoom_redraw ($(this));
 491   });
 492 } /* }}} function zoom_reference */
 493
 494 function zoom_earlier (graph_id) /* {{{ */
 495 {
 496   return (zoom_relative (graph_id, -0.2, -0.2));
 497 } /* }}} function zoom_earlier */
 498
 499 function zoom_later (graph_id) /* {{{ */
 500 {
 501   return (zoom_relative (graph_id, +0.2, +0.2));
 502 } /* }}} function zoom_later */
 503
 504 function zoom_in (graph_id) /* {{{ */
 505 {
 506   return (zoom_relative (graph_id, +0.2, -0.2));
 507 } /* }}} function zoom_earlier */
 508
 509 function zoom_out (graph_id) /* {{{ */
 510 {
 511   return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
 512 } /* }}} function zoom_earlier */
 513
 514 $(document).ready(function() {
 515     /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
 516     $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
 517     $("#search-suggest").hide ();
 518
 519     $("#search-input").blur (function()
 520     {
 521       window.setTimeout (function ()
 522       {
 523         $("#search-suggest").hide ();
 524       }, 500);
 525     });
 526
 527     $("#search-input").focus (function()
 528     {
 529       var term = $("#search-input").val ();
 530       if (term.length < 2)
 531       {
 532         $("#search-suggest").hide ();
 533       }
 534       else
 535       {
 536         $("#search-suggest").show ();
 537       }
 538     });
 539
 540     $("#search-input").keyup (function()
 541     {
 542       update_search_suggestions ();
 543     });
 544
 545     var graph_count = 0;
 546     $(".graph-img").each (function (index, elem)
 547     {
 548       var id = "graph" + graph_count;
 549       graph_count++;
 550
 551       $(this).find ("img").each (function (img_index, img_elem)
 552       {
 553         var base_url;
 554
 555         $(this).attr ("id", id);
 556
 557         base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
 558         $(this).data ("base_url", base_url);
 559       });
 560
 561       $(this).append ("<div class=\"graph-buttons presets\">"
 562         + "<div class=\"graph-button\" onClick=\"zoom_hour  ('"+id+"');\">H</div>"
 563         + "<div class=\"graph-button\" onClick=\"zoom_day   ('"+id+"');\">D</div>"
 564         + "<div class=\"graph-button\" onClick=\"zoom_week  ('"+id+"');\">W</div>"
 565         + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
 566         + "<div class=\"graph-button\" onClick=\"zoom_year  ('"+id+"');\">Y</div>"
 567         + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
 568         + "</div>"
 569         + "<div class=\"graph-buttons navigation\">"
 570         + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">←</div>"
 571         + "<div class=\"graph-button\" onClick=\"zoom_out     ('"+id+"');\">−</div>"
 572         + "<div class=\"graph-button\" onClick=\"zoom_in      ('"+id+"');\">+</div>"
 573         + "<div class=\"graph-button\" onClick=\"zoom_later   ('"+id+"');\">→</div>"
 574         + "</div>"
 575         );
 576     });
 577
 578     var i;
 579     for (i = 0; i < c4.instances.length; i++)
 580     {
 581       json_graph_update (i);
 582     }
 583 });
 584
 585 /* vim: set sw=2 sts=2 et fdm=marker : */