Would be useful to have an option to zoom the graph chart and inspect historical data, eg select different date ranges and drilldown deeply into data

The dashboard might become a little bit inefficient when it is used for big and complex systems where a lot of data has to be monitored. Sometimes even very big screen wont be enough to put all checks that you want. Even if you can put all of them it takes time to check them one by one whether everything is going well. One nice idea could be:

• Monitoring only what you need in the moment and show an alert view widget on the first place of the screen when something goes wrong even if you dont have it on the current dashboard configuration.

For example if the server disk space goes above the predefined threshold and you dont have it on your dashboard, you definitely want to know it right away.

The Idea of keeping record of different dashboards is very good. One improvement for this can be if the dashboard can keep data of preconfigured widgets only. For example a showdown menu can be added next to "Lock" where the user can keep preconfigured widgets and add them when he needs them in his dashboards. This will save time in the future when the user needs to use widgets that he already configured in the past.

The current UI element is a single textfield. When using graphite the metric names tend to be quite large and the single textfield doesn't scale anymore.

Instead add a simple autosuggest textfield and a separate list UI element should be used.

A mockup can be seen here:
https://www.dropbox.com/s/ru2fp01euv5dss2/widget_edit_dialog.png

The jasmine javascript tests should be run automatically!

There should be a lock/unlock toggle button for a dashboard.

After I created my dashboard I'd like to lock it. Only when pressing the unlock button again, I can do changes again.

Hi,

Im trying to run the jasmine specs but they dont seem to be passing as from today. Since I'm not completely sure if they are being maintained or not (or if there is a build somewhere), just wanted to check they should be ok.

Also would be interested in contributing to the project, but havent found any roadmap or list of issues so I can see if the things I want to do are planned or not.

Would be really useful to have an http://opentsdb.net plugin available

This is the error complete error messages. The same error happens with the target browser dialog called from the function editor dialog

Ideally people should immediately notice that they can edit the title via mouse click.

the jquery code is a mess, clean this up!

Based on the discussion in #3 (#3) we want a further improved graphite configuration.

It should be possible to easily use graphite functions.

To minimize errors (wrong usage of functions, missing params, typos, etc.) we should consider a preview functionality.

Additionally, a list of available function should be shown if possible.

This would make it much simpler to debug failing tests. Currently using application.js its quite difficult to know where the error actually occurred.

Preferably, we don't want to manage the list of js files in application.js and spec_helper.yml.

Update gems and bootswatch cyborg theme.

Lock versions in Gemfile.

Currently, when opening the widget edit dialog (or selecting a different source) we fetch all the available metrics and only after they are fetched we show the actual list of targets.

Instead we want to render the target list right away. Only when opening the target browser dialog we should fetch the list of available metrics. A loading indicator should show the progress.

I have an issue with SSL certificate verification. Looks like it's not valid (enough) and so I want to disable the verification (for now). I only could solve this by adding to various places:

http.verify_mode = OpenSSL::SSL::VERIFY_NONE

or

::HttpService.request(url, :ssl => {:verify => false})

Any chance or ideas how to configure this globally? Sth. like default HttpService params??

I'm reading up on everything to do with Graphite, and came across Cubism from Square. It looks like an awesome way to visualize data from Graphite, so I'm wondering if we could add that to the new version of team dashboard.

It would also be cool to add support for all of rickshaw's graph types. (looking forward to the possibility of a pie chart type.)

if i select "stacked graph " in graph settings, the result is a simple line graph on the canvas.

In app/models/sources/datapoints/graphite.rb:59

http.use_ssl = true if uri.port != 80
makes the assumption that anything not running on port 80 should use ssl

Wouldn't it be better to define the protocol in the environment variable at start and check with uri.scheme?

It should be possible to enter a url and the value_path and directly verify if it works correctly. Especially the value_path selection is error prone.

I'd like to actually see the json document and then the resulting value for given value_path.

Hi There,

I think that it will good to be able to see information lengend on the bottom of the graph widget, containing info what is represented by particular color of the line in the graph. Also, the "0" number on the Y-axis is half hidden.

Doing a git clone and following the "Getting Started" works/looks great ... thanks.

But doing an upgrade of Rails to 3.2.8 breaks the UI drag/drop for widgets as follows:

