Skip to content

Instantly share code, notes, and snippets.

@willjohnson
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

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>
  1. 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.

  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>
</li>
<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>
#!/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
// ----------------------------------------------------------------------------
// 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;
}
}
@joshuafernandes
Copy link

joshuafernandes commented Aug 3, 2016

@txaume79, thanks for the little snippet - worked perfectly :)

Hi @joergrech & @Karatyus,
I've forked this to use 'typhoeus' for the http requests bit and cleaned up the job file a bit. Have a look and see if it works for what you want to do?

https://gist.github.com/joshuafernandes

Cheers

@Thibzy
Copy link

Thibzy commented Dec 20, 2016

Hi,
@txaume79 , I have meet the same problem of @WorldEd1t.
And I have try your solution. But my icons are steel hidden.
I work with a Raspberry pi 3 in local with a Windows 7 computer (no link to internet).
I can ping him by the command line. But in Dashing I have no icons at all. But the name of server was apparent.
What can I do for solve this ?

Thank for your attention

@Thibzy
Copy link

Thibzy commented Jan 5, 2017

@txaume79 I have already try to add a new font manualy to the project by my self but I dont know if I do it properly... maybe somebody have a good tutorial to do it. ?
Because like I am not connected to internet, I am certainly not able to catch the font you advice in your solution.
I'm pretty sure the problem comes of the font because in the source code widget of my dashboard, I can see the variable color changed with the status of my server..
plz any suggestion will be realy appreciate.

@devopsstart
Copy link

Hi,
I'm having some trouble while trying to executing the server_status.rb.
Getting below error.
in `

': uninitialized constant SCHEDULER (NameError)
What can I do for solving this?

@henryp007
Copy link

henryp007 commented Nov 13, 2017

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

image

@mandelbrotmedia
Copy link

Hi,

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

@jok0
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?

@tekgecko
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='//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.

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