Create a gist now

Instantly share code, notes, and snippets.

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 !

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.

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)
<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; }
@jovistruck

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.

@dontrebootme

@jovistruck I believe your send_event should look like:

send_event('hotstatus_snapshot", { message: "Some message", status:"ok" })
@jlnfox
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?

##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 }
@walkleyn

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
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.

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