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: new Array (),
  27   config:
  28   {
  29     width: 324,
  30     height: 200
  31   }
  32 };
  33
  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   }
  42
  43   if (value == null)
  44     return ('NaN');
  45   else if (value == 0)
  46     return ('0');
  47
  48   abs_value = Math.abs (value);
  49
  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 */
  73
  74 function instance_get_params (inst) /* {{{ */
  75 {
  76   var graph_selector = inst.graph_selector;
  77   var inst_selector = inst.instance_selector;
  78   var selector = {};
  79
  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   }
  89
  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   }
  99
 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   }
 109
 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   }
 119
 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   }
 129
 130   return (selector);
 131 } /* }}} instance_get_params */
 132
 133 function ident_clone (ident) /* {{{ */
 134 {
 135   var ret = {};
 136
 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;
 142
 143   return (ret);
 144 } /* }}} ident_clone */
 145
 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";
 152
 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;
 162
 163         inst.def = data;
 164       }});
 165   }
 166
 167   if (inst.def)
 168     return (inst.def);
 169   return;
 170 } /* }}} inst_get_defs */
 171
 172 function ident_matches (selector, ident) /* {{{ */
 173 {
 174   var part_matches = function (s,p)
 175   {
 176     if (s == null)
 177       return (false);
 178
 179     if ((s == "/any/") || (s == "/all/"))
 180       return (true);
 181
 182     if (p == null)
 183       return (false);
 184
 185     if (s == p)
 186       return (true);
 187
 188     return (false);
 189   };
 190
 191   if (!part_matches (selector.host, ident.host))
 192     return (false);
 193
 194   if (!part_matches (selector.plugin, ident.plugin))
 195     return (false);
 196
 197   if (!part_matches (selector.plugin_instance, ident.plugin_instance))
 198     return (false);
 199
 200   if (!part_matches (selector.type, ident.type))
 201     return (false);
 202
 203   if (!part_matches (selector.type_instance, ident.type_instance))
 204     return (false);
 205
 206   return (true);
 207 } /* }}} function ident_matches */
 208
 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   };
 221
 222   check_field ("host");
 223   check_field ("plugin");
 224   check_field ("plugin_instance");
 225   check_field ("type");
 226   check_field ("type_instance");
 227
 228   if (ret == "")
 229     return (null);
 230   return (ret);
 231 } /* }}} function ident_describe */
 232
 233 function def_draw_one (def, data, series_array) /* {{{ */
 234 {
 235   var chart_series = new Object ();
 236
 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 };
 244
 245   if (def.legend)
 246     chart_series.name = def.legend;
 247   else if (def.ds_name)
 248     chart_series.name = def.ds_name;
 249
 250   if (def.area)
 251     chart_series.type = 'area';
 252
 253   if (def.stack)
 254     chart_series.stacking = 'normal';
 255
 256   if ((def.color) && (def.color != 'random'))
 257     chart_series.color = def.color;
 258
 259   series_array.push (chart_series);
 260 } /* }}} function def_draw_one */
 261
 262 function def_draw (def, data_list, series_array) /* {{{ */
 263 {
 264   var i;
 265
 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;
 272
 273     def_draw_one (def, data_list[i], series_array);
 274   }
 275 } /* }}} function def_draw */
 276
 277 function inst_get_chart_opts (inst, def) /* {{{ */
 278 {
 279   var chart_opts = new Object ();
 280
 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;
 297
 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;
 327
 328       for (i = 0; i < this.data.length; i++)
 329       {
 330         var v;
 331
 332         v = this.data[i].y;
 333         if (v == null)
 334           continue;
 335
 336         if (min > v)
 337           min = v;
 338         if (max < v)
 339           max = v;
 340
 341         sum += v;
 342         num++;
 343       }
 344
 345       if (num == 0)
 346       {
 347         min = null;
 348         max = null;
 349         avg = null;
 350       }
 351       else
 352       {
 353         avg = sum / num;
 354       }
 355
 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 ();
 362
 363   if (def.title)
 364     chart_opts.title = { text: def.title };
 365
 366   if (def.vertical_label)
 367     chart_opts.yAxis.title = { text: def.vertical_label };
 368
 369   return (chart_opts);
 370 } /* }}} function chart_opts_get */
 371
 372 function inst_draw (inst, def, data_list) /* {{{ */
 373 {
 374   var chart_opts;
 375   var i;
 376
 377   if (!inst || !def || !data_list)
 378     return;
 379
 380   chart_opts = inst_get_chart_opts (inst, def);
 381
 382   for (i = def.defs.length - 1; i >= 0; i--)
 383     def_draw (def.defs[i], data_list, chart_opts.series);
 384
 385   inst.chart = new Highcharts.Chart (chart_opts);
 386 } /* }}} function inst_draw */
 387
 388 function inst_redraw (inst, def, data_list) /* {{{ */
 389 {
 390   var series_array;
 391   var i;
 392
 393   if (!inst.chart)
 394     return (inst_draw (inst, def, data_list));
 395
 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);
 399
 400   if (inst.chart.series.length != series_array.length)
 401   {
 402     alert ("inst.chart.series.length != series_array.length");
 403     return;
 404   }
 405
 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   }
 411
 412   for (i = 0; i < series_array.length; i++)
 413     inst.chart.addSeries (series_array[i], /* redraw = */ false);
 414
 415   inst.chart.redraw ();
 416 } /* }}} function inst_redraw */
 417
 418 function inst_fetch_data (inst, begin, end) /* {{{ */
 419 {
 420   var def;
 421   var params;
 422
 423   def = inst_get_defs (inst);
 424   if (!def)
 425     return;
 426
 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);
 432
 433   $.getJSON ("collection.fcgi", params,
 434       function (data)
 435       {
 436         inst_redraw (inst, def, data);
 437       }); /* getJSON */
 438 } /* }}} inst_fetch_data */
 439
 440 function json_graph_update (index) /* {{{ */
 441 {
 442   var inst;
 443
 444   inst = c4.instances[index];
 445   if (!inst)
 446     return;
 447
 448   if (!inst.container)
 449     inst.container = "c4-graph" + index;
 450
 451   inst_fetch_data (inst);
 452 } /* }}} json_graph_update */
 453
 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 }
 460
 461 function format_instance_list(instances)
 462 {
 463   var ret = "<ul class=\"instance_list\">";
 464   var i;
 465
 466   if (instances.length == 0)
 467     return ("");
 468
 469   for (i = 0; i < instances.length; i++)
 470     ret += format_instance (instances[i]);
 471
 472   ret += "</ul>";
 473
 474   return (ret);
 475 }
 476
 477 function format_graph(graph)
 478 {
 479   return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
 480 }
 481
 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   }
 490
 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 */
 506
 507 function zoom_redraw (jq_obj) /* {{{ */
 508 {
 509   var url = jq_obj.data ("base_url");
 510
 511   if ((jq_obj == null) || (url == null))
 512     return (false);
 513
 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');
 518
 519   jq_obj.attr ("src", url);
 520   return (true);
 521 } /* }}} function zoom_redraw */
 522
 523 function zoom_reset (graph_id, diff) /* {{{ */
 524 {
 525   var jq_obj;
 526   var end;
 527   var begin;
 528
 529   jq_obj = $("#" + graph_id);
 530   if (jq_obj == null)
 531     return (false);
 532
 533   end = new Number ((new Date ()).getTime () / 1000);
 534   begin = new Number (end - diff);
 535
 536   jq_obj.data ('begin', begin.toFixed (0));
 537   jq_obj.data ('end', end.toFixed (0));
 538
 539   return (zoom_redraw (jq_obj));
 540 } /* }}} function zoom_reset */
 541
 542 function zoom_hour (graph_id) /* {{{ */
 543 {
 544   zoom_reset (graph_id, 3600);
 545 } /* }}} function zoom_hour */
 546
 547 function zoom_day (graph_id) /* {{{ */
 548 {
 549   zoom_reset (graph_id, 86400);
 550 } /* }}} function zoom_day */
 551
 552 function zoom_week (graph_id) /* {{{ */
 553 {
 554   zoom_reset (graph_id, 7 * 86400);
 555 } /* }}} function zoom_week */
 556
 557 function zoom_month (graph_id) /* {{{ */
 558 {
 559   zoom_reset (graph_id, 31 * 86400);
 560 } /* }}} function zoom_month */
 561
 562 function zoom_year (graph_id) /* {{{ */
 563 {
 564   zoom_reset (graph_id, 366 * 86400);
 565 } /* }}} function zoom_year */
 566
 567 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
 568 {
 569   var jq_obj;
 570   var end;
 571   var begin;
 572   var diff;
 573
 574   jq_obj = $("#" + graph_id);
 575   if (jq_obj == null)
 576     return (false);
 577
 578   begin = jq_obj.data ('begin');
 579   end = jq_obj.data ('end');
 580   if ((begin == null) || (end == null))
 581     return (zoom_day (graph_id));
 582
 583   begin = new Number (begin);
 584   end = new Number (end);
 585
 586   diff = end - begin;
 587   if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
 588     return (true);
 589
 590   jq_obj.data ('begin', begin + (diff * factor_begin));
 591   jq_obj.data ('end', end + (diff * factor_end));
 592
 593   return (zoom_redraw (jq_obj));
 594 } /* }}} function zoom_relative */
 595
 596 function zoom_reference (graph_id) /* {{{ */
 597 {
 598   var jq_obj;
 599   var end;
 600   var begin;
 601
 602   jq_obj = $("#" + graph_id);
 603   if (jq_obj == null)
 604     return (false);
 605
 606   begin = jq_obj.data ('begin');
 607   end = jq_obj.data ('end');
 608   if ((begin == null) || (end == null))
 609     return (false);
 610
 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 */
 618
 619 function zoom_earlier (graph_id) /* {{{ */
 620 {
 621   return (zoom_relative (graph_id, -0.2, -0.2));
 622 } /* }}} function zoom_earlier */
 623
 624 function zoom_later (graph_id) /* {{{ */
 625 {
 626   return (zoom_relative (graph_id, +0.2, +0.2));
 627 } /* }}} function zoom_later */
 628
 629 function zoom_in (graph_id) /* {{{ */
 630 {
 631   return (zoom_relative (graph_id, +0.2, -0.2));
 632 } /* }}} function zoom_earlier */
 633
 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 */
 638
 639 function graph_recalc_width () /* {{{ */
 640 {
 641   var tmp;
 642
 643   tmp = $("#layout-middle-center").width ();
 644   if (!tmp)
 645     return;
 646
 647   if (tmp < 324)
 648     tmp = 324;
 649
 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 */
 658
 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 ();
 663
 664     $("#search-input").blur (function()
 665     {
 666       window.setTimeout (function ()
 667       {
 668         $("#search-suggest").hide ();
 669       }, 500);
 670     });
 671
 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     });
 684
 685     $("#search-input").keyup (function()
 686     {
 687       update_search_suggestions ();
 688     });
 689
 690     var graph_count = 0;
 691     $(".graph-img").each (function (index, elem)
 692     {
 693       var id = "graph" + graph_count;
 694       graph_count++;
 695
 696       $(this).find ("img").each (function (img_index, img_elem)
 697       {
 698         var base_url;
 699
 700         $(this).attr ("id", id);
 701
 702         base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
 703         $(this).data ("base_url", base_url);
 704       });
 705
 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     });
 722
 723     graph_recalc_width ();
 724
 725     var i;
 726     for (i = 0; i < c4.instances.length; i++)
 727     {
 728       json_graph_update (i);
 729     }
 730 });
 731
 732 /* vim: set sw=2 sts=2 et fdm=marker : */