Team Dashboard lets you visualize your team's metrics all in one place (see Screenshots). It is build to be shown on a big screen in your team's space.
It has built-in support for Graphite, Ganglia, Jenkins, Travis CI, etc. and makes it really easy to add more input sources.
The Team Dashboard Data Source Plugin Repository contains contributed plugins and documentation on how to implement your own plugins.
It is implemented as a Rails app and uses MySQL to store your custom dashboards configuration.
Support via Team Dashboard Google Group
Clone the repository:
git clone git://github.com/fdietz/team_dashboard.git
Run bundler:
bundle install
Create a database.yml from the example config:
cp config/database.example.yml config/database.yml
Create the database and run migrations:
rake db:create && rake db:migrate
There is an initial "Demo" source and sample dashboards provided. Generate these via:
rake populate
Start the Rails server:
rails s
If you want to run the tests locally, you will need to install PhantomJS
brew update && brew install phantomjs
Run the unit tests (ruby & js)
rake
You have to configure the MySQL database in config/database.yml.
Graphite is the first input source Team Dashboard supports. Use the environment variable GRAPHITE_URL or change the rails configuration (see application.rb and environment specific files) directly.
For example:
GRAPHITE_URL=http://localhost:8080 rails s
Ganglia is now supported too, it uses the same configuration mechanism
GANGLIA_WEB_URL=http://localhost:8080 GANGLIA_HOST=localhost rails s
A dashboard in Team Dashboard consists of multiple Widgets, which request data from a data source via AJAX request.
All widgets have a name, time interval in which to update themselves and a data source as a common configuration.
The graph widget shows a time series line graph (using rickshaw.js internally). Use it to show number of visits on your web page or number of currently online users and follow-up on trends.
It currently supports a Demo data source, Graphite and Ganglia.
| Name | Documentation |
|---|---|
| Date Range/Period | Select a date range of for example "Last 3 hours" |
| Size | Number of Columns (Possible Values: 1, 2 or 3) |
| Graph Type | Either a line or stacked graph. |
| Data Source | Available are demo, graphite, ganglia, http_proxy currently supported. |
| Targets |
In case of Graphite you can pass a semicolon-separated list of targets (example:
In case of Ganglia you need to know the cluster name, hostname and metric name. Usually its easy to obtain these from the graph url directly.
|
Shows the current value and the percentage of change of the last period. It is based on time series data and uses the same data sources as the graph widget. The widgets supports showing two values. Use it to for example show the current number of online users.
It currently supports a Demo data source, Graphite and Ganglia.
| Name | Documentation |
|---|---|
| Date Range/Period | Select a date range of for example "Last 3 hours" |
| Size | Number of Columns (Possible Values: 1, 2 or 3) |
| Data Source | Available are demo, graphite, ganglia, http_proxy currently supported. |
| Targets |
In case of Graphite you can pass a semicolon-separated list of targets (example:
In case of Ganglia you need to know the cluster name, hostname and metric name. Usually its easy to obtain these from the graph url directly.
|
| Aggregate Function | The values of the selected period are aggregated using selected function. Supports sum, average and delta. |
Shows the current integer value provided by the data source and a label. The widget supports up to three values. Use it to show for the example the number of errors on specific system.
It currently supports a demo data source and a http proxy data source.
| Name | Documentation |
|---|---|
| Date Range/Period | Select a date range of for example "Last 3 hours" |
| Label | Label for this value |
| HTTP Proxy URL (only available for HTTP Proxy Data Source) | HTTP URL should return a JSON structure as described below |
| Value Path (only available for HTTP Proxy Data Source) | dot notation to select nested value from JSON structure (Example: parent.child.nestedChild.value) |
Shows the current boolean value provided by the data source and an label. The widget supports up to three values. Use it to show for example the success of a Jenkins build.
It currently supports a demo data source and a http proxy data source.
| Name | Documentation |
|---|---|
| Date Range/Period | Select a date range of for example "Last 3 hours" |
| Label | Label for this value |
| HTTP Proxy URL (only available for HTTP Proxy Data Source) | HTTP URL should return a JSON structure as described below |
| Value Path (only available for HTTP Proxy Data Source) | dot notation to select nested value from JSON structure (Example: parent.child.nestedChild.value) |
Shows the current build status for a given project. It currently supports a demo source, Jenkins and Travis CI.
| Name | Documentation |
|---|---|
| Server URL | For Travis CI this would be for example http://travis-ci.org for Jenkins for example http://ci.jenkins-ci.org |
| Project | Name of Jenkins Job (example: infra_plugin_changes_report) or Travis CI Slug (example: travis-ci/travis-ci) |
As described in the data source plugin repository documentation you can easily add your own data source implementions.
On the other hand you might prefer to offer a service on your server instead. The HTTP proxy source requests data on the server side, the Rails app being the "proxy" of the web app. The JSON format for the specific sources is described below.
Since we want to support generic JSON documents as data source for various kinds of widgets we use a simple path notation to support selection of a single value. This path selection is currently supported in the Number and Boolean data source.
{
"parent" : {
"child" : {
"child2" : "myValue"
}
}
}
A value path of "parent.child.child2" would resolve "myValue".
The datapoints source supports data for rendering graphs and aggregated values
[
{
"target" : "demo.example",
"datapoints" : [
[1,123456], [7,23466]
]
},
{
"target" : "demo.example2",
"datapoints" : [
[-6,123456], [8,23466]
]
}
]
The number data source supports a single integer value and an optional label.
{
"value" : 8,
"label" : "This is an example label"
}
The boolean data source supports a single boolean value and an optional label.
{
"value" : true,
"label" : "This is an example label"
}
Of course there's a REST API for accessing the dashboard and widget configuration.
Retrieve list of all dashboards
Example:
curl -H "Accept: application/json" http://localhost:3000/api/dashboards
Retrieve details of specific dashboard
Example URL:
curl -H "Accept: application/json" http://localhost:3000/api/dashboards/1
Example Response:
{
created_at: 2012-09-05T08:38:09Z
id: 2
layout: [
4
5
6
7
]
name: Example 2 (Counters, Numbers, Boolean and Graph Widgets)
updated_at: 2012-09-05T08:38:10Z
}
Creates a new dashboard.
Example:
curl -v -H "Content-type: application/json" -X POST -d '{ "name": "test" }' http://localhost:3000/api/dashboards
Deletes a specific dashboard
Example:
curl -X DELETE http://localhost:3000/api/dashboards/1
Retrieve list of all widgets for specific dashboards
Example:
curl -H "Accept: application/json" http://localhost:3000/api/dashboards/1/widgets
Retrieve details of specific widgets for specific dashboards
Example:
curl -H "Accept: application/json" http://localhost:3000/api/dashboards/1/widgets/1
Example Response:
{
created_at: 2012-09-05T11:44:34Z
dashboard_id: 1
id: 9
kind: graph
name: Undefined name
range: 30-minutes
size: 1
source: demo
targets: demo.example1
update_interval: 10
updated_at: 2012-09-05T11:44:34Z
graph_type: line
}
Creates widget for specific dashboard
Example:
curl -v -H "Content-type: application/json" -X POST -d '{ "name": "test", "source": "demo" }' http://localhost:3000/api/dashboards/1/widgets
Deletes specific widget
Example:
curl -X DELETE http://localhost:3000/api/dashboards/1/widgets/1
Thanks go to Martin Tschischauskas and Marno Krahmer who worked with me on the first iteration which was build as part of a XING Hackathon Project.
- luxflux (Raffael Schmid)
- frankmt (Francisco Trindade)
- leejones (Lee Jones)
- rngtng (Tobias Bielohlawek)
Copyright (c) 2012 Frederik Dietz
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.