Dashing Briefly

scott.murphy@arrow-eye.com

2016-05-19 2106-06-02 2016-07-07

Dressing up your dashboard

bowtie

Presenter Notes

Warning

This is a short presentation. We can have a video afterward if people want it. We will check when the time comes.

Presenter Notes

What is Dashing anyway?

Dashing is:

  • A Sinatra based framework that lets you build beautiful dashboards
    • Sinatra is a Ruby framework
  • As of April 11 2016, no longer being maintained
    • More on that in a moment

Presenter Notes

Key Features:

  • Use premade widgets, or fully create your own with scss, html, and coffeescript.
  • Widgets harness the power of data bindings to keep things DRY and simple. Powered by batman.js.
  • Use the API to push data to your dashboards, or make use of a simple ruby DSL for fetching data.
  • Drag & Drop interface for re-arranging your widgets.
  • Host your dashboards on Heroku in less than 30 seconds.

Presenter Notes

Wait... No longer maintained?

Yes, there is a post about it on the Shopify website which states:

April 11, 2016

As of today, Dashing is no longer being actively maintained. That doesn't mean that it's going away, though. This repo will still be around as reference for all to use.

Dashing was built to be a simple project to quickly hack together dashboards. There were plans for a 2.0 version, but unfortunately those had to be put aside as we've significantly reduced our use of Dashing internally ( a lot has been moved over to DataDog ). Apologies for the pull requests that did not get merged. I wanted to keep this project as simple and stripped down as possible so that it was easy for people to read the source and pick it up. For those learning ruby, it's a great library to tinker with, and for those with more experience, it provides a great base to expand upon.

Presenter Notes

So why bother?

It is still useful.

I was considering doing a kiosk display as a screen on my entertainment system, basically some weather, scrolling news stories, environmental monitoring, stills from webcams, etc. Dashing would allow me to drop all of that onto a screen and handle the management of placement and content with little effort. Maybe even put together a mini network status widget. The possibilities are pretty wide open.

Presenter Notes

What does dashing look like?

Well, it is a grid of widgets that you can insert data into and they are managed indepently via their ids. They can also consume data provided to them or obtain data via a timing mechanism.

While I'm not an expert on ruby or frameworks in general, this does has lots of potential for providing a very customized dashboard.

The widgets can be rearranged while displayed as well.

Presenter Notes

The standard demo dashboard

bowtie

Presenter Notes

Installing Dashing

This is the Quick intro...

  • Install dashing
    • gem install dashing
  • Generate a new dashboard
    • dashing new demo
    • cd demo
    • bundle
    • dashing start

Now you can go to http://localhost:3030 and see the demo dashboard we had a picture of earlier

Presenter Notes

Creating a Dashboard

Generate a new dashboard called 'monitor'

$ dashing generate dashboard monitor

Which generates dashboards/monitor.erb

1 <div class="gridster">
2   <ul>
3     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
4       <div data-id="my_widget" data-view="Text"></div>
5     </li>
6   </ul>
7 </div>

Presenter Notes

Creating a Dashboard

Let's say we want to create a widget that alerts us on things...

In dashboards/monitor.erb, change the data-view="Text" on line 4 to data-view="Alert".

We will need to create a widget of type Alert:

$ dashing generate widget alert

In dashboards/widgets/alert/alert.scss and add a background colour to the widget:

1 .widget-alert {
2   background: #00ff99;
3 }

Presenter Notes

Creating a Dashboard

Edit dashboards/monitor.erb, change the data-id="my_widget" on line 4 to data-id="response_time".

You can cURL the API to update the widget

curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "value": 300 }' \http://localhost:3030/widgets/response_time

Let's make the font bigger in dashboards/widgets/alert/alert.scss

1 .widget-alert {
2   background: #00ff99;
3   font-size: 65px;
4   font-weight: bold;
5 }

Presenter Notes

Creating a Dashboard

Add a header to the alert.html to show Response Time:

1 <h1>Response Time</h1>
2 <div data-bind="value"></div>

Add data-addclass-danger="isTooHigh" to line 4 of monitor.erb:

1 <div data-id="response_time" data-view="Alert" 
2     data-addclass-danger="isTooHigh"></div>

In alert.coffee, add this to the bottom:

1 @accessor 'isTooHigh', ->
2     @get('value') > 300

Presenter Notes

Creating a Dashboard

In alert.scss, add a danger class:

1 .danger {
2   background: red;
3 }

Send a new value to the API. If the value is higher than 300, then the widget should be red!

Presenter Notes

Demo

Presenter Notes

Adding automation

Create a new job...

$ dashing generate job monitor

Change the file in jobs/monitor.rb to this:

1 # :first_in sets how long it takes before the job is first 
2 # run. In this case, it is run immediately
3 SCHEDULER.every '1s', :first_in => 0 do |job|
4   send_event('response_time', { value: rand(400) })
5 end

Restart your server, and watch the widget update!

Let's make our widget animate! Add this to the bottom of alert.coffee:

1 @accessor 'value', Dashing.AnimatedValueO

Presenter Notes

Demo 2

Presenter Notes

There is more

The original workshop goes on to drop a second widget that is tuned differently and you can see how alerts will trigger each box

It then goes on to perform a upload to heroku to host the dashboard.

You are welcome to do the whole thing yourself. The tutorial is in the references and as you can see, this is quite easy to use.

Presenter Notes

Another dashboard

As I had mentioned that this is a simple thing to configure, I decided to create a demo dashboard of my own to show how simple it is. Don't expect a finely crafted demo. It lists how many twitter followers I have, the local weather, and a view from a traffic cam that hould update every five minutes. I don't have a automated refresh coded at this time, so it probably will not do so.

Presenter Notes

Choices

I'd love to take credit for the demo, but the guy who wrote the tool did a workshop at monitorama in 2014 and this is mostly extracted from that workshop.

The video from the workshop is available online and I have a copy on my laptop. We can watch it to basically follow through his full the tutorial if there is sufficient interest. We do have another talk to follow this one, so we can decide about the video after the next talk.

Presenter Notes

Summary

If you need a dashboard to present changing data, dashing is a pretty lightweight and easy to use framework. I don't know if I'd actually use it externally, but for internal use, you can knock out a useful dashboard quickly and easily.

Presenter Notes

References

Presenter Notes