Watchdog is a Rails engine designed to read and present widgets, which are simple charts with extra metadata.
It reads a YAML file in config/widgets.yml
and will render them onto
the page. You only need to define your widgets configuration and write
the matching controllers action to provide data for them.
Example:
In your config/widgets.yml
file:
widgets:
-
id: unanswered_tickets
title: 'Unanswered tickets'
subtitle: 'This week'
type: 'pie'
group: 'zendesk'
refresh_rate: 10
then in your app/controller/zendesk_controller.rb
:
class Watchdog::ZendeskController < ApplicationController
def unanswered_tickets
render json: [[3, 2], [8, 2]]
end
end
And that's it! Read further for detailed instructions.
If you just want to get a feel of how Watchdog works, just:
- clone the repo;
- run
bundle install
- step into the
test/dummy/
directory; - run
yarn
; - run
bundle exec rails s
; - navigate to
http://localhost:3000/watchdog/widgets
.
Add this line to your application's Gemfile:
gem 'watchdog'
And then execute:
$ bundle
Or install it yourself as:
$ gem install watchdog
The engine currently supports Rails 6 and above. It requires
govuk-frontend
to be loaded and available.
In your config/routes.rb
, add this line:
mount Watchdog::Engine, at: '/watchdog'
/watchdog
is purely arbitrary here, but we'll assume that namespace
for the rest of this guide.
In your app/assets/config/manifest.js
, add the Watchdog bundle:
//= link watchdog_manifest.js
In a SASS file of your choice (ours is
app/assets/stylesheets/core.css.scss
), import the Watchdog
stylesheet:
@import 'watchdog/application';
Since Watchdog relies on govuk-frontend
styling, make sure it is
setup and loaded before our import line.
Add a YAML file in config/widgets.yml
. It should contain an array of
widgets under a widgets
key like this:
widgets:
-
id: unanswered_tickets
title: 'Unanswered tickets'
subtitle: 'This week'
type: 'pie'
group: 'zendesk'
refresh_rate: 10
-
id: answered_tickets
title: 'Answered tickets'
subtitle: 'This week'
type: 'line'
group: 'zendesk'
style: 'wide'
Watchdog will automatically pick up these when you start your app, so make sure you restart your app if you operate any changes in it.
Every widget needs a data source, and that data source is inferred by
Watchdog: it looks for a controller named after the widget's group
property, then calls the action matching the widget's id
property.
In the sample YAML file above, the first widget will look for a
ZendeskController
and try to call unanswered_tickets
on it to get
data. So go ahead and write a controller for it:
class Watchdog::ZendeskController < ApplicationController
def unanswered_tickets
render json: [[2, 3], [3, 4], [4, 5]]
end
end
Don't forget to declare your controller within the Watchdog::
namespace.
The controller infering is done with Rails's own inflector so you
could have an antique_road_show
group that would map to
Watchdog::AntiqueRoadShowController
.
That's it! Navigate to localhost:3000/watchdog/widgets
to see the
result.
Note that how you provide data to your widgets is entirely up to you.
Each widget in the YAML config file can sport the following properties:
name | type | required? | description |
---|---|---|---|
id | string | X | Identifier. Requires a matching action defined on the relevant controller. |
group | string | X | Group this widget belongs to. Indicates which controller to look for. |
type | string | X | a type of chart to render. See the Chartkick documentation for the available types. |
title | string | a title for your widget. | |
subtitle | string | a subtitle for your widget. | |
refresh_rate | number | how often should the widget fetch and re-render data, in seconds. By default, it will not refresh automatically. | |
style | string | an optional space-separated list of CSS classes to apply to your widget. Current option is 'wide'. |
The gem is available as open source under the terms of the MIT License.