Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Dashing hot status widget

Dashing Hot Status Widget

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


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.


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.


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


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


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

class Dashing.HotStatus extends Dashing.Widget
constructor: ->
onData: (data) ->
return if not @status
status = @status.toLowerCase()
if [ 'critical', 'warning', 'ok', 'unknown' ].indexOf(status) != -1
backgroundClass = "hot-status-#{status}"
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
ready: ->
<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>
// ----------------------------------------------------------------------------
// 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" })

jlnfox commented Sep 14, 2015

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?


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?

0ptimus commented Mar 9, 2017

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.

adityai commented Sep 30, 2017

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment