Skip to content

Instantly share code, notes, and snippets.

@andrescolodrero
Last active November 7, 2016 21:31
Show Gist options
  • Save andrescolodrero/0ce0821fedca00d8a886 to your computer and use it in GitHub Desktop.
Save andrescolodrero/0ce0821fedca00d8a886 to your computer and use it in GitHub Desktop.
Number Status Services

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"}

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}")
<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>
// ----------------------------------------------------------------------------
// 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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment