Creating a Bugzilla Dashboard – hands-on CDE Tutorial – Fuse Day #3 Session Summary

In a previous post we have installed the Pentaho server and used CDF code to create a dashboard.

In this post we will develop another dashboard for Bugzilla using CDE - the Dashboard Editor..


Here is what we are going to build:


The data for the dashboard is coming from Bugzilla on Tikal ALM suite testing environment using SQR.



Installing CDE to bi-server is simple (see previous post for pentaho quick installation notes):

$ wget
$ tar xjvf CDE-bundle-1.0-RC3.tar.bz2
$ rm -rf biserver-ce/pentaho-solutions/system/pentaho-cdf biserver-ce/pentaho-solutions/cdf 
$ cp -rf CDE-bundle-1.0-RC3/* biserver-ce/pentaho-solutions/



CDE makes Dashboard development as easy as 1-2-3

  1. The Layout (view)

  2. The Components (controller)

  3. The Data sources (model)



Step 1: The Layout


The layout of a dashboard in CDE is done with a hierarchy of rows and columns (each one is a html <div/> tag on the CDF layer)

The layout editor toolbar allows you to save and load templates, add resources (css/js), add rows and columns, add images, add html, reorder and delete.



As you can see in the final result we will need a header, a body and a footer; and in the body we'll need a filter panel and another panel to hold the line chart, the bar chart and the pie chart.


Step 2: The Components

The list of available components is impressive, charts are based on the CCC project which is based on Protovis which is based on SVG, you can find the regular line, bar, pie and you can render any diagram based on Protovis, Rephael and OFC.


Additional components (under Others section) include simple HTML elements such as texts, tables, and buttons as well as the BI platform services such as PRD reports, PDI generated content and xaction services.



For our exercise we use:

  • two parameters: one to select issue-type and the second to select project
  • two selectors: one for each parameter
  • three charts: line chart, bar chart and pie chart
  • one text description



Lets look at the line chart component definition as an example:



It uses data from line1datasource, it is dependent on the two parameters which means that the parameter values will be passed in the query to the datasource, it listens on the two parameters which means that whenever a parameter changes value the chart component will be refreshed and finally it has an htmlObject code of line1 which determines which div in the layout it is going to occupy.



The select component is mapped to the parameter which means that the selects will change the value of the parameter and will trigger all listeners, the selector options are generated by a datasource which will be demonstrated shortly.



The text component uses simple JS to generate the text dynamically.


function(){ return "Showing " + filter1param + " " + filter2param } 


Step 3: The Datasource

CDE data access is based on CDA, there are way to many cool features to mention all here but alternatives include: SQL, MDX, MQL, XPATH, PDI, xaction, JS, ...




We have 5 queries (two for the parameter selectros and three for the charts):



The data-source definition looks like this:



Thats all, the CDF generated code is attached.



Using the right tool for the job makes life easier and merrier.


Big thanks to the Pentaho community and to Pedro Alves for leading CDE/CCC/CDF/CDA development and support.



Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at