xbrowse framework

This page documents the xbrowse framework.

Introduction

xbrowse is small framework for developing large-scale JavaScript applications. It includes a simple client-side MVC implementation and a number of predefined views such as statistics matrix, plots, controls.

The core MVC implementation includes:

• model.state: UI state, i.e. filters as set by the user. A hierarchical store backed by the URL hash.
• model.data: Data as returned by AJAX calls. A simple store to share data between views.
• view: Skeleton view extended in the predefined views. Views update the model.state in response to user input, and bind to model.state events to update the UI and load data via AJAX calls.
• controller: Initialises the model and views and updates the model.state from the URL hash.

The predefined views include:

• view_dates: Binds to the model.state "load" event to load the latest dates from the server and fire the model.state "refresh" event.
• view: Creates the UI container.
• view_sidebar: Creates the sidebar accordion for UI filter controls.
• view_main: Creates the UI tabs. Binds to model.state "refresh" to show/hide tabs.
• view_titlebar: Creates the titlebar with date-lock, refresh and API links. Update model.state in response to user input. Bind to model.data "change" to title and API links.
• view_ctrl_*: Create various UI filter controls (typically in the sidebar accordion). Update model.state in response to user input. Bind to model.state "refresh" to update controls.
• view_matrix: Creates matrix tab and toolbar. Update model.state in response to user input. Binds to model.state "refresh" to call web API and update matrix.
• view_errors: Creates error samples pane. Binds to model.state "refresh" to call web API and update error samples.
• view_plots: Creates plots tab and toolbar. Update model.state in response to user input. Binds to model.state "refresh" to call web API and update plots.

xbrowse-based applications

xbrowse-based applications include:

• ATLAS DDM Dashboard
• WLCG Transfers Dashboard

Creating a new xbrowse-based UI

Any new xbrowse-based application should:

• Define default key/values for model.state. See lib/model_adaptor.js file in example.
• Adapt predefined views. See lib/view_*_adaptor.js files in example.
• Bootstrap the UI. See lib/app.js file in the standalone example.
• Include scripts in single HTML page. See index.html file in example.
• Provide web API to serve JSON responses to AJAX calls from views. See ajax options of lib/view_*_adaptor.js files in example.
• (optional) Add new application-specific views.

Web API

The various predefined views depend on a web API that responds with JSON to their AJAX calls.

• view_dates:
  • API example: http://dashb-wlcg-transfers.cern.ch/dashboard/request.py/resolve-dates?interval=240&from_date=&to_date=&prettyprint
  • Code example: ResolveDatesAction.py
• view_matrix:
  • API example: http://dashb-wlcg-transfers.cern.ch/dashboard/request.py/transfer-matrix?from_date=2012-05-04T12%3A00%3A00&to_date=2012-05-04T16%3A00%3A00&vo=atlas&vo=cms&vo=lhcb&src_site=DESY&src_site=IN2P3&src_grouping=country&src_grouping=site&dst_grouping=country&prettyprint
  • Code example: GetTransferMatrixAction.py
• view_plots:
  • API example: http://dashb-wlcg-transfers.cern.ch/dashboard/request.py/transfer-bins?from_date=2012-05-04T12%3A00%3A00&to_date=2012-05-04T16%3A00%3A00&vo=atlas&vo=cms&vo=lhcb&src_site=DESY&src_site=IN2P3&bin=h&grouping=src_country&grouping=src_site&prettyprint
  • Code example: GetTransferBinsAction.py
• view_errors:
  • API example: http://dashb-wlcg-transfers.cern.ch/dashboard/request.py/error-samples?from_date=2012-05-04T12%3A00%3A00&to_date=2012-05-04T16%3A00%3A00&vo=atlas&vo=cms&vo=lhcb&src_country=France&src_site=IN2P3-CC&prettyprint
  • Code example: GetErrorSamplesAction.py

Standalone demo

The zip xbrowse_demo_0-15-2.tgz contains a standalone demo of an xbrowse-based UI using core xbrowse code and demo UI code based on and accessing data from the WLCG Transfers Dashboard.

Please download the zip and have a play with it.

Here is the readme.txt file from the zip:

*****
xbrowse standalone demo
*****
This demo consists of the core xbrowse code with demo UI code, based on and
accessing data from the WLCG Transfers Dashboard [1]. To view it open
'demo-wlcg/index.html' in your browser.

The xbrowse core (release:0-15-2) and demo is extracted from SVN [2] using
xbrowse_demo.sh.

To create an xbrowse-based UI you should only need to modify the UI code, see
demo-wlcg for examples. See the xbrowse twiki [3] for more details.

[1]: http://dashb-wlcg-transfers.cern.ch/ui/
[2]: (OPEN) http://svnweb.cern.ch/world/wsvn/dashboard/tags/arda.dashboard.xbrowse/dashboard-xbrowse-0-15-2/arda.dashboard.xbrowse/templates
     (CERN) https://svn.cern.ch/reps/dashboard/tags/arda.dashboard.xbrowse/dashboard-xbrowse-0-15-2/arda.dashboard.xbrowse/templates
[3]: https://twiki.cern.ch/twiki/bin/view/ArdaGrid/XbrowseFramework

*****

The bash script xbrowse_demo.sh (found in the zip) was used to generate the standalone demo zip.

Standalone demos

• LATEST xbrowse_demo_0-15-2.tgz based on xbrowse 0-15-2 code and demo UI code that accesses data from WLCG Transfers Dashboard.
• xbrowse_demo_0-15-0.tgz based on xbrowse 0-15-0 code and demo UI code that accesses data from WLCG Transfers Dashboard.
• xbrowse_demo_0-4-0.tgz based on xbrowse 0-4-0 code and demo UI code that accesses data from WLCG Transfers Dashboard.
• xbrowse_example_0-3-0_0-1-0.tgz based on xbrowse 0-3-0 code and UI 0-1-0 code from WLCG Transfers Dashboard.

Further Information

• CHEP 2012: Designing and developing portable large-scale JavaScript web applications within the Experiment Dashboard framework
  • slides, video, paper
• SVN: change log, trunk, tags