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.

dashing-statuscake-widget-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

 

 

 

4 Responses to “Statuscake Widget for Dashing”

  1. PAD

    Hi,

    The widget interests me, so I copy pasted the code and put in in the right places in a freshly installed dashing dashboard.

    But when I start the application, I have errors in the terminal and the widget doesn’t show the websites …
    I have reconstructed an url for one testid, pasted the url in the browser, and it outputs JSON in the browser, so username, TESTID’s and API key are correct…

    I tried to install the required pp by gem install pp, but gem does not find a valid pp in any repository …

    Any ideas ? What could I be doing wrong ? Thank a lot !

    Terminal output :

    scheduler caught exception:
    A JSON text must at least contain two octets!
    /var/lib/gems/1.9.1/gems/json-1.8.2/lib/json/common.rb:155:in `initialize’
    /var/lib/gems/1.9.1/gems/json-1.8.2/lib/json/common.rb:155:in `new’
    /var/lib/gems/1.9.1/gems/json-1.8.2/lib/json/common.rb:155:in `parse’
    /home/vagrant/projects/dashboards/project-dashboard-statuscake/jobs/statuscake.rb:15:in `block (2 levels) in ‘
    /home/vagrant/projects/dashboards/project-dashboard-statuscake/jobs/statuscake.rb:12:in `each’
    /home/vagrant/projects/dashboards/project-dashboard-statuscake/jobs/statuscake.rb:12:in `block in ‘

    Reply
  2. Camille

    I made a tiny modification to your CoffeeScript to get this working on team dashboards.

    “`
    onData: (data) ->
    node = $(@node)
    status = data.overall_status
    node.removeClass “status-warning”
    node.removeClass “status-ok”
    node.addClass “status-#{status}”
    “`

    Because the original code was only adding CSS classes and never removing them, the widget was still display as “warning” even if the StatusCake test was back to “Up”. By removing the status classes first, the display is correct even when going from down to up.

    Thank you for sharing your code !!!!

    Reply
    • Camille

      Or potentially something more elegant:
      “`
      node.removeClass (index, css) ->
      (css.match(/(^|\s)status-\S+/g) or []).join ‘ ‘
      “`

      Reply
  3. nice

    Very nice widget, thanks for sharing,
    because of this widget Status cake will have +1 new customer.
    I will now get a basic license and try the widget.

    nice

    Reply

Leave a Reply