Dashing hot status widget

README.md

Dashing Hot Status Widget

You like the Dashing Hotness Widget and you like the text widget ? You will love the Dashing Hot Status Widget !

About

This widget is heavily inspired by the hotness widget except it will change its color based on the text displayed instead of the status text displayed (OK, WARNING, CRITICAL or UNKNOWN)

It is designed to create simple green/orange/red monitoring dashboards.

Installation

From your Dashing Dashboard's directory, use the command:

dashing install 796fe74d4cbf0cf42f47

Using the widget

Just include a widget with a data-view of HotStatus and you're nearly done ! Now you just have to send the that contains the status and optionnally a message.

If you want to create tiny HotStatus widget, you can set data-lightmode to 1 in the widget configuration so that the fields message and updatedAt are never shown.

Sound support

As a bonus, this widget can also play a sound when status is modified. Just add one or more data-*status*sound attributes with the value set to an absolute or relative url pointing to an audio file. status must be one of ok, critical, warning or unknown.

Each time the status will change, the widget will play the audio file associated to the new status.

Example:

<div data-id="hotstatus" data-view="HotStatus" data-title="Hot Status widget" data-criticalsound="/mp3/critical.mp3"><

Thanks

Special thanks to the Dashing Hotness Widget author as this widget is nearly forked from the Hotness widget.

License

The colour schemes and this widget are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 license.

hot_status.coffee

class Dashing.HotStatus extends Dashing.Widget

  constructor: ->
    super

  onData: (data) ->
    return if not @status
    status = @status.toLowerCase()

    if [ 'critical', 'warning', 'ok', 'unknown' ].indexOf(status) != -1
      backgroundClass = "hot-status-#{status}"
    else
      backgroundClass = "hot-status-neutral"

    lastClass = @lastClass

    if lastClass != backgroundClass
      $(@node).toggleClass("#{lastClass} #{backgroundClass}")
      @lastClass = backgroundClass

      audiosound = @get(status + 'sound')
      audioplayer = new Audio(audiosound) if audiosound?
      if audioplayer
        audioplayer.play()

  ready: ->
    @onData(null)

hot_status.html

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

<h2 class="status" data-bind="status" data-hideif="lightmode"></h2>

<p class="message" data-bind="message" data-hideif="lightmode"></p>

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

hot_status.scss

// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------
@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #000000;
$title-color: rgba(255, 255, 255, 0.7);
$status-color: #FFFFFF;
$message-color: rgba(255, 255, 255, 0.7);
$updated-at-color: rgba(0, 0, 0, 0.3);

// ----------------------------------------------------------------------------
// Widget-status styles
// ----------------------------------------------------------------------------
.widget-hot-status {

  background-color: $background-color;
  @include transition(background-color, 1s, linear);

  .title {
    color: $title-color;
    margin-bottom: 10px;
  }

  .status {
    color: $status-color;
    font-size: 40px;
  }

  .message {
    color: $message-color;
    font-size: 18px;
  }

  .updated-at {
    color: $updated-at-color;
  }

}

.hot-status-ok { background-color: #00C176; }
.hot-status-warning { background-color: #FABE28; }
.hot-status-critical { background-color: #FF003C; }
.hot-status-unknown { background-color: #FF003C; }

My hot status does not change color on data

 <div data-id="hotstatus_snapshot" data-view="HotStatus" data-title="Hot Status widget" data-bind="value"></div>

send_event('hotstatus_snapshot', { value: health_status })

it does show the value though.

@jovistruck I believe your send_event should look like:

send_event('hotstatus_snapshot", { message: "Some message", status:"ok" })

This widget is awesome and working very well! Now, I'm trying to use different colors to show the status and in order to do this, I changed the color values in hot_status.scss

.hot-status-ok { background-color: #00C176; }
.hot-status-warning { background-color: #FABE28; }
.hot-status-critical { background-color: #FF003C; }
.hot-status-unknown { background-color: #FF003C; }

I tried changing them, but nothing happened. Is there a way to accomplish this? What am i missing?

##EDIT##

Seems like my problem was the style precedence. To change the colors, besides changing the hexa values, I needed to add !important after it. Now the code looks like this with my custom colors:

.hot-status-ok { background-color: #2DCC70 !important}
.hot-status-warning { background-color: #F1C40F !important}
.hot-status-critical { background-color: #E84C3D !important}
.hot-status-unknown { background-color: #E84c3D !important }

I'm wondering if it would be possible to add, similarly to sound support, a way to perform an aditional action (like send alerts via email) when the hot_status goes critical?

Can someone confirm this widget still work in the current version of Dashing? Installed it to a test dashboard and the tile for the widget is invisible.

Which gem should I add to the Gemfile? When I installed the widget using dashing install 796fe74d4cbf0cf42f47 the ouput had a comment stating that I should edit the Gemfile and run bundle install. But, no mention of the name of the gem.

I have the same problem, the tile is invisible for me, I have installed the gist and added a div segment with the HotStatus data-view, but nothing shows up...

I did the gist install and things are working fine for me. This is a nice little widget, love it!