[Kimchi-devel] [PATCH v2] Issue#349: Software Update Grid Keeps Loading when Error Returns

[Aline Manera]

Reviewed-by: Aline Manera <alinefm at linux.vnet.ibm.com>

On 03/24/2014 07:28 AM, Hongliang Wang wrote:
> Software update grid keeps loading on UI when server returns 500 error.
> Instead, we shall remove the loading UI and add a message UI to let the
> user know something is wrong, as well as add a button to allow the user
> retry.
>
> v1 -> v2:
>    2a) Made message more user-friendly and informative
>        (Aline's comment)
>
> Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/grid.css | 20 +++++++++++++
>   ui/js/src/kimchi.api.js       |  4 +--
>   ui/js/src/kimchi.grid.js      | 66 +++++++++++++++++++++++++++++++++----------
>   ui/js/src/kimchi.host.js      | 11 +++++++-
>   ui/pages/i18n.html.tmpl       |  5 ++++
>   5 files changed, 87 insertions(+), 19 deletions(-)
>
> diff --git a/ui/css/theme-default/grid.css b/ui/css/theme-default/grid.css
> index 44ae614..684dd7b 100644
> --- a/ui/css/theme-default/grid.css
> +++ b/ui/css/theme-default/grid.css
> @@ -239,3 +239,23 @@
>       height: 48px;
>       width: 49px;
>   }
> +
> +.grid-message {
> +    background: white;
> +    box-sizing: border-box;
> +    bottom: 0;
> +    left: 0;
> +    overflow: auto;
> +    padding: .2em .5em;
> +    position: absolute;
> +    right: 0;
> +    z-index: 5;
> +}
> +
> +.grid-message-text {
> +    line-height: 25px;
> +}
> +
> +.retry-button {
> +    margin: 0 1em;
> +}
> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
> index 4310435..11f83df 100644
> --- a/ui/js/src/kimchi.api.js
> +++ b/ui/js/src/kimchi.api.js
> @@ -838,10 +838,8 @@ var kimchi = {
>                   }, 200);
>                   break;
>               case 'finished':
> -                suc(result);
> -                break;
>               case 'failed':
> -                err(result);
> +                suc(result);
>                   break;
>               default:
>                   break;
> diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js
> index 540f1ba..f35228d 100644
> --- a/ui/js/src/kimchi.grid.js
> +++ b/ui/js/src/kimchi.grid.js
> @@ -62,6 +62,18 @@ kimchi.widget.Grid = function(params) {
>                   '</div>',
>               '</div>',
>           '</div>',
> +        '<div class="grid-message hidden">',
> +          '<div class="grid-message-text">',
> +            i18n['KCHGRD6002M'],
> +            '<button class="retry-button btn-small">',
> +              i18n['KCHGRD6003M'],
> +            '</button>',
> +          '</div>',
> +          '<div class="detailed-title">',
> +            i18n['KCHGRD6004M'],
> +          '</div>',
> +          '<div class="detailed-text"></div>',
> +        '</div>',
>         '</div>'
>       ];
>
> @@ -161,6 +173,9 @@ kimchi.widget.Grid = function(params) {
>       var maskNode = $('.grid-mask', gridNode);
>       maskNode.css('top', captionHeight + 'px');
>
> +    var messageNode = $('.grid-message', gridNode);
> +    messageNode.css('top', captionHeight + 'px');
> +
>       var fillBody = function(container, fields, data) {
>           var tbody = ($('tbody', container).length && $('tbody', container))
>               || $('<tbody></tbody>').appendTo(container);
> @@ -384,28 +399,49 @@ kimchi.widget.Grid = function(params) {
>       $('body').on('mousemove', positionResizer);
>       $('body').on('mouseup', endResizing);
>
> +    this.showMessage = function(msg) {
> +        $('.detailed-text', messageNode).text(msg);
> +        $(messageNode).removeClass('hidden');
> +    };
> +
> +    this.hideMessage = function() {
> +        $(messageNode).addClass('hidden');
> +    };
> +
>       this.destroy = function() {
>           $('body').off('mousemove', positionResizer);
>           $('body').off('mouseup', endResizing);
>       };
>
>       var data = params['data'];
> -    if(!data) {
> -        return;
> -    }
> +    var self = this;
> +    var reload = function() {
> +        if(!data) {
> +            return;
> +        }
>
> -    if($.isArray(data)) {
> -        this.setData(data);
> -        return;
> -    }
> +        $(messageNode).addClass('hidden');
>
> -    if($.isFunction(data)) {
> -        var self = this;
> -        var loadData = data;
> -        maskNode.removeClass('hidden');
> -        loadData(function(data) {
> +        if($.isArray(data)) {
>               self.setData(data);
> -            maskNode.addClass('hidden');
> -        });
> -    }
> +            return;
> +        }
> +
> +        if($.isFunction(data)) {
> +            var loadData = data;
> +            maskNode.removeClass('hidden');
> +            loadData(function(data) {
> +                self.setData(data);
> +                maskNode.addClass('hidden');
> +            });
> +        }
> +    };
> +
> +    var reloadButton = $('.retry-button', gridNode);
> +    $(reloadButton).on('click', function(event) {
> +        reload();
> +    });
> +
> +    this.reload = reload;
> +    reload();
>   };
> diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js
> index ae2ee7d..53a4541 100644
> --- a/ui/js/src/kimchi.host.js
> +++ b/ui/js/src/kimchi.host.js
> @@ -57,7 +57,9 @@ kimchi.host_main = function() {
>                           kimchi.topic('kimchi/softwareUpdated').publish({
>                               result: result
>                           });
> -                    }, function(result) {
> +                    }, function(error) {
> +                        var message = error && error['responseJSON'] && error['responseJSON']['reason'];
> +                        kimchi.message.error(message || i18n['KCHUPD6009M']);
>                           $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false);
>                       }, reloadProgressArea);
>                   }
> @@ -100,6 +102,13 @@ kimchi.host_main = function() {
>
>               var updateButton = $('#' + softwareUpdatesGridID + '-update-button');
>               $(updateButton).prop('disabled', softwareUpdates.length === 0);
> +        }, function(error) {
> +            var message = error && error['responseJSON'] && error['responseJSON']['reason'];
> +            if($.isFunction(gridCallback)) {
> +                gridCallback([]);
> +            }
> +            softwareUpdatesGrid &&
> +                softwareUpdatesGrid.showMessage(message || i18n['KCHUPD6008M']);
>           });
>       };
>
> diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
> index 2f47e50..9f7537f 100644
> --- a/ui/pages/i18n.html.tmpl
> +++ b/ui/pages/i18n.html.tmpl
> @@ -60,6 +60,9 @@ var i18n = {
>       'KCHAPI6006M': "$_("Warning")",
>
>       'KCHGRD6001M': "$_("Loading...")",
> +    'KCHGRD6002M': "$_("An error occurs while checking for packages update.")",
> +    'KCHGRD6003M': "$_("Retry")",
> +    'KCHGRD6004M': "$_("Detailed message:")",
>
>       'KCHTMPL6001W': "$_("No iso found")",
>
> @@ -87,6 +90,8 @@ var i18n = {
>       'KCHUPD6005M': "$_("Repository")",
>       'KCHUPD6006M': "$_("Update All")",
>       'KCHUPD6007M': "$_("Updating...")",
> +    'KCHUPD6008M': "$_("Failed to retrieve updates.")",
> +    'KCHUPD6009M': "$_("Failed to update package(s).")",
>
>
>       'KCHDR6001M': "$_("Debug report will be removed permanently and can't be recovered. Do you want to continue?")",