<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    <div class="moz-cite-prefix">On 02/21/2014 03:13 AM, Hongliang Wang
      wrote:<br>
    </div>
    <blockquote
      cite="mid:1392963235-8437-1-git-send-email-hlwang@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">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 -&gt; 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 -&gt; V2:
  2a) Fixed "Update All" Button always being disabled issue
      (Thanks to Paulo Ricardo Paz Vital's comment)

Signed-off-by: Hongliang Wang <a class="moz-txt-link-rfc2396E" href="mailto:hlwang@linux.vnet.ibm.com">&lt;hlwang@linux.vnet.ibm.com&gt;</a>
---
 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) {</pre>
    </blockquote>
    <br>
    <blockquote
      cite="mid:1392963235-8437-1-git-send-email-hlwang@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">
             case 'running':
+                progress &amp;&amp; progress(result);
                 setTimeout(function() {
                     trackTask();
                 }, 200);</pre>
    </blockquote>
    <br>
    When the task finished you also need to update the messages to the
    user.<br>
    Otherwise it will miss the last update output<br>
    <br>
    <blockquote
      cite="mid:1392963235-8437-1-git-send-email-hlwang@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">
@@ -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) &amp;&amp;
+                        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 @@
                     &lt;div class="section-row"&gt;
                         &lt;div class="section-value"&gt;
                             &lt;div id="software-updates-grid-container"&gt;&lt;/div&gt;
+                            &lt;textarea id="software-updates-progress-textarea" class="hidden" readonly&gt;&lt;/textarea&gt;
                         &lt;/div&gt;</pre>
    </blockquote>
    <br>
    <br>
    <img src="cid:part1.03050807.09090702@linux.vnet.ibm.com" alt=""><br>
    <br>
    The user can increase/decrease the size of the output panel.<br>
    We need to make it fixed in width and height<br>
    <br>
    Also I'd suggest to have the panel silver - like a disabled input
    box. That way user is sure it is just output.<br>
    And add a label to it<br>
    <b><br>
    </b><b>Update progress</b><br>
    &lt;messages&gt;<br>
    <br>
    <blockquote
      cite="mid:1392963235-8437-1-git-send-email-hlwang@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">
                     &lt;/div&gt;
                 &lt;/div&gt;
</pre>
    </blockquote>
    <br>
  </body>
</html>