gem 'rails', '3.2.8' <- in Gemfile
Bundler could not find compatible versions for gem "activesupport":
In snapshot (Gemfile.lock):
activesupport (3.2.5)
In Gemfile:
rails (= 3.2.8) ruby depends on
activesupport (= 3.2.8) ruby
Running bundle update will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

... so after doing a 'bundle update' ... the following error in Chrome's developer console appears
after any attempt to do a drag/drop on a widget:

Uncaught TypeError: Object function ( selector, context ) {
  // The jQuery object is actually just the init constructor 'enhanced'
  return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'curCSS'
jquery-ui-1.8.20.custom.min.js:6

Any suggestions on how to fix ?
Thanks

Preferably this would be an endless scrolling list with a quick filter option. It should feel like a highly response app and not an old school paginate to next/previous page.

Known libraries:

• https://github.com/addyosmani/backbone.paginator
• any other ???

Source plugins should implement a fields method to specify additional config params:

def fields
[
{ :name => "http_proxy_url", :title => "Proxy Url", :mandatory => true },
{ :name => "value_path", :title => "Value Path" },
]
end

These additional fields will automatically be available in the widget configuration dialog.

Initial commit done: #ceb3bc0

It should be easy to display a widget with via URL, which might return HTML (via iFrame) or an image.

One use case could be to actually only embed a generated graph image from graphite directly. The graphite url api supports parameters as for example: width, height, graphOnly and bgColor. So, it actually looks pretty decent.

When i reload the page on the browser all widgets get stuck in the left upper corner and overlap each other. Moreover, the widgets that have x value >1 become widgets with x=1 and the content is overflowing. Then i try to reopen it by selecting Dashboards/(TheDashboard) and then everything is fine again

Use faraday gem and provide a single place for the configuration of all HTTP requests done by web app.

Configuration includes proxy and ssl settings.

It also might happen that we end up with specific options per request

Currently, when ever the user selected a source there's a fetch request for the metrics/targets collection. This takes quite a while.

Instead we should fetch each metric only once and keep it in a "pool" to reuse later on.

Refresh of the collection should happen automatically in the background, preferably without a specific user action.

We've setup a build but due to missing database.yml and existance of database tables in mysql it fails

I recently pulled the latest changes from the repo and now all my widgets look extremely ugly (the background of each widget is white, which doesn't fit the dashboard at all).

I assume this got in with the following commit:

5850981

-    className: "widget",
+    className: "widget portlet well well-small ui-widget ui-widget-content ui-corner-all",

The class well is defined in twitter boostrap with:

background-color: #f5f5f5; (pretty much white)

so I think this class needs to be overwritten or removed from the widget div

Errors while fetching new data should be shown to the user in a helpful way.

This should allow the user to figure out if the widget configuration is wrong or if there's a connection problem, etc.

Helpful would be a human readable error message and the actual request information (request url, status code, etc.) to further simplify debugging.

Currently boolean/number sources using http_proxy will silently fail if the server responds html instead of json.

The use of farday breaks the ability to use multiple targets from graphite. The problem is, that faraday encodes many targets as something like target%5B%5D=host1.value&target%5B%5D=host2.value which equals target[]=host1.value&target[]=host2.value. This is a PHP/Rails standard and django (on which graphite is based) does not like this. It just renders an empty array. The django way is to use something like target=host1.value&target=host2.value.

Faraday has an open bug about this and also a (pull request)[https://github.com/technoweenie/faraday/pull/186] which would fix this.

What should can we do here? One solution would be to use the fork of @sqrrrl to get the support now. We could switch to another library, but I really dislike this option as faraday beats all the others in modularity.

Need to ensure input data is rejecting blanks.

When rendering a widget, one should actually see the widget container rendered first, and as a second step the loading indicator to fetch the data. As a third step the actual data should be rendered.

Currently, this is not cleanly separated. The rendering of the widget container and the actual widget is done in a single rendering step. Then a update event fetches data and renders the widget again.

This actually also affects widget implementations because they have to deal with being rendered even though the data is not available yet.

2000 is not very readable number, 2K is much better.

Additionally, it should be possible to pass a color. The red/green color based on positive/negative number doesn't make always sense.

Instead it should create a new default layout, based on the existing widgets of the dashboard.

Same as already done for number widget and graph axis:
#34

Allow to organize dashboards by tags.

I imagine this to include a simply tag filter for the dashboard index page and simple way to assign tags.

Sometimes when you create a new widget it stays on the middle and you cant put it to the pattern form. You have to reload the page and then everything is ok again

We have about 10400 metrics in graphite. So the target selection autocompletion is quite laggy :) I think memcache would be quite cool or we could start with saving them to the database at first. What do you think about it?

Also the longest paths have up to 83 signs, so the field is way to small to display the full path and even with the line break it is not so easy to use :)
What do you think about a tree view like the one the Graphite composer uses?

rickshaw.js can't handle null values, that is why we replace these with integer 0 values instead.

But, in case of missing datapoints this creates a sawtooth graph, which always connects real data points to a zero (therefore not really existing) datapoint.

Our goal should be to simply not draw the zeros and leave an area of the graph blank, but not drawing anything.

I've tested this with other graph libraries like flotr successfully, but still have to find a way to do this with rickshaw.js.

When running the dashboard on screen for presentation only we should hide all edit buttons and other interaction possibilities. Focus should be on the data!

I can see already see a presentation button for the dashboard!

Since the layout is stored separately from the widgets association to the dashboard (in the dashboards db table), they get out of sync sometimes.

Eventually you end up with a widget associated to a dashboard, but since it is not referenced in the layout it will not be shown.

Sometimes the CI widget loses the light indicator and than you need to reload the page to get it back. I noticed that happens when the state is changed from "sleeping" to "building"

It would be useful for my team if we could graph on the same chart a specific target for this week and also last week, so we can compare how the activity is increasing or decreasing from one week to another.

In order to do that the user would need to select a specific period for each target, which is not possible at the moment.

It would be nice to have the option in the Dashboard to show all the graphs only from today. Not last 3 hours but really starting at 00:00. Or even a custom Point in Time.

Will try to send a pull request...

Thanks ;-)

