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

Aline Manera alinefm at linux.vnet.ibm.com
Wed Feb 19 19:21:31 UTC 2014


The "Update All" link is still disabled even when there are packages to 
be updated.

Also I'd suggest to remove the horizontal scroll bar as it is not needed.

More comments below

On 02/18/2014 12:06 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.
>
> 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 | 22 +++++++++++++++
>   ui/js/src/kimchi.api.js       | 52 ++++++++++++++++++++++++++++++++++
>   ui/js/src/kimchi.host.js      | 65 +++++++++++++++++++++++++++++++++++++++++++
>   ui/pages/i18n.html.tmpl       |  9 ++++++
>   ui/pages/tabs/host.html.tmpl  | 13 +++++++++
>   5 files changed, 161 insertions(+)
>
> diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css
> index 67daeaf..1342ade 100644
> --- a/ui/css/theme-default/host.css
> +++ b/ui/css/theme-default/host.css
> @@ -227,3 +227,25 @@
>       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;
> +}
> +/* End of Software Updates */
> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
> index 6433fe0..c3a9516 100644
> --- a/ui/js/src/kimchi.api.js
> +++ b/ui/js/src/kimchi.api.js
> @@ -731,5 +731,57 @@ 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) {
> +        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':
> +                setTimeout(function() {
> +                    trackTask();
> +                }, 200);
> +                break;
> +            case 'finished':
> +                suc(result);
> +                break;
> +            case 'failed':
> +                err(result);
> +                break;
> +            default:
> +                break;
> +            }
> +        };

In the 'message' parameter from task, there will be the update output 
process.
I think would be good to show it to user - but I don't know where in the 
window

example:

Add a tab to the update grid with "Update output" where we can show the 
user the update progress

> +
> +        kimchi.requestJSON({
> +            url : kimchi.url + 'host/packagesupdate/update',

Need to adjust it according to the latest patches

/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 a5c341b..b6a5878 100644
> --- a/ui/js/src/kimchi.host.js
> +++ b/ui/js/src/kimchi.host.js
> @@ -131,6 +131,69 @@ kimchi.host_main = function() {
>           });
>       };
>
> +    var softwareUpdatesGridID = 'software-updates-grid';
> +    var softwareUpdatesGrid = null;
> +    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);
> +                    $(updateButton).text(i18n['KCHUPD6007M']).prop('disabled', true);
> +                    kimchi.updateSoftwares(function(result) {
> +                        $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false);
> +                    });
> +                }
> +            }],
> +            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);
> +            }
> +
> +            $(softwareUpdatesGridID + '-update-button')
> +                .prop('disabled', softwareUpdates.length === 0);
> +        });
> +    };
> +
>       var shutdownButtonID = '#host-button-shutdown';
>       var restartButtonID = '#host-button-restart';
>       var shutdownHost = function(params) {
> @@ -189,6 +252,8 @@ kimchi.host_main = function() {
>               kimchi.keepMonitoringHost = this['checked'];
>           });
>
> +        listSoftwareUpdates();
> +
>           kimchi.getCapabilities(function(capabilities) {
>               if(!capabilities['system_report_tool']) {
>                   return;
> diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
> index 098a0a9..a9d86b3 100644
> --- a/ui/pages/i18n.html.tmpl
> +++ b/ui/pages/i18n.html.tmpl
> @@ -94,6 +94,15 @@ var i18n = {
>       'KCHDR6010M': "$_("Download")",
>
>
> +    '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?")",
>
>       'KCHNET6001E': "$_("The VLAN id must be between 1 and 4094.")",
> diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl
> index d32773a..1de4fcd 100644
> --- a/ui/pages/tabs/host.html.tmpl
> +++ b/ui/pages/tabs/host.html.tmpl
> @@ -123,6 +123,19 @@
>                       </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>
> +                    </div>
> +                </div>
> +            </div>
>               <div id="debug-report-section" class="host-section hidden">
>                   <h3 class="section-header"
>                       aria-controls="content-sys-reports">




More information about the Kimchi-devel mailing list