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;
  32   var v2s = function (value)
  33   {
  34     var tmp = Math.round (100.0 * value) / 100.0;
  35     return ("" + tmp);
  36   }
  37
  38   if (value == null)
  39     return ('NaN');
  40   else if (value == 0)
  41     return ('0');
  42
  43   abs_value = Math.abs (value);
  44
  45   if ((abs_value < 10000) && (abs_value >= 0.1))
  46     return (v2s (value));
  47   else if (abs_value > 1)
  48   {
  49     if (abs_value < 10000000)
  50       return (v2s (value / 1000) + "k");
  51     else if (abs_value < 10000000000)
  52       return (v2s (value / 1000000) + "M");
  53     else if (abs_value < 10000000000000)
  54       return (v2s (value / 1000000000) + "G");
  55     else
  56       return (v2s (value / 1000000000000) + "T");
  57   }
  58   else
  59   {
  60     if (abs_value >= 0.001)
  61       return (v2s (value * 1000) + "m");
  62     else if (abs_value >= 0.000001)
  63       return (v2s (value * 1000000) + "u");
  64     else
  65       return (v2s (value * 1000000000) + "n");
  66   }
  67 } /* }}} function value_to_string */
  68
  69 function instance_get_params (inst) /* {{{ */
  70 {
  71   var graph_selector = inst.graph_selector;
  72   var inst_selector = inst.instance_selector;
  73   var selector = {};
  74
  75   if (graph_selector.host == inst_selector.host)
  76   {
  77     selector.host = graph_selector.host;
  78   }
  79   else
  80   {
  81     selector.graph_host = graph_selector.host;
  82     selector.inst_host = inst_selector.host;
  83   }
  84
  85   if (graph_selector.plugin == inst_selector.plugin)
  86   {
  87     selector.plugin = graph_selector.plugin;
  88   }
  89   else
  90   {
  91     selector.graph_plugin = graph_selector.plugin;
  92     selector.inst_plugin = inst_selector.plugin;
  93   }
  94
  95   if (graph_selector.plugin_instance == inst_selector.plugin_instance)
  96   {
  97     selector.plugin_instance = graph_selector.plugin_instance;
  98   }
  99   else
 100   {
 101     selector.graph_plugin_instance = graph_selector.plugin_instance;
 102     selector.inst_plugin_instance = inst_selector.plugin_instance;
 103   }
 104
 105   if (graph_selector.type == inst_selector.type)
 106   {
 107     selector.type = graph_selector.type;
 108   }
 109   else
 110   {
 111     selector.graph_type = graph_selector.type;
 112     selector.inst_type = inst_selector.type;
 113   }
 114
 115   if (graph_selector.type_instance == inst_selector.type_instance)
 116   {
 117     selector.type_instance = graph_selector.type_instance;
 118   }
 119   else
 120   {
 121     selector.graph_type_instance = graph_selector.type_instance;
 122     selector.inst_type_instance = inst_selector.type_instance;
 123   }
 124
 125   return (selector);
 126 } /* }}} instance_get_params */
 127
 128 function ident_clone (ident) /* {{{ */
 129 {
 130   var ret = {};
 131
 132   ret.host = ident.host;
 133   ret.plugin = ident.plugin;
 134   ret.plugin_instance = ident.plugin_instance;
 135   ret.type = ident.type;
 136   ret.type_instance = ident.type_instance;
 137
 138   return (ret);
 139 } /* }}} ident_clone */
 140
 141 function inst_get_defs (inst) /* {{{ */
 142 {
 143   if (!inst.def)
 144   {
 145     var params = instance_get_params (inst);
 146     params.action = "graph_def_json";
 147
 148     $.ajax({
 149       url: "collection.fcgi",
 150       async: false,
 151       dataType: 'json',
 152       data: params,
 153       success: function (data)
 154       {
 155         if (!data)
 156           return;
 157
 158         inst.def = data;
 159       }});
 160   }
 161
 162   if (inst.def)
 163     return (inst.def);
 164   return;
 165 } /* }}} inst_get_defs */
 166
 167 function ident_matches (selector, ident) /* {{{ */
 168 {
 169   var part_matches = function (s,p)
 170   {
 171     if (s == null)
 172       return (false);
 173
 174     if ((s == "/any/") || (s == "/all/"))
 175       return (true);
 176
 177     if (p == null)
 178       return (false);
 179
 180     if (s == p)
 181       return (true);
 182
 183     return (false);
 184   };
 185
 186   if (!part_matches (selector.host, ident.host))
 187     return (false);
 188
 189   if (!part_matches (selector.plugin, ident.plugin))
 190     return (false);
 191
 192   if (!part_matches (selector.plugin_instance, ident.plugin_instance))
 193     return (false);
 194
 195   if (!part_matches (selector.type, ident.type))
 196     return (false);
 197
 198   if (!part_matches (selector.type_instance, ident.type_instance))
 199     return (false);
 200
 201   return (true);
 202 } /* }}} function ident_matches */
 203
 204 function ident_describe (ident, selector) /* {{{ */
 205 {
 206   var ret = "";
 207   var check_field = function (field)
 208   {
 209     if (ident[field].toLowerCase () != selector[field].toLowerCase ())
 210     {
 211       if (ret != "")
 212         ret += "/";
 213       ret += ident[field];
 214     }
 215   };
 216
 217   check_field ("host");
 218   check_field ("plugin");
 219   check_field ("plugin_instance");
 220   check_field ("type");
 221   check_field ("type_instance");
 222
 223   if (ret == "")
 224     return (null);
 225   return (ret);
 226 } /* }}} function ident_describe */
 227
 228 function def_draw_one (def, data, series_array) /* {{{ */
 229 {
 230   var chart_series = new Object ();
 231
 232   chart_series.type = 'line';
 233   chart_series.pointInterval = data.interval * 1000.0;
 234   chart_series.pointStart = data.first_value_time * 1000.0;
 235   chart_series.data = data.data;
 236   chart_series.lineWidth = 1;
 237   chart_series.shadow = false;
 238   chart_series.marker = { enabled: false };
 239
 240   if (def.legend)
 241     chart_series.name = def.legend;
 242   else if (def.ds_name)
 243     chart_series.name = def.ds_name;
 244
 245   if (def.area)
 246     chart_series.type = 'area';
 247
 248   if (def.stack)
 249     chart_series.stacking = 'normal';
 250
 251   if ((def.color) && (def.color != 'random'))
 252     chart_series.color = def.color;
 253
 254   series_array.push (chart_series);
 255 } /* }}} function def_draw_one */
 256
 257 function def_draw (def, data_list, series_array) /* {{{ */
 258 {
 259   var i;
 260
 261   for (i = 0; i < data_list.length; i++)
 262   {
 263     if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
 264       continue;
 265     if (!ident_matches (def.select, data_list[i].file))
 266       continue;
 267
 268     def_draw_one (def, data_list[i], series_array);
 269   }
 270 } /* }}} function def_draw */
 271
 272 function inst_get_chart_opts (inst, def) /* {{{ */
 273 {
 274   var chart_opts = new Object ();
 275
 276   chart_opts.chart =
 277   {
 278     renderTo: inst.container,
 279     zoomType: 'x'
 280   };
 281   chart_opts.xAxis =
 282   {
 283     type: 'datetime',
 284     maxZoom: 300, // five minutes
 285     title: { text: null },
 286     events:
 287     {
 288       setExtremes: function (event)
 289       {
 290         var begin = null;
 291         var end   = null;
 292
 293         if ((event.min) && (event.max))
 294         {
 295           begin = event.min / 1000.0;
 296           end   = event.max / 1000.0;
 297         }
 298         inst_fetch_data (inst, begin, end);
 299       }
 300     }
 301   };
 302   chart_opts.yAxis =
 303   {
 304     labels:
 305     {
 306       formatter: function () { return (value_to_string (this.value)); }
 307     },
 308     startOnTick: false,
 309     endOnTick: false
 310   };
 311   chart_opts.legend =
 312   {
 313     labelFormatter: function ()
 314     {
 315       var series = this;
 316       var min = Number.MAX_VALUE;
 317       var max = Number.NEGATIVE_INFINITY;
 318       var num = 0;
 319       var sum = 0;
 320       var avg;
 321       var i;
 322
 323       for (i = 0; i < this.data.length; i++)
 324       {
 325         var v;
 326
 327         v = this.data[i].y;
 328         if (v == null)
 329           continue;
 330
 331         if (min > v)
 332           min = v;
 333         if (max < v)
 334           max = v;
 335
 336         sum += v;
 337         num++;
 338       }
 339
 340       if (num == 0)
 341       {
 342         min = null;
 343         max = null;
 344         avg = null;
 345       }
 346       else
 347       {
 348         avg = sum / num;
 349       }
 350
 351       return (this.name + " (" + value_to_string (min) + " min, "
 352           + value_to_string (avg) + " avg, "
 353           + value_to_string (max) + " max)");
 354     }
 355   };
 356   chart_opts.series = new Array ();
 357
 358   if (def.title)
 359     chart_opts.title = { text: def.title };
 360
 361   if (def.vertical_label)
 362     chart_opts.yAxis.title = { text: def.vertical_label };
 363
 364   return (chart_opts);
 365 } /* }}} function chart_opts_get */
 366
 367 function inst_draw (inst, def, data_list) /* {{{ */
 368 {
 369   var chart_opts;
 370   var i;
 371
 372   if (!inst || !def || !data_list)
 373     return;
 374
 375   chart_opts = inst_get_chart_opts (inst, def);
 376
 377   for (i = def.defs.length - 1; i >= 0; i--)
 378     def_draw (def.defs[i], data_list, chart_opts.series);
 379
 380   inst.chart = new Highcharts.Chart (chart_opts);
 381 } /* }}} function inst_draw */
 382
 383 function inst_redraw (inst, def, data_list) /* {{{ */
 384 {
 385   var series_array;
 386   var i;
 387
 388   if (!inst.chart)
 389     return (inst_draw (inst, def, data_list));
 390
 391   series_array = new Array ();
 392   for (i = def.defs.length - 1; i >= 0; i--)
 393     def_draw (def.defs[i], data_list, series_array);
 394
 395   if (inst.chart.series.length != series_array.length)
 396   {
 397     alert ("inst.chart.series.length != series_array.length");
 398     return;
 399   }
 400
 401   for (i = inst.chart.series.length - 1; i >= 0; i--)
 402   {
 403     series_array[i].visible = inst.chart.series[i].visible;
 404     inst.chart.series[i].remove (/* redraw = */ false);
 405   }
 406
 407   for (i = 0; i < series_array.length; i++)
 408     inst.chart.addSeries (series_array[i], /* redraw = */ false);
 409
 410   inst.chart.redraw ();
 411 } /* }}} function inst_redraw */
 412
 413 function inst_fetch_data (inst, begin, end) /* {{{ */
 414 {
 415   var def;
 416   var params;
 417
 418   def = inst_get_defs (inst);
 419   if (!def)
 420     return;
 421
 422   params = instance_get_params (inst);
 423   params.action = "instance_data_json";
 424   params.begin = begin || inst.begin;
 425   params.end = end || inst.end;
 426
 427   $.getJSON ("collection.fcgi", params,
 428       function (data)
 429       {
 430         inst_redraw (inst, def, data);
 431       }); /* getJSON */
 432 } /* }}} inst_fetch_data */
 433
 434 function json_graph_update (index) /* {{{ */
 435 {
 436   var inst;
 437
 438   inst = c4.instances[index];
 439   if (!inst)
 440     return;
 441
 442   if (!inst.container)
 443     inst.container = "c4-graph" + index;
 444
 445   inst_fetch_data (inst);
 446 } /* }}} json_graph_update */
 447
 448 function format_instance(inst)
 449 {
 450   return ("<li class=\"instance\"><a href=\"" + location.pathname
 451       + "?action=show_instance;" + inst.params + "\">" + inst.description
 452       + "</a></li>");
 453 }
 454
 455 function format_instance_list(instances)
 456 {
 457   var ret = "<ul class=\"instance_list\">";
 458   var i;
 459
 460   if (instances.length == 0)
 461     return ("");
 462
 463   for (i = 0; i < instances.length; i++)
 464     ret += format_instance (instances[i]);
 465
 466   ret += "</ul>";
 467
 468   return (ret);
 469 }
 470
 471 function format_graph(graph)
 472 {
 473   return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
 474 }
 475
 476 function update_search_suggestions ()
 477 {
 478   var term = $("#search-input").val ();
 479   if (term.length < 2)
 480   {
 481     $("#search-suggest").hide ();
 482     return (true);
 483   }
 484
 485   $("#search-suggest").show ();
 486   $.getJSON ("collection.fcgi",
 487     { "action": "search_json", "q": term},
 488     function(data)
 489     {
 490       var i;
 491       $("#search-suggest").html ("");
 492       for (i = 0; i < data.length; i++)
 493       {
 494         var graph = data[i];
 495         $("#search-suggest").append (format_graph (graph));
 496       }
 497     }
 498   );
 499 } /* update_search_suggestions */
 500
 501 function zoom_redraw (jq_obj) /* {{{ */
 502 {
 503   var url = jq_obj.data ("base_url");
 504
 505   if ((jq_obj == null) || (url == null))
 506     return (false);
 507
 508   if (jq_obj.data ('begin') != null)
 509     url += ";begin=" + jq_obj.data ('begin');
 510   if (jq_obj.data ('end') != null)
 511     url += ";end=" + jq_obj.data ('end');
 512
 513   jq_obj.attr ("src", url);
 514   return (true);
 515 } /* }}} function zoom_redraw */
 516
 517 function zoom_reset (graph_id, diff) /* {{{ */
 518 {
 519   var jq_obj;
 520   var end;
 521   var begin;
 522
 523   jq_obj = $("#" + graph_id);
 524   if (jq_obj == null)
 525     return (false);
 526
 527   end = new Number ((new Date ()).getTime () / 1000);
 528   begin = new Number (end - diff);
 529
 530   jq_obj.data ('begin', begin.toFixed (0));
 531   jq_obj.data ('end', end.toFixed (0));
 532
 533   return (zoom_redraw (jq_obj));
 534 } /* }}} function zoom_reset */
 535
 536 function zoom_hour (graph_id) /* {{{ */
 537 {
 538   zoom_reset (graph_id, 3600);
 539 } /* }}} function zoom_hour */
 540
 541 function zoom_day (graph_id) /* {{{ */
 542 {
 543   zoom_reset (graph_id, 86400);
 544 } /* }}} function zoom_day */
 545
 546 function zoom_week (graph_id) /* {{{ */
 547 {
 548   zoom_reset (graph_id, 7 * 86400);
 549 } /* }}} function zoom_week */
 550
 551 function zoom_month (graph_id) /* {{{ */
 552 {
 553   zoom_reset (graph_id, 31 * 86400);
 554 } /* }}} function zoom_month */
 555
 556 function zoom_year (graph_id) /* {{{ */
 557 {
 558   zoom_reset (graph_id, 366 * 86400);
 559 } /* }}} function zoom_year */
 560
 561 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
 562 {
 563   var jq_obj;
 564   var end;
 565   var begin;
 566   var diff;
 567
 568   jq_obj = $("#" + graph_id);
 569   if (jq_obj == null)
 570     return (false);
 571
 572   begin = jq_obj.data ('begin');
 573   end = jq_obj.data ('end');
 574   if ((begin == null) || (end == null))
 575     return (zoom_day (graph_id));
 576
 577   begin = new Number (begin);
 578   end = new Number (end);
 579
 580   diff = end - begin;
 581   if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
 582     return (true);
 583
 584   jq_obj.data ('begin', begin + (diff * factor_begin));
 585   jq_obj.data ('end', end + (diff * factor_end));
 586
 587   return (zoom_redraw (jq_obj));
 588 } /* }}} function zoom_relative */
 589
 590 function zoom_reference (graph_id) /* {{{ */
 591 {
 592   var jq_obj;
 593   var end;
 594   var begin;
 595
 596   jq_obj = $("#" + graph_id);
 597   if (jq_obj == null)
 598     return (false);
 599
 600   begin = jq_obj.data ('begin');
 601   end = jq_obj.data ('end');
 602   if ((begin == null) || (end == null))
 603     return (false);
 604
 605   $(".graph-img img").each (function ()
 606   {
 607     $(this).data ('begin', begin);
 608     $(this).data ('end', end);
 609     zoom_redraw ($(this));
 610   });
 611 } /* }}} function zoom_reference */
 612
 613 function zoom_earlier (graph_id) /* {{{ */
 614 {
 615   return (zoom_relative (graph_id, -0.2, -0.2));
 616 } /* }}} function zoom_earlier */
 617
 618 function zoom_later (graph_id) /* {{{ */
 619 {
 620   return (zoom_relative (graph_id, +0.2, +0.2));
 621 } /* }}} function zoom_later */
 622
 623 function zoom_in (graph_id) /* {{{ */
 624 {
 625   return (zoom_relative (graph_id, +0.2, -0.2));
 626 } /* }}} function zoom_earlier */
 627
 628 function zoom_out (graph_id) /* {{{ */
 629 {
 630   return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
 631 } /* }}} function zoom_earlier */
 632
 633 $(document).ready(function() {
 634     /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
 635     $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
 636     $("#search-suggest").hide ();
 637
 638     $("#search-input").blur (function()
 639     {
 640       window.setTimeout (function ()
 641       {
 642         $("#search-suggest").hide ();
 643       }, 500);
 644     });
 645
 646     $("#search-input").focus (function()
 647     {
 648       var term = $("#search-input").val ();
 649       if (term.length < 2)
 650       {
 651         $("#search-suggest").hide ();
 652       }
 653       else
 654       {
 655         $("#search-suggest").show ();
 656       }
 657     });
 658
 659     $("#search-input").keyup (function()
 660     {
 661       update_search_suggestions ();
 662     });
 663
 664     var graph_count = 0;
 665     $(".graph-img").each (function (index, elem)
 666     {
 667       var id = "graph" + graph_count;
 668       graph_count++;
 669
 670       $(this).find ("img").each (function (img_index, img_elem)
 671       {
 672         var base_url;
 673
 674         $(this).attr ("id", id);
 675
 676         base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
 677         $(this).data ("base_url", base_url);
 678       });
 679
 680       $(this).append ("<div class=\"graph-buttons presets\">"
 681         + "<div class=\"graph-button\" onClick=\"zoom_hour  ('"+id+"');\">H</div>"
 682         + "<div class=\"graph-button\" onClick=\"zoom_day   ('"+id+"');\">D</div>"
 683         + "<div class=\"graph-button\" onClick=\"zoom_week  ('"+id+"');\">W</div>"
 684         + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
 685         + "<div class=\"graph-button\" onClick=\"zoom_year  ('"+id+"');\">Y</div>"
 686         + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
 687         + "</div>"
 688         + "<div class=\"graph-buttons navigation\">"
 689         + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">\u2190</div>"
 690         + "<div class=\"graph-button\" onClick=\"zoom_out     ('"+id+"');\">\u2212</div>"
 691         + "<div class=\"graph-button\" onClick=\"zoom_in      ('"+id+"');\">+</div>"
 692         + "<div class=\"graph-button\" onClick=\"zoom_later   ('"+id+"');\">\u2192</div>"
 693         + "</div>"
 694         );
 695     });
 696
 697     var i;
 698     for (i = 0; i < c4.instances.length; i++)
 699     {
 700       json_graph_update (i);
 701     }
 702 });
 703
 704 /* vim: set sw=2 sts=2 et fdm=marker : */