NEW FEATURES OF HBROWSE
FRAMEWORK
Lukasz Kokoszkiewicz
MAIN TABLE FILTERS
Allow to additionally filter main table content
All of them can be added by simply in a settings file
Right now we have 4 kinds of filters:




Text
Select
Date
Datetime
When specified, all of them are added into model and url
so filter values can be used in different server requests
and for bookmarking
On and Off functions can be setup to run on filter empty
of filled events (for example disable some other controls)
Select filters can load list items from ajax requests or use
static ones
MAIN TABLE FILTERS
Type: text
Type: select
Type: datetime
MAIN TABLE FILTERS OBJECT
{
'label':'Not modified since', // String
'urlVariable':'notmodsince', // String - lower cased, no spaces, no special characters
'fieldType':'datetime', // String (text|select|date)
'value':'',
'options':{
// On and Off functions are executed when filters submit is clicked
// On is executed when field has value other then empty string ("")
// Otherwise Off is executed
'On':function(Data) { // Data is a Controller.Data object
$('#from,#till,#timeRange').attr('disabled',true);
},
'Off':function(Data) { // Data is a Controller.Data object
$('#from,#till,#timeRange').attr('disabled',false);
}
}
}
MAIN TABLE FILTERS OBJECT
{
'label':'Site', // String
'urlVariable':'site', // String - lower cased, no spaces, no special characters
'fieldType':'select', // String (text|select|date)
'value':'',
'options':{
'dataURL':'/dashboard/request.py/inittaskprod?data=sites', // (optional) String (url|false)
// Function translates model or ajax data onto simple elements array
// Input: data - data represents Data.mem object or ajax response
// depending on whether dataURL exists or not
// Output: [['el1','el1 label'],['el2','el2 label'], ...]
// - Can also be defined as a static list (when you don't want to
// load the data from url nor using Data.mem object)
'translateData': function(data) {
var sitesArr = data.basicData;
var output = [['','Off']];
for (var i=0;i<sitesArr.length;i++) {
output.push([sitesArr[i].SITENAME,sitesArr[i].SITENAME]);
}
return output;
}
}
}
NEW CHARTS
In addition to google charts Highcharts library
was added (www.highcharts.com)
New library seems to work fine with IE
The new charts type can be used along side with
previous google charts
In the newest version chart object was
introduced and can be used in adding charts into
charts tab and/or to add them into expanded
row.
On demand option can be added to each chart
Each chart can load the data for it’s own
purpose
NEW CHARTS
Highcharts library adds a certain
interactivity level with tooltips
and clickable content
On demand chart load the
data and draws a chart after
clicking Loach chart button
NEW CHARTS
Charts inside expanded row
also can be setup as
onDemand and can also load
the data from the server
NEW CHARTS
Each chart can be printed
directly or be exported to
one of this four formats
NEW CHARTS OBJECT
{
'name':'Status Overview',
'type':'gchart', // (gchart|hchart),
'onDemand':true,
'dataURL': 'http://pcadc01.cern.ch/client/chartdata',
'dataURL_params': function(Data) { return {}; },
// translates data onto requires format:
// {"chd":"t:60,40","chl":"Hello|World"} or highcharts options object (http://www.highcharts.com/)
'translateData':function(dataJSON) {
var output = {
'chtt':'Example Chart',
'cht':'p3',
'chs':'600x350',
'chd':dataJSON.chd,
'chl':dataJSON.chl
};
return output;
}
}
SETTINGS DIFFERENCES
Because of implementation of new features
there was some changes in a settings
structure that includes:
Slightly changed charts object
 Slightly changed expandedData object
 Added optional Application.filters object

All of the new settings can be found on a
twiki documentation page.
PLEASE CHECK IT OUT
All of the new features are in beta stage so a
little testing would be appreciated
Filters can be found here:

http://pcadc01.cern.ch/prodopui/index.html
New charts example here:

http://pcadc01.cern.ch/client/index.html
THANK YOU