Reporting and Charting in ElectricCommander

For this article, I would like to review the different ways to report and chart with CloudBees Flow . Each has its pros and cons and not every solution is a perfect fit for your needs. We will look at the following:

• CI reports
• Standard reports and BIRT extension
• Unplug and HTML pages
• GWT pages

CI Reports

This is certainly the easiest way to add some charting to ElectricCommander and most of you should already be familiar with it. If not please consider attending one of our trainings. It gives you the ability to chart and keep track of values associated to your CI jobs very easily. In just a couple of clicks you can chart some job properties (user defined or intrinsic).

• Pros:  Easy to set up.
• Cons:  Not a lot of options for charting.

Standard Reports

If you use the “Reports” sub-tab in your project, it will give you the opportunity to create more advanced reports like trends on ElectricCommander objects, pie charts, usage, … In addition, you can display those charts on your home page with a simple checkbox.

• Pros: A few more options.
• Cons:  Limited to 5 series unless you want to go full steam ahead on BIRT report customization.

Unplug

In my opinion, it’s where you get the most value for your time. I’m a big fan of Unplug; and I did not even write it. Unplug,  contrary to what its name indicates, is a plugin that allows you to easily create up to 10 pages you can attach to views. It is available on GitHub . The first incarnation of the plugin was written to display some kind of “word of the day” on a page to let Admins inform users easily. Over the years, it has evolved through contributions to accept Perl, HTML, JavaScript and even AJAX in its latest incarnation. By simply combining Perl to extract data from Commander, and HTML, you can very simply build full report pages. By adding JavaScript to the mix, and using standard packages like Google Chart or Flot (http://www.flotcharts.org/), you can achieve remarkable results in a very short time. I like combining existing technologies instead or reinventing the wheel each time I need to graph something.

• Pros:  Super easy to display live data. Powerful use of standard JavaScript libraries.
• Cons:  A little slow at time. Hard to debug.

Static HTML

As mentioned in the cons above, I’ve run into pages at customers that took a few seconds to display which is a little annoying specially when you do not need to up to the second status. Unplug works by using a special Perl variable named $XHTML to display the content. I took the habit in the past to save this variable in a property to facilitate my JavaScript debugging so it was an easy step to save this variable in a file instead. Commander comes with its own Apache server so you can easily access anything under /apache/htdocs. Simply point a tab (or sub-tab) to a file there and voila. Then add a schedule to have yout page refreshed as needed. This is really a simple way to create colorful daily reports for your managers.

• Pros: simple Perl and HTML/JavaScript
• Cons: the directory will be overwritten during update. Not “live” data.

GWT

When I started at CloudBees, it was pretty much the only option to display live data in some fancy way. I’ve never been a big fan due to my lack of skills with Java. I believe this is the best you can do for heavy UI. Java and its asynchronous requests will give you better performances and a more polish look. However it’s a more complex process, so complex in fact we offer its own full day of training around GWT and SDK.

• Pros: Faster, more polished UI and charting.
• Cons: Requires a full Java development environment. Complex

Conclusion

GWT is the Holy Grail of charting and UI but Unplug with JavaScript addition gives me the flexibility and speed to show something working to a customer in a few hours instead of a few days or weeks.