Skip to content

Instantly share code, notes, and snippets.

Last active April 26, 2022 19:32
Show Gist options
  • Save willjohnson/6313986 to your computer and use it in GitHub Desktop.
Save willjohnson/6313986 to your computer and use it in GitHub Desktop.
Server Status Widget for Dashing


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.


  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>
  1. Create a directory titled "server_status" under your widgets directory and move, server_status.html, and server_status.scss into that directory.

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

  3. Move server_status.rb into your jobs folder.

class Dashing.ServerStatus extends Dashing.Widget
<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>
<h1 class="title" data-bind="title"></h1>
<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>
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
#!/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: '', method: 'http'},
{name: 'server2', url: '', method: 'http'},
{name: 'server3', url: '', method: 'ping'}]
SCHEDULER.every '300s', :first_in => 0 do |job|
statuses =
# check status for each server
servers.each do |server|
if server[:method] == 'http'
uri = URI.parse(server[:url])
http =, uri.port)
if uri.scheme == "https"
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
request =
response = http.request(request)
if response.code == "200"
result = 1
result = 0
elsif server[:method] == 'ping'
ping_count = 10
result = `ping -q -c #{ping_count} #{server[:url]}`
if ($?.exitstatus == 0)
result = 1
result = 0
if result == 1
arrow = "icon-ok-sign"
color = "green"
arrow = "icon-warning-sign"
color = "red"
statuses.push({label: server[:name], value: result, arrow: arrow, color: color})
# print statuses to dashboard
send_event('server_status', {items: statuses})
// ----------------------------------------------------------------------------
// 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;
Copy link


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

Copy link

jok0 commented Apr 12, 2018

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

Copy link

tekgecko commented Nov 2, 2021

@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='//,400,600,700' rel='stylesheet' type='text/css'> i use <link href="//" 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">
  <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="//" rel="stylesheet" type='text/css'>
  <link href='//,400,600,700' rel='stylesheet' type='text/css'>
  <link rel="icon" href="/assets/favicon.ico">
    <div id="container">
      <%= yield %>

    <% 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>
      <a href="#saving-instructions" id="save-gridster">Save this layout</a>
    <% end %>

Thank you this worked for me.

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