All these functions return a datapoints array which doesn't match a request graph target. Whereas the graph has datapoints for each timestamp, the constantLine has only a single datapoint.

rickshaw.js can't handle that and throws the following error message :

Uncaught series cannot have differing numbers of points: 60 vs 1; see Rickshaw.Series.zeroFill()

(this happens in the this.validateSeries() function, before even trying to render the graph)

So we have to either adapt the datapoints json on the server or client side. Client side would be nicer since it keeps the data source plugins simple. It might be possible that its actually cleaner to support specific things, like a horizontal or vertical line in the graph (as an overlay) explicitly on the server side though.

Hi,

I try to integrate our icinga installation to team dashboard. icinga-web provides a neat api interface with json output.

The URI scheme is like
http://hostname/icinga-web/api/ %TARGET% / %COLUMNS% / %FILTER% / %ORDER% / %GROUPING% / %LIMIT% / %COUNTFIELD% / %OUTPUT_TYPE%

A filter is build like:
filters[AND(%column%|%operator%|%value%;%column%|%operator%|%value%)]

So a URI to get all Host in State 1 (down) is:

http://hostname/icinga-web/web/api/host/filter[AND(HOST_CURRENT_STATE%7C=%7C1)]/countColumn=COL/authkey=MYKEY/json

The output is something like:
{"result":[{"HOST_ID":"198616","HOST_OBJECT_ID":"2050","HOST_INSTANCE_ID":"1","HOST_NAME":"host.fooo","HOST_ALIAS":"host_alias","HOST_DISPLAY_NAME":"host.foo","HOST_ADDRESS":"172.0.0.123","HOST_IS_ACTIVE":"1"}],"success":"true","total":1}

But if I paste those URI to the http_proxy_url in a Number Widget, I just get the following error:
Error loading datapoints:

Internal server error: bad URI(is not URI?): http://hostname/icinga-web/web/api/host/filter[AND(HOST_CURRENT_STATE%7C=%7C1)]/countColumn=COL/authkey=MYKEY/json

Any ideas?

After running maybe 3 hours, the chromium process of team_dashboard (develeopment environment) uses about 1,5Gb RAM (chrome://memory-redirect). I'm using 2 Counter and 2 Graph widgets. Each of them updates in a 10 second interval.

I don't know where the problem lies. I'll check now with firefox to see wether it is browser specific or not. Do you experience also such a memory usage?

Hi

1st of all, love this project ! great idea.

2nd i am trying to play with few widges, and my load avarage looks very bad ?
http://bb.macdaddy.com.au:3000/dashboards/1

Any idea why ?

thanks
Petr