XbrowseFramework < ArdaGrid

---+!! xbrowse framework

This page documents the xbrowse framework.

%TOC%

---++ 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 "change" 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:
   * [[http://dashb-atlas-data.cern.ch/ddm2/][ATLAS DDM Dashboard]]
   * [[http://dashb-wlcg-transfers.cern.ch/ui/][WLCG Transfers Dashboard]]
   * [[http://dashb-fts-transfers.cern.ch/ui/][FTS Dashboard]]
   * [[http://dashb-atlas-xrootd-transfers.cern.ch/ui/][FAX XRootD Dashboard]]
   * [[http://dashb-cms-xrootd-transfers.cern.ch/ui/][AAA XRootD 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-fts-transfers.cern.ch/dashboard/request.py/resolve-dates?interval=240&from_date=&to_date=&prettyprint
      * Code example: [[http://git.cern.ch/pubweb/cosmic.git/blob/HEAD:/dashboard.xbrowse/lib/dashboard/http/actions/xbrowse/ResolveDatesAction.py][(OPEN) ResolveDatesAction.py]] [[https://git.cern.ch/web/cosmic.git/blob/HEAD:/dashboard.xbrowse/lib/dashboard/http/actions/xbrowse/ResolveDatesAction.py][(CERN) ResolveDatesAction.py]]
   * view_matrix:
      * API example: http://dashb-fts-transfers.cern.ch/dashboard/request.py/transfer-matrix.json?from_date=2014-02-19T11%3A50%3A00&to_date=2014-02-19T15%3A50%3A00&vo=atlas&vo=cms&vo=lhcb&src_country=%22USA%22&src_grouping=country&src_grouping=site&dst_country=%22Canada%22&dst_grouping=country&dst_grouping=site&prettyprint
      * Code example: [[http://git.cern.ch/pubweb/cosmic.git/blob/HEAD:/dashboard.transfers/lib/dashboard/http/actions/transfers/ui/GetTransferMatrixAction.py][(OPEN) GetTransferMatrixAction.py]] [[https://git.cern.ch/web/cosmic.git/blob/HEAD:/dashboard.transfers/lib/dashboard/http/actions/transfers/ui/GetTransferMatrixAction.py][(CERN) GetTransferMatrixAction.py]]
   * view_plots:
      * API example: http://dashb-fts-transfers.cern.ch/dashboard/request.py/transfer-bins.json?from_date=2014-02-19T11%3A50%3A00&to_date=2014-02-19T15%3A50%3A00&interval=0&vo=atlas&vo=cms&vo=lhcb&src_country=%22USA%22&dst_country=%22Canada%22&bin=&grouping=dst_country&grouping=dst_site&prettyprint
      * Code example: [[http://git.cern.ch/pubweb/cosmic.git/blob/HEAD:/dashboard.transfers/lib/dashboard/http/actions/transfers/ui/GetTransferBinsAction.py][(OPEN) GetTransferBinsAction.py]] [[https://git.cern.ch/web/cosmic.git/blob/HEAD:/dashboard.transfers/lib/dashboard/http/actions/transfers/ui/GetTransferBinsAction.py][(CERN) GetTransferBinsAction.py]]
   * view_errors:
      * API example: http://dashb-fts-transfers.cern.ch/dashboard/request.py/error-samples.json?from_date=2014-02-19T11%3A50%3A00&to_date=2014-02-19T15%3A50%3A00&vo=atlas&vo=cms&vo=lhcb&server=&src_country=%22France%22&dst_country=%22Italy%22&prettyprint
      * Code example: [[http://git.cern.ch/pubweb/cosmic.git/blob/HEAD:/dashboard.transfers/lib/dashboard/http/actions/transfers/ui/GetErrorSamplesAction.py][(OPEN) GetErrorSamplesAction.py]] [[https://git.cern.ch/web/cosmic.git/blob/HEAD:/dashboard.transfers/lib/dashboard/http/actions/transfers/ui/GetErrorSamplesAction.py][(CERN) GetErrorSamplesAction.py]]

---++ Standalone demo

The zip [[%ATTACHURL%/dashboard-xbrowse-0.22.0-1.tgz][dashboard-xbrowse-0.22.0-1.tgz]] contains two standalone demos of an xbrowse-based UI using core xbrowse code and demo UI code.

Please download the zip and have a play with it.

Here is the readme.txt  file from the zip:
<verbatim>
*****
xbrowse standalone demo
*****
This demo consists of the core xbrowse code with demo UI code. It includes
two demos one simple that accesses data from Google News, and one advanced that
accesses data from the FTS Dashboard [1].

To view the simple demo open 'demo-simple/index.html' in your browser.
To view the advanced demo open 'demo-fts/index.html' in your browser.

The xbrowse core (release:0.22.0-1) and demo is extracted from GIT [2] using
xbrowse_demo.sh.

To create an xbrowse-based UI you should only need to modify the UI code, see
'demo-simple/readme.txt for more details on the xbrowse MVC life-cycle and
how to add new views. See also the xbrowse twiki [3].

[1]: http://dashb-fts-transfers.cern.ch/ui/
[2]: (OPEN) http://git.cern.ch/pubweb/cosmic.git/tree/HEAD:/dashboard.xbrowse/templates
     (CERN) https://git.cern.ch/web/cosmic.git/tree/HEAD:/dashboard.xbrowse/templates
[3]: https://twiki.cern.ch/twiki/bin/view/ArdaGrid/XbrowseFramework

*****
</verbatim>

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

---+++ All downloads

   * *LATEST* [[%ATTACHURL%/dashboard-xbrowse-0.22.0-1.tgz][dashboard-xbrowse-0.22.0-1.tgz]]: based on xbrowse 0-22-0 code and demo UI code that accesses data from Google News and FTS Dashboard.
   * [[%ATTACHURL%/xbrowse_demo_0-20-0.tgz][xbrowse_demo_0-20-0.tgz]]: based on xbrowse 0-19-0 code and demo UI code that accesses data from Google News and FTS Dashboard.
   * [[%ATTACHURL%/xbrowse_demo_0-19-0.tgz][xbrowse_demo_0-19-0.tgz]]: based on xbrowse 0-19-0 code and demo UI code that accesses data from Google News and FTS Dashboard.
   * [[%ATTACHURL%/xbrowse_demo_0-18-0.tgz][xbrowse_demo_0-18-0.tgz]] based on xbrowse 0-18-0 code and demo UI code that accesses data from FTS Dashboard.
   * [[%ATTACHURL%/xbrowse_demo_0-17-0.tgz][xbrowse_demo_0-17-0.tgz]] based on xbrowse 0-17-0 code and demo UI code that accesses data from FTS Dashboard.
   * [[%ATTACHURL%/xbrowse_demo_0-15-2.tgz][xbrowse_demo_0-15-2.tgz]] based on xbrowse 0-15-2 code and demo UI code that accesses data from WLCG Transfers Dashboard.
   * [[%ATTACHURL%/xbrowse_demo_0-15-0.tgz][xbrowse_demo_0-15-0.tgz]] based on xbrowse 0-15-0 code and demo UI code that accesses data from WLCG Transfers Dashboard.
   * [[%ATTACHURL%/xbrowse_demo_0-4-0.tgz][xbrowse_demo_0-4-0.tgz]] based on xbrowse 0-4-0 code and demo UI code that accesses data from WLCG Transfers Dashboard.
   * [[%ATTACHURL%/xbrowse_example_0-3-0_0-1-0.tgz][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. 

---++ Change log

---+++ Release notes

The release notes [[http://git.cern.ch/pubweb/cosmic.git/blob/HEAD:/dashboard.xbrowse/RELEASE-NOTES][(OPEN)]] [[https://git.cern.ch/web/cosmic.git/blob/HEAD:/dashboard.xbrowse/RELEASE-NOTES][(CERN)]]  give details of all changes between versions.

---+++ Incompatible changes

Some releases include changes that break backward compatibility, or have new features disabled by default. The following gives details of how applications should be modified to work with new releases or to take advantage of new features.

---++++ 0.21.0 to 0.22.0
TODO

---++++ 0.19.0 to 0.20.0
TODO

---++++ 0.17.0 to 0.18.0
TODO

---++++ 0.7.0 to 0.8.0

---+++++!! Notes
This release add a feature for the user to control the maximum number of cells visible in the matrix tab. The user can modify this depending on his/her systems performance using the MAX CELLS toolbar menu.

---+++++!! Required changes
Update application-specific lib/model_adaptor.js according to the following diff [[http://svnweb.cern.ch/world/wsvn/dashboard/trunk/arda.dashboard.web-data/templates/ddm2/lib/model_adaptor.js?op=diff&rev=27402&peg=27385][model_adapter.js]].

---++++ 0.3.0 to 0.4.0

---+++++!! Notes
The 0.4.0 release includes an jquery plugin to abstract the common plotting functionality used in tabs using view_plots and application-specific tabs displaying plots.

---+++++!! Required changes
Update application-specific index.html and plot.html according to the following diffs [[http://svnweb.cern.ch/world/wsvn/dashboard/trunk/arda.dashboard.web-data/templates/ddm2/index.html?op=diff&rev=24759][index.html]], [[http://svnweb.cern.ch/world/wsvn/dashboard/trunk/arda.dashboard.web-data/templates/ddm2/plot.html?op=diff&rev=24759][plot.html]].

---++ Further Information

   * CHEP 2012: Designing and developing portable large-scale JavaScript web applications within the Experiment Dashboard framework
      * [[https://indico.cern.ch/contributionDisplay.py?contribId=300&sessionId=6&confId=149557][slides]], [[https://indico.cern.ch/getFile.py/access?contribId=300&sessionId=6&resId=0&materialId=0&confId=149557][video]], [[https://cdsweb.cern.ch/record/1458497/][paper]]
   * GIT: release notes [[http://git.cern.ch/pubweb/cosmic.git/blob/HEAD:/dashboard.xbrowse/RELEASE-NOTES][(OPEN)]] [[https://git.cern.ch/web/cosmic.git/blob/HEAD:/dashboard.xbrowse/RELEASE-NOTES][(CERN)]], master [[http://git.cern.ch/pubweb/cosmic.git/tree/HEAD:/dashboard.xbrowse][(OPEN)]] [[https://git.cern.ch/web/cosmic.git/tree/HEAD:/dashboard.xbrowse][(CERN)]], tags [[http://git.cern.ch/pubweb/cosmic.git/tags][(OPEN)]] [[https://git.cern.ch/web/cosmic.git/tags][(CERN)]].

-- Main.DavidTuckett - 03-May-2012

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
sh	build_xbrowse_example.sh	r1	manage	2.5 K	2012-05-04 - 16:50	DavidTuckett	Build script to create standalone xbrowse example
tgz	dashboard-xbrowse-0.22.0-1.tgz	r1	manage	70.7 K	2014-07-14 - 15:54	DavidTuckett	Standalone xbrowse demo application
tgz	xbrowse_demo_0-15-0.tgz	r1	manage	307.8 K	2013-04-09 - 17:17	DavidTuckett	Standalone xbrowse demo application
tgz	xbrowse_demo_0-15-1.tgz	r1	manage	307.8 K	2013-07-02 - 13:44	DavidTuckett	Standalone xbrowse demo application
tgz	xbrowse_demo_0-15-2.tgz	r1	manage	307.8 K	2013-07-02 - 14:53	DavidTuckett	Standalone xbrowse demo application
tgz	xbrowse_demo_0-17-0.tgz	r1	manage	204.5 K	2014-01-20 - 15:15	DavidTuckett	Standalone xbrowse demo application
tgz	xbrowse_demo_0-18-0.tgz	r1	manage	59.0 K	2014-02-19 - 16:50	DavidTuckett	Standalone xbrowse demo application
tgz	xbrowse_demo_0-19-0.tgz	r1	manage	69.7 K	2014-03-10 - 09:48	DavidTuckett	Standalone xbrowse demo application
tgz	xbrowse_demo_0-20-0.tgz	r1	manage	70.7 K	2014-03-12 - 17:03	DavidTuckett	Standalone xbrowse demo application
tgz	xbrowse_demo_0-4-0.tgz	r1	manage	303.3 K	2012-09-26 - 16:35	DavidTuckett	Standalone xbrowse demo application
tgz	xbrowse_example_0-3-0_0-1-0.tgz	r1	manage	289.2 K	2012-05-04 - 16:50	DavidTuckett	Standalone xbrowse example application

This topic: ArdaGrid > WebHome > Dashboard > XbrowseFramework
Topic revision: r12 - 2014-07-14 - DavidTuckett

Copyright &© 2008-2022 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
or Ideas, requests, problems regarding TWiki? use Discourse or Send feedback