/team_dashboard

Visualize your team's metrics all in one place.

Primary LanguageJavaScript

Team Dashboard

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.

Heroku hosted Demo

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

Getting Started

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

Running the build

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

Configuration

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

Dashboard Widgets

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.

Available Widgets

Graph Widget

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.

Configuration

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: visits.server1, visits.server2). It also supports wildcards (example: visits.server.*).

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.
hostname@cluster(metric-name)

Counter Widget

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.

Configuration

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: visits.server1, visits.server2). It also supports wildcards (example: visits.server.*).

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.
hostname@cluster(metric-name)

Aggregate Function The values of the selected period are aggregated using selected function. Supports sum, average and delta.

Number Widget

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.

Configuration

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)

Boolean Widget

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.

Configuration

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)

CI (Continous Integration Server) Widget

Shows the current build status for a given project. It currently supports a demo source, Jenkins and Travis CI.

Configuration

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)

HTTP Proxy Source

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.

HTTP Proxy URL

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".

Datapoints

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]
    ]
  }
]

Number

The number data source supports a single integer value and an optional label.

{
  "value" : 8,
  "label" : "This is an example label"
}

Boolean

The boolean data source supports a single boolean value and an optional label.

{
  "value" : true,
  "label" : "This is an example label"
}

Team Dashboard's own REST API

Of course there's a REST API for accessing the dashboard and widget configuration.

Dashboard

GET /api/dashboards

Retrieve list of all dashboards

Example:

curl -H "Accept: application/json" http://localhost:3000/api/dashboards

GET /api/dashboards/id

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
}

POST /api/dashboards

Creates a new dashboard.

Example:

curl -v -H "Content-type: application/json" -X POST -d '{ "name": "test" }' http://localhost:3000/api/dashboards

DELETE /api/dashboards/id

Deletes a specific dashboard

Example:

curl -X DELETE http://localhost:3000/api/dashboards/1

Widget

GET /api/dashboards/id/widgets

Retrieve list of all widgets for specific dashboards

Example:

curl -H "Accept: application/json" http://localhost:3000/api/dashboards/1/widgets

GET /api/dashboards/id/widgets/id

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
}

POST /api/dashboards/id/widgets

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

DELETE /api/dashboards/id/widgets/id

Deletes specific widget

Example:

curl -X DELETE http://localhost:3000/api/dashboards/1/widgets/1

Credits & Contributors

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.

The MIT License

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.