Direct SA1 Links
Etics Portal - Etics Web - EticsAgendas - ETICS 2 SA1 Savannah - SA1Actions (in Savannah) , SA1 Internal

ETICS Dashboard

Short Description of the Task

The Dashboard is designed as a web page where the Etics's users can monitor a lot of information about their projects. This time the only way to collect the information for a single project is to look at in a pool of Etics projects. Now the Dashboard will avoid users to collect the information in a single page. This page will be integrated into Etics Web Application and will offer a set of widgets to keep under control most project's properties. A simple example of this properties are: a Project Logo and info, a Configuration History, the Metrics from Disseminator, a Portability Index (intended as a combination of platform and configurations that produce correct building operation)... The first release of dashboard is a static pre-configured page, while the second release will be improved introducing drug & drop feature in order to select wich widget show and it's position in to the page.

Dashboard Widget's Content

In the follow we discuss the first goup of project-widget identified for Dashboard.
This group is composed by: LogoWidget , ProjectSummaryWidget, URLWidget, DisseminatorWidget, JobsHistoryWidget _, PortabilityWidget.
At this time the LogoWidget, DisseminatorWidget and the URLWidget_ are implemented; the first two as a Frame that return the html code to include in the dashboard panel, the third is implemented as a java Frame object that simply load an url.

The LogoWidget: this widget show, if exist, the logo of the current project

The ProjectSummaryWidget: this widget show the most important information about the current Project like like vendor, repositry, home page, creation and modification date as it appear ina the "Configuration" tab of portal when is selected a Progect item in the configuration's tree.

The DisseminationWidget: this widget work like a wrapper that show an image, like XY-Plot, produced by Disseminator.

The URLWidget : this widget Load an URL into a frame added to dashboard. It can be used to load all type of html pages or documents like site FAQ section, online java docs pages, Google Search page ecc...

The JobsHistoryWidget: this widget allow user to monitor, for a project configuration, the last ten TEST/BUILD jobs and their status.

The PortabilityWidget : this widget show in a grid (matrix n,m), the results of build/test operations that involve configurations and platforms for the selected project, subsystem or component. In particular for each configuration the widget show the platforms taht produce successes or failures, and use a link to meke availlable the related reports.

The AQCMWidget : this widget show in a chart the results metrics obtained from the AQCM plugin. The chart is created using a circle with radius equal to 1 as a goniometrical circle and a quadrangle that have the value of the four metrics in the vertex. Each of this vaues are <=1.0 & >=0.0. The bast case show a 45° rotated square inscript in the goniometrical circle.

Useful Links

Dashboard Widget's Mockup

In this section is shown a graphical representation of the widgets presented in the previous paragraph.

The LogoWidget:


The ProjectSummaryWidget:

The DisseminatorWidget :


If there are defined multiple compatibles metrics for the disseminator the resulting chart will displayed in

a tab panel like the following:

The URLWidget :

In this case the URL widget show the following url :

The JobsHistoryWidget :

As shown for the Portability Widget this use a Progress Box to notify the loading operation state. Than, when all data is collected, the widget present a list of jobs with the submitting user, configuration, platform and result of job. The list is ordered from the newest job to oldest that was founded in a time range defined in the configuration.xml file.
When the user click on a job row in the table there the widget show for each platform some additional job information like repository and packages link. If the job fails this information are unavaillable .


While the loading operations the widget show a Progress Box and a message like :


Then, when all data are collected from services, the look of the widget is :


As shown, in the first column there is a list of configurations that widget monitor, while in the following columns there are a link of the last build result divided by platform. If there is no result for a specific platform in the last build job the widget show a grey "No Info", otherwise the result with the default color (red=Failed, green=Success, blue=Running/Submitting)

The AQCM Widget :

The widget use the AQCM Plugin and show the related metrics that take a float values from 0 to 1 in a chart.

The metrics are :

  • Maintenability
  • Portability
  • Reliability
  • Functionality

A particular distribuition of this metrics in a goniometric circle determinate the gaphics. Best are the metrics and lesser is the difference from the circle area and the quadrangolar figure defined by metrics.

In the left of the widget appear a simple Chart that plot an area that rapresent the

Ended Widgets

The widgets currently developed in a Dashboard v1.0 version are :

  1. LogoWidget
  2. ProjectSummaryWidget
  3. URLWidget
  4. DisseminatorWidget
  5. JobHistoryWidget

To Do Tasks


-> "I had worked on it and I think it works fine" (not already deployed on etics-02)

-> "I planned to work on this issue, but not already done"

-> "I think the issue is already managed, just I need some little information"

-> "This is a work in progress"


  • - Remove title bars for the common widget (except Job History and Portability per Project.
  • - Improve space to fint to max 1024x768 .
  • - Use one XML configuration file for each project named like <projectName>.conf.xml (eg org.etics.conf.xml).
  • - Change the Page Title in "<projectName> Etics Dashboard".
  • - Improve layout control in XML adding rowspan/colspan and row and column index to fit better with a html table like template. It is used a FlexTable with FlexCellFormatter to set colspan and rowspan for each cells.
  • - Layout is by row not by column. (see the layout example at the end of this section)
  • - Use the same wide for all widgets, the optimal width of the widgets would be half way between the ProjectSummary and the Portability. (from Lorenzo and Andres) (... I don't really like it, but anyway the width can be set separately for each widget in the xml file... so we can use all conventions we prefer smile )

Portability Widget

  • - Use a couple of HashTable to store, for each configurations, the last result (success or failed) for each build job and the last success.
  • - The previous issue make possible to have the complete list of platforms ever used for configuration not only the related to last build.
  • - Show the Date time with the related JobsDetail result.
  • - If the last result is failed add a Detail panel that show the last success job details (configuration, time, report... as usual).

Disseminator Widget

  • - Make the chart clickable in order to open the Disseminator page on the current chart.
  • - Tooltip on the Disseminator chart: - deleted the tooltip because the passed object is a panel with an image inside. (done by Marco).
  • - Add to the widget some additional parameters (and than add to xml configuration file) like VolatileArea (or Registered), MinValue, MaxValue.
  • - Remove the black border and the sliding bar from the IFRAMEs in the charts.
  • - The junit chart is not very useful since we have 0% tests and I don't think we will ever have some (from Lorenzo)... (removed the related parameters in the configuration file org.etics.conf.xml )
  • The portability shows only one platform... is it correct? If so, it is not very useful as portability :-)(from Lorenzo) -- If you try with the "testProject" instead "org.etics" you can see more platforms for more configurations.
  • At this time the disseminator return to Dashboard a PlotPanel whit an image inside... there is any way to take an url image from this? (I'm testing with Marco).
  • Remove FindBugs chart
  • Move on the right columm the disseminaton widgets that are on the bottom now WMC, etc and the SLOC but now is pretty ugly what is inside

URL Widget

Note: Link like the previous create a little bit complications, because the string musts stored in the configuration file in a different way: in first we need to convert all special chars in a extended code (eg. " & lt; " for "<") and than re-converted by the URL widget. I implemented the reconstruction mechanism in the URL Widget and update it. However we need to make substitution by hands when change the *.conf.xml files.

Project Summary Widget

  • - First frame of Sonar is numeric and are links.
  • - Project info replace the http links with different clickable text. URL Widget.

JobHistory Widget

  • - The job history for org.etics has many jobs in the "Submitting" status and I don't think is correct (some of them are from last night) (from Lorenzo) . When I test the widget on testProject I see that all works fine (I can compare the widget's results with the Submission page of the portal because I'm and Administrator for this project). I can't compare the real submissions with the widget's result for org.etics project because I'm not an adiministrator.

AQCM Widget

  • - Define with Andrea, look at the Sonar report.
  • - Mookup defined with Andrea Turli.
  • - At this time use a random generator to show an example chart.
  • - When there are some AQCM metrics value in the repository the widget is defined to work with a XPathQuery and Repository instead of random number generator.

Layout Example

The following image show an example of a possible layout of the dashboard:

The Dashboar define a MxN matrix where M means "number of rows" and obviously N means "number of columns". In the example M=5 and N=3 and the row/column index start do 0 (end to N-1, M-1 like array). If a widget define colspan=2 (rowspan=1) it take twoo columns and one row.

Dashboard Prototype Screenshot (version 0.1)

These screenshots are intended to explain the behaviour of this first prototypic version of Dashboard.

At this time the dashboard is not related to Etics Portal and to Web Application Environment, so it can't consider information such as configurations, platforms, list of projects and users ecc...

The dashboard page (fig.01) si divided in three parts:
* a) a title on top of the page.

  • b) a simple menu on the left composed of a list of checkboxes and a button used to load the widgets.
  • c) a central panel in which is loaded a grid (at this time is a static Grid(5,2) ); this grid will contain the widgets and their panels.


In the following image (fig.02) is shown the central area where the selected widgets are loaded.


The first widget loaded in the grid, according to the menů order, is the DisseminatorWidgets. It works as a single widget that uses a frame to load the well formed Disseminator's url page.

The second widget (URLWidget) uses the same idea to load a custom page in its frame, in the previous example was loaded my iGoogle page. The last widget (HistoryWidget, not yet really implemented) shows a simple button without listener.

Finally the last widget implemented is LogoWidget, that uses the same mechanism of URLWidget to load an image. The frame contained in LogoWidget can use a local url such as "./img/logo.png", or remote url like "".

Currently the left menů is static and the widgets are not configurable and can't use information about Users,Projects and Configurations. The next step of this prototype is to integrate in Etics Portal to investigate how manages and uses that information.

The prototype can be downloaded from this address Dashboard_prototype.tar.gz

on the right columm put the disseminaton widgets that are on the bottom now
WMC, etc and the SLOC but now is pretty ugly what is inside.
Topic attachments
I Attachment History Action Size Date Who Comment
PNGpng 01.png r2 r1 manage 29.5 K 2009-06-03 - 14:46 ClaudioGalli (fig. 01- Starting Dashboard Interface)
PNGpng 02.png r1 manage 183.7 K 2009-06-04 - 10:03 ClaudioGalli  
PNGpng ACQM_Widget_preview.png r1 manage 19.8 K 2009-09-23 - 16:53 UnknownUser  
PNGpng AQCMWidget.png r2 r1 manage 19.8 K 2009-10-08 - 12:54 UnknownUser  
PNGpng AQCM_Widget.png r1 manage 19.8 K 2009-10-08 - 12:56 UnknownUser  
PNGpng ConfigurationHistory5.png r1 manage 152.6 K 2009-06-23 - 09:49 ClaudioGalli  
PNGpng ConfigurationHistoryWidget.png r2 r1 manage 76.3 K 2009-06-11 - 11:53 ClaudioGalli  
PNGpng ConfigurationHistoryWidget2.png r1 manage 77.4 K 2009-06-11 - 12:17 ClaudioGalli  
PNGpng ConfigurationHistoryWidget3.png r1 manage 59.8 K 2009-06-18 - 13:57 ClaudioGalli  
PNGpng ConfigurationHistoryWidget4.png r1 manage 65.5 K 2009-06-18 - 14:00 ClaudioGalli  
PNGpng ConfigurationHistoryWidget5.png r1 manage 35.6 K 2009-06-23 - 09:51 ClaudioGalli  
Unknown file formatgz Dashboard_prototype.tar.gz r1 manage 137.9 K 2009-06-04 - 14:14 ClaudioGalli  
PNGpng Diss01.png r1 manage 47.0 K 2009-09-23 - 16:53 UnknownUser  
PNGpng Diss02.png r1 manage 43.5 K 2009-09-23 - 16:53 UnknownUser  
PNGpng Diss03.png r1 manage 48.4 K 2009-09-23 - 16:54 UnknownUser  
PNGpng Diss04.png r1 manage 114.9 K 2009-09-23 - 16:54 UnknownUser  
PNGpng Disseminator.png r1 manage 140.6 K 2009-07-07 - 11:24 ClaudioGalli  
PNGpng DisseminatorMultiMetrics01_.png r1 manage 32.9 K 2009-09-17 - 17:00 UnknownUser  
PNGpng DisseminatorMultiMetrics02_.png r1 manage 32.0 K 2009-09-17 - 17:09 UnknownUser  
PNGpng DisseminatorMultiMetrics03_.png r1 manage 19.8 K 2009-09-17 - 17:09 UnknownUser  
PNGpng DisseminatorMultipleMetrics.png r1 manage 84.6 K 2009-08-13 - 14:20 ClaudioGalli  
PNGpng HistoryWidget.png r1 manage 57.6 K 2009-06-11 - 10:16 ClaudioGalli  
PNGpng JobHistory.png r1 manage 40.6 K 2009-07-07 - 11:26 ClaudioGalli  
PNGpng JobHistory01.png r1 manage 56.9 K 2009-07-15 - 14:24 ClaudioGalli  
PNGpng JobHistory02.png r1 manage 55.0 K 2009-07-15 - 14:24 ClaudioGalli  
PNGpng Job_History.png r1 manage 34.8 K 2009-09-23 - 16:34 UnknownUser  
PNGpng JobsHistoryWidget.png r1 manage 21.6 K 2009-06-23 - 16:37 ClaudioGalli  
PNGpng LastModificationWidget.png r1 manage 12.5 K 2009-06-23 - 16:55 ClaudioGalli  
PNGpng LastUrlWidget.png r1 manage 136.2 K 2009-09-17 - 17:20 UnknownUser  
PNGpng LayoutExample.png r1 manage 25.8 K 2009-10-13 - 11:35 UnknownUser  
PNGpng Logo.png r1 manage 6.1 K 2009-07-07 - 11:28 ClaudioGalli  
PNGpng LogoWidget.png r1 manage 29.7 K 2009-06-11 - 17:24 ClaudioGalli  
PNGpng Portability.png r1 manage 28.4 K 2009-11-17 - 16:41 UnknownUser  
PNGpng Portability2Widget.png r1 manage 61.5 K 2009-06-11 - 10:20 ClaudioGalli  
PNGpng PortabilityLoading.png r2 r1 manage 5.4 K 2009-09-23 - 16:44 UnknownUser  
PNGpng PortabilityWidget.png r2 r1 manage 61.5 K 2009-06-11 - 10:17 ClaudioGalli  
PNGpng PortabilityWidget2.png r1 manage 61.1 K 2009-06-11 - 16:01 ClaudioGalli  
PNGpng PortabilityWidget3.png r1 manage 40.9 K 2009-06-23 - 16:43 ClaudioGalli  
PNGpng PortabilityWidget_01.png r1 manage 21.4 K 2009-07-22 - 10:37 ClaudioGalli  
PNGpng Portability_icon.png r1 manage 20.8 K 2009-12-16 - 12:39 UnknownUser  
PNGpng Portability_last.png r1 manage 28.4 K 2009-11-17 - 16:42 UnknownUser  
PNGpng ProjectSummary.png r1 manage 19.0 K 2009-09-23 - 16:40 UnknownUser  
PNGpng ProjectSummary01.png r1 manage 15.0 K 2009-09-17 - 17:33 UnknownUser  
PNGpng ProjectSummary02.png r1 manage 31.4 K 2009-09-17 - 17:33 UnknownUser  
PNGpng ProjectSummaryWidget.png r1 manage 72.8 K 2009-06-11 - 17:25 ClaudioGalli  
PNGpng Summary.png r1 manage 21.2 K 2009-07-07 - 11:15 ClaudioGalli  
PNGpng SummaryOpen.png r1 manage 45.2 K 2009-07-07 - 11:17 ClaudioGalli  
PNGpng Summary_icon.png r1 manage 20.8 K 2009-12-16 - 12:39 UnknownUser  
PNGpng URL.png r1 manage 61.0 K 2009-07-07 - 11:32 ClaudioGalli  
PNGpng UrlWidget.png r1 manage 128.9 K 2009-09-23 - 16:46 UnknownUser  
PNGpng UserListWidget.png r2 r1 manage 47.4 K 2009-06-11 - 10:18 ClaudioGalli  
PNGpng UsersListWidget.png r1 manage 47.4 K 2009-06-11 - 10:21 ClaudioGalli  
XMLxml configV02.xml r1 manage 5.6 K 2009-09-17 - 17:26 UnknownUser  
Unknown file formatxsd configV02.xsd r1 manage 2.1 K 2009-09-17 - 17:26 UnknownUser  
PNGpng disseminator.png r1 manage 84.8 K 2009-06-11 - 17:13 ClaudioGalli  
PNGpng info.png r1 manage 1.9 K 2009-10-09 - 10:13 UnknownUser  
PNGpng on-work.png r1 manage 1.2 K 2009-10-09 - 09:58 UnknownUser  
PNGpng working.png r1 manage 1.7 K 2009-10-09 - 09:58 UnknownUser  
Edit | Attach | Watch | Print version | History: r39 < r38 < r37 < r36 < r35 | Backlinks | Raw View | WYSIWYG | More topic actions
Topic revision: r39 - 2009-12-16 - unknown
    • Cern Search Icon Cern Search
    • TWiki Search Icon TWiki Search
    • Google Search Icon Google Search

    ETICS All webs login

This site is powered by the TWiki collaboration platform Powered by PerlCopyright &© 2008-2020 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback