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

[Hongliang Wang]

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?
>
> 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/6965aae9/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/6965aae9/attachment.jpe>