Skip to content

Instantly share code, notes, and snippets.

@benoj

benoj/README.md

Last active December 19, 2015 13:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save benoj/5965001 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save benoj/5965001 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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()
Raw
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>
Raw
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
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment