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 /*
 278  * Given one metric definition, returns the appropriate data from the data
 279  * list. */
 280 function def_get_data (def, data_list)
 281 {
 282   var i;
 283
 284   for (i = 0; i < data_list.length; i++)
 285   {
 286     if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
 287       continue;
 288     if (!ident_matches (def.select, data_list[i].file))
 289       continue;
 290
 291     return (data_list[i]);
 292   }
 293   return;
 294 }
 295
 296 function def_to_rickshaw_one (def, data)
 297 {
 298   var series = {
 299     data: []
 300   };
 301   var i;
 302
 303   if (def.legend)
 304     series.name = def.legend;
 305
 306   if (def.color)
 307     series.color = def.color;
 308
 309   for (i = 0; i < data.data.length; i++)
 310   {
 311     var x = data.first_value_time + (i * data.interval);
 312     var y = data.data[i];
 313
 314     series.data.push ({'x': x, 'y': y});
 315   }
 316
 317   return (series);
 318 }
 319
 320 function def_to_rickshaw (graph_def, data_list)
 321 {
 322   var graph_config = {
 323       renderer: 'line',
 324       series: []
 325   };
 326   var graph;
 327   var i;
 328
 329   for (i = 0; i < graph_def.defs.length; i++)
 330   {
 331     var def = graph_def.defs[i];
 332     var data = def_get_data (def, data_list);
 333     var series;
 334
 335     if (!data)
 336       continue;
 337
 338     series = def_to_rickshaw_one (def, data);
 339     if (series)
 340       graph_config.series.push (series);
 341
 342     //if (def.area)
 343     //  graph_config.renderer = 'area';
 344   }
 345
 346   return (graph_config);
 347 }
 348
 349 function inst_draw_rickshaw (inst, def, data_list)
 350 {
 351   var graph_config = def_to_rickshaw (def, data_list);
 352
 353   graph_config.element = document.getElementById (inst.container);
 354
 355   inst.chart = new Rickshaw.Graph (graph_config);
 356   inst.chart.render ();
 357
 358   var x_axis = new Rickshaw.Graph.Axis.Time({
 359     graph: inst.chart
 360   });
 361   x_axis.render ();
 362
 363   var y_axis = new Rickshaw.Graph.Axis.Y({
 364     graph: inst.chart
 365   });
 366   y_axis.render ();
 367 }
 368
 369 function inst_draw (inst, def, data_list)
 370 {
 371   inst_draw_rickshaw (inst, def, data_list);
 372 }
 373
 374 function inst_redraw (inst, def, data_list) /* {{{ */
 375 {
 376   var series_array;
 377   var i;
 378
 379   if (!inst.chart)
 380     return (inst_draw (inst, def, data_list));
 381
 382   series_array = new Array ();
 383   for (i = def.defs.length - 1; i >= 0; i--)
 384     def_draw (def.defs[i], data_list, series_array);
 385
 386   if (inst.chart.series.length != series_array.length)
 387   {
 388     alert ("inst.chart.series.length != series_array.length");
 389     return;
 390   }
 391
 392   for (i = inst.chart.series.length - 1; i >= 0; i--)
 393   {
 394     series_array[i].visible = inst.chart.series[i].visible;
 395     inst.chart.series[i].remove (/* redraw = */ false);
 396   }
 397
 398   for (i = 0; i < series_array.length; i++)
 399     inst.chart.addSeries (series_array[i], /* redraw = */ false);
 400
 401   inst.chart.redraw ();
 402 } /* }}} function inst_redraw */
 403
 404 function inst_fetch_data (inst, begin, end) /* {{{ */
 405 {
 406   var def;
 407   var params;
 408
 409   def = inst_get_defs (inst);
 410   if (!def)
 411     return;
 412
 413   params = instance_get_params (inst);
 414   params.action = "instance_data_json";
 415   params.begin = begin || inst.begin;
 416   params.end = end || inst.end;
 417   params.resolution = (params.end - params.begin) / c4.config.width;
 418
 419   $.getJSON ("collection.fcgi", params,
 420       function (data)
 421       {
 422         inst_redraw (inst, def, data);
 423       }); /* getJSON */
 424 } /* }}} inst_fetch_data */
 425
 426 function json_graph_update (index) /* {{{ */
 427 {
 428   var inst;
 429
 430   inst = c4.instances[index];
 431   if (!inst)
 432     return;
 433
 434   if (!inst.container)
 435     inst.container = "c4-graph" + index;
 436
 437   inst_fetch_data (inst);
 438 } /* }}} json_graph_update */
 439
 440 function format_instance(inst)
 441 {
 442   return ("<li class=\"instance\"><a href=\"" + location.pathname
 443       + "?action=show_instance;" + inst.params + "\">" + inst.description
 444       + "</a></li>");
 445 }
 446
 447 function format_instance_list(instances)
 448 {
 449   var ret = "<ul class=\"instance_list\">";
 450   var i;
 451
 452   if (instances.length == 0)
 453     return ("");
 454
 455   for (i = 0; i < instances.length; i++)
 456     ret += format_instance (instances[i]);
 457
 458   ret += "</ul>";
 459
 460   return (ret);
 461 }
 462
 463 function format_graph(graph)
 464 {
 465   return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
 466 }
 467
 468 function update_search_suggestions ()
 469 {
 470   var term = $("#search-input").val ();
 471   if (term.length < 2)
 472   {
 473     $("#search-suggest").hide ();
 474     return (true);
 475   }
 476
 477   $("#search-suggest").show ();
 478   $.getJSON ("collection.fcgi",
 479     { "action": "search_json", "q": term},
 480     function(data)
 481     {
 482       var i;
 483       $("#search-suggest").html ("");
 484       for (i = 0; i < data.length; i++)
 485       {
 486         var graph = data[i];
 487         $("#search-suggest").append (format_graph (graph));
 488       }
 489     }
 490   );
 491 } /* update_search_suggestions */
 492
 493 function zoom_redraw (jq_obj) /* {{{ */
 494 {
 495   var url = jq_obj.data ("base_url");
 496
 497   if ((jq_obj == null) || (url == null))
 498     return (false);
 499
 500   if (jq_obj.data ('begin') != null)
 501     url += ";begin=" + jq_obj.data ('begin');
 502   if (jq_obj.data ('end') != null)
 503     url += ";end=" + jq_obj.data ('end');
 504
 505   jq_obj.attr ("src", url);
 506   return (true);
 507 } /* }}} function zoom_redraw */
 508
 509 function zoom_reset (graph_id, diff) /* {{{ */
 510 {
 511   var jq_obj;
 512   var end;
 513   var begin;
 514
 515   jq_obj = $("#" + graph_id);
 516   if (jq_obj == null)
 517     return (false);
 518
 519   end = new Number ((new Date ()).getTime () / 1000);
 520   begin = new Number (end - diff);
 521
 522   jq_obj.data ('begin', begin.toFixed (0));
 523   jq_obj.data ('end', end.toFixed (0));
 524
 525   return (zoom_redraw (jq_obj));
 526 } /* }}} function zoom_reset */
 527
 528 function zoom_hour (graph_id) /* {{{ */
 529 {
 530   zoom_reset (graph_id, 3600);
 531 } /* }}} function zoom_hour */
 532
 533 function zoom_day (graph_id) /* {{{ */
 534 {
 535   zoom_reset (graph_id, 86400);
 536 } /* }}} function zoom_day */
 537
 538 function zoom_week (graph_id) /* {{{ */
 539 {
 540   zoom_reset (graph_id, 7 * 86400);
 541 } /* }}} function zoom_week */
 542
 543 function zoom_month (graph_id) /* {{{ */
 544 {
 545   zoom_reset (graph_id, 31 * 86400);
 546 } /* }}} function zoom_month */
 547
 548 function zoom_year (graph_id) /* {{{ */
 549 {
 550   zoom_reset (graph_id, 366 * 86400);
 551 } /* }}} function zoom_year */
 552
 553 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
 554 {
 555   var jq_obj;
 556   var end;
 557   var begin;
 558   var diff;
 559
 560   jq_obj = $("#" + graph_id);
 561   if (jq_obj == null)
 562     return (false);
 563
 564   begin = jq_obj.data ('begin');
 565   end = jq_obj.data ('end');
 566   if ((begin == null) || (end == null))
 567     return (zoom_day (graph_id));
 568
 569   begin = new Number (begin);
 570   end = new Number (end);
 571
 572   diff = end - begin;
 573   if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
 574     return (true);
 575
 576   jq_obj.data ('begin', begin + (diff * factor_begin));
 577   jq_obj.data ('end', end + (diff * factor_end));
 578
 579   return (zoom_redraw (jq_obj));
 580 } /* }}} function zoom_relative */
 581
 582 function zoom_reference (graph_id) /* {{{ */
 583 {
 584   var jq_obj;
 585   var end;
 586   var begin;
 587
 588   jq_obj = $("#" + graph_id);
 589   if (jq_obj == null)
 590     return (false);
 591
 592   begin = jq_obj.data ('begin');
 593   end = jq_obj.data ('end');
 594   if ((begin == null) || (end == null))
 595     return (false);
 596
 597   $(".graph-img img").each (function ()
 598   {
 599     $(this).data ('begin', begin);
 600     $(this).data ('end', end);
 601     zoom_redraw ($(this));
 602   });
 603 } /* }}} function zoom_reference */
 604
 605 function zoom_earlier (graph_id) /* {{{ */
 606 {
 607   return (zoom_relative (graph_id, -0.2, -0.2));
 608 } /* }}} function zoom_earlier */
 609
 610 function zoom_later (graph_id) /* {{{ */
 611 {
 612   return (zoom_relative (graph_id, +0.2, +0.2));
 613 } /* }}} function zoom_later */
 614
 615 function zoom_in (graph_id) /* {{{ */
 616 {
 617   return (zoom_relative (graph_id, +0.2, -0.2));
 618 } /* }}} function zoom_earlier */
 619
 620 function zoom_out (graph_id) /* {{{ */
 621 {
 622   return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
 623 } /* }}} function zoom_earlier */
 624
 625 function graph_recalc_width () /* {{{ */
 626 {
 627   var tmp;
 628
 629   tmp = $("#layout-middle-center").width ();
 630   if (!tmp)
 631     return;
 632
 633   if (tmp < 324)
 634     tmp = 324;
 635
 636   c4.config.width = tmp;
 637   c4.config.height = Math.round (tmp / 1.61803398874989484820);
 638   $(".graph-json").each (function ()
 639   {
 640     $(this).width  (c4.config.width);
 641     $(this).height (c4.config.height);
 642   });
 643 } /* }}} function graph_recalc_width */
 644
 645 $(document).ready(function() {
 646     /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
 647     $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
 648     $("#search-suggest").hide ();
 649
 650     $("#search-input").blur (function()
 651     {
 652       window.setTimeout (function ()
 653       {
 654         $("#search-suggest").hide ();
 655       }, 500);
 656     });
 657
 658     $("#search-input").focus (function()
 659     {
 660       var term = $("#search-input").val ();
 661       if (term.length < 2)
 662       {
 663         $("#search-suggest").hide ();
 664       }
 665       else
 666       {
 667         $("#search-suggest").show ();
 668       }
 669     });
 670
 671     $("#search-input").keyup (function()
 672     {
 673       update_search_suggestions ();
 674     });
 675
 676     var graph_count = 0;
 677     $(".graph-img").each (function (index, elem)
 678     {
 679       var id = "graph" + graph_count;
 680       graph_count++;
 681
 682       $(this).find ("img").each (function (img_index, img_elem)
 683       {
 684         var base_url;
 685
 686         $(this).attr ("id", id);
 687
 688         base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
 689         $(this).data ("base_url", base_url);
 690       });
 691
 692       $(this).append ("<div class=\"graph-buttons presets\">"
 693         + "<div class=\"graph-button\" onClick=\"zoom_hour  ('"+id+"');\">H</div>"
 694         + "<div class=\"graph-button\" onClick=\"zoom_day   ('"+id+"');\">D</div>"
 695         + "<div class=\"graph-button\" onClick=\"zoom_week  ('"+id+"');\">W</div>"
 696         + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
 697         + "<div class=\"graph-button\" onClick=\"zoom_year  ('"+id+"');\">Y</div>"
 698         + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
 699         + "</div>"
 700         + "<div class=\"graph-buttons navigation\">"
 701         + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">\u2190</div>"
 702         + "<div class=\"graph-button\" onClick=\"zoom_out     ('"+id+"');\">\u2212</div>"
 703         + "<div class=\"graph-button\" onClick=\"zoom_in      ('"+id+"');\">+</div>"
 704         + "<div class=\"graph-button\" onClick=\"zoom_later   ('"+id+"');\">\u2192</div>"
 705         + "</div>"
 706         );
 707     });
 708
 709     graph_recalc_width ();
 710
 711     var i;
 712     for (i = 0; i < c4.instances.length; i++)
 713     {
 714       json_graph_update (i);
 715     }
 716 });
 717
 718 /* vim: set sw=2 sts=2 et fdm=marker : */