[PATCH] Issue#349: Software Update Grid Keeps Loading when Error Returns

21 Mar 2014

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

    

Hongliang Wang

Aline Manera

Royce Lv

Hongliang Wang

tags

participants (3)