Dashing server connection status widget

README.md

Dashing Connection Status Widget

Why

When the Dashing service is down or otherwise cannot be reached, all widget keep displaying their info like everything is normal. There is no obvious sign that there is something wrong. This widget notifies the Dashboard viewer that there is a problem with Dashing.

How

This widget listens to Dashing's connection events. It displays a modal div with a short error message saying that the connection with the server is lost. When the server can be reached again, the modal div will automatically hidden.

Usage

Install the widget as usual.

Put <div data-view="ConnectionStatus"></div> at the bottom of your dashboard.

connection_status.coffee

class Dashing.ConnectionStatus extends Dashing.Widget

  # This is fired when the widget is done being rendered
  ready: ->
    # hide initially
    $(@node).css('display', 'none')
    source = new EventSource('events')
    source.addEventListener 'error', (e)->
      $('.widget-connection-status').css('display', 'flex')
    source.addEventListener 'open', (e)->
      $('.widget-connection-status').css('display', 'none')

  onData: (data) ->
    console.log(params)
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

connection_status.html

<div id="connection_error">
	<h1>Connection error</h1>
	<p>Check that the server is up and reachable</p>
</div>

connection_status.scss

.widget-connection-status {  
    color: #EEE;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #222;
    z-index: 99;
    display: none;
    // display = "flex";
    top: 0px;
    left: 0px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}