[openstack-dev] [horizon] Enhance UX of Launch Instance Form

Gabriel pettier gabriel.pettier at cloudwatt.com
Tue Dec 17 16:18:14 UTC 2013


I've been working on this blueprint's implementation, the first bullet 
point has been implemented by the two following Gerrit reviews:

https://review.openstack.org/#/c/61754/3

and

https://review.openstack.org/#/c/62442/

The first one is simply there to allow for any modal view to declare 
itself as "fullscreen", and provide style for the modal to take screen 
space relative to the buffer size.

The second one makes use of this feature for the LaunchInstance 
Workflow, and changes the step template to use responsive elements 
instead of a table.

This doesn't touch the content of the steps at all, only the 
size/responsiveness of the whole popup UI.

Feedbacks about the blueprint are of course still welcome, as well as 
feedback for the implementation.

This video shows the state of the popup after the two patchsets.

http://youtu.be/0b9aqtH0dSI

On Tue, Dec 03, 2013 at 07:44:12PM +0100, Gabriel pettier wrote:
> (Previous mail went out a bit fast)
> 
> These features could be developed iteratively to improve upon the 
> existing code base:
>  - First allow the modal view system to expand for better usage of screen 
>    real-estate combined with responsiveness of the whole popin
>  - Then rework existing menus to simplify user flow:
>    - ephemeral/persistent switch
>    - images/flavors choice list instead of combobox
> 
> I saw work had been started for the wizard-navigation in [1]
> 
> As for implementation details we obviously need to discuss them, for exemple as
> there have been a recent addition of AngularJS, should we use it for the view
> implementation?
> 
> Feedback/directions?
> 
> [1] http://ask-openstackux.rhcloud.com/question/81/wizard-ui-for-workflow/  
>  
> On Tue, Dec 03, 2013 at 05:49:29PM +0100, Gabriel pettier wrote:
> > Hi there
> > 
> > I read the proposal and related documentation, and intend to start 
> > implementing it into horizon.
> > 
> > Regards
> > 
> > on Wed Nov 20 15:09:05 UTC 2013 C?dric Soulas Wrote
> > >
> > >
> > >Thanks for all the feedback on the "Enhance UX of launch instance form" subject and its prototype.
> > >
> > >Try the latest version of the prototype:
> > >http://cedricss.github.io/openstack-dashboard-ux-blueprints/launch-instance
> > >
> > >This update was made after several discussion on those different channels:
> > >
> > >- openstack ux google group
> > >- launchpad horizon (and now launchpad openstack ux)
> > >- mailing list and IRC
> > >- the new ask bots for openstack UX
> > >
> > >We tried to write back most of discussions on ask bot, and are now focusing on this tool.
> > >
> > >Below a "digest" of those discussions, with links to ask bot (on each subject, there are links to related blueprints, google doc drafts, etc)
> > >
> > >= General topics =
> > >
> > >- Modals and supporting different screen sizes [2]
> > >  Current modal doesn't work well on the top 8 screen resolutions [2]
> > >  => Responsive and full screen modal added on the prototype [1]
> > >
> > >- Wizard mode for some modals [3]
> > >  => try the wizard [1]
> > >
> > >= Specific to "launch instance" =
> > >
> > >- Improve "boot source" options [4]
> > >  * first choose to boot from ephemeral or persistent disk
> > >  * if no ephemeral flavor are available, hide the selector
> > >  * group by "public", "project", "shared with me"
> > >  * warning message added for "delete on terminate" option (when boot from persistent)
> > >
> > >- Scaling the flavor list [5]
> > >  * sort the columns of the table. In particular: by name.
> > >  * group of flavor list (for example: "performance", "standard"...)?
> > >
> > >- Scaling the image list [5]
> > >  * a scrollbar on the image list
> > >  * limit the number of list items and add a "x more instance snapshots - See more" line
> > >  * a search / filter feature would be great, like discussed at the "scaling horizon" design session
> > >
> > >- Step 1 / Step 2 workflow: when the user click on "select" from one boot source item it goes directly to the step 2.
> > >  If it goes back from step 2 to step 1:
> > >  * the text "Please select a boot source" would be replaced with a "Next" button
> > >  * the button "select" on the selected boot source item would be replaced with a check-mark (or equivalent).
> > >  * the user would still have the possibility to select another boot source
> > >
> > >- flavor depending on image requirements and quotas available: 
> > >   * this a very good point, lot of things to discuss about
> > >   => should open a separate thread on this
> > > 
> > >- Network: still a work in progress
> > >  * if a single choice: then make it default choice
> > >
> > >- Several wording updates ("cancel", "ephemeral boot source", ...)
> > >
> > >[1] http://cedricss.github.io/openstack-dashboard-ux-blueprints/launch-instance
> > >[2] http://ask-openstackux.rhcloud.com/question/11/modals-and-supporting-different-screen-sizes/
> > >[3] http://ask-openstackux.rhcloud.com/question/81/wizard-ui-for-workflow
> > >[4] http://ask-openstackux.rhcloud.com/question/13/improve-boot-source-ux-ephemeral-vs-persistent-disk/
> > >[5] http://ask-openstackux.rhcloud.com/question/12/enhance-the-selection-of-a-flavor-and-an-image/
> > >
> > >Best,
> > >
> > >Cédric
> > >
> > > > Oct 11 17:11:26 UTC 2013, Jesse Pretorius <jesse.pretorius at gmail.com>  wrote:
> > > >
> > > > +1
> > > > 
> > > > A few comments:
> > > > 
> > > > 1. Bear in mind that sometimes a user may not have access to any Ephemeral
> > > > flavors, so the tabbing should ideally be adaptive. An alternative would
> > > > not to bother with the tabs and just show a flavor list. In our deployment
> > > > we have no flavors with ephemeral disk space larger than 0.
> > > > 2. Whenever there's a selection, but only one choice, make it a default
> > > > choice. It's tedious to choose the only selection only because you have to.
> > > > It's common for our users to have one network/subnet defined, but the
> > > > current UI requires them to switch tabs and select the network which is
> > > > rather tedious.
> > > > 3. The selection of the flavor is divorced from the quota available and
> > > > from the image requirements. Ideally those two items should somehow be
> > > > incorporated. A user needs to know up-front that the server will build> 
> > > > based on both their quota and the image minimum requirements.
> > > > 4. We'd like to see options for sorting on items like flavors. Currently
> > > > the sort is by 'id' and we'd like to see an option to sort by name
> > > > alphabetically.
> > > > 
> > > > 
> > > > 
> > > > On 11 October 2013 18:53, Cédric Soulas <cedric.soulas at cloudwatt.com> wrote:
> > > > 
> > > > > Hi,
> > > > >
> > > > > I just started a draft with suggestions to enhance the UX of the "Launch
> > > > > Instance" form:
> > > > >
> > > > > https://docs.google.com/document/d/1hUdmyxpVxbYwgGtPbzDsBUXsv0_rtKbfgCHYxOgFjlo
> > > > >
> > > > > Try the live prototype:
> > > > > http://cedricss.github.io/openstack-dashboard-ux-blueprints/launch-instance
> > > > >
> > > > > Best,
> > > > >
> > > > > Cédric
> > > > >
> > > > > _______________________________________________
> > > > > OpenStack-dev mailing list
> > > > > OpenStack-dev at lists.openstack.org
> > > > > http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-dev
> 
> _______________________________________________
> OpenStack-dev mailing list
> OpenStack-dev at lists.openstack.org
> http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-dev

-- 
Gabriel Pettier
Software Engineer at CloudWatt.com 
06 85 10 36 34



More information about the OpenStack-dev mailing list