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.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 };
 227
 228   if (def.legend)
 229     chart_series.name = def.legend;
 230   else if (def.ds_name)
 231     chart_series.name = def.ds_name;
 232
 233   if (def.area)
 234     chart_series.type = 'area';
 235
 236   if (def.stack)
 237     chart_series.stacking = 'normal';
 238
 239   if ((def.color) && (def.color != 'random'))
 240     chart_series.color = def.color;
 241
 242   chart_opts.series.push (chart_series);
 243 } /* }}} function def_draw_one */
 244
 245 function def_draw (def, data_list, chart_opts) /* {{{ */
 246 {
 247   var i;
 248
 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;
 255
 256     def_draw_one (def, data_list[i], chart_opts);
 257   }
 258 } /* }}} function def_draw */
 259
 260 function instance_draw (inst, def, data_list) /* {{{ */
 261 {
 262   var x_data = [];
 263   var y_data = [];
 264   var i;
 265
 266   var chart_opts = new Object ();
 267
 268   if (!inst || !def || !data_list)
 269     return;
 270
 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 ();
 291
 292   if (def.title)
 293     chart_opts.title = { text: def.title };
 294
 295   for (i = def.defs.length - 1; i >= 0; i--)
 296     def_draw (def.defs[i], data_list, chart_opts);
 297
 298 //  if ((def.defs.length == 0) && (data_list.length == 1))
 299 //    def_draw_one (null, data_list[0], chart_opts);
 300
 301   inst.chart = new Highcharts.Chart (chart_opts);
 302 } /* }}} function instance_draw */
 303
 304 function json_graph_update (index) /* {{{ */
 305 {
 306   var inst;
 307   var def;
 308   var params;
 309
 310   inst = c4.instances[index];
 311   if (!inst)
 312     return;
 313
 314   def = inst_get_defs (inst);
 315   if (!def)
 316     return;
 317
 318   if (!inst.container)
 319     inst.container = "c4-graph" + index;
 320
 321   params = instance_get_params (inst);
 322   params.action = "instance_data_json";
 323   params.begin = inst.begin;
 324   params.end = inst.end;
 325
 326   $.getJSON ("collection.fcgi", params,
 327       function (data)
 328       {
 329         instance_draw (inst, def, data);
 330       }); /* getJSON */
 331 } /* }}} json_graph_update */
 332
 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 }
 339
 340 function format_instance_list(instances)
 341 {
 342   var ret = "<ul class=\"instance_list\">";
 343   var i;
 344
 345   if (instances.length == 0)
 346     return ("");
 347
 348   for (i = 0; i < instances.length; i++)
 349     ret += format_instance (instances[i]);
 350
 351   ret += "</ul>";
 352
 353   return (ret);
 354 }
 355
 356 function format_graph(graph)
 357 {
 358   return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
 359 }
 360
 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   }
 369
 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 */
 385
 386 function zoom_redraw (jq_obj) /* {{{ */
 387 {
 388   var url = jq_obj.data ("base_url");
 389
 390   if ((jq_obj == null) || (url == null))
 391     return (false);
 392
 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');
 397
 398   jq_obj.attr ("src", url);
 399   return (true);
 400 } /* }}} function zoom_redraw */
 401
 402 function zoom_reset (graph_id, diff) /* {{{ */
 403 {
 404   var jq_obj;
 405   var end;
 406   var begin;
 407
 408   jq_obj = $("#" + graph_id);
 409   if (jq_obj == null)
 410     return (false);
 411
 412   end = new Number ((new Date ()).getTime () / 1000);
 413   begin = new Number (end - diff);
 414
 415   jq_obj.data ('begin', begin.toFixed (0));
 416   jq_obj.data ('end', end.toFixed (0));
 417
 418   return (zoom_redraw (jq_obj));
 419 } /* }}} function zoom_reset */
 420
 421 function zoom_hour (graph_id) /* {{{ */
 422 {
 423   zoom_reset (graph_id, 3600);
 424 } /* }}} function zoom_hour */
 425
 426 function zoom_day (graph_id) /* {{{ */
 427 {
 428   zoom_reset (graph_id, 86400);
 429 } /* }}} function zoom_day */
 430
 431 function zoom_week (graph_id) /* {{{ */
 432 {
 433   zoom_reset (graph_id, 7 * 86400);
 434 } /* }}} function zoom_week */
 435
 436 function zoom_month (graph_id) /* {{{ */
 437 {
 438   zoom_reset (graph_id, 31 * 86400);
 439 } /* }}} function zoom_month */
 440
 441 function zoom_year (graph_id) /* {{{ */
 442 {
 443   zoom_reset (graph_id, 366 * 86400);
 444 } /* }}} function zoom_year */
 445
 446 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
 447 {
 448   var jq_obj;
 449   var end;
 450   var begin;
 451   var diff;
 452
 453   jq_obj = $("#" + graph_id);
 454   if (jq_obj == null)
 455     return (false);
 456
 457   begin = jq_obj.data ('begin');
 458   end = jq_obj.data ('end');
 459   if ((begin == null) || (end == null))
 460     return (zoom_day (graph_id));
 461
 462   begin = new Number (begin);
 463   end = new Number (end);
 464
 465   diff = end - begin;
 466   if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
 467     return (true);
 468
 469   jq_obj.data ('begin', begin + (diff * factor_begin));
 470   jq_obj.data ('end', end + (diff * factor_end));
 471
 472   return (zoom_redraw (jq_obj));
 473 } /* }}} function zoom_relative */
 474
 475 function zoom_reference (graph_id) /* {{{ */
 476 {
 477   var jq_obj;
 478   var end;
 479   var begin;
 480
 481   jq_obj = $("#" + graph_id);
 482   if (jq_obj == null)
 483     return (false);
 484
 485   begin = jq_obj.data ('begin');
 486   end = jq_obj.data ('end');
 487   if ((begin == null) || (end == null))
 488     return (false);
 489
 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 */
 497
 498 function zoom_earlier (graph_id) /* {{{ */
 499 {
 500   return (zoom_relative (graph_id, -0.2, -0.2));
 501 } /* }}} function zoom_earlier */
 502
 503 function zoom_later (graph_id) /* {{{ */
 504 {
 505   return (zoom_relative (graph_id, +0.2, +0.2));
 506 } /* }}} function zoom_later */
 507
 508 function zoom_in (graph_id) /* {{{ */
 509 {
 510   return (zoom_relative (graph_id, +0.2, -0.2));
 511 } /* }}} function zoom_earlier */
 512
 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 */
 517
 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 ();
 522
 523     $("#search-input").blur (function()
 524     {
 525       window.setTimeout (function ()
 526       {
 527         $("#search-suggest").hide ();
 528       }, 500);
 529     });
 530
 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     });
 543
 544     $("#search-input").keyup (function()
 545     {
 546       update_search_suggestions ();
 547     });
 548
 549     var graph_count = 0;
 550     $(".graph-img").each (function (index, elem)
 551     {
 552       var id = "graph" + graph_count;
 553       graph_count++;
 554
 555       $(this).find ("img").each (function (img_index, img_elem)
 556       {
 557         var base_url;
 558
 559         $(this).attr ("id", id);
 560
 561         base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
 562         $(this).data ("base_url", base_url);
 563       });
 564
 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     });
 581
 582     var i;
 583     for (i = 0; i < c4.instances.length; i++)
 584     {
 585       json_graph_update (i);
 586     }
 587 });
 588
 589 /* vim: set sw=2 sts=2 et fdm=marker : */