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 <hlwang@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 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?")",