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

Aline Manera alinefm at linux.vnet.ibm.com
Tue Jun 2 18:22:26 UTC 2015


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 at us.ibm.com>
>>>>
>>>> Adding UI support for pause/resume VM
>>>>
>>>> Signed-off-by: Socorro Stoppler <socorrob at us.ibm.com>
>>>> ---
>>>>   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 at 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 at _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 at O(>SE3PK#KozA#S`-LU7gZ6cs;KfBkmKouAhfs{H^7E#!j at 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 at tA0Klky%
>>>> zS!JL at 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 at 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 at 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 at 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 at AgUu?sylUrsSi4bUlxpeCF-_aZPc)@rz)Bzwqs$H?Lnl-1+nE
>>>> zZNlC5ogI&|9~C0kBj>)K9Pawz at 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 at 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}- at RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
>>>> zNuokUZcbjYRfVk**jy_h8zii+qySb at 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+ at 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 at w+Ji3KJEOo1RKJm~{D at XV8%2h1@=z^w7aYe at nF17ohIi(^Q|tu52`dL3~PIG%1+
>>>> z{qdYj)BS{nN)a4Uzgfz at U5|{==-~Rr(X?J+hS&Y0>>I9~a|+n7!)e0 at 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 at z_u<1l?(CE;R_hhlnjVf9c&{M6XkYI=
>>>> z$N!Fd8jm^dX^2q>UEnA^L2H7Q^pY(86$;1V><mnqe;9lYxu>o-;m`U at 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 at 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}- at RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
>>>> zNuokUZcbjYRfVk**jy_h8zii+qySb at 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+ at 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 at _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 at ovirt.org
>>> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>>>
>>
>> _______________________________________________
>> Kimchi-devel mailing list
>> Kimchi-devel at ovirt.org
>> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>>
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>




More information about the Kimchi-devel mailing list