The Integration of AJAX, Interactive X Windows Applications ...

destructivebewInternet and Web Development

Jul 19, 2012 (5 years and 2 months ago)

415 views

Academic Technology Services
Prakashan Korambath
Prakashan Korambath
, Joan Slottow,
, Joan Slottow,
Kejian
Kejian
Jin
Jin
Research Computing Technologies
Research Computing Technologies
UCLA Academic Technology Services
UCLA Academic Technology Services
UGP Documentation at:
http://www.
ucgrid
.org
The Integration of AJAX, Interactive
X Windows Applications and
Application Input Generation into
the UCLA Grid Portal
SC07-GCE07
Academic Technology Services
UGP (UCLA Grid Portal)

Joins computational clusters

into a Grid

Services Provided

Resource Discovery

Data Manager

Batch Job Submittal/Status/Output

Interactive GUI applications (run on the clusters)

Grid Development Environment

Simple Identity Management Interface
Academic Technology Services
UGP (UCLA Grid Portal)

Under development at UCLA since 2002.

Web Portal built on top of:

Globus Toolkit 4.n

--
Tomcat

MySQL
--
Shibboleth

GridSphere Portlet
Framework

AJAX based interfaces built on top of the
following toolkits:

Zimbra
AJAX Toolkit

YUI (Yahoo User Interface)

GWT (
Google
Web Toolkit)
Academic Technology Services
Head node
Cluster II
Head node
Cluster I
Single Campus Architecture
ION Visualization Server
Storage Server
MyProxy Server
Grid Portal
Grid Appliance
Credential
mapped to
local ID
Credential
mapped to
local ID
Grid Appliance
https
Uniform browser
based interface
Academic Technology Services
UC Grid Architecture
UC Grid Portal
UCLA Grid Portal
others
C1
C2
C3
C4
C5
C6
……


User always applies from Campus Portal

One Certificate Authority(CA) throughout UC Grid

User CA is automatically created and pushed to
myproxy
server

Simple account creation process (approval/denial workflow)

Once the admin approves, the user

is able to login to

two portals instantly

Enabled by Register Web Service and Sync Web Service in UC Grid Portal


UCSB Grid Portal
UCI Grid Portal
Academic Technology Services
Conventional Web Interfaces
vs. AJAX Enabled User
interfaces
Academic Technology Services
AJAX

AJAX =
asynchronous JavaScript and XML

JavaScript runs in the Browser

Java code on the server processes the
requests

Asynchronous
XMLHttpRequests
used for
communication

Only part of the Web page is updated

Interactivity gains and efficiency benefits (fewer
clicks required)
Academic Technology Services
How AJAX Works
HTML
Web
Page,
using
Dynamic
HTML
JavaScript
code
Java
servlet
Asynchronous
XMLHttpRequest
Client Side
Server Side
Returns information usually
to a callback
Updates part
of the
HTML for the
page.
The entire
page is not
re-loaded.
SQL
Databases
GridFTP
or
GRAM
Other Server Side
Resources
Academic Technology Services
AJAX Data Managers
vs
. HTML Data
Manager

AJAX Data Managers looks and work like a desktop
data manager.
Conventional
Portlet
Cerca
2004
AJAX
Zimbra
Cerca
2005
AJAX
GWT
Cerca
2007
Academic Technology Services

The user does not have to wait for the entire page to
refresh with each click.
1
2
3
1
2
3
Conven-
tional
AJAX
Academic Technology Services

With AJAX we can do perform the same action on multiple files at
once

In order to attract users to Grid Portals we have to make them as
easy to use as possible and offer increased functionality.
Academic Technology Services
1
2
3
4
FTP -- Conventional
Academic Technology Services
1
2
3
AJAX FTP Client
Academic Technology Services
Progress bar

See the

upload progress at real time

Could not

do it without AJAX
Academic Technology Services
Work with overlapping windows
Academic Technology Services
Grid Development Environment

(GDE)
Academic Technology Services
Auto Completion

Cannot do it without AJAX
Academic Technology Services
Interactive GUI Applications
Run on the cluster compute
nodes
Academic Technology Services
Interactive Applications via VNC

Previous work in this area:

Purdue University

s
nanoHUB

University of Florida

s In-VIGO

University of Texas Advanced Computer
Center (TACC)
Academic Technology Services
There is

1 Grid Portal
One Grid Appliance per cluster
Multiple VNC servers can be

Running on an Appliance simultaneously
User
Web Browser
Portal
Web Server
Tomcat
UGP
Serve Applet
Because of
Applet
security, the
Applet can
only talk to the
Portal machine
iptables
Port
forwarding
Public Network
Private Network
VNC
Viewer
applet
Compute Node
GUI App
Grid
Appliance
VNC
server
Runs

Under

the
User

s
id
Globus
GRAM
Fork
Job
SSH
Firewall
iptables
Port
forwarding

Interactive applications

via VNC Design Diagram
Academic Technology Services
iptables
set up for VNC
Academic Technology Services
Interactive
Matlab
Academic Technology Services
A user can have up to n simultaneous interactive
sessions.
Reconnect, kill, timeout
Academic Technology Services
appForm
Application Form for batch jobs
Academic Technology Services
Purpose of
appForm


For batch job submittal.


User --> form --> input file for the application.


Designed for the novice/occasional user of the application.
Goals

Must Work through the Grid Portal

Easy to add additional applications
Technologies Used

XSLT, XML, YUI
Academic Technology Services
Previous Work

Purdue/nanoHub Rappture

San Diego Supercomputer Center (SDSC)
and National Biomedical Computation
Resource (NBCR) Project Gemstone
Academic Technology Services
appForm
uses YUI
tabview
Two tabs, one for GRAM
rsl
(resource specification language) one for
appForm
Academic Technology Services
How
appForm
Works
combine.
jsp
app
_job
.xml
rsl
.
xsl
app
_form
.xml
trans.
xsl
HTML +
JavaScript
+ YUI
HTML +
JavaScript
+ YUI
HTML +
JavaScript
+ YUI for
tabbed
page
app
_job
.xml,
app
_form
.xml and
app
_forrm_input
.
xsl
must be written for each
app
.
Academic Technology Services
1
2
Dynamic HTML used to change the form
Input Generator tab

can itself

be divided into multiple tabbed pages
Tabs superior to pages, the user can go back and fourth between the tabs without

loss of input values
Academic Technology Services
3
YUI Dialogs used for file selection
Academic Technology Services
1
2
This

layout was accomplished simply by

specifying the
xml for the form
Academic Technology Services
JMathPlot
used
via AJAX to
generate the
graphs from the
numbers in the
form
Dynamic

Visual Feedback
Academic Technology Services
Save Button

saves the input in both .xml application input
format.
Load Button

loads the .xml and populates the form.
Academic Technology Services
How
appForm
Works

on Save
Filled
in
Form
JavaScript
code
name=value,name=value

Java
servlet
File.xml
<element name=

name

>

<value>value</value>
</element>
app
_form_input
.
xsl
File.txt
Input file for app
Asynchronous
XMLHttpRequest
Client Side
Server Side
Academic Technology Services
To add an application:
1.
Define your job submission Interface via XML
(simple)
2.
Define your input generation interface via XML
(simple
but takes doing)
3.
Traslate
to the application input
your input format via
XSLT (
More complicated but can copy and modify existing
translator)
Academic Technology Services
UGP documentation, download,
wiki

http://www.
ucgrid
.org
Interested in UGP?
Or catch
Prakashan
,
Kejian
or

myself.