Skip to content
This repository has been archived by the owner on Mar 7, 2018. It is now read-only.

Dashing Workshop

Jump to bottom
Alexsandro Luiz Specht edited this page Feb 24, 2017 · 12 revisions

Exciting new update: Watch it performed in person at Monitorama 2014 https://vimeo.com/95307499

More documentation can be found at: http://dashing.io/

Note: Dashing runs best on UNIX. I recommend you try it in a VM if you're on windows.

Le Part 1

Install the gem from command line. Make sure you have Ruby 1.9+
$ gem install dashing

Le Part 2

Create a new project:
$ dashing new monitorama

Change your directory to monitorama, and bundle gems:
$ bundle
Note:If it's complaining, you might not have bundler (the ruby package manager) installed. "gem install bundler" should do the trick

Start the Server:
$ dashing start

Go to http://localhost:3030 and enjoy!

Le Part 3

Create a dashboard called 'ops':
$ dashing generate dashboard ops

Have a look at the file that was just created in /dashboards/ops.erb

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

In dashboards/ops.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

Go in /widgets/alert/alert.scss and add a background colour to the widget:

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

In dashboards/ops.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 /widgets/alert/alert.scss

.widget-alert {
  background: #00ff99;
  font-size: 65px;
  font-weight: bold;
}

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

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

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

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

In alert.coffee, add this to the bottom:

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

In alert.scss, add a danger class (DAAAANGER ZOOOONE):

.danger {
  background: red;
}

Try cURLing the API again but with different values. If the value is higher than 300, then the widget should be red!

Le Part 4: Job Creation

Create a new job:
$ dashing generate job ops

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

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

Restart the server, and watch the widget update!

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

@accessor 'value', Dashing.AnimatedValue

Note: Chrome is sometimes weird, and it's possible that your browser isn't showing the number anymore in the widget. If that's the case load dashing in a brand new tab to clear the cache.

Le Part 5

Duplicate the widget code from ops.erb so that you have 2 of the same widget on the dashboard.

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="response_time" data-view="Alert" data-addclass-danger="isTooHigh"></div>
    </li>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="response_time" data-view="Alert" data-addclass-danger="isTooHigh"></div>
    </li>
  </ul>
</div>

Change the response_time to response_time_1 and response_time_2:

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="response_time_1" data-view="Alert" data-addclass-danger="isTooHigh"></div>
    </li>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="response_time_2" data-view="Alert" data-addclass-danger="isTooHigh"></div>
    </li>
  </ul>
</div>

In jobs/ops.rb, change it to send data to the 2 separate widgets:

SCHEDULER.every '1s', :first_in => 0 do |job|
  send_event('response_time_1', { value: rand(400) })
  send_event('response_time_2', { value: rand(400) })
end

Remember to restart the server when you change a job!

Let's make the title of the widget configurable inside alert.html

<h1 data-bind="title"></h1>
<div data-bind="value"></div>

Now in our dashboards/ops.erb, we can add the value that the title should have:

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="response_time_1" data-view="Alert" data-addclass-danger="isTooHigh" data-title="Response Time App1"></div>
    </li>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="response_time_2" data-view="Alert" data-addclass-danger="isTooHigh" data-title="Response Time App2"></div>
    </li>
  </ul>
</div>

Let's make the threshold dynamic instead of a hardcoded 300. In alert.coffee:, modify the isTooHigh accessor:

@accessor 'isTooHigh', ->
    @get('value') > @get('threshold')

We can then specify the threshold on each widget instance in ops.erb

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="response_time_1" data-view="Alert" data-addclass-danger="isTooHigh" data-title="Response Time App1" data-threshold=200></div>
    </li>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="response_time_2" data-view="Alert" data-addclass-danger="isTooHigh" data-title="Response Time App2" data-threshold=300></div>
    </li>
  </ul>
</div>

Now just for fun, move the widgets around, and "save the layout"

Le Part 6

Let's commit what we've done.

  • $ git init
  • $ git add .
  • $ git commit -m "my first dashboard"

And let's put it on heroku!

  • $ heroku create
  • $ git push heroku master

While you wait for the deploy, check out some of the awesome widgets that are available: https://github.com/Shopify/dashing/wiki/Additional-Widgets

Oh, and if you'd like to make cool projects like Dashing, or you want to work with a top notch ops group, come work at Shopify

Clone this wiki locally