cloudstack-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Edison Su <Edison...@citrix.com>
Subject RE: CloudStack UIX
Date Thu, 07 Jun 2012 21:05:26 GMT


> -----Original Message-----
> From: David Avenante [mailto:d.avenante@gmail.com]
> Sent: Thursday, June 07, 2012 10:26 AM
> To: cloudstack-dev@incubator.apache.org
> Subject: Re: CloudStack UIX
> 
> Cloudstack UI in a developper point of view.
> 
> Hi, I works on a SWFIT UI extention for Cloudstack and I'have some
> feedback
> to add at the conversation ;)
> 
> First the UI go in the good direction in term of vision (REST), the
> client
> is an appliction who convers with the server through ajax call.
> 
> Where I am not agree is with the implementation choice.
> I'm one of the creator of a multiplatform (desktop and tablet / mobile)
> application http://www.jaxspot.com.
> 
> And we have created many tool / lib to improve the usage of Rich HTML5
> Client in the same vision of Cloudstack
> The objectif is to have an application platform extensible and easing
> to
> maintaint and improve (add feature as plugin).
> 
>  A - simplicity
> 
>   Cloudstack UI is based on old and heavy technology in term of usage
> and
> deployment (=> JSP)
> 
>   1 - We have created a javascript i18n support in json (remove all
> dependencies with the JSP approch with property setting and specific
> JSP
> code usage)
>   https://github.com/Ovea/i18n
>   2 - A very light templating tool for some rare case
> https://github.com/Ovea/dynamic-markup (when all page need to be i18n
> and
> not anly label text or fields)
>   3 - A compressor / minifier of JS server side.
> https://github.com/Ovea/virtual-resources
>   4 - A client side service storage https://github.com/Ovea/js-storage
>   5 - A real REST usage (APIServer can be removed and replaced with
> some
> specialized class with Java Jersey framework)
> 
>   With this approch we removed the dependecy and the usage of JSP. So
> the
> code is now pure Html5, JS, CSS3. Every web developpeur can work on it
>   without knowledg of JSP.
> 
>   B - Power
> 
>   Cloudstack UI javascript is complex and have a event model to simple
> and
> it's not based on existing toolkit or frammework
>   so the learnig curve is high. The components are custom and not fully
> functional (treeView for exemple => delete node)
> 
>   1 - We created a Eventbus engine in JS with and extention to the
> serverside through a transparent support of CometD so JMS on Netty
> messaging cans be redriected to the client
>     https://github.com/Ovea/cometd
>     https://github.com/Ovea/js-eventbus
> 
>     so we can communicate througt event client<->client / client<-
> >server
> 
>     code looks like :
> 
>     jaxspot.bus.local.topic('/event/project/updated).publish(project);
> 
> 
> jaxspot.bus.local.topic('/event/project/updated).subscribe(function(pro
> ject)
> {});
> 
> 
> jaxspot.bus.remote.topic('/event/notify/project/deleted).publish(projec
> t);
> 
>   This approch is a REAL improvement in term of power (what we can do)
> and
> complexity of client side code
> 

Sounds interesting. Could you elaborate more about jaxspot? What's the difference between
Bus.local and bus.remote? bus.remote meaning send message to server? What's the publish mean?
Ideally, if there is a framework that works like this way:
1. client sends an async command, e.g. startvm, to server. 
2.  mgt server sends a notification to client, after startvm command finished or failed.
3. client gets the notification, then update ui accordingly. 

In the client side, don't need to queryAsyncJobResult for all the async API anymore, maybe
it's will be easier to programming the web...(I am not a JavaScript programmer, just curious).

>   2 - We use JQuery mobile also for a Web App but only the navigation
> model
> (not the mobile part) and we have
>   simplified it's usage through the event bus
> https://github.com/Ovea/jquery-mobile-contribs
> 
>   So when a page is loaded by JQM we be notified by the event bus (the
> event are automaticly published)
> 
>   Sample :
> 
> 
> my.bus.local.topic('/event/ui/view/pageinit/home').subscribe(function(p
> age)
> {
>     do something when the page is initialized
>   });
> 
> 
> my.bus.local.topic('/event/ui/view/pageshow/home').subscribe(function(p
> age)
> {
>     do something when the page is showed
>   });
> 
>   C - Testatbility
> 
>   In cloudstack there is no automated test on the UI
> 
>   We use Testatoo to write Automated UI test
> https://github.com/Ovea/testatoo-html4
> 
>   Code looks like :
> 
>    assertThat(page(), contains(
>        infoLink,
>        transferLink
>    ));
> 
>    clickOn(infoLink);
> 
>    My two cents ;)
>    Regards.
> 
> On Wed, Jun 6, 2012 at 4:18 PM, Sonny Chhen <Sonny.Chhen@citrix.com>
> wrote:
> 
> > First off, Thank You everyone for your feedback. This is good to hear
> in
> > terms of trying to improve upon the CloudStack experience.
> >
> > A few things to note:
> >
> > Too many clicks:
> > We have heard the feedback about multiple clicks and are working on
> trying
> > to limit the amount. Our first steps to working toward this goal can
> be
> > found in  the new infrastructure page where we will be providing
> quick
> > links to the Zones, pods, clusters, host, etc...that will take you to
> a
> > global list of the properties regardless of zone selected. We would
> > appreciate feedback on where you would see most of your time being
> spent so
> > that we can find a way for you to reach that destination sooner.
> >
> > More info less action:
> > As Pranav mentioned in the earlier response, we are toying with the
> idea
> > of adding more information to the table/list view with fewer actions
> > required by the user. I'll add a post with screenshots to the wiki
> for a
> > better explanation.
> >
> > Customizable content and pluggable framework:
> > If you take a look at the wiki and click on the "Flip Dashboard" link,
> > you'll see an example of a completely revamped dashboard. The concept
> here
> > is to add not only monitoring information but common actions such as
> create
> > a vm, create a zone, etc...It would be ideal to have the user add
> whatever
> > common used functionality to this dashboard to make ease of use for
> them.
> > If this is an idea you would like us to pursue then please let us
> know and
> > we will try to work towards it.
> >
> > I'll be posting more concepts and designs on the wiki and will be
> > answering more questions as they come in. Once again Thank You all
> for the
> > feedback and I hope these answers helped.
> >
> > http://confluence.cloudstack.org/display/COMM/CloudStack+UIX
> >
> >
> http://wiki.cloudstack.org/display/COMM/CloudStack+UIX?focusedCommentId
> =9601436#comment-9601436
> >
> >
> > Thank You and Best Regards,
> >
> > Sonny H. Chhen
> > Sr. Visual Designer | Citrix Systems - CloudPlatform
> > 4988 Great America Parkway, Santa Clara, CA  95054, USA
> >
> >
> > -----Original Message-----
> > From: Kelven Yang [mailto:kelven.yang@citrix.com]
> > Sent: Wednesday, June 06, 2012 12:45 PM
> > To: cloudstack-dev@incubator.apache.org
> > Subject: RE: CloudStack UIX
> >
> > Pluggable UI and job UI are feature requirements that we need to
> > implement, I guess Sonny would like the feedbacks about general UIX
> ideas.
> >
> > Maybe I'm a too boring person, I actually like how Microsoft Outlook
> > navigates, with sliding tab + single tree pane. For frequent actions,
> how
> > about to allow per-user UI profile? Allow creating customized UI
> profile,
> > providing UI profile persistence so that people can always go back to
> where
> > he was left off, etc
> >
> > Kelven
> >
> >
> > > -----Original Message-----
> > > From: Chip Childers [mailto:chip.childers@sungard.com]
> > > Sent: Wednesday, June 06, 2012 12:21 PM
> > > To: cloudstack-dev@incubator.apache.org
> > > Subject: Re: CloudStack UIX
> > >
> > > On Wed, Jun 6, 2012 at 3:14 PM, Alex Huang <Alex.Huang@citrix.com>
> > wrote:
> > > >
> > > > For CloudStack Admin Console, we need to innovate in the
> following
> > > areas.  These all have to do with being able to do more with less
> action.
> > > >
> > > > - Pluggable UI to configure plugins
> > >
> > > +1 (would be +5 if it could be)
> > >
> > > > - A monitor pane where resources can be put into and taken out of
> > > monitoring mode
> > >
> > > Interesting idea, but would probably require some design concepts
> to
> > > see if it would be useful / usable.
> > >
> > > > - A simple collapsible tree view of the resources
> > >
> > > I'm not certain I agree with a tree view for two reasons:  First, a
> > > large scale environment typically has too many elements for a tree
> to
> > > be the best method of navigation.  Second, it leads to the same
> type
> > > of problem of too many clicks to get to something important.
> > >
> > > Those two reservations can sometimes be dealt with pretty elegantly
> by
> > > coupling a tree with a really simple (but useful) quick search
> > > feature.
> > >
> > > > - Jobs management ui
> > >
> > > +1
> >

Mime
View raw message