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 on etics-02 server ( to change the project reference, change the parameter "project=org.etics" in the url page with the name of new project )
• A simple Sonar dashboard example
• The XML configuration file for Dashboard is : configV02.xml
• The relative XSD schema is : configV02.xsd

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

Legenda:

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

General

• - 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 )

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

• - Other URL Widgets: Action list, savannah bugs, tasks, wiki pages ecc...(I need only the useful url list to configure it)
• - Make colspan = 3 for Indico, Savannah and GGUS link.
• - User an URL to link at INDICO page for org.etics:
  • http://indico.cern.ch/categoryDisplay.py?categId=656
• - Use an URL to link the Savannah page :
  • https://savannah.cern.ch/bugs/?group=etics
• - Use a link to GGUS tiket page (full featured page) :
  • https://gus.fzk.de/ws/ticket_search.php?show_columns_check[]=REQUEST_ID&show_columns_check[]=TICKET_TYPE&show_columns_check[]=AFFECTED_VO&show_columns_check[]=AFFECTED_SITE&show_columns_check[]=RESPONSIBLE_UNIT&show_columns_check[]=STATUS&show_columns_check[]=DATE_OF_CREATION&show_columns_check[]=LAST_UPDATE&show_columns_check[]=SHORT_DESCRIPTION&ticket=&supportunit=ETICS+Experts&vo=all&user=&keyword=&involvedsupporter=&assignto=&affectedsite=&specattrib=0&status=open&priority=all&typeofproblem=all&mouarea=&radiotf=1&timeframe=any&tf_date_day_s=&tf_date_month_s=&tf_date_year_s=&tf_date_day_e=&tf_date_month_e=&tf_date_year_e=&lm_date_day=08&lm_date_month=10&lm_date_year=2009&orderticketsby=GHD_INT_REQUEST_ID&orderhow=descending

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 "http://www.fz-juelich.de/jsc/grid/pics/ETICS2.png".

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.