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&gt; --- 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);

@@ -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>

</div> </div>

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&lt;hlwang(a)linux.vnet.ibm.com&gt; >> --- >> 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> >

Also when the update finishes, we need to update the packages in the grid as the shown ones were updated

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&gt; > --- > 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); > @@ -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> > </div> > </div>