From: Socorro Stoppler <socorrob(a)us.ibm.com&gt; Adding UI support for pause/resume VM Signed-off-by: Socorro Stoppler <socorrob(a)us.ibm.com&gt; --- ui/css/theme-default/button.css | 20 +++++ ui/css/theme-default/list.css | 24 +++++- 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 | 22 ++++++ ui/js/src/kimchi.guest_main.js | 109 +++++++++++++++++++++++---- ui/pages/guest.html.tmpl | 4 + 9 files changed, 161 insertions(+), 18 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 0df53a6..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; } @@ -226,6 +236,16 @@ center no-repeat; } +.icon.pause { + background: url(../images/theme-default/ac22_pause.png) center + center no-repeat; +} + +.icon.resume { + background: url(../images/theme-default/ac24_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..9b4f88f 100644 --- a/ui/css/theme-default/list.css +++ b/ui/css/theme-default/list.css @@ -101,6 +101,16 @@ position: relative; } +.list-vm .tile.paused .imgactive { + max-height: 110px; + max-width: 170px; + height: auto; + width: auto; + display:inline; + border: none; + position: relative; +} + .list-vm .tile.running .imgactive{ max-height: 110px; max-width: 170px; @@ -226,6 +236,7 @@ .guest-actions .top { padding: 7px 10px; + width: 200px; } .guest-actions .top button { @@ -253,12 +264,10 @@ margin: 10px; } - -.list-vm .tile:not(.shutoff) img { +.list-vm .tile:not(.shutoff) && .tile:not(.paused) img { box-shadow: -1px -1px 2px rgb(0, 0, 0, .25), 3px 3px 3px #fff; } - .list-vm .shutoff { position: relative; box-shadow: none !important; @@ -268,6 +277,15 @@ opacity: 0.4; } +.list-vm .paused { + position: relative; + box-shadow: none !important; +} + +.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 9207d7e..a7c3b2d 100644 --- a/ui/js/src/kimchi.api.js +++ b/ui/js/src/kimchi.api.js @@ -296,6 +296,28 @@ 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 260e907..57150e7 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": "", @@ -43,7 +44,6 @@ kimchi.sampleGuestObject = { "access": "full" }; - kimchi.vmstart = function(event) { var button=$(this); if (!button.hasClass('loading')) { @@ -65,6 +65,48 @@ kimchi.vmstart = function(event) { } }; +kimchi.vmsuspend = function(event) { + var button=$(this); + if (!button.hasClass('pause-gray')) { + button.addClass('pause-gray'); + var vm=$(this).closest('li[name=guest]'); + var vm_id=vm.attr("id"); + 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(); + return; + } +}; + +kimchi.vmresume = function(event) { + var button=$(this); + if (!button.hasClass('resume-gray')) { + button.addClass('resume-gray'); + var vm=$(this).closest('li[name=guest]'); + var vm_id=vm.attr("id"); + 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(); + return; + } +}; + kimchi.vmpoweroff = function(event) { var button=$(this); if (!button.hasClass('loading')) { @@ -265,9 +307,11 @@ kimchi.listVmsAuto = function() { kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { var result=kimchi.guestElem.clone(); - + //Setup the VM list entry var vmRunningBool=(vmObject.state=="running"); + var vmSuspendedBool = (vmObject.state=="paused"); + var vmPoweredOffBool = (vmObject.state=="shutoff"); var vmPersistent = (vmObject.persistent == true); result.attr('id',vmObject.name); result.data(vmObject); @@ -296,20 +340,29 @@ 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 + //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); - } - 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); } } - //Setup the gauges var stats=vmObject.stats; var gaugeValue=0; @@ -325,13 +378,29 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { 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); + 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) { + if (vmRunningBool) { //VM IS running + //Hide Start guestActions.find(".running-hidden").hide(); + //Hide Resume + guestActions.find(".resume-hidden").hide(); } - else { + + 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]"); @@ -348,12 +417,22 @@ 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}); - 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 8896ac5..57563c1 100644 --- a/ui/pages/guest.html.tmpl +++ b/ui/pages/guest.html.tmpl @@ -53,6 +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-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"> @@ -65,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>

On 02/06/2015 14:13, Aline Manera wrote: > > Hi Socorro, > > The UI looks good. > I only think we can make the resume icon darker when it is on > livetile but we can do it during code freeze phase. Also following the same idea of "Reset" button we could make the "Pause" button always visible and enable/disable it according to VM state. So we would have 3 persistent buttons | Reset | Power on/off | Pause | And the Action drop down width could be increase to fit the 3 buttons width | Reset | Power on/off | Pause | | Actions | Socorro, could you work on patches to do those changes? > > I will merge the patch as it is by now. > > Thanks, > Aline Manera > > > On 01/06/2015 16:19, Socorro Stoppler wrote: >> From: Socorro Stoppler <socorrob(a)us.ibm.com&gt; >> >> Adding UI support for pause/resume VM >> >> Signed-off-by: Socorro Stoppler <socorrob(a)us.ibm.com&gt; >> --- >> ui/css/theme-default/button.css | 20 +++++ >> ui/css/theme-default/list.css | 24 +++++- >> 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 | 22 ++++++ >> ui/js/src/kimchi.guest_main.js | 109 >> +++++++++++++++++++++++---- >> ui/pages/guest.html.tmpl | 4 + >> 9 files changed, 161 insertions(+), 18 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 0df53a6..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; >> } >> @@ -226,6 +236,16 @@ >> center no-repeat; >> } >> >> +.icon.pause { >> + background: url(../images/theme-default/ac22_pause.png) center >> + center no-repeat; >> +} >> + >> +.icon.resume { >> + background: url(../images/theme-default/ac24_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..9b4f88f 100644 >> --- a/ui/css/theme-default/list.css >> +++ b/ui/css/theme-default/list.css >> @@ -101,6 +101,16 @@ >> position: relative; >> } >> >> +.list-vm .tile.paused .imgactive { >> + max-height: 110px; >> + max-width: 170px; >> + height: auto; >> + width: auto; >> + display:inline; >> + border: none; >> + position: relative; >> +} >> + >> .list-vm .tile.running .imgactive{ >> max-height: 110px; >> max-width: 170px; >> @@ -226,6 +236,7 @@ >> >> .guest-actions .top { >> padding: 7px 10px; >> + width: 200px; >> } >> >> .guest-actions .top button { >> @@ -253,12 +264,10 @@ >> margin: 10px; >> } >> >> - >> -.list-vm .tile:not(.shutoff) img { >> +.list-vm .tile:not(.shutoff) && .tile:not(.paused) img { >> box-shadow: -1px -1px 2px rgb(0, 0, 0, .25), 3px 3px 3px #fff; >> } >> >> - >> .list-vm .shutoff { >> position: relative; >> box-shadow: none !important; >> @@ -268,6 +277,15 @@ >> opacity: 0.4; >> } >> >> +.list-vm .paused { >> + position: relative; >> + box-shadow: none !important; >> +} >> + >> +.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 9207d7e..a7c3b2d 100644 >> --- a/ui/js/src/kimchi.api.js >> +++ b/ui/js/src/kimchi.api.js >> @@ -296,6 +296,28 @@ 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 260e907..57150e7 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": "", >> @@ -43,7 +44,6 @@ kimchi.sampleGuestObject = { >> "access": "full" >> }; >> >> - >> kimchi.vmstart = function(event) { >> var button=$(this); >> if (!button.hasClass('loading')) { >> @@ -65,6 +65,48 @@ kimchi.vmstart = function(event) { >> } >> }; >> >> +kimchi.vmsuspend = function(event) { >> + var button=$(this); >> + if (!button.hasClass('pause-gray')) { >> + button.addClass('pause-gray'); >> + var vm=$(this).closest('li[name=guest]'); >> + var vm_id=vm.attr("id"); >> + 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(); >> + return; >> + } >> +}; >> + >> +kimchi.vmresume = function(event) { >> + var button=$(this); >> + if (!button.hasClass('resume-gray')) { >> + button.addClass('resume-gray'); >> + var vm=$(this).closest('li[name=guest]'); >> + var vm_id=vm.attr("id"); >> + 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(); >> + return; >> + } >> +}; >> + >> kimchi.vmpoweroff = function(event) { >> var button=$(this); >> if (!button.hasClass('loading')) { >> @@ -265,9 +307,11 @@ kimchi.listVmsAuto = function() { >> >> kimchi.createGuestLi = function(vmObject, prevScreenImage, >> openMenu) { >> var result=kimchi.guestElem.clone(); >> - >> + >> //Setup the VM list entry >> var vmRunningBool=(vmObject.state=="running"); >> + var vmSuspendedBool = (vmObject.state=="paused"); >> + var vmPoweredOffBool = (vmObject.state=="shutoff"); >> var vmPersistent = (vmObject.persistent == true); >> result.attr('id',vmObject.name); >> result.data(vmObject); >> @@ -296,20 +340,29 @@ 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 >> + //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); >> - } >> - 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); >> } >> } >> >> - >> //Setup the gauges >> var stats=vmObject.stats; >> var gaugeValue=0; >> @@ -325,13 +378,29 @@ kimchi.createGuestLi = function(vmObject, >> prevScreenImage, openMenu) { >> 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); >> + 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) { >> + if (vmRunningBool) { //VM IS running >> + //Hide Start >> guestActions.find(".running-hidden").hide(); >> + //Hide Resume >> + guestActions.find(".resume-hidden").hide(); >> } >> - else { >> + >> + 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]"); >> @@ -348,12 +417,22 @@ 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}); >> - 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 8896ac5..57563c1 100644 >> --- a/ui/pages/guest.html.tmpl >> +++ b/ui/pages/guest.html.tmpl >> @@ -53,6 +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-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"> >> @@ -65,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> > > _______________________________________________ > Kimchi-devel mailing list > Kimchi-devel(a)ovirt.org > http://lists.ovirt.org/mailman/listinfo/kimchi-devel > _______________________________________________ Kimchi-devel mailing list Kimchi-devel(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel

Cristian did a search about user experience and the results are described in https://github.com/kimchi-project/kimchi/issues/649#issuecomment-107569954 On 02/06/2015 15:12, Rodrigo Trujillo wrote: > Think on simplicity, I would remove those buttons when VM is stopped. > Less things in the screen and would be good to differentiate from > running VMs. > > Rodrigo > > On 06/02/2015 02:21 PM, Aline Manera wrote: >> >> >> On 02/06/2015 14:13, Aline Manera wrote: >>> >>> Hi Socorro, >>> >>> The UI looks good. >>> I only think we can make the resume icon darker when it is on >>> livetile but we can do it during code freeze phase. >> >> Also following the same idea of "Reset" button we could make the >> "Pause" button always visible and enable/disable it according to VM >> state. >> So we would have 3 persistent buttons >> >> | Reset | Power on/off | Pause | >> >> And the Action drop down width could be increase to fit the 3 >> buttons width >> >> | Reset | Power on/off | Pause | >> >> | Actions | >> >> Socorro, could you work on patches to do those changes? >> >>> >>> I will merge the patch as it is by now. >>> >>> Thanks, >>> Aline Manera >>> >>> >>> On 01/06/2015 16:19, Socorro Stoppler wrote: >>>> From: Socorro Stoppler <socorrob(a)us.ibm.com&gt; >>>> >>>> Adding UI support for pause/resume VM >>>> >>>> Signed-off-by: Socorro Stoppler <socorrob(a)us.ibm.com&gt; >>>> --- >>>> ui/css/theme-default/button.css | 20 +++++ >>>> ui/css/theme-default/list.css | 24 +++++- >>>> 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 | 22 ++++++ >>>> ui/js/src/kimchi.guest_main.js | 109 >>>> +++++++++++++++++++++++---- >>>> ui/pages/guest.html.tmpl | 4 + >>>> 9 files changed, 161 insertions(+), 18 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 0df53a6..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; >>>> } >>>> @@ -226,6 +236,16 @@ >>>> center no-repeat; >>>> } >>>> >>>> +.icon.pause { >>>> + background: url(../images/theme-default/ac22_pause.png) center >>>> + center no-repeat; >>>> +} >>>> + >>>> +.icon.resume { >>>> + background: url(../images/theme-default/ac24_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..9b4f88f 100644 >>>> --- a/ui/css/theme-default/list.css >>>> +++ b/ui/css/theme-default/list.css >>>> @@ -101,6 +101,16 @@ >>>> position: relative; >>>> } >>>> >>>> +.list-vm .tile.paused .imgactive { >>>> + max-height: 110px; >>>> + max-width: 170px; >>>> + height: auto; >>>> + width: auto; >>>> + display:inline; >>>> + border: none; >>>> + position: relative; >>>> +} >>>> + >>>> .list-vm .tile.running .imgactive{ >>>> max-height: 110px; >>>> max-width: 170px; >>>> @@ -226,6 +236,7 @@ >>>> >>>> .guest-actions .top { >>>> padding: 7px 10px; >>>> + width: 200px; >>>> } >>>> >>>> .guest-actions .top button { >>>> @@ -253,12 +264,10 @@ >>>> margin: 10px; >>>> } >>>> >>>> - >>>> -.list-vm .tile:not(.shutoff) img { >>>> +.list-vm .tile:not(.shutoff) && .tile:not(.paused) img { >>>> box-shadow: -1px -1px 2px rgb(0, 0, 0, .25), 3px 3px 3px #fff; >>>> } >>>> >>>> - >>>> .list-vm .shutoff { >>>> position: relative; >>>> box-shadow: none !important; >>>> @@ -268,6 +277,15 @@ >>>> opacity: 0.4; >>>> } >>>> >>>> +.list-vm .paused { >>>> + position: relative; >>>> + box-shadow: none !important; >>>> +} >>>> + >>>> +.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 9207d7e..a7c3b2d 100644 >>>> --- a/ui/js/src/kimchi.api.js >>>> +++ b/ui/js/src/kimchi.api.js >>>> @@ -296,6 +296,28 @@ 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 260e907..57150e7 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": "", >>>> @@ -43,7 +44,6 @@ kimchi.sampleGuestObject = { >>>> "access": "full" >>>> }; >>>> >>>> - >>>> kimchi.vmstart = function(event) { >>>> var button=$(this); >>>> if (!button.hasClass('loading')) { >>>> @@ -65,6 +65,48 @@ kimchi.vmstart = function(event) { >>>> } >>>> }; >>>> >>>> +kimchi.vmsuspend = function(event) { >>>> + var button=$(this); >>>> + if (!button.hasClass('pause-gray')) { >>>> + button.addClass('pause-gray'); >>>> + var vm=$(this).closest('li[name=guest]'); >>>> + var vm_id=vm.attr("id"); >>>> + 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(); >>>> + return; >>>> + } >>>> +}; >>>> + >>>> +kimchi.vmresume = function(event) { >>>> + var button=$(this); >>>> + if (!button.hasClass('resume-gray')) { >>>> + button.addClass('resume-gray'); >>>> + var vm=$(this).closest('li[name=guest]'); >>>> + var vm_id=vm.attr("id"); >>>> + 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(); >>>> + return; >>>> + } >>>> +}; >>>> + >>>> kimchi.vmpoweroff = function(event) { >>>> var button=$(this); >>>> if (!button.hasClass('loading')) { >>>> @@ -265,9 +307,11 @@ kimchi.listVmsAuto = function() { >>>> >>>> kimchi.createGuestLi = function(vmObject, prevScreenImage, >>>> openMenu) { >>>> var result=kimchi.guestElem.clone(); >>>> - >>>> + >>>> //Setup the VM list entry >>>> var vmRunningBool=(vmObject.state=="running"); >>>> + var vmSuspendedBool = (vmObject.state=="paused"); >>>> + var vmPoweredOffBool = (vmObject.state=="shutoff"); >>>> var vmPersistent = (vmObject.persistent == true); >>>> result.attr('id',vmObject.name); >>>> result.data(vmObject); >>>> @@ -296,20 +340,29 @@ 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 >>>> + //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); >>>> - } >>>> - 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); >>>> } >>>> } >>>> >>>> - >>>> //Setup the gauges >>>> var stats=vmObject.stats; >>>> var gaugeValue=0; >>>> @@ -325,13 +378,29 @@ kimchi.createGuestLi = function(vmObject, >>>> prevScreenImage, openMenu) { >>>> 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); >>>> + 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) { >>>> + if (vmRunningBool) { //VM IS running >>>> + //Hide Start >>>> guestActions.find(".running-hidden").hide(); >>>> + //Hide Resume >>>> + guestActions.find(".resume-hidden").hide(); >>>> } >>>> - else { >>>> + >>>> + 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]"); >>>> @@ -348,12 +417,22 @@ 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}); >>>> - 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 8896ac5..57563c1 100644 >>>> --- a/ui/pages/guest.html.tmpl >>>> +++ b/ui/pages/guest.html.tmpl >>>> @@ -53,6 +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-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"> >>>> @@ -65,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> >>> >>> _______________________________________________ >>> Kimchi-devel mailing list >>> Kimchi-devel(a)ovirt.org >>> http://lists.ovirt.org/mailman/listinfo/kimchi-devel >>> >> >> _______________________________________________ >> Kimchi-devel mailing list >> Kimchi-devel(a)ovirt.org >> http://lists.ovirt.org/mailman/listinfo/kimchi-devel >> > > _______________________________________________ > Kimchi-devel mailing list > Kimchi-devel(a)ovirt.org > http://lists.ovirt.org/mailman/listinfo/kimchi-devel > _______________________________________________ Kimchi-devel mailing list Kimchi-devel(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel