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

Hongliang Wang hlwang at linux.vnet.ibm.com
Mon Mar 24 10:28:29 UTC 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.

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




More information about the Kimchi-devel mailing list