On 02/21/2014 11:57 PM, Aline Manera wrote:

On 02/21/2014 03:13 AM, Hongliang Wang wrote:

Added UI support for software updating. The Host Tab will initially
list available updates to user if there are any; or we will disable
"Update All" Button if no updates available.

V2 -> V3:
  3a) Fixed "Update All" Button always being disabled issue
      (Thanks to Paulo and Aline's comment)
  3b) Update REST API for update action according to back-end change
  3c) Added in-progress message when system is being updated
      (Thanks to Aline's comment)

V1 -> V2:
  2a) Fixed "Update All" Button always being disabled issue
      (Thanks to Paulo Ricardo Paz Vital's comment)

Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com>
---
 ui/css/theme-default/host.css |  6 ++++++
 ui/js/src/kimchi.api.js       |  5 +++--
 ui/js/src/kimchi.host.js      | 12 ++++++++++--
 ui/pages/tabs/host.html.tmpl  |  1 +
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css
index 1342ade..884a614 100644
--- a/ui/css/theme-default/host.css
+++ b/ui/css/theme-default/host.css
@@ -248,4 +248,10 @@
 .software-update-arch {
     width: 190px;
 }
+
+.host-panel #software-updates-progress-textarea {
+    border: 1px solid #ddd;
+    height: 100px;
+    width: 846px;
+}
 /* End of Software Updates */
diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index c3a9516..abbf00e 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -745,7 +745,7 @@ var kimchi = {
         });
     },

-    updateSoftwares : function(suc, err) {
+    updateSoftwares : function(suc, err, progress) {
         var taskID = -1;
         var onResponse = function(data) {
             taskID = data['id'];
@@ -760,6 +760,7 @@ var kimchi = {
             var taskStatus = result['status'];
             switch(taskStatus) {

             case 'running':
+                progress && progress(result);
                 setTimeout(function() {
                     trackTask();
                 }, 200);

When the task finished you also need to update the messages to the user.
Otherwise it will miss the last update output

ACK

@@ -776,7 +777,7 @@ var kimchi = {
         };

         kimchi.requestJSON({
-            url : kimchi.url + 'host/packagesupdate/update',
+            url : kimchi.url + 'host/swupdate',
             type : "POST",
             contentType : "application/json",
             dataType : "json",
diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js
index b6a5878..d4016b5 100644
--- a/ui/js/src/kimchi.host.js
+++ b/ui/js/src/kimchi.host.js
@@ -144,9 +144,17 @@ kimchi.host_main = function() {
                 disabled: true,
                 onClick: function(event) {
                     var updateButton = $(this);
+                    var progressArea = $('#software-updates-progress-textarea')[0];
+                    $(progressArea).removeClass('hidden').text('');
+                    !kimchi.isElementInViewport(progressArea) &&
+                        progressArea.scrollIntoView();
                     $(updateButton).text(i18n['KCHUPD6007M']).prop('disabled', true);
                     kimchi.updateSoftwares(function(result) {
                         $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false);
+                    }, function() {}, function(result) {
+                        $(progressArea).text(result['message']);
+                        var scrollTop = $(progressArea).prop('scrollHeight');
+                        $(progressArea).prop('scrollTop', scrollTop);
                     });
                 }
             }],
@@ -189,8 +197,8 @@ kimchi.host_main = function() {
                 initSoftwareUpdatesGrid(softwareUpdates);
             }

-            $(softwareUpdatesGridID + '-update-button')
-                .prop('disabled', softwareUpdates.length === 0);
+            var updateButton = $('#' + softwareUpdatesGridID + '-update-button');
+            $(updateButton).prop('disabled', softwareUpdates.length === 0);
         });
     };

diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl
index 1de4fcd..71f72c7 100644
--- a/ui/pages/tabs/host.html.tmpl
+++ b/ui/pages/tabs/host.html.tmpl
@@ -132,6 +132,7 @@
                     <div class="section-row">
                         <div class="section-value">
                             <div id="software-updates-grid-container"></div>
+                            <textarea id="software-updates-progress-textarea" class="hidden" readonly></textarea>
                         </div>

The user can increase/decrease the size of the output panel.
We need to make it fixed in width and height

It's a improved feature of Chrome/Safari browser and I think it's user-friendly. Think about it: if there are hundreds of lines to read, or user wants more height (because his screen is big enough), I think there is no need to force the height in a relatively small value. Though, the width will break our layout.

    I think we can allow re-size height and disable re-sizing width, right?

Also I'd suggest to have the panel silver - like a disabled input box. That way user is sure it is just output.

It's read-only now. User will know it's output.

And add a label to it

Update progress
<messages>

ACK.

                     </div>
                 </div>