Statuscake Widget for Dashing

As a web developer my main job is done as soon as a website is coded tested and launched, but I want my projects to stay online 24 hours a day 7 days a week and at least for a few years.

Statuscake website monitoring

Statuscake is a free website monitoring service I use for some of my websites.

Statuscake has email and SMS notifications but I also wanted to see the status of the most important projects live on my dashing dashboard, so I decided to create a custom dashing widget.

Dashing Widget

This widget can be used with a free statuscake account, you just need your API key and the ids of your tests.

• You can find the API key here: https://www.statuscake.com/App/APIKey.php
• The test id is part of the url if you just view the details of one of your tests e.g. https://www.statuscake.com/App/AllStatus.php?tid=xxxxxxx

Features

The Widget shows a list of your tests and a status for each of the tests.

As long as all test have status “Up” the widget is green, but as soon as one website is down the whole widget color changes to red.

I assume you know how to add dashing widgets, so I just paste the required code here.

statuscake.html

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

<ul class="list-nostyle">
  <li data-foreach-item="items">
    <span class="site" data-bind="item.site"></span>
    <span class="status" data-bind="item.status"></span>
    <br><span class="lasttest" data-bind="item.lasttest"></span><br>
  </li>
</ul>

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

statuscake.coffee

class Dashing.Statuscake extends Dashing.Widget

  ready: ->
    super

  onData: (data) ->
      node = $(@node)
     status = data.overall_status
    node.addClass "status-#{status}"

statuscake.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color-ok:  rgba(67, 101, 0, 1);
$background-color-warning:  rgba(204, 0, 0, 1);
$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-statuscake styles
// ----------------------------------------------------------------------------
.widget-statuscake {

  background-color: $background-color-ok;
  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;
  }

  .site {
    color: $label-color;
  }

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

  .lasttest{
    margin-left: 15px;
    font-size: 10px;
  }

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

  &.status-ok {
    background-color: $background-color-ok;
  }

  &.status-warning {
    background-color: $background-color-warning;
  }
}

Add the files above to a new folder “widgets/statuscake”

The following code can be saved to “jobs/statuscake.rb”

require 'json'
require 'pp'

username = 'YOUR_USERNAME'
key = 'YOUR_API_KEY'
testids = ['111111', '1111111', '111111', '1111111']

SCHEDULER.every '5s' do
 items=[]
    is_down=0
   overall_status='ok'
   testids.each{ |testid|
      response = Net::HTTP.get_response(URI('https://www.statuscake.com/API/Tests/Details/?TestID='+testid+'&Username='+username+'&API='+key))
      website = JSON.parse(response.body)
     items << { site: website['WebsiteName'], status: website['Status'], lasttest: website['LastTested'] }
       if website['Status']!='Up'
          overall_status='warning'
      end
     send_event('welcome', { text:response.body})
      }

   send_event('statuscake', { items:items,overall_status: overall_status })

end

And now just add the widget to your dashboard:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="statuscake" data-view="Statuscake" data-title="Monitoring"></div>
</li>

More about dashing

Dashing Graph from Google Spreadsheet