README.md

Loggly Dashing Widget

Description

A simple dashing widget to display loggly data in your dashboard e.g. 500 errors.

Installation

add the loggly-ruby-client to your gemfile

Then

    dashing install 5965001

OR

• copy the loggly.rb file into jobs
• copy loggly.scss loggly.coffee loggly.html into widgets/loggly

Usage

update the configuration object in the loggly.rb to suit your needs and add the following widget to your dashboard

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <div data-id="loggly" data-view="Loggly" data-title="Errors Today"></div>
</li>

loggly.coffee

class Dashing.Loggly extends Dashing.Widget

  @accessor 'current', ->
    points = @get('points')
    if points
      points[points.length - 1].y

  ready: ->
    container = $(@node).parent()
    # Gross hacks. Let's fix this.
    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
    @graph = new Rickshaw.Graph(
      element: @node
      renderer: 'area'
      width: width
      height: height
      series: [
        {
        color: "#FE0000",
        data: [{x:0, y:0}]
        }
      ]
    )

    @graph.series[0].data = @get('points') if @get('points')
    @x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph, ticksTreatment:'glow')
    @y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
    @graph.render()
    @x_axis.render()

  onData: (data) ->
    if @graph
      @graph.series[0].data = data.points
      @graph.render()
      @x_axis.render()

loggly.html

<h1 class="title" data-bind="title"></h1>

<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2>

<p class="more-info" data-bind="moreinfo"></p>

loggly.rb

require 'date'
require 'loggly-ruby-client'
CONFIGURATION = {
	day_range: 7,
	domain: 'DOMAIN',
	username: 'USERNAME',
	password: 'PASSWORD',
	query:'QUERY',
	input:'INPUT'
}

class DateErrorsFactory
	def initialize(loggly,configuration)
		@loggly = loggly
		@configuration = configuration
		@dates_range_factory = DatesRangeFactory.new(@configuration[:day_range])
		@epochGenerator = EpochGenerator.new
	end

	def create_points
		errors = @loggly.search(from:"NOW-#{@configuration[:day_range]}DAYS",
								query:[@configuration[:query]],
								input: [@configuration[:input]])["body"]["data"]              
		dates = @dates_range_factory.create
		points = []
		errors.each do |error|
		  date = Date.parse(error["timestamp"])
		  epoch = @epochGenerator.generate_epoch(date)
		  dates[epoch] += 1
		end
		dates
	end
end

class EpochGenerator
	def generate_epoch(date)
		return date.to_time.getutc.to_i
	end
end

class DatesRangeFactory
	def initialize(number_of_days)
		@number_of_days = number_of_days
		@epochGenerator = EpochGenerator.new
	end
	def generate_epoch(date)
		return date.to_time.to_i
	end

	def create
		dates = Hash.new
		today = Date.today
		(0..(@number_of_days-1)).each do |offset| 
			epoch = @epochGenerator.generate_epoch(today-offset)
			dates[epoch] = 0
		end
		dates
	end
end

class PointsBuilder
	def initialize(date_errors_factory)
		@date_errors_factory = date_errors_factory
	end

	def build
		dates = @date_errors_factory.create_points
		points = []
		count = 0
		dates.each do |date,error_count|
			points[count] = {x: date, y: error_count}
			count +=1
		end
		points.reverse
	end
end

config = LogglyRubyClient::Config.new(domain:'allegro',username:'allegrodeploy',password:'AllegroNetworks1')
loggly = LogglyRubyClient::API.new(config: config)

epoch_generator = EpochGenerator.new
dates_error_factory = DateErrorsFactory.new(loggly,CONFIGURATION)


SCHEDULER.every '2s' do
  points = PointsBuilder.new(dates_error_factory).build
  send_event('loggly', points: points)
end

loggly.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #8fb347;

$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 0, 0, 0.3);
$tick-color:        rgba(0, 0, 0, 0.4);


// ----------------------------------------------------------------------------
// Widget-loggly styles
// ----------------------------------------------------------------------------
.widget-loggly {

  background-color: $background-color;
  position: relative;


  svg {
    position: absolute;
    opacity: 1;
    fill-opacity: 1;
    left: 0px;
    top: 0px;
  }

  .title, .value {
    position: relative;
    z-index: 99;
  }

  .title {
    color: $title-color;
  }

  .more-info {
    color: $moreinfo-color;
    font-weight: 600;
    font-size: 20px;
    margin-top: 0;
  }

  .x_tick {
    position: absolute;
    bottom: 0;
    .title {
      font-size: 20px;
      color: $tick-color;
      opacity: 0.5;
      padding-bottom: 3px;
    }
  }

  .y_ticks {
    font-size: 20px;
    fill: $tick-color;
    fill-opacity: 1;
  }

  .domain {
    display: none;
  }

}