[Kimchi-devel] [PATCH v3] UI: Host Software Update Support

[Aline Manera]

On 02/28/2014 12:05 AM, Hongliang Wang wrote:
> On 02/21/2014 11:57 PM, Aline Manera wrote:
>> On 02/21/2014 03:13 AM, Hongliang Wang wrote:
>>> Added UI support for software updating. The Host Tab will initially
>>> list available updates to user if there are any; or we will disable
>>> "Update All" Button if no updates available.
>>>
>>> V2 -> V3:
>>>    3a) Fixed "Update All" Button always being disabled issue
>>>        (Thanks to Paulo and Aline's comment)
>>>    3b) Update REST API for update action according to back-end change
>>>    3c) Added in-progress message when system is being updated
>>>        (Thanks to Aline's comment)
>>>
>>> V1 -> V2:
>>>    2a) Fixed "Update All" Button always being disabled issue
>>>        (Thanks to Paulo Ricardo Paz Vital's comment)
>>>
>>> Signed-off-by: Hongliang Wang<hlwang at linux.vnet.ibm.com>
>>> ---
>>>   ui/css/theme-default/host.css |  6 ++++++
>>>   ui/js/src/kimchi.api.js       |  5 +++--
>>>   ui/js/src/kimchi.host.js      | 12 ++++++++++--
>>>   ui/pages/tabs/host.html.tmpl  |  1 +
>>>   4 files changed, 20 insertions(+), 4 deletions(-)
>>>
>>> diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css
>>> index 1342ade..884a614 100644
>>> --- a/ui/css/theme-default/host.css
>>> +++ b/ui/css/theme-default/host.css
>>> @@ -248,4 +248,10 @@
>>>   .software-update-arch {
>>>       width: 190px;
>>>   }
>>> +
>>> +.host-panel #software-updates-progress-textarea {
>>> +    border: 1px solid #ddd;
>>> +    height: 100px;
>>> +    width: 846px;
>>> +}
>>>   /* End of Software Updates */
>>> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
>>> index c3a9516..abbf00e 100644
>>> --- a/ui/js/src/kimchi.api.js
>>> +++ b/ui/js/src/kimchi.api.js
>>> @@ -745,7 +745,7 @@ var kimchi = {
>>>           });
>>>       },
>>>
>>> -    updateSoftwares : function(suc, err) {
>>> +    updateSoftwares : function(suc, err, progress) {
>>>           var taskID = -1;
>>>           var onResponse = function(data) {
>>>               taskID = data['id'];
>>> @@ -760,6 +760,7 @@ var kimchi = {
>>>               var taskStatus = result['status'];
>>>               switch(taskStatus) {
>>
>>>               case 'running':
>>> +                progress && progress(result);
>>>                   setTimeout(function() {
>>>                       trackTask();
>>>                   }, 200);
>>
>> When the task finished you also need to update the messages to the user.
>> Otherwise it will miss the last update output
> ACK
>>
>>> @@ -776,7 +777,7 @@ var kimchi = {
>>>           };
>>>
>>>           kimchi.requestJSON({
>>> -            url : kimchi.url + 'host/packagesupdate/update',
>>> +            url : kimchi.url + 'host/swupdate',
>>>               type : "POST",
>>>               contentType : "application/json",
>>>               dataType : "json",
>>> diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js
>>> index b6a5878..d4016b5 100644
>>> --- a/ui/js/src/kimchi.host.js
>>> +++ b/ui/js/src/kimchi.host.js
>>> @@ -144,9 +144,17 @@ kimchi.host_main = function() {
>>>                   disabled: true,
>>>                   onClick: function(event) {
>>>                       var updateButton = $(this);
>>> +                    var progressArea = $('#software-updates-progress-textarea')[0];
>>> +                    $(progressArea).removeClass('hidden').text('');
>>> +                    !kimchi.isElementInViewport(progressArea) &&
>>> +                        progressArea.scrollIntoView();
>>>                       $(updateButton).text(i18n['KCHUPD6007M']).prop('disabled', true);
>>>                       kimchi.updateSoftwares(function(result) {
>>>                           $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false);
>>> +                    }, function() {}, function(result) {
>>> +                        $(progressArea).text(result['message']);
>>> +                        var scrollTop = $(progressArea).prop('scrollHeight');
>>> +                        $(progressArea).prop('scrollTop', scrollTop);
>>>                       });
>>>                   }
>>>               }],
>>> @@ -189,8 +197,8 @@ kimchi.host_main = function() {
>>>                   initSoftwareUpdatesGrid(softwareUpdates);
>>>               }
>>>
>>> -            $(softwareUpdatesGridID + '-update-button')
>>> -                .prop('disabled', softwareUpdates.length === 0);
>>> +            var updateButton = $('#' + softwareUpdatesGridID + '-update-button');
>>> +            $(updateButton).prop('disabled', softwareUpdates.length === 0);
>>>           });
>>>       };
>>>
>>> diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl
>>> index 1de4fcd..71f72c7 100644
>>> --- a/ui/pages/tabs/host.html.tmpl
>>> +++ b/ui/pages/tabs/host.html.tmpl
>>> @@ -132,6 +132,7 @@
>>>                       <div class="section-row">
>>>                           <div class="section-value">
>>>                               <div id="software-updates-grid-container"></div>
>>> +                            <textarea id="software-updates-progress-textarea" class="hidden" readonly></textarea>
>>>                           </div>
>>
>>
>>
>>
>> The user can increase/decrease the size of the output panel.
>> We need to make it fixed in width and height
> It's a improved feature of Chrome/Safari browser and I think it's 
> user-friendly. Think about it: if there are hundreds of lines to read, 
> or user wants more height (because his screen is big enough), I think 
> there is no need to force the height in a relatively small value. 
> Though, the width will break our layout.
>
>     I think we can allow re-size height and disable re-sizing width, 
> right?

Yeap. Agree!

>>
>> Also I'd suggest to have the panel silver - like a disabled input 
>> box. That way user is sure it is just output.
> It's read-only now. User will know it's output.
>> And add a label to it
>> *
>> **Update progress*
>> <messages>
>>
> ACK.
>>>                       </div>
>>>                   </div>
>>
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140228/ac73ebde/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 54737 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140228/ac73ebde/attachment.jpe>