Skip to content

Instantly share code, notes, and snippets.

@yannrouillard
Last active February 28, 2021 21:57
Show Gist options
  • Save yannrouillard/796fe74d4cbf0cf42f47 to your computer and use it in GitHub Desktop.
Save yannrouillard/796fe74d4cbf0cf42f47 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

@jovistruck I believe your send_event should look like:

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

@jlnfox
Copy link

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
Copy link

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
Copy link

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
Copy link

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.

@christianhau
Copy link

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

@boomshadow
Copy link

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