Server Status Widget for Dashing

README.md

Description

A Dashing widget that checks whether a server is responding to either an http or ping request. It displays either a check or alert depending on the response.

Usage

1. Add the widget HTML to your dashboard

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="server_status" data-view="ServerStatus" data-title="Server Status"></div>
    </li>

2. Create a directory titled "server_status" under your widgets directory and move server_status.coffee, server_status.html, and server_status.scss into that directory.

3. Modify the servers array of the server_status.rb file.

4. Move server_status.rb into your jobs folder.

server_status.coffee

class Dashing.ServerStatus extends Dashing.Widget

server_status.erb

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="server_status" data-view="ServerStatus" data-title="Server Status"></div>
</li>

server_status.html

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

<ul>
  <li data-foreach-item="items">
    <span class="label" data-bind="item.label"></span>
    <span class="value"><div data-bind-class="item.color"><i data-bind-class="item.arrow"></i></div></span>
  </li>
</ul>

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

server_status.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: how it will show up on the dashboard
# url: either a website url or an IP address (do not include https:// when usnig ping method)
# method: either 'http' or 'ping'
# if the server you're checking redirects (from http to https for example) the check will
# return false

servers = [{name: 'server1', url: 'https://www.test.com', method: 'http'},
		{name: 'server2', url: 'https://www.test2.com', method: 'http'},
		{name: 'server3', url: '192.168.0.1', method: 'ping'}]

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

	statuses = Array.new
	
	# check status for each server
	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

		if result == 1
			arrow = "icon-ok-sign"
			color = "green"
		else
			arrow = "icon-warning-sign"
			color = "red"
		end

		statuses.push({label: server[:name], value: result, arrow: arrow, color: color})
	end

	# print statuses to dashboard
	send_event('server_status', {items: statuses})
end

server_status.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #12b0c5;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-server-status {

  background-color: $background-color;
  vertical-align: top;

  .title {
    color: $title-color;
  }

  ol, ul {
    margin: 0 15px;
    text-align: left;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }

  .list-nostyle {
    list-style: none;
  }

  .label {
    color: $label-color;
  }

  .value {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: $value-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

  .more-info {
    color: $moreinfo-color;
  }

  .red {
    color: red;
  }

  .green {
    color: green;
  }
}

Edit: Looks like I've got it working now from the fix above.

Hi Guys - wondering if I could have some help?
I've loaded the widget and files into Smashing but it doesn't load any of the ping data just the display names of the servers. Any ideas?
I'm currently running the server on Ubuntu

Hi,

is it possible to switch backgroundcolor to red if one of the serverstats is warning?

Hi guys, i have this working although its ticking the servers/computers that are offline. Has anyone had this before?

@WorldEd1t i hope you have found the solution about missing icons. Dashing uses among others, google free fonts not just for the text but also for some icons. It seems, but i don't known the cause, that those icons are lost right now on google's open sans.

A fix that i found is to put an other font origin on layout.erb. Where? between <header></header> and just before that line <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'> i use <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type='text/css'> but you can use any other font that have the needed character that's missing on google's. Hope that workaround can help you. Cheers!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


  <title><%= yield_content(:title) %></title>

  <!-- The javascript and css are managed by sprockets. The files can be found in the /assets folder-->
  <script type="text/javascript" src="/assets/application.js"></script>
  <link rel="stylesheet" href="/assets/application.css">

  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
  <link rel="icon" href="/assets/favicon.ico">
</head>
  <body>
    <div id="container">
      <%= yield %>
    </div>

    <% if development? %>
      <div id="saving-instructions">
        <p>Paste the following at the top of <i><%= params[:dashboard] %>.erb</i></p>
        <textarea id="gridster-code"></textarea>
      </div>
      <a href="#saving-instructions" id="save-gridster">Save this layout</a>
    <% end %>
  </body>
</html>

Thank you this worked for me.