[Kimchi-devel] [PATCH v4] UI: Software Update Support

Aline Manera alinefm at linux.vnet.ibm.com
Fri Feb 28 14:41:02 UTC 2014


On 02/28/2014 07:20 AM, Hongliang Wang wrote:
> On 02/28/2014 05:02 PM, Royce Lv wrote:
>> Just some humble suggestion cause I'm not a UI expert.
>>
>> 1. The selection effect on grid confused me, whether we can update a 
>> single software.
> ACK. It's a good point! I'll disable the single selection in grid 
> widget. Single selection is designed for cases when there is action 
> for single record like: update a single package.
>>
>> 2. Is that possible to select multiple software and update it? 
>> Because on our system, especially when our server is a virtualization 
>> server, we only focus on virtualization related software and don't 
>> want to update others. But of course, for a period of time we need a 
>> full upgrade. I mean partial update may be more convinient.
> Yes, it's better to allow user select whichever he/she wants to update.
> @Adam and @Aline , seems the back-end API only supports update all 
> action. I think we can add this feature in the next release.

Yeap! We can add to backlog and talk about when planning the next release

>>
>> On 2014年02月28日 11:33, 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.
>>>
>>> V3 -> V4:
>>>    4a) Added the last update output
>>>        (Thanks to Aline's comment)
>>>    4b) Disabled horizontal resize function of output textarea
>>>        (Thanks to Aline's comment)
>>>    4c) Added "Update Progress" label to the output textarea
>>>        (Thanks to Aline's comment)
>>>    4d) Added refreshing the software grid after updating is finished
>>>        (Thanks to Aline's comment)
>>>    4e) Added software updates grid cleanup when host tab is unloaded
>>>
>>> V2 -> V3:
>>>    3a) Fixed "Update All" Button always being disabled issue
>>>        (Thanks to Paulo and Aline's comment)
>>>    3b) Updated REST API calling 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 | 29 ++++++++++++++
>>>   ui/js/src/kimchi.api.js       | 53 ++++++++++++++++++++++++++
>>>   ui/js/src/kimchi.host.js      | 88 
>>> +++++++++++++++++++++++++++++++++++++++++++
>>>   ui/pages/i18n.html.tmpl       | 10 +++++
>>>   ui/pages/tabs/host.html.tmpl  | 17 +++++++++
>>>   5 files changed, 197 insertions(+)
>>>
>>> diff --git a/ui/css/theme-default/host.css 
>>> b/ui/css/theme-default/host.css
>>> index 470ed1b..0f8b941 100644
>>> --- a/ui/css/theme-default/host.css
>>> +++ b/ui/css/theme-default/host.css
>>> @@ -224,3 +224,32 @@
>>>       width: 300px;
>>>   }
>>>   /* End of Debug Report */
>>> +
>>> +/* Software Updates */
>>> +.host-panel #software-updates-grid {
>>> +    border-color: #ddd;
>>> +    height: 300px;
>>> +    width: 850px;
>>> +}
>>> +
>>> +.software-update-id {
>>> +    width: 30px;
>>> +}
>>> +
>>> +.software-update-name,
>>> +.software-update-repos {
>>> +    width: 220px;
>>> +}
>>> +
>>> +.software-update-version,
>>> +.software-update-arch {
>>> +    width: 190px;
>>> +}
>>> +
>>> +.host-panel #software-updates-progress-textarea {
>>> +    border: 1px solid #ddd;
>>> +    height: 100px;
>>> +    resize: vertical;
>>> +    width: 846px;
>>> +}
>>> +/* End of Software Updates */
>>> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
>>> index fdd9cfc..beaf314 100644
>>> --- a/ui/js/src/kimchi.api.js
>>> +++ b/ui/js/src/kimchi.api.js
>>> @@ -727,5 +727,58 @@ var kimchi = {
>>>               success : suc,
>>>               error : err
>>>           });
>>> +    },
>>> +
>>> +    listSoftwareUpdates : function(suc, err) {
>>> +        kimchi.requestJSON({
>>> +            url : kimchi.url + 'host/packagesupdate',
>>> +            type : 'GET',
>>> +            contentType : 'application/json',
>>> +            dataType : 'json',
>>> +            resend: true,
>>> +            success : suc,
>>> +            error : err
>>> +        });
>>> +    },
>>> +
>>> +    updateSoftwares : function(suc, err, progress) {
>>> +        var taskID = -1;
>>> +        var onResponse = function(data) {
>>> +            taskID = data['id'];
>>> +            trackTask();
>>> +        };
>>> +
>>> +        var trackTask = function() {
>>> +            kimchi.getTask(taskID, onTaskResponse, err);
>>> +        };
>>> +
>>> +        var onTaskResponse = function(result) {
>>> +            var taskStatus = result['status'];
>>> +            switch(taskStatus) {
>>> +            case 'running':
>>> +                progress && progress(result);
>>> +                setTimeout(function() {
>>> +                    trackTask();
>>> +                }, 200);
>>> +                break;
>>> +            case 'finished':
>>> +                suc(result);
>>> +                break;
>>> +            case 'failed':
>>> +                err(result);
>>> +                break;
>>> +            default:
>>> +                break;
>>> +            }
>>> +        };
>>> +
>>> +        kimchi.requestJSON({
>>> +            url : kimchi.url + 'host/swupdate',
>>> +            type : "POST",
>>> +            contentType : "application/json",
>>> +            dataType : "json",
>>> +            success : onResponse,
>>> +            error : err
>>> +        });
>>>       }
>>>   };
>>> diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js
>>> index 6e7f333..df27313 100644
>>> --- a/ui/js/src/kimchi.host.js
>>> +++ b/ui/js/src/kimchi.host.js
>>> @@ -128,6 +128,87 @@ kimchi.host_main = function() {
>>>           });
>>>       };
>>>
>>> +    var softwareUpdatesGridID = 'software-updates-grid';
>>> +    var softwareUpdatesGrid = null;
>>> +    var progressAreaID = 'software-updates-progress-textarea';
>>> +    var reloadProgressArea = function(result) {
>>> +        var progressArea = $('#' + progressAreaID)[0];
>>> +        $(progressArea).text(result['message']);
>>> +        var scrollTop = $(progressArea).prop('scrollHeight');
>>> +        $(progressArea).prop('scrollTop', scrollTop);
>>> +    };
>>> +
>>> +    var initSoftwareUpdatesGrid = function(softwareUpdates) {
>>> +        softwareUpdatesGrid = new kimchi.widget.Grid({
>>> +            container: 'software-updates-grid-container',
>>> +            id: softwareUpdatesGridID,
>>> +            title: i18n['KCHUPD6001M'],
>>> +            toolbarButtons: [{
>>> +                id: softwareUpdatesGridID + '-update-button',
>>> +                label: i18n['KCHUPD6006M'],
>>> +                disabled: true,
>>> +                onClick: function(event) {
>>> +                    var updateButton = $(this);
>>> +                    var progressArea = $('#' + progressAreaID)[0];
>>> + $('#software-updates-progress-container').removeClass('hidden');
>>> +                    $(progressArea).text('');
>>> +                    !kimchi.isElementInViewport(progressArea) &&
>>> +                        progressArea.scrollIntoView();
>>> + $(updateButton).text(i18n['KCHUPD6007M']).prop('disabled', true);
>>> +
>>> +                    kimchi.updateSoftwares(function(result) {
>>> +                        reloadProgressArea(result);
>>> + $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false);
>>> + kimchi.topic('kimchi/softwareUpdated').publish({
>>> +                            result: result
>>> +                        });
>>> +                    }, function() {}, reloadProgressArea);
>>> +                }
>>> +            }],
>>> +            frozenFields: [{
>>> +                name: 'id',
>>> +                label: ' ',
>>> +                'class': 'software-update-id'
>>> +            }],
>>> +            fields: [{
>>> +                name: 'package_name',
>>> +                label: i18n['KCHUPD6002M'],
>>> +                'class': 'software-update-name'
>>> +            }, {
>>> +                name: 'version',
>>> +                label: i18n['KCHUPD6003M'],
>>> +                'class': 'software-update-version'
>>> +            }, {
>>> +                name: 'arch',
>>> +                label: i18n['KCHUPD6004M'],
>>> +                'class': 'software-update-arch'
>>> +            }, {
>>> +                name: 'repository',
>>> +                label: i18n['KCHUPD6005M'],
>>> +                'class': 'software-update-repos'
>>> +            }],
>>> +            data: softwareUpdates
>>> +        });
>>> +    };
>>> +
>>> +    var listSoftwareUpdates = function() {
>>> +        kimchi.listSoftwareUpdates(function(softwareUpdates) {
>>> +            $.each(softwareUpdates, function(i, item) {
>>> +                softwareUpdates[i]['id'] = i + 1;
>>> +            });
>>> +
>>> +            if(softwareUpdatesGrid) {
>>> +                softwareUpdatesGrid.setData(softwareUpdates);
>>> +            }
>>> +            else {
>>> +                initSoftwareUpdatesGrid(softwareUpdates);
>>> +            }
>>> +
>>> +            var updateButton = $('#' + softwareUpdatesGridID + 
>>> '-update-button');
>>> +            $(updateButton).prop('disabled', softwareUpdates.length 
>>> === 0);
>>> +        });
>>> +    };
>>> +
>>>       var shutdownButtonID = '#host-button-shutdown';
>>>       var restartButtonID = '#host-button-restart';
>>>       var shutdownHost = function(params) {
>>> @@ -186,6 +267,8 @@ kimchi.host_main = function() {
>>>               kimchi.keepMonitoringHost = this['checked'];
>>>           });
>>>
>>> +        listSoftwareUpdates();
>>> +
>>>           kimchi.getCapabilities(function(capabilities) {
>>>               if(!capabilities['system_report_tool']) {
>>>                   return;
>>> @@ -199,6 +282,10 @@ kimchi.host_main = function() {
>>>           listDebugReports();
>>>       });
>>>
>>> + kimchi.topic('kimchi/softwareUpdated').subscribe(function() {
>>> +        listSoftwareUpdates();
>>> +    });
>>> +
>>>       kimchi.getHost(function(data) {
>>>           var htmlTmpl = $('#host-tmpl').html();
>>>           data['logo'] = data['logo'] || '';
>>> @@ -464,5 +551,6 @@ kimchi.host_main = function() {
>>>               delete kimchi.hostTimer;
>>>           }
>>>           reportGrid && reportGrid.destroy();
>>> +        softwareUpdatesGrid && softwareUpdatesGrid.destroy();
>>>       });
>>>   };
>>> diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
>>> index db6166e..4223403 100644
>>> --- a/ui/pages/i18n.html.tmpl
>>> +++ b/ui/pages/i18n.html.tmpl
>>> @@ -89,6 +89,16 @@ var i18n = {
>>>       'KCHDR6010M': "$_("Download")",
>>>       'KCHDR6011M': "$_("Report name should contain only letters, 
>>> digits and/or hyphen ('-').")",
>>>
>>> +
>>> +    'KCHUPD6001M': "$_("Software Updates")",
>>> +    'KCHUPD6002M': "$_("Package Name")",
>>> +    'KCHUPD6003M': "$_("Version")",
>>> +    'KCHUPD6004M': "$_("Architecture")",
>>> +    'KCHUPD6005M': "$_("Repository")",
>>> +    'KCHUPD6006M': "$_("Update All")",
>>> +    'KCHUPD6007M': "$_("Updating...")",
>>> +
>>> +
>>>       'KCHVM6001M': "$_("This will delete the virtual machine and 
>>> its virtual disks. This operation cannot be undone. Would you like 
>>> to continue?")",
>>>       'KCHVM6002M': "$_("Delete Confirmation")",
>>>
>>> diff --git a/ui/pages/tabs/host.html.tmpl 
>>> b/ui/pages/tabs/host.html.tmpl
>>> index 23b9853..f6ecd47 100644
>>> --- a/ui/pages/tabs/host.html.tmpl
>>> +++ b/ui/pages/tabs/host.html.tmpl
>>> @@ -120,6 +120,23 @@
>>>                       </div>
>>>                   </div>
>>>               </div>
>>> +            <div id="software-update-section" class="host-section">
>>> +                <h3 class="section-header"
>>> + aria-controls="content-software-update">
>>> +                    $_("Software Updates")
>>> +                </h3>
>>> +                <div id="content-software-update" 
>>> class="section-content">
>>> +                    <div class="section-row">
>>> +                        <div class="section-value">
>>> +                            <div 
>>> id="software-updates-grid-container"></div>
>>> +                            <div 
>>> id="software-updates-progress-container" class="hidden">
>>> +                                <label 
>>> for="software-updates-progress-textarea">$_("Update Progress")</label>
>>> +                                <textarea 
>>> id="software-updates-progress-textarea" readonly></textarea>
>>> +                            </div>
>>> +                        </div>
>>> +                    </div>
>>> +                </div>
>>> +            </div>
>>>               <div id="debug-report-section" class="host-section 
>>> hidden">
>>>                   <h3 class="section-header"
>>>                       aria-controls="content-sys-reports">
>>
>
> _______________________________________________
> 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