Memcached widget for Shopify's Dashing dashboard

README.md

Memcached widget for Dashing

Description

Memcached dashing widget to display the number of connected clients to one or more memcached servers, as well as the instance memory usage.

Dependencies

memcached

Add it to dashing's gemfile:

gem 'memcached'

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 usage-gauge-background.png into your /assets/images/ folder
• copy memcached.rb into your /jobs folder
• copy memcached.yml into your /config folder

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

• For the memcached connected clients count widget:

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="memcached_connected_clients" data-view="Number" style="background-color: #3e3735"  data-title="Memcached clients"></div>
    </li>

• For the memcached memory usage widget:

	<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <style scoped>.memcached_used_memory .gauge { height: 145px;}</style>
      <div data-id="memcached_used_memory" data-view="UsageGauge" style="background-color: #3e3735"  data-title="Memcached memory"></div>
    </li>

Settings

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

development: localhost:11211
production: ["localhost:11211", "localhost:11212"]

You can specify the address to a single server, or an array of multiple server, in which case, stats for all servers will be summed.

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

memcached.rb

require "memcached"

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

memcached = Memcached.new(memcached_config[dashing_env])

def parse_info data
	data.kind_of?(Array) ? data.inject(:+) : data
end

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

	send_event('memcached_connected_clients', {
		current: parse_info(info[:curr_connections]),
		moreinfo: "Number of connected clients"
	})

	send_event('memcached_used_memory', {
		max: parse_info(info[:limit_maxbytes]),
		value: parse_info(info[:bytes])
	})
}

memcached.yml

development: localhost:11211
production: ["localhost:11211", "localhost:11212"]

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
	}
}