[Kimchi-devel] [PATCH 2/2] Add support for Pause/Resume UI

28 May 2015

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

Adding UI support for pause/resume VM

Signed-off-by: Socorro Stoppler <socorrob@us.ibm.com>
---
 ui/css/theme-default/button.css              |  14 ++-
 ui/css/theme-default/list.css                |  10 +-
 ui/images/theme-default/ac22_pause.png       | Bin 0 -> 1219 bytes
 ui/images/theme-default/ac22_pause_grey.png  | Bin 0 -> 1175 bytes
 ui/images/theme-default/ac24_resume.png      | Bin 0 -> 1341 bytes
 ui/images/theme-default/ac24_resume_grey.png | Bin 0 -> 1282 bytes
 ui/js/src/kimchi.api.js                      |  23 ++++
 ui/js/src/kimchi.guest_main.js               | 161 +++++++++++++--------------
 ui/pages/guest.html.tmpl                     |   7 +-
 9 files changed, 123 insertions(+), 92 deletions(-)
 create mode 100644 ui/images/theme-default/ac22_pause.png
 create mode 100644 ui/images/theme-default/ac22_pause_grey.png
 create mode 100644 ui/images/theme-default/ac24_resume.png
 create mode 100644 ui/images/theme-default/ac24_resume_grey.png

diff --git a/ui/css/theme-default/button.css b/ui/css/theme-default/button.css
index 08845a8..93dd4ed 100644
--- a/ui/css/theme-default/button.css
+++ b/ui/css/theme-default/button.css
@@ -94,6 +94,16 @@
                 center no-repeat;
 }
 
+.btn.pause-gray .icon {
+    background: url(../images/theme-default/ac22_pause_grey.png) center
+                center no-repeat;
+}
+
+.btn.resume-gray .icon {
+    background: url(../images/theme-default/ac24_resume_grey.png) center
+                center no-repeat;
+}
+
 .btn .text {
     padding: 0 10px;
 }
@@ -227,12 +237,12 @@
 }
 
 .icon.pause {
-    background: url(../images/theme-default/icon-pause.png) center
+    background: url(../images/theme-default/ac22_pause.png) center
                 center no-repeat;
 }
 
 .icon.resume {
-    background: url(../images/theme-default/icon-resume.png) center
+    background: url(../images/theme-default/ac24_resume.png) center
                 center no-repeat;
 }
 
diff --git a/ui/css/theme-default/list.css b/ui/css/theme-default/list.css
index 6b8993b..f0bad4a 100644
--- a/ui/css/theme-default/list.css
+++ b/ui/css/theme-default/list.css
@@ -149,8 +149,8 @@
 }
 
 .guest-actions {
-    width: 160px;
-    min-width: 160px;
+    width: 125px;
+    min-width: 125px;
 }
 
 .guest-handle {
@@ -226,6 +226,7 @@
 
 .guest-actions .top {
     padding: 7px 10px;
+    width: 200px;
 }
 
 .guest-actions .top button {
@@ -264,10 +265,15 @@
     box-shadow: none !important;
 }
 
+
 .list-vm .shutoff img {
     opacity: 0.4;
 }
 
+.list-vm .paused img {
+    opacity: 0.1;
+}
+
 .list-title {
     color: #666;
     font-weight: bold;
diff --git a/ui/images/theme-default/ac22_pause.png b/ui/images/theme-default/ac22_pause.png
new file mode 100644
index 0000000000000000000000000000000000000000..9258aee87f0e2f430cf1fb12a4588f763f3c0a62
GIT binary patch
literal 1219
zcmbVMO>Em#9CtTbM!QYZ3R7EwV!5LOiP*7Yo5gCV96yIfTDmTcw6Ieh`=v3h{fzyx
zq`hSAssY^&+X3-;7(IbDF^V*#0ostNNpJ&chiPJ(*f=3gfS^*?io$c-6b{vpux!5%
z|9-#!$NT^N=IF@FyE^+iDT>;a83s8r_K~M&M+bTTG<W|x8G5l^z+<R{tA-CL)j~x`
zXB=Y!=AdCszxFL0q^RvBJ72(s>><TO4r_!Mw&r+*O;LkGHP0|7A*PFP!giC)FJE3`
zXxmCMN2P2m>uIoT56}2;Y-S{H&P<vKiy3-}9;_)uz=7DHYtED#D77TBrmK*7xXm&2
z8U#-!nRTZM*-=_UKBOf!9yMb;Ps=jPi;^t!FVI4a7q}R?<tQ&IlB@_X(i;~;toc?+
z$$|8SEwV~7WsE(A<EqsvTaB~GpWygJA`xl`LX;q)!L*BwTGS2tTM7UMrf+-LMlKyH
z8bwsWNrrg39)ja#vzx+hu#qT|GOlKL9M8r$#|h(FLkBnq|8ZkWbdaC+AeVyys`w^3
zk5Ye&Omg>VLm`lOqa5~aawx_WKxV~(F3x}?L%y(<Z7H#MN&~u_5<ptiMV?RbaS4!>
zrVD8v@O(>SE3PK#KozA#S`-LU7gZ6cs;KfBkmKouAhfs{H^7E#!j@f|*xleBd?Z)V
zd}v_g=MkD}RlsN&VHA{+M{8p;{oGO8wNN#9K0KcFXaV%?<Iqa`$f4KrtJquEkBR>k
z_d3`5KRM%wGhA34|0<T&7OB8+x>@>UvDrM(B^~3F);Mrp0;H{e&j2-FyH#9mHixz+
zsjfH1Eo=U_E3<{C2X?pDPc)w0Q`h${U)cTry;r_#-0i-(^1+#R+i$(o+oLyy)rrPR
zGqQa6RQ*y<Z%_B&waD#}Gs^kZ<Eed1jiuqwm$peKfB56{kCElaPu<xWX*Tygy#8yQ
z9UWc(m4ngZo|4tA&$sX2aW%f${zc=`{>0DYC!VN3CJ3Lly+xgTeKuD)G@tA0Klky%
zS!JL@nLTnk9qqeZzOi_&{C$L3`Rl_Qi*JAZ>Yq=2M&<4|=XMg!2b~wc+G{MR(t(fO
w>*#y%<Tu#??U}`^+b$Q*9#iveH;<`QTL-02da<sDMK=7cWb_g6NosuVZ*kO>5C8xG

literal 0
HcmV?d00001

diff --git a/ui/images/theme-default/ac22_pause_grey.png b/ui/images/theme-default/ac22_pause_grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cde85bcb26ca808b9b02d5336872f10556585a0
GIT binary patch
literal 1175
zcmbVMUue{J98c{SYPo?ZqV0n};)|2JOMXc%y~}#Gy(HIO+0}Br&chc?lV97|CciBC
z)w`CVuHZZen`;>q!NH~v?x9Y7Dzb+TRHmS);FB+cii#l4hoNGz{?hikJroBENq)cY
zFW=AS`#;Bfx;rB48`m=o6UlXI1-drUXUp1;>HE>d^Q&~(O7s%x#RH^l_=st@a6bY$
z#~4HfWLRTgUPmnqQ$JuAOQe+lTrsf|H$t6w#qlVbVOm-%o?#9n0{YRQ?WWlmzt6G2
zw$kjLM4r!kDjKpo$9>d0-d!}uhs~75w(bHg6@?Nwh!~*ajJSbPNwbT*3f+gt919jz
z$Z(ona;lW?0V?(pNW{gM$wLTaIS!?SEW;=ecqni@z2z8`l!UAZ&0zUrsWsmkPzqXh
z*%p=3><}TI!g1wtIbIgy*dOFzDwPU31R+K>V!@b8j7rQ6w$~Um6qvs45gWT8WHkEm
zC`q%_)1?p`FP~o_c7x?a(Ufr&!{cC_=Nu=DYf(EO1@w;_t7-?uF%NMC6yQ<cr1cos
zUIWwIeb`W_NWD>Z`!+3#F`{8})Il!EX=#>ziCea%@M1>QbU7nvSxJ{5%s?@rQAyQ>
zEYu*Zajb?-3eBR(C#7sshY;#gQphxC+ck+-)ufnJ#Tqu}2E=epRI_VSyUSSdgIGoN
zkwLIu#CW9E0X;*Q;9v-QK<$;mjy<+(;d1b4Se~V5HRRg|k(Kqa0~YhE*sIv*rT>b1
z32XhIoN?3{E^Ll}HB0S?c3`+&X?-fJ3=eYY#Q1bH&XxYUOvmcaoYr2f-0PoTSZJ+J
zGaKuFVj6^FlarIb%*@=_c<offl__vP^D+Rfmu6?npH+9yD5o}m%``PNmBebKF#qJ%
zwr}PRFLb?o`wG|fbgrw;O`ZPatR9U<r+E2BU)xQvuUdEVLEBd+HjQdmH|(hH-!gr<
z+Sf6Ag+FlTSN+W9@AgUu?sylUrsSi4bUlxpeCF-_aZPc)@rz)Bzwqs$H?Lnl-1+nE
zZNlC5ogI&|9~C0kBj>)K9Pawz@pRkY`;PY=8`;oyq>edy=*0QyXoDR7Dsp<a_FHEE
F#Cyajgunm*

literal 0
HcmV?d00001

diff --git a/ui/images/theme-default/ac24_resume.png b/ui/images/theme-default/ac24_resume.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f1f16f52f2c000a7413e22a0105c5d0b09c7a2b
GIT binary patch
literal 1341
zcmeAS@N?(olHy`uVBq!ia0vp^Qa~)h!3HFsG`&3vq$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~;1FfgZOhD4M^`1)8S=jZArg4F0$<Q4#RGcefLR}>^BXQ!4Z
zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Kep0RGSfuW&-nVFuU
ziK&^Hp^k!)fuWJU0T7w#8k$&{npqi{D?ot~(6*wKG^-#NH>h1eo~=?wNlAf~zJ7Um
zxn8-kUVc%!zM-Y1CCCgTBVC{h-Qvo;lEez#ykcdT2`;I{$wiq3C7Jno3Lp~`lk!VT
zY?Xj6g?J&iz}FXUa9%MqpnyT9Uy)d#Z>VRWpPLKv7g%+1Nl+@n8CX>phg24%>IbD3
z=a&{G1LGr28KxN+cK9s<DFnL4%D*TR7%7Q4F8Rr&xv6<2o-VdZKpDN1%oHmVGXql#
zXG>!vb2k%L6GKBMLt|4HCnFbUS0gt=7ehms8QAn18<-kc7?=Qc8Ua<hnpheen>)I>
zSh!jkI9dYZ2Bz0Duec;JFF6%vZzj-Qs9rO?daay`QWHz^i$e1Ab6_bTAS1sdzc?em
zK*2fKOhF?&GcP5-yjT+yJrLizq!wkCrKY$Q<>xAZ!`CVki~T0%g!~QBn?g>Q=>r|3
z4@w+Ji3KJEOo1RKJm~{D@XV8%2h1@=z^w7aYe@nF17ohIi(^Q|tu52`dL3~PIG%1+
z{qdYj)BS{nN)a4Uzgfz@U5|{==-~Rr(X?J+hS&Y0>>I9~a|+n7!)e0@qjPDSCqysa
zelqu;f#OV^&$nmJ^%d*n=n)W<QMqBXLNn7=f3xbe`~%;@s_sSHJo4k~OgVK%Rrc$T
zR+%%`o}PbiUixvh#eaiq9=uWhwou#SM&C=8Uq&o5x)^q~e*7C)>7$^?RXt(u(xzEy
zOPU;}B=89}ep{<6u&4Nh>w+5DRCa}Vt_$zQ-(mgo)$`M{6pJ-XGfMySzIu_fqb8xM
zIo&>rjjbj2?e)nA^GjETTIn!NmEN#PGO#~*Y439ez4xkDnXXRN&Pke}eTMr4>oZ;x
zKDC3Jd3;tjEd1V+bK{)Y%G$QIDJfg_xop@z_u<1l?(CE;R_hhlnjVf9c&{M6XkYI=
z$N!Fd8jm^dX^2q>UEnA^L2H7Q^pY(86$;1V><mnqe;9lYxu>o-;m`U@4@9nbC@(Pk
bs(gUqpHO<9rrQcmP=V&@>gTe~DWM4fDsR{!

literal 0
HcmV?d00001

diff --git a/ui/images/theme-default/ac24_resume_grey.png b/ui/images/theme-default/ac24_resume_grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..1714ba2d00294e99222f833b8cf5e33da31448f9
GIT binary patch
literal 1282
zcmeAS@N?(olHy`uVBq!ia0vp^Qa~)h!3HFsG`&3vq$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~;1FfgZOhD4M^`1)8S=jZArg4F0$<Q4#RGcefLR}>^BXQ!4Z
zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Kep0RGSfuW&-nVFuU
ziK&^Hp^k!)fuWJU0T7w#8k$&{npqi{D?ot~(6*wKG^-#NH>h1eo~=?wNlAf~zJ7Um
zxn8-kUVc%!zM-Y1CCCgTBVC{h-Qvo;lEez#ykcdT2`;I{$wiq3C7Jno3Lp~`lk!VT
zY?Xj6g?J&iz}FXUa9%MqpnyT9Uy)d#Z>VRWpPLKv7g%+1Nl+@n8CX>phg24%>IbD3
z=a&{G1LGr28KxN+cK9s<DFnL4%D*TR7%7Q4F8Rr&xv6<2o-VdZKpDN1%oHmVGXql#
zXG>!vb2k%L6GKBMLt|4HCnFbUS0gt=7ehms8QAn1xSBb;n7f#|S-2V*8oHV|I=Y#<
zS~!~;n_HL~7+4y?^m^tMmn7yTr^4*b1lkMLYl2s=m2**QVo82cNPd0}ECmE)<d@_Z
zXXF<sI0u_4XoP3xrR0|vYl5N&;#-&0qRg_?6t|-MTm^9WT4iFf-^84dzae^4$O$uj
zpkwqwi32IIz=VJ)5X6KheIN&(c~bL$Ii?7hH7ag6?Pg$LH1c$D45_%aXWGTy76pMe
z#*54EzIj}xurI?=?19(<x7iySHaBM<W7^hSeW!Y#j`idYMV)ys4*D7$JRonE*5IhM
zRONpX$ECYRU+uDc`!t~V)3Qvv1uJ>(TJRk9Wv+EDZnJyEl{9T%m!aDtjZ3lzucwwy
zndkU9=XRJJn_^3`-z1gDJsMmxyH<Q*>Nrw(reMu$E6&J{ZI{m9FXEiM!sA2qLEql4
zs%w7|zTdl|J2^M+!yb)}zAv@<{Ec(`CoA{--l4?RW_EbR_l}&24;eYxZZ#R+pPI&d
z%xQ`#>*>!j(GTAm-0<OWJhe&0QQ7NqNc)}Uh8%(S3rsu0FXRj4E66fk{VliT+D?am
zJVmW*?k+Ywy~(S-d0FN!6W0ZWZ4v(^pOtgWf7`vVwxRwd<J#Omaudp{ISm*X#7kc9
TIKK2Js8sTF^>bP0l+XkKJo~{m

literal 0
HcmV?d00001

diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index 5c36418..d0d2a21 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -296,6 +296,29 @@ var kimchi = {
         });
     },
 
+
+    suspendVM : function(vm, suc, err) {
+        kimchi.requestJSON({
+            url : 'vms/' + encodeURIComponent(vm) + '/suspend',
+            type : 'POST',
+            contentType : 'application/json',
+            dataType : 'json',
+            success : suc,
+            error : err
+        });
+    },
+
+    resumeVM : function(vm, suc, err) {
+        kimchi.requestJSON({
+            url : 'vms/' + encodeURIComponent(vm) + '/resume',
+            type : 'POST',
+            contentType : 'application/json',
+            dataType : 'json',
+            success : suc,
+            error : err
+        });
+     },
+
     /**
      * Retrieve the information of a given VM by its name.
      *
diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js
index d4f4916..2a4832f 100644
--- a/ui/js/src/kimchi.guest_main.js
+++ b/ui/js/src/kimchi.guest_main.js
@@ -66,27 +66,20 @@ kimchi.vmstart = function(event) {
     }
 };
 
-//Socorro
-kimchi.vmpause = function(event) {
+kimchi.vmsuspend = function(event) {
     var button=$(this);
-    if (!button.hasClass('loading')) {
-        button.addClass('loading');
+    if (!button.hasClass('pause-gray')) {
+        button.addClass('pause-gray');
         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);
-            //}
-        //);
+	kimchi.suspendVM(vm_id, function(result) {
+            button.removeClass('pause-gray');
+            kimchi.listVmsAuto();
+            }, function(err) {
+                button.removeClass('pause-gray');
+                kimchi.message.error(err.responseJSON.reason);
+            }
+        );
     } else {
         event.preventDefault();
         event.stopPropagation();
@@ -94,26 +87,21 @@ kimchi.vmpause = function(event) {
     }
 };
 
-//Socorro
 kimchi.vmresume = function(event) {
     var button=$(this);
-    if (!button.hasClass('loading')) {
-        button.addClass('loading');
+    if (!button.hasClass('resume-gray')) {
+        button.addClass('resume-gray');
         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);
-            //}
-        //);
+        console.log('Before calling resumeVM');
+        kimchi.resumeVM(vm_id, function(result) {
+            button.removeClass('resume-gray');
+            kimchi.listVmsAuto();
+            }, function(err) {
+                button.removeClass('resume-gray');
+                kimchi.message.error(err.responseJSON.reason);
+            }
+        );
     } else {
         event.preventDefault();
         event.stopPropagation();
@@ -325,9 +313,8 @@ 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 vmSuspendedBool = (vmObject.state=="paused");
+    var vmPoweredOffBool = (vmObject.state=="shutoff");
     var vmPersistent = (vmObject.persistent == true);
     result.attr('id',vmObject.name);
     result.data(vmObject);
@@ -356,29 +343,27 @@ var vmResumedBool=true; //(vmObject.state=="resumed");
                                    });
     imgLoad.attr('src',load_src);
 
-    //Link the stopped tile to the start action, the running tile to open the console
+    //Link the stopped tile to the start action, the running tile to open the console, and the paused tile to resume
     if(!(vmObject.isCloning || vmObject.isCreating)){
-        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 {
+	if (vmPoweredOffBool) {
             liveTile.off("click", kimchi.openVmConsole);
+ 	    liveTile.off("click", kimchi.vmresume);
             liveTile.on("click", kimchi.vmstart);
             liveTile.hover(function(event){$(this).find('.overlay').show()}, function(event){$(this).find('.overlay').hide()});
+	} else if (vmSuspendedBool) {
+	    liveTile.off("click", kimchi.vmstart);
+	    liveTile.off("click", kimchi.openVmConsole);
+            liveTile.on("click", kimchi.vmresume);
+	    if(vmObject.state="paused") {
+		liveTile.find('.overlay').attr('src',"/images/theme-default/ac24_resume.png");
+		liveTile.find('.overlay').attr('alt',"Resume");
+	    }
+            liveTile.hover(function(event){$(this).find('.overlay').show()}, function(event){$(this).find('.overlay').hide()});
+	} else {
+            liveTile.off("click", kimchi.vmstart);
+ 	    liveTile.off("click", kimchi.vmresume);
+            liveTile.on("click", kimchi.openVmConsole);
         }
-
-
     }
 
 
@@ -397,32 +382,30 @@ var vmResumedBool=true; //(vmObject.state=="resumed");
     guestActions.find(".shutoff-disabled").prop("disabled", !vmRunningBool);
     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();
+    guestActions.find(".reset-disabled").prop("disabled", vmPoweredOffBool || !vmPersistent);
+
+    if (vmSuspendedBool) { //VM is paused
+	//Hide Start
+    	guestActions.find(".running-hidden").hide();
+        //Hide Pause
+    	guestActions.find(".pause-hidden").hide();
+    }	
+
+    if (vmRunningBool) { //VM IS running
+	//Hide Start
+    	guestActions.find(".running-hidden").hide();
+    	//Hide resume	
+    	guestActions.find(".resume-hidden").hide();
     }
 
-//Socorro
-   //if (vmPausedBool) {
-        //guestActions.find(".pause-hidden").hide();
-   //} else if (vmResumedBool) {
-	// Socorro -- add hiding of Resume button here
-   //}
+    if (vmPoweredOffBool) { //VM is powered off
+  	//Hide PowerOff
+    	guestActions.find(".shutoff-hidden").hide();
+  	//Hide Pause
+    	guestActions.find(".pause-hidden").hide();
+	//Hide Resume
+    	guestActions.find(".resume-hidden").hide();
+    }
 
     var consoleActions=guestActions.find("[name=vm-console]");
 
@@ -438,15 +421,23 @@ var vmResumedBool=true; //(vmObject.state=="resumed");
     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
+        if ((vmRunningBool) || (vmSuspendedBool)) {  
+            //If the guest is not running, do not enable reset; otherwise, reset is enabled (when running or paused)
             guestActions.find("[name=vm-reset]").on({click : kimchi.vmreset});
-        }
-        if (vmRunningBool) {  //If the guest is not running, do not enable shutdown
+
+	    //If the guest is not running, do not enable shutdown;otherwise, shutdown is enabled (when running or paused)
             guestActions.find("[name=vm-shutdown]").on({click : kimchi.vmshutdown});
         }
+
+
+	if (vmSuspendedBool) {
+	    guestActions.find("[name=vm-resume]").on({click : kimchi.vmresume});
+	}
+
+        if (vmRunningBool) {  
+	    guestActions.find("[name=vm-pause]").on({click : kimchi.vmsuspend});
+        }
+
         guestActions.find("[name=vm-edit]").on({click : kimchi.vmedit});
         guestActions.find("[name=vm-delete]").on({click : kimchi.vmdelete});
         guestActions.find("[name=vm-clone]").click(function(){
diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
index d2ebef0..57563c1 100644
--- a/ui/pages/guest.html.tmpl
+++ b/ui/pages/guest.html.tmpl
@@ -53,9 +53,8 @@
                     <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>
-
+		    <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-resume" 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">
@@ -68,6 +67,8 @@
                             <button class="button-big shutoff-hidden" name="vm-shutdown"><span class="text">$_("Shut Down")</span></button>
                             <button class="button-big running-hidden" name="vm-start"><span class="text">$_("Start")</span></button>
                             <button class="button-big shutoff-hidden" name="vm-poweroff"><span class="text">$_("Power Off")</span></button>
+			    <button class="button-big pause-hidden" name="vm-pause"><span class="text">$_("Pause")</span></button>
+			    <button class="button-big resume-hidden" name="vm-resume"><span class="text">$_("Resume")</span></button>
                             <button class="button-big red non-persistent-disabled" name="vm-delete">$_("Delete")</button>
                         </div>
                     </div>
-- 
1.9.1

    