Skip to content

Instantly share code, notes, and snippets.

@michthom

michthom/README.md

Forked from welsh/README.md
Last active November 14, 2017 15:35
Show Gist options
  • Save michthom/e70bb7f4f4c74c8350ce to your computer and use it in GitHub Desktop.
Save michthom/e70bb7f4f4c74c8350ce to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Server Status Squares

A Dashing widget that checks whether a server is responding to either an http or ping request using smaller squares to represent its status.

This is an expansion off of the Server Status widget that willjohnson developed.

Description

The widget updates the appropriate squares color upon determining its status. Statuses are as follows:

  • Blue represents a new square that hasn't had any data sent to it yet.
  • Green represents that the square is responding properly
  • Red represents that there is an issue. (Ping failed, non 200 response, etc.)

Example:

Setup

  1. Move server_status_squares.erb into your dashboards directory.

  2. Create a directory called server_status_squares under your widgets directory and move the following under it:

    • server_status_squares.coffee
    • server_status_squares.html
    • server_status_squares.scss

  3. Move server_status_squares.rb into your jobs directory.

  4. Run Dashing and navigate to http://localhost:3030/server_status_squares which will show this example dashboard:

Adjusting

To add a new server, add the following into your dashboard:

<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
    <div data-id="sss-mynewserver" data-view="ServerStatusSquares" data-title="My Server"></div>
</li>

Then in your server_status_squares.rb file within the jobs directory adjust the servers array to add a new entry:

{name: 'sss-mynewserver', url: '192.168.1.150', method: 'ping'},

You need to ensure that the data-id of the dashboard entry matches the name in the new servers array entry.

I use the sss- prefix so I know its a Server Status Squares entry.

Notes

Managing large number of servers
Depending on the number of squares you want to manage and the polling duration you may want to create multiple Server Status Squares jobs.

For example if you have say 60 servers listed and it runs every 60 seconds you may run into issues with jobs overlapping.

Adjusting polling duration
To adjust the polling duration, open up the server_status_squares.rb job file and modify the main scheduler line which is currently set at 60 seconds. The line is:

SCHEDULER.every '60s', :first_in => 0 do |job|

You can modify the '60s' to be any number for seconds. To configure it to 5 minutes you can do '5m'.

Cube Sizing
I've found that doing a Dashing.widget_base_dimensions = [170, 170] works best to fit an optimal number of Squares on a 1080p Dashboard as you can do 10 across and 6 down for a total of 60 Squares.

This can provide you a quick glance system to see if there are any issues with any of the servers as the Red Square will stand out in the sea (of hopefully) Green Squares.

You can still create squares that are almost the same size as the Example dashboards base squares by setting data-sizex="2" data-sizey="2" for the li entry. You can see this in the server_status_squares.erb file for the Clock. (It will be shorter vertically by 30px.)

Raw
server_status_squares.coffee
class Dashing.ServerStatusSquares extends Dashing.Widget
onData: (data) ->
$(@node).fadeOut().fadeIn()
color = if data.result == 1 then "#96BF48" else "#BF4848"
$(@get('node')).css('background-color', "#{color}")
Raw
server_status_squares.erb
<script type='text/javascript'>
$(function() {
Dashing.widget_base_dimensions = [170, 170]
Dashing.numColumns = 10
});
</script>
<% content_for :title do %>Status Status Squares<% end %>
<div class="gridster">
<ul>
<li data-row="2" data-col="1" data-sizex="2" data-sizey="2">
<div data-view="Clock" style="background-color: #4b4b4b"></div>
<i class="icon-time icon-background"></i>
</li>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<div data-id="welcome" data-view="Text" data-title="Server Status Squares" style="background-color: #4b4b4b"></div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<div data-id="sss-gateway" data-view="ServerStatusSquares" data-title="Gateway"></div>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
<div data-id="sss-reddit" data-view="ServerStatusSquares" data-title="Reddit"></div>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<div data-id="sss-github" data-view="ServerStatusSquares" data-title="Github"></div>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<div data-id="sss-brokenserver" data-view="ServerStatusSquares" data-title="Broken Server"></div>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
<div data-id="sss-newserver" data-view="ServerStatusSquares" data-title="New Server"></div>
</li>
</ul>
</div>
Raw
server_status_squares.html
<h1 class="title" data-bind="title"></h1>
<p class="updated-at" data-bind="updatedAtMessage"></p>
Raw
server_status_squares.rb
#!/usr/bin/env ruby
require 'net/http'
require 'uri'
#
# Check whether a server is Responding you can set a server to
# check via http request or ping
#
# Server Options
# name
# => The name of the Server Status Tile to Update
# url
# => Either a website url or an IP address. Do not include https:// when using ping method.
# method
# => http
# => ping
#
# Notes:
# => If the server you're checking redirects (from http to https for example)
# the check will return false
#
servers = [
{name: 'sss-gateway', url: '192.168.1.1', method: 'ping'},
{name: 'sss-reddit', url: 'http://www.reddit.com/', method: 'http'},
{name: 'sss-github', url: 'https://github.com/', method: 'http'},
{name: 'sss-brokenserver', url: '192.168.1.100', method: 'ping'},
]
SCHEDULER.every '1m', :first_in => 0 do |job|
servers.each do |server|
if server[:method] == 'http'
uri = URI.parse(server[:url])
http = Net::HTTP.new(uri.host, uri.port)
if uri.scheme == "https"
http.use_ssl=true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
end
request = Net::HTTP::Get.new(uri.request_uri)
response = http.request(request)
if response.code == "200"
result = 1
else
result = 0
end
elsif server[:method] == 'ping'
ping_count = 10
result = `ping -q -c #{ping_count} #{server[:url]}`
if ($?.exitstatus == 0)
result = 1
else
result = 0
end
end
send_event(server[:name], result: result)
end
end
Raw
server_status_squares.scss
// ----------------------------------------------------------------------------
// Widget Styles
// ----------------------------------------------------------------------------
.widget-server-status-squares {
background-color: #12b0c5;
vertical-align: top;
.title {
color: rgba(255, 255, 255, 0.7);
font-size: 25px;
}
.updated-at {
color: rgba(0, 0, 0, 0.3);
}
}
@henryp007
Copy link

henryp007 commented Nov 14, 2017

Thanks for the code! for some reason the icons only ever show up as red.
Is there a fix for this?
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment