Some comments: Which operation failed? I think we need to provide a detailed message For example: "An error occurs while checking for packages update." The "Retry" button should be in the footer or be a link instead a button

On 03/21/2014 06:48 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. > > Signed-off-by: Hongliang Wang&lt;hlwang(a)linux.vnet.ibm.com&gt; > --- > 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 6e4678f..2990cdd 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..362cde2 100644 > --- a/ui/pages/i18n.html.tmpl > +++ b/ui/pages/i18n.html.tmpl > @@ -60,6 +60,9 @@ var i18n = { > 'KCHAPI6006M': "$_("Warning")", > > 'KCHGRD6001M': "$_("Loading...")", > + 'KCHGRD6002M': "$_("Operation failed.")", > + '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?")", _______________________________________________ Kimchi-devel mailing list Kimchi-devel(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel