[Kimchi-devel] [PATCH 6/6] Create VMs Asynchronously: UI

[Aline Manera]

On 27/04/2015 14:28, Christy Perez wrote:
> Signed-off-by: Christy Perez <christy at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/list.css  | 18 ++++++++++++++++++
>   ui/js/src/kimchi.guest_main.js | 25 ++++++++++++++++++++++---
>   ui/pages/guest.html.tmpl       |  3 +++
>   3 files changed, 43 insertions(+), 3 deletions(-)
>
> diff --git a/ui/css/theme-default/list.css b/ui/css/theme-default/list.css
> index 7b32ea6..62d1539 100644
> --- a/ui/css/theme-default/list.css
> +++ b/ui/css/theme-default/list.css
> @@ -306,3 +306,21 @@
>       margin-left: 5px;
>       text-shadow: -1px -1px 1px #CCCCCC, 1px 1px 1px #FFFFFF;
>   }
> +
> +.guest-create {
> +    margin: 10px;
> +}
> +
> +.guest-create .icon {
> +    background: url('../../images/theme-default/kimchi-loading15x15.gif') no-repeat;
> +    display: inline-block;
> +    width: 20px;
> +    height: 20px;
> +    vertical-align: middle;
> +}
> +
> +.guest-create .text {
> +    color: #666666;
> +    margin-left: 5px;
> +    text-shadow: -1px -1px 1px #CCCCCC, 1px 1px 1px #FFFFFF;
> +}

I think we can create a single config to work for VM cloning and creation.

For example, replace the current .guest-clone to .guest-pending

> diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js
> index c712bb4..dbcc162 100644
> --- a/ui/js/src/kimchi.guest_main.js
> +++ b/ui/js/src/kimchi.guest_main.js
> @@ -201,6 +201,21 @@ kimchi.listVmsAuto = function() {
>       if (kimchi.vmTimeout) {
>           clearTimeout(kimchi.vmTimeout);
>       }
> +    var getCreatingGuests = function(){
> +        var guests = [];
> +        kimchi.getTasksByFilter('status=running&target_uri='+encodeURIComponent('^/vms/[^/]+$'), function(tasks) {
> +            for(var i=0;i<tasks.length;i++){
> +                var guestUri = tasks[i].target_uri;
> +                var guestName = guestUri.split('/')[1]
> +                guests.push($.extend({}, kimchi.sampleGuestObject, {name: guestName, isCreating: true}));
> +                if(kimchi.trackingTasks.indexOf(tasks[i].id)==-1)
> +                    kimchi.trackTask(tasks[i].id, null, function(err){
> +                        kimchi.message.error(err.message);
> +                    }, null);
> +            }
> +        }, null, true);
> +        return guests;
> +    };
>       var getCloningGuests = function(){
>           var guests = [];
>           kimchi.getTasksByFilter('status=running&target_uri='+encodeURIComponent('^/vms/.+/clone'), function(tasks) {
> @@ -219,6 +234,7 @@ kimchi.listVmsAuto = function() {
>       kimchi.listVMs(function(result, textStatus, jqXHR) {
>           if (result && textStatus=="success") {
>               result = getCloningGuests().concat(result);
> +            result = getCreatingGuests().concat(result);
>               if(result.length) {
>                   var listHtml = '';
>                   var guestTemplate = kimchi.guestTemplate;
> @@ -281,7 +297,7 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
>       imgLoad.attr('src',load_src);
>
>       //Link the stopped tile to the start action, the running tile to open the console
> -    if(!vmObject.isCloning){
> +    if(!(vmObject.isCloning || vmObject.isCreating)){
>           if (vmRunningBool) {
>               liveTile.off("click", kimchi.vmstart);
>               liveTile.on("click", kimchi.openVmConsole);
> @@ -329,7 +345,7 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
>       }
>
>       //Setup action event handlers
> -    if(!vmObject.isCloning){
> +    if(!(vmObject.isCloning || vmObject.isCreating)){
>           guestActions.find("[name=vm-start]").on({click : kimchi.vmstart});
>           guestActions.find("[name=vm-poweroff]").on({click : kimchi.vmpoweroff});
>           if (vmRunningBool) {  //If the guest is not running, do not enable reset
> @@ -362,7 +378,10 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
>
>       }else{
>           guestActions.find('.btn').attr('disabled', true);
> -        result.find('.guest-clone').removeClass('hide-content');

> +        if(vmObject.isCloning)
> +            result.find('.guest-clone').removeClass('hide-content');
> +        else
> +            result.find('.guest-create').removeClass('hide-content');
>           $('.popover', guestActions.find("div[name=actionmenu]")).remove();
>       }

Same I commented above.
But this "if" conditional will still be needed to properly set the label 
(Clonning... or Creating...)

Reusing the same UI for both will make sure they will not appears 
different in future.

>
> diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
> index 17d41ac..aaf41a2 100644
> --- a/ui/pages/guest.html.tmpl
> +++ b/ui/pages/guest.html.tmpl
> @@ -29,6 +29,9 @@
>                   <div class="guest-clone hide-content">
>                       <span class="icon"></span><span class="text">$_("Cloning")...</span>
>                   </div>
> +                <div class="guest-create hide-content">
> +                    <span class="icon"></span><span class="text">$_("Creating")...</span>
> +                </div>

The comment I made applies to here too.

>               </div>
>               <div name="cpu_utilization" class="sortable">
>                   <div class="circleGauge"></div>