rrd-grapher 1.0.0

data/example_app/views/available_rrds.haml

@@ -0,0 +1,26 @@
+- content_for(:css) do
+  %link{:rel => 'stylesheet', :href => '/stylesheets/available_rrds.css', :type => 'text/css'}
+
+- content_for(:headers) do
+  %script{:type => "text/javascript", :src => "/javascripts/available_rrds.js"}
+  %script{:type => "text/javascript", :src => "/javascripts/jquery/jquery.showtime.js"}
+  %script{:type => "text/javascript", :src => "/javascripts/jquery.timeago.js"}
+
+%table#template.hidden
+  %tr
+    %td ${short_name}
+    %td ${path}
+    %td ${sources}
+    %td.time{:title => "${last_update}"} ${last_update}
+    %td ${step}
+
+%table#data_list
+  %tr
+    %th Name
+    %th Path
+    %th DS
+    %th Last update
+    %th Step
+
+
+/ #target

data/example_app/views/collectd.haml

@@ -0,0 +1,30 @@
+- content_for(:css) do
+  %link{:rel => 'stylesheet', :href => '/chosen/chosen.css', :type => 'text/css'}
+  
+- content_for(:headers) do
+  %script{:type => "text/javascript", :src => "/chosen/chosen.jquery.js"}
+  %script{:type => "text/javascript", :src => "/javascripts/collectd.js"}
+
+  
+#config_panel{:class => "row"}
+  .column.grid_4
+    .row
+      %input.checkbox#autorefresh{:type => "checkbox"}
+      %label{:for => "autorefresh"} Auto Refresh
+    .row
+      %input.checkbox#linkedzoom{:type => "checkbox", :checked => true}
+      %label{:for => "linkedzoom"} Linked Zoom
+  
+  .column.grid_4
+    %label{:for => "rangeselect"} Interval:
+    %select#rangeselect
+      %option{:value => 60} 1 minute
+      %option{:value => 15*60, :selected => true} 15 minues
+      %option{:value => 60*60} 1 hour
+      %option{:value => 60*60*24} 1 day
+  
+  .column.grid_4
+    %label{:for => "rangeselect"} Show a specific day
+    %input#dateselect{:type => "text"}
+
+#graphs

data/example_app/views/layout.haml

@@ -0,0 +1,19 @@
+!!! 
+%html
+  %head
+    %title RRD Grapher
+    %meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=UTF-8"}
+    / %link{:rel => "icon", :type => "image/gif", :href => "/favicon.gif"}
+    %link{:rel => 'stylesheet', :href => '/stylesheets/Aristo/theme.css', :type => 'text/css'}
+    %link{:rel => 'stylesheet', :href => '/stylesheets/app.css', :type => 'text/css'}
+    / %link{:rel => 'stylesheet', :href => '/javascripts/wijmo-open/css/jquery.wijmo-open.1.3.0.css', :type => 'text/css'}
+    = yield_content :css
+    
+    %script{:type => "text/javascript", :src => "/javascripts/app.js"}
+    = yield_content :headers
+
+  %body
+    %div#wrapper
+      %div#content
+        = yield
+

data/example_app/views/stylesheets/available_rrds.scss

@@ -0,0 +1,7 @@
+
+.rrd {
+  display : block;
+  border: 1px solid black;
+  margin-top: 3px;
+  width: 100%;
+}

data/example_notifier/Gemfile

@@ -0,0 +1,2 @@
+
+gem 'rrd-grapher', :path => File.expand_path('../..', __FILE__)

data/example_notifier/notifier.rb

@@ -0,0 +1,25 @@
+require 'rubygems'
+require 'bundler/setup'
+require 'rrd-grapher/notifier'
+
+puts "Notifier started."
+
+pool = FiberPool.new(10)
+
+EM::run do
+  
+  pool.spawn do
+    opts = {
+      :fiber_pool => pool
+    }
+  
+    RRDNotifier::Server.start(opts) do |s|
+      s.register_alarm("*", "ping", "ping_droprate", :max => 5)
+      s.register_alarm("*", "uptime", "uptime", :monitor_presence => 2*60)
+    
+      s.register_alarm("*", "load", "load", :max => 0.01, :index => 1)
+      s.register_alarm("*", "memory/*", "memory/active", :monitor_presence => 1)
+    end
+  end
+  
+end

data/lib/rrd-grapher/assets/javascripts/app-dev.js

@@ -0,0 +1,20 @@
+//
+// sprockets package recipe (Dev File)
+//
+//= require "../../public/javascripts/jquery/jquery-1.6.2.js"
+//= require "../../public/javascripts/jquery/jquery-ui-1.8.11.min.js"
+//= require "../../public/javascripts/jquery/jquery.tpl.min.js"
+//= require "../../public/javascripts/flot/jquery.flot.js"
+//= require "../../public/javascripts/flot/jquery.flot.selection.js"
+//= require "../../public/javascripts/backbone/underscore.js"
+//= require "../../public/javascripts/backbone/backbone.js"
+
+//= require "../../public/javascripts/classes/format.js"
+//= require "../../public/javascripts/classes/graph.js"
+//= require "../../public/javascripts/classes/graph_definition.js"
+//= require "../../public/javascripts/classes/serie.js"
+//= require "../../public/javascripts/classes/size.js"
+//= require "../../public/javascripts/classes/static_line.js"
+//= require "../../public/javascripts/classes/time.js"
+
+

data/lib/rrd-grapher/assets/javascripts/app.js

@@ -0,0 +1,20 @@
+//
+// sprockets package recipe
+//
+//= require "../../public/javascripts/jquery/jquery-1.6.2.min.js"
+//= require "../../public/javascripts/jquery/jquery-ui-1.8.11.min.js"
+//= require "../../public/javascripts/jquery/jquery.tpl.min.js"
+//= require "../../public/javascripts/flot/jquery.flot.js"
+//= require "../../public/javascripts/flot/jquery.flot.selection.min.js"
+//= require "../../public/javascripts/backbone/underscore.min.js"
+//= require "../../public/javascripts/backbone/backbone.min.js"
+
+//= require "../../public/javascripts/classes/format.js"
+//= require "../../public/javascripts/classes/graph.js"
+//= require "../../public/javascripts/classes/graph_definition.js"
+//= require "../../public/javascripts/classes/static_line.js"
+//= require "../../public/javascripts/classes/serie.js"
+//= require "../../public/javascripts/classes/size.js"
+//= require "../../public/javascripts/classes/time.js"
+
+

data/lib/rrd-grapher/assets/javascripts/classes/format.coffee

@@ -0,0 +1,35 @@
+
+window.Format =
+  speed: (num) ->
+    Format._convert(num, 1024, ["B/s", "KB/s", "MB/s", "GB/s"])
+  
+  size: (num) ->
+    Format._convert(num, 1024, ["B", "KB", "MB", "GB"])
+  
+  percent: (num) ->
+    Format._convert(num, null, ["%"])
+  
+  delay: (num) ->
+    if num < 1000
+      Format._convert(num, null, ["ms"])
+    else
+      Format._convert(num/1000, 60, ["s", "m", "h"])
+  
+  
+  identity: (num) ->
+    Format._convert(num)
+  
+  _convert: (num, ref = null, units = [""]) ->
+    index = 0
+
+    sign = if num < 0 then -1 else 1
+    abs_num = Math.abs(num)
+    
+    if ref
+      while abs_num > ref
+        abs_num /= ref
+        index+= 1
+    
+    "" +  parseFloat(abs_num * sign).toFixed(2) + "&nbsp;" + units[index]
+
+

data/lib/rrd-grapher/assets/javascripts/classes/graph.coffee

@@ -0,0 +1,306 @@
+
+class window.Graph extends Backbone.Model
+  colors = ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed", "#FF4571", "#FF8ED4", "#FF768C", "#1E74FF"]
+  
+  defaults:
+    "formatters"  : [Format.identity, Format.identity]
+    "limits"      : [[null, null], [null, null]]
+  
+  initialize: ->
+    # super
+    #   "formatters"  : formatters
+    #   "limits"      : limits
+    
+    @next_color = 0
+    
+    @set "maxrows" : 400
+    @set "legend_containers" : []
+    
+    parent_container = @get("parent_container")
+    title = @get("title")
+    
+    @set("limits" : @defaults["limits"]) if @get("limits") == null
+    
+    # create graph container
+    @master_container = $("<div>").addClass("graph_container").appendTo(parent_container)
+    
+    # @set "graph_title"      : $("<div>").addClass("graph_title").appendTo(@master_container)
+    # @get("graph_title").text(title)
+    
+    @get("legend_containers")[0] = $("<div>").addClass('legend').appendTo(@master_container)
+    $("<h3>").text(title).appendTo(@get("legend_containers")[0])
+    $("<div>").appendTo(@get("legend_containers")[0])
+    
+    @set "container" : $("<div>").addClass("graph").appendTo(@master_container)
+    # @legend_containers[1] = $("<div>").addClass('legend').appendTo(@master_container)
+    
+    @set "series"         : []
+    @set "tooltip_point"  : null
+  
+    # compute end date (now - 20s)
+    to = Math.floor((new Date().getTime() / 1000) - 60)
+    @set "to"   : to 
+    @set "from" : to - 15*60
+  
+    @set "plot" : null
+    @set "flot_options" :
+      "legend"    : { show : false }
+      "selection" : { mode: 'x' }
+      "grid"      : { hoverable: true }
+      "xaxis"     : { mode: "time", show: true }
+      "yaxes"     : [
+          {
+            "min"           : @get("limits")[0][0]
+            "max"           : @get("limits")[0][1]
+            "tickFormatter" : @get("formatters")[0]
+            "labelWidth"    : 100
+          },
+          {
+            "min"           : @get("limits")[1][0]
+            "max"           : @get("limits")[1][1]
+            "position"      : "right"
+            "labelWidth"    : 100
+            "reserveSpace"  : true
+            "tickFormatter" : @get("formatters")[1]
+          }
+        ]
+  
+  addSerie: (rrd_path, ds_name, legend, yaxis, formatter) ->
+    yaxis = yaxis || 1
+    formatter = formatter || @get("formatters")[yaxis - 1]
+    
+    s = new Serie(rrd_path, ds_name, legend, yaxis, formatter)
+    s.color = colors[@next_color++]
+    @get("series").push(s)
+  
+  addLine: (yvalue, legend, yaxis, formatter) ->
+    yaxis = yaxis || 1
+    formatter = formatter || @get("formatters")[yaxis - 1]
+    
+    s = new StaticLine(yvalue, legend, yaxis, formatter)
+    s.color = colors[@next_color++]
+    @get("series").push(s)
+  
+  create: () ->
+    this.update_graph(true)
+    this
+  
+  _build_query: (s) ->
+    query = "/rrd/#{s.rrd_path}/values/#{@get('from')}/#{@get('to')}?maxrows=#{@get('maxrows')}&ds_name=#{s.ds_name}"
+    if s.rra
+      query += "&rra=#{s.rra}"
+    
+    query
+  
+  update_graph: (first) ->
+    if @master_container
+      first = first || false
+      urls = []
+    
+      urls = $(@get("series")).filter( (i,s) ->  s.enabled && !s.static ).map (i, s) =>
+        [[@_build_query(s), s]]
+    
+      @multiple_get urls, (data_array) =>
+        $(@get("series")).filter( (i,s) ->  s.enabled && s.static ).each (i,s) =>
+          data_array.push( s.get_definition(@get("from"), @get("to")) )
+        
+        @_update_graph_common(first, data_array)
+    
+  
+  update_graph_from_cache: ->
+    data_array = []
+    
+    $.each @get("series"), (i, s) =>
+      if s.enabled
+        data_array.push( s.get_definition(@get("from"), @get("to")) )
+    
+    @_update_graph_common(false, data_array)
+  
+  set_interval: (from, to) ->
+    @set "from" : from
+    @set "to"   : to
+  
+  _update_graph_common: (first, data_array) ->
+        
+    if first
+      @set "plot" : $.plot(@get("container"), data_array, @get("flot_options"))
+      container = @get("container")
+      container.bind("plothover", (event, pos, item) => this.show_tooltip(event, pos, item))
+      container.bind "plotselected", (event, ranges) =>
+        from = Time.client_to_server(ranges.xaxis.from)
+        to = Time.client_to_server(ranges.xaxis.to)
+        @set_interval(from, to)
+        
+        @trigger("plotselection", from, to)
+        
+        @update_graph()
+        @get("plot").clearSelection()
+      
+      container.dblclick =>
+        @trigger "dblclick"
+        
+    else
+      plot = @get("plot")
+      plot.setData( data_array )
+      plot.setupGrid()
+      plot.draw()
+    
+    options = @get("plot").getOptions()
+    
+    for i in [0...@get("series").length]
+      @get("series")[i].color = options.colors[i]
+    
+    # if first
+    @create_legend(0)
+      # @create_legend(1)
+  
+  multiple_get: (urls, when_done_cb) ->
+    urls = $.makeArray(urls)
+    left = urls.length
+    ret = []
+    
+    $(urls).each (i, el) =>
+      url = el[0]
+      serie = el[1]
+      
+      $.ajax
+        url: url
+        dataType: 'json'
+        complete: ->
+          left -= 1
+          when_done_cb(ret) if left == 0
+          
+        success: (data) ->
+          serie.set_data(data)
+          ret.push( serie.get_definition() )
+          
+        error: (xhr, errText, err) =>
+          if (xhr.status == 404) && @master_container
+            @master_container.remove()
+            @master_container = null
+  
+  avg: (s) ->
+    ret = 0
+    count = 0
+    
+    $.each s.data, (i, pair) ->
+      # ignore null values
+      val = pair[1]
+      if val != null
+        ret += val
+        count++
+    
+    ret / count
+  
+  min: (s) ->
+    ret = null
+    $.each s.data, (i, pair) ->
+      val = pair[1]
+      if (val != null) && !isNaN(val) && (!ret || (val < ret))
+        ret = val
+    
+    ret
+  
+  max: (s) ->
+    ret = null
+    $.each s.data, (i, pair) ->
+      val = pair[1]
+      if (val != null) && !isNaN(val) && (!ret || (val > ret))
+        ret = val
+    
+    ret
+  
+  lpad = (str, length, padString = " ") ->
+    str = String(str)
+    len = length - str.length
+    str = Array(len).join(padString) + str
+  
+  show_tooltip: (event, pos, item) ->
+    if item
+      id = "" + item.seriesIndex + ":" + item.dataIndex
+      if @get("tooltip_point") != id
+        @set "tooltip_point" : id
+        # var s = @series[item.seriesIndex];
+        s = $(@get("series")).filter((i, s) -> s.legend == item.series.label ).first()
+        
+        if s.length > 0
+          s = s[0]
+          $("#tooltip").remove()
+          y = item.datapoint[1]
+          item_date = new Date( item.datapoint[0] - (Time.tz_offset * 1000) )
+          date_str = lpad(item_date.getHours(), 2, '0') + ":" + lpad(item_date.getMinutes(), 2, '0')
+        
+          content = s.format(y) + '<br/>' + date_str + "<br/>" + s.legend;
+        
+          $('<div id="tooltip">' + content + '</div>').css( {
+              position: 'absolute',
+              display: 'none',
+              top: item.pageY - 5,
+              left: item.pageX + 15,
+              border: '1px solid #fdd',
+              padding: '2px',
+              'background-color': '#fee',
+              opacity: 0.80
+          }).appendTo("body").fadeIn(200)
+          
+    else
+      $("#tooltip").remove()
+      @set "tooltip_point" : null
+
+  create_legend: (index) ->
+    # placeholder.find(".legend").remove();
+    # series_data = @plot.getData();
+    series = @get("series")
+
+    fragments = []
+    rowStarted = false
+
+    fragments.push("<tr><th></th><th>label</th><th>Avg</th><th>Min</th><th>Max</th></tr>")
+    
+    for i in [0...series.length]
+      s = series[i]
+      label = s.legend
+      
+      if !label # || (s.yaxis != (index + 1)) 
+        continue
+
+      if i % 1 == 0          
+        fragments.push('</tr>') if rowStarted
+        fragments.push('<tr>')
+        rowStarted = true;
+
+      # label = lf(label, s) if lf
+      fragments.push(
+          '<td data-serie="' + i + '" class="legendColorBox"><div class="outerBorder"><div style="width:4px;height:0;border:5px solid ' + s.color + ';overflow:hidden"></div></div></td>')
+      
+      fragments.push('<td class="legendLabel">' + label + '</td>')
+      fragments.push("<td>#{s.format( @avg(s) )}</td>")
+      fragments.push("<td>#{s.format( @min(s) )}</td>")
+      fragments.push("<td>#{s.format( @max(s) )}</td>")
+    
+    
+    fragments.push('</tr>') if rowStarted
+
+    return if fragments.length == 0
+
+    table = '<table style="font-size:smaller;color:#545454">' + fragments.join("") + '</table>'
+    @get("legend_containers")[index].find("div").html(table)
+    
+    legend_lines = $(".legendColorBox", @get("legend_containers")[index])
+    
+    
+    $.each legend_lines, (i, el) =>
+      id = $(el).attr("data-serie")
+      s = @get("series")[id]
+      s.set_legend_color( el )
+    
+    # $(@legend_containers[index]).find(".legendColorBox").click () ->
+    legend_lines.click (event) =>
+      target = event.currentTarget
+      id = $(target).attr("data-serie")
+      s = @get("series")[id]
+      
+      s.toggle_enabled()
+      s.set_legend_color(target)
+      @update_graph_from_cache()
+