6:57 p.m.
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(a)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
@@ -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
Also I'd suggest to have the panel silver - like a disabled input box.
That way user is sure it is just output.
And add a label to it
*
**Update progress*
<messages>
</div>
</div>
ÿØÿà