[Kimchi-devel] [PATCH 1/2] First changes for pause/resume UI

28 May 2015

From: Socorro Stoppler <socorrob@us.ibm.com>

Signed-off-by: Socorro Stoppler <socorrob@us.ibm.com>
---
 ui/css/theme-default/button.css | 10 +++++
 ui/css/theme-default/list.css   |  4 +-
 ui/js/src/kimchi.guest_main.js  | 95 ++++++++++++++++++++++++++++++++++++++++-
 ui/pages/guest.html.tmpl        |  3 ++
 4 files changed, 109 insertions(+), 3 deletions(-)

diff --git a/ui/css/theme-default/button.css b/ui/css/theme-default/button.css
index 0df53a6..08845a8 100644
--- a/ui/css/theme-default/button.css
+++ b/ui/css/theme-default/button.css
@@ -226,6 +226,16 @@
                 center no-repeat;
 }
 
+.icon.pause {
+    background: url(../images/theme-default/icon-pause.png) center
+                center no-repeat;
+}
+
+.icon.resume {
+    background: url(../images/theme-default/icon-resume.png) center
+                center no-repeat;
+}
+
 .icon.search {
     background: url(../images/theme-default/icon-search.png) no-repeat
                 center center;
diff --git a/ui/css/theme-default/list.css b/ui/css/theme-default/list.css
index e51912d..6b8993b 100644
--- a/ui/css/theme-default/list.css
+++ b/ui/css/theme-default/list.css
@@ -149,8 +149,8 @@
 }
 
 .guest-actions {
-    width: 125px;
-    min-width: 125px;
+    width: 160px;
+    min-width: 160px;
 }
 
 .guest-handle {
diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js
index 260e907..d4f4916 100644
--- a/ui/js/src/kimchi.guest_main.js
+++ b/ui/js/src/kimchi.guest_main.js
@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 kimchi.sampleGuestObject = {
     "name": "",
     "uuid": "",
@@ -65,6 +66,62 @@ kimchi.vmstart = function(event) {
     }
 };
 
+//Socorro
+kimchi.vmpause = function(event) {
+    var button=$(this);
+    if (!button.hasClass('loading')) {
+        button.addClass('loading');
+        var vm=$(this).closest('li[name=guest]');
+        var vm_id=vm.attr("id");
+	//Socorro - change this to kimchi.pauseVM but where is this defined? -- in kimchi.api.js -- need to get latest one from Aline if it's already checked in
+	//Socorro
+	alert('Before entering .pauseVM - Pause button pushed');
+	vmPausedBool=true;
+        //kimchi.pauseVM(vm_id, function(result) {
+            //button.removeClass('loading');
+            //kimchi.listVmsAuto();
+   	    //Socorro
+	    //alert('Pause button pushed');
+            //}, function(err) {
+                //button.removeClass('loading');
+                //kimchi.message.error(err.responseJSON.reason);
+            //}
+        //);
+    } else {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+    }
+};
+
+//Socorro
+kimchi.vmresume = function(event) {
+    var button=$(this);
+    if (!button.hasClass('loading')) {
+        button.addClass('loading');
+        var vm=$(this).closest('li[name=guest]');
+        var vm_id=vm.attr("id");
+	//Socorro - change this to kimchi.resumeVM but where is this defined?  -- in kimchi.api.js -- need to get latest one from Aline if it's already checked in
+	//Socorro
+	alert('Before entering .resumeVM - Resume button pushed');
+        //kimchi.resumeVM(vm_id, function(result) {
+            //button.removeClass('loading');
+            //kimchi.listVmsAuto();
+            //Socorro
+	    alert('Resume button pushed');
+            //}, function(err) {
+                //button.removeClass('loading');
+                //kimchi.message.error(err.responseJSON.reason);
+            //}
+        //);
+    } else {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+    }
+};
+
+
 kimchi.vmpoweroff = function(event) {
     var button=$(this);
     if (!button.hasClass('loading')) {
@@ -268,6 +325,9 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
 
     //Setup the VM list entry
     var vmRunningBool=(vmObject.state=="running");
+//Socorro
+var vmPausedBool=false; //(vmObject.state=="paused");
+var vmResumedBool=true; //(vmObject.state=="resumed");
     var vmPersistent = (vmObject.persistent == true);
     result.attr('id',vmObject.name);
     result.data(vmObject);
@@ -301,12 +361,24 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
         if (vmRunningBool) {
             liveTile.off("click", kimchi.vmstart);
             liveTile.on("click", kimchi.openVmConsole);
-        }
+//Socorro - add pause/resume scenario
+	    if (vmPausedBool) {
+	        liveTile.off("click", kimchi.vmpause);
+	        liveTile.on("click", kimchi.vmresume);
+	    } 
+	    else if (vmResumedBool) {
+	        liveTile.off("click", kimchi.vmresume);
+	        liveTile.on("click", kimchi.vmpause);
+	    }  	
+//end Socorro
+	} 
         else {
             liveTile.off("click", kimchi.openVmConsole);
             liveTile.on("click", kimchi.vmstart);
             liveTile.hover(function(event){$(this).find('.overlay').show()}, function(event){$(this).find('.overlay').hide()});
         }
+
+
     }
 
 
@@ -326,14 +398,32 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
     guestActions.find(".running-disabled").prop("disabled", vmRunningBool);
     guestActions.find(".non-persistent-disabled").prop("disabled", !vmPersistent);
     guestActions.find(".reset-disabled").prop("disabled", !vmRunningBool || !vmPersistent);
+//Socorro -- disable pause initially - no need to do it for resume since it's either one or the other showing, not both
+    guestActions.find(".pause-hidden").prop("disabled", !vmRunningBool || !vmPersistent);
 
     if (vmRunningBool) {
         guestActions.find(".running-hidden").hide();
+        //Socorro -- since VM is running, assuming it is playing as well
+        guestActions.find(".resume-hidden").hide();
+	// Check if 'paused'
+	if (vmPausedBool) {
+	    guestActions.find(".pause-hidden").hide();
+	}
     }
     else {
         guestActions.find(".shutoff-hidden").hide();
+	//Socorro
+	guestActions.find(".resume-hidden").hide();
+        guestActions.find(".pause-hidden").hide();
     }
 
+//Socorro
+   //if (vmPausedBool) {
+        //guestActions.find(".pause-hidden").hide();
+   //} else if (vmResumedBool) {
+	// Socorro -- add hiding of Resume button here
+   //}
+
     var consoleActions=guestActions.find("[name=vm-console]");
 
     if ((vmObject.graphics['type'] == 'vnc') || (vmObject.graphics['type'] == 'spice')) {
@@ -348,6 +438,9 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
     if(!(vmObject.isCloning || vmObject.isCreating)){
         guestActions.find("[name=vm-start]").on({click : kimchi.vmstart});
         guestActions.find("[name=vm-poweroff]").on({click : kimchi.vmpoweroff});
+//Socorro Pause-Resume
+guestActions.find("[name=vm-pause]").on({click : kimchi.vmpause});
+guestActions.find("[name=vm-resume]").on({click : kimchi.vmresume});
         if (vmRunningBool) {  //If the guest is not running, do not enable reset
             guestActions.find("[name=vm-reset]").on({click : kimchi.vmreset});
         }
diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
index 8896ac5..d2ebef0 100644
--- a/ui/pages/guest.html.tmpl
+++ b/ui/pages/guest.html.tmpl
@@ -53,6 +53,9 @@
                     <button class="btn reset-disabled" name="vm-reset" href="javascript:void(0);" title="$_("Reset")"><span class="icon reset"></span></button>
                     <button class="btn running-hidden" name="vm-start" href="javascript:void(0);" title="$_("Start")"><span class="icon power-down"></span></button>
                     <button class="btn shutoff-hidden" name="vm-poweroff" href="javascript:void(0);" title="$_("Power Off")"><span class="icon power-up"></span></button>
+<button class="btn pause-hidden" name="vm-pause" href="javascript:void(0);" title="$_("Pause")"><span class="icon pause"></span></button>
+<button class="btn resume-hidden" name="vm-pause" href="javascript:void(0);" title="$_("Resume")"><span class="icon resume"></span></button>
+
                 </div>
                 <div class="bottom">
                     <div name="actionmenu" class="btn dropdown popable vm-action" style="width: 70px">
-- 
1.9.1

    