Number Status Services

readme.md

Number Status Services

his Dashing.io widget is based on Server Status Squares that was implemented by welsh and the widget Number.

I merge those widgets because i need to monitor the status of the services (ok, warning, error) and also get an idea of how the service is working, showing some values.

The widget show a number indicating status of a service and if this value has changed (increase or decrease). It is also show 3 different colors:

• Green Color: Status Ok
• Orange Color: Warning
• Red Color: Error

The color is based on the paremeter "result".

An example of JSON command should be:

{ "auth_token": "YOUR_AUTH_TOKEN", "title": "Index Size", "result" : 1, "current": "250","last": "220"}

number_service-status.coffee

class Dashing.NumberStatusService extends Dashing.Widget
  @accessor 'current', Dashing.AnimatedValue

  @accessor 'difference', ->
    if @get('last')
      last = parseInt(@get('last'))
      current = parseInt(@get('current'))
      if last != 0
        diff = Math.abs(Math.round((current - last) / last * 100))
        "#{diff}%"
    else
      ""

  @accessor 'arrow', ->
    if @get('last')
      if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'

  onData: (data) ->
    if data.status
      # clear existing "status-*" classes
      $(@get('node')).attr 'class', (i,c) ->
        c.replace /\bstatus-\S+/g, ''
      # add new class
      $(@get('node')).addClass "status-#{data.status}"
     $(@node).fadeOut().fadeIn() 
     color = if data.result == 1 then  "#96BF48" else if data.result == 2 then "#EFAC4D"	else "#BF4848"
     $(@get('node')).css('background-color', "#{color}") 

number_service_status.html

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

<h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix"></h2>

<p class="change-rate">
  <i data-bind-class="arrow"></i><span data-bind="difference"></span>
</p>

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

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

number_service_status.scss

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

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

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-number-status-service {

  background-color: $background-color;
  vertical-align: top;
  .title {
    color: $title-color;
    font-size: 25px;
  }

  .value {
    color: $value-color;
  }

  .change-rate {
    font-weight: 500;
    font-size: 30px;
    color: $value-color;
  }

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

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

}