Redis widget for Dashing

README.md

Redis widget for Dashing

Description

Redis dashing widget to display the number of connected clients to a redis server, as well as the instance memory usage.

Dependencies

redis

Add it to dashing's gemfile:

gem 'redis'

and run bundle install.

Usage

To use this widget:

• copy usage_gauge.coffee, usage_gauge.coffee.html and usage_gauge.coffee.scss into the /widgets/usage_gauge folder
• copy redis.rb into your /jobs folder
• copy redis.yml into your /config folder
• copy usage-gauge-background.png into your /assets/images/ folder

Then include the widget in a dashboard, by adding the following snippet to your dashboard layout file:

• For the Redis clients widget:

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
	    <div data-id="redis_connected_clients" data-view="Number" style="background-color: #6C3039" data-title="Redis clients"></div>
	</li>

• For the redis memory usage widget:

	<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
	    <div data-id="redis_used_memory" data-view="UsageGauge"  data-title="Redis memory"></div>
	<li>

Settings

You can configure the redis server address in the /config/redis.yml file. You can define multiple address depending on the environment:

development: localhost:6379
production: /tmp/redis.sock

The environment used is read from ENV['DASHING_ENV'].

Notes

For the memory usage widget, 100% usage means that your redis instance is using all the memory allocated to the redis server, defined by the maxmemory setting in redis.conf. If you didn't set a limit, the peak memory usage will be used as the maximum.

redis.rb

require "redis"

dashing_env = ENV['DASHING_ENV'] || 'development'
redis_config = YAML.load_file(File.dirname(__FILE__) + '/../config/redis.yml')

if redis_config[dashing_env].include? ":"
	t = redis_config[dashing_env].split(":")
	redis = Redis.new({:host => t[0], :port => t[1].to_i})
elsif redis_config[dashing_env][-5, 5] == ".sock"
	redis = Redis.new({ :path => redis_config[dashing_env] })
end

SCHEDULER.every('2s', first_in: '1s') {
	info = redis.info

	send_event('redis_connected_clients', {
		current: info["connected_clients"],
		moreinfo: "Number of connected clients"
	})

	# Send memory usage stats in bytes
	send_event('redis_used_memory', {
		# Use peak memory as maximum in case no hard limit was defined in redis.conf
		max: [info["used_memory_peak"].to_i, redis.config("GET", "maxmemory")[1].to_i].max,
		value: info["used_memory"].to_i
	})
}

redis.yml

development: localhost:6379
production: localhost:6379

usage-gauge-background.png

usage_gauge.coffee

class Dashing.UsageGauge extends Dashing.Widget
	@accessor 'value', Dashing.AnimatedValue

	ready: ->
		$(@node).find(".value").before("<div class='gauge'></div>")
		$(@node).find(".gauge").append("<div class='gauge-meter'></div>")
		@meter = $(@node).find(".gauge-meter");

	onData: (data) ->
		@meter.animate({height: Batman.mixin Batman.Filters.percentage(data.value, @get("max")) + "%"})

	@accessor "total", ->
		@get("max")

	@accessor "suffix", ->
		" %"

Batman.mixin Batman.Filters,
	percentage: (n, total) ->
		Math.round(n * 100 / total)

usage_gauge.html

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

<h2 class="value" data-bind="value | percentage total | append suffix"></h2>

<p class="updated-at" data-bind="updatedAtMessage"></p>

usage_gauge.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #ec223f;

$title-color:       rgba(255, 255, 255, 0.7);
$updated-at-color:  rgba(255, 255, 255, 0.5);

$meter-background:  darken($background-color, 15%);

// ----------------------------------------------------------------------------
// Widget-meter styles
// ----------------------------------------------------------------------------
.widget-usage-gauge {

  background-color: $background-color;

	.title {
		color: $title-color;
	}

	.value {
		font-weight: 600;
		font-size: 30px
	}

	.gauge {
		width: 100px;
		height: 180px;
		display: block;
		margin: 0 auto 10px;
		position: relative;
	}

	.gauge-meter, .gauge::after {
		display: block;
		background: url("/assets/usage-gauge-background.png") repeat-y center bottom;
	}

	.gauge::after {
		content: "";
		height: 100%;
		opacity: 0.15;
	}

	.gauge-meter {
		width: 100px;
		position: absolute;
		bottom: 0;
		opacity: 0.6;
	}

	.updated-at {
		color: $updated-at-color
	}
}