share/collection.js

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