Mailing-List: contact cloudstack-dev-help@incubator.apache.org; run by ezmlm
Precedence: bulk
Reply-To: cloudstack-dev@incubator.apache.org
Received-SPF: pass (nike.apache.org: domain of d.avenante@gmail.com designates
 209.85.220.175 as permitted sender)
MIME-Version: 1.0
In-Reply-To: 
 <7914B38A4445B34AA16EB9F1352942F1011C9722F589@SJCPMAILBOX01.citrite.net>
References: 
 <7914B38A4445B34AA16EB9F1352942F1011C9722F50D@SJCPMAILBOX01.citrite.net>
	<707D7888-3895-4DF3-B980-6C2793D230AC@stratosec.co>
	<B1DF26ECC0458748AC97CECE2DA98D41011D284D1C81@SJCPMAILBOX01.citrite.net>
	<CA+96GG6gDSLU4CvXRTNLBGrZE_2MRs-5DHRc0gt2WZ5KUYMJ=w@mail.gmail.com>
	<B1DF26ECC0458748AC97CECE2DA98D41011D284D1C96@SJCPMAILBOX01.citrite.net>
	<7914B38A4445B34AA16EB9F1352942F1011C9722F589@SJCPMAILBOX01.citrite.net>
Date: Thu, 7 Jun 2012 13:25:52 -0400
Message-ID: 
 <CAFT1+4h35iV0nN8AfwVZt3V9A3wBBbG9uDUxEH3cNpmkyeFp=w@mail.gmail.com>
Subject: Re: CloudStack UIX
From: David Avenante <d.avenante@gmail.com>
To: cloudstack-dev@incubator.apache.org
Content-Type: multipart/alternative; boundary=f46d043c7d92fa1a8604c1e52c92

--f46d043c7d92fa1a8604c1e52c92
Content-Type: text/plain; charset=ISO-8859-1

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(project)
{});


jaxspot.bus.remote.topic('/event/notify/project/deleted).publish(project);

  This approch is a REAL improvement in term of power (what we can do) and
complexity of client side code

  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(page)
{
    do something when the page is initialized
  });


my.bus.local.topic('/event/ui/view/pageshow/home').subscribe(function(page)
{
    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
>

--f46d043c7d92fa1a8604c1e52c92--