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. V3 -> V4: 4a) Added the last update output (Thanks to Aline's comment) 4b) Disabled horizontal resize function of output textarea (Thanks to Aline's comment) 4c) Added "Update Progress" label to the output textarea (Thanks to Aline's comment) 4d) Added refreshing the software grid after updating is finished (Thanks to Aline's comment) 4e) Added software updates grid cleanup when host tab is unloaded V2 -> V3: 3a) Fixed "Update All" Button always being disabled issue (Thanks to Paulo and Aline's comment) 3b) Updated REST API calling 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 | 29 ++++++++++++++ ui/js/src/kimchi.api.js | 53 ++++++++++++++++++++++++++ ui/js/src/kimchi.host.js | 88 +++++++++++++++++++++++++++++++++++++++++++ ui/pages/i18n.html.tmpl | 10 +++++ ui/pages/tabs/host.html.tmpl | 17 +++++++++ 5 files changed, 197 insertions(+) diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css index 470ed1b..0f8b941 100644 --- a/ui/css/theme-default/host.css +++ b/ui/css/theme-default/host.css @@ -224,3 +224,32 @@ width: 300px; } /* End of Debug Report */ + +/* Software Updates */ +.host-panel #software-updates-grid { + border-color: #ddd; + height: 300px; + width: 850px; +} + +.software-update-id { + width: 30px; +} + +.software-update-name, +.software-update-repos { + width: 220px; +} + +.software-update-version, +.software-update-arch { + width: 190px; +} + +.host-panel #software-updates-progress-textarea { + border: 1px solid #ddd; + height: 100px; + resize: vertical; + width: 846px; +} +/* End of Software Updates */ diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js index fdd9cfc..beaf314 100644 --- a/ui/js/src/kimchi.api.js +++ b/ui/js/src/kimchi.api.js @@ -727,5 +727,58 @@ var kimchi = { success : suc, error : err }); + }, + + listSoftwareUpdates : function(suc, err) { + kimchi.requestJSON({ + url : kimchi.url + 'host/packagesupdate', + type : 'GET', + contentType : 'application/json', + dataType : 'json', + resend: true, + success : suc, + error : err + }); + }, + + updateSoftwares : function(suc, err, progress) { + var taskID = -1; + var onResponse = function(data) { + taskID = data['id']; + trackTask(); + }; + + var trackTask = function() { + kimchi.getTask(taskID, onTaskResponse, err); + }; + + var onTaskResponse = function(result) { + var taskStatus = result['status']; + switch(taskStatus) { + case 'running': + progress && progress(result); + setTimeout(function() { + trackTask(); + }, 200); + break; + case 'finished': + suc(result); + break; + case 'failed': + err(result); + break; + default: + break; + } + }; + + kimchi.requestJSON({ + url : kimchi.url + 'host/swupdate', + type : "POST", + contentType : "application/json", + dataType : "json", + success : onResponse, + error : err + }); } }; diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js index 6e7f333..df27313 100644 --- a/ui/js/src/kimchi.host.js +++ b/ui/js/src/kimchi.host.js @@ -128,6 +128,87 @@ kimchi.host_main = function() { }); }; + var softwareUpdatesGridID = 'software-updates-grid'; + var softwareUpdatesGrid = null; + var progressAreaID = 'software-updates-progress-textarea'; + var reloadProgressArea = function(result) { + var progressArea = $('#' + progressAreaID)[0]; + $(progressArea).text(result['message']); + var scrollTop = $(progressArea).prop('scrollHeight'); + $(progressArea).prop('scrollTop', scrollTop); + }; + + var initSoftwareUpdatesGrid = function(softwareUpdates) { + softwareUpdatesGrid = new kimchi.widget.Grid({ + container: 'software-updates-grid-container', + id: softwareUpdatesGridID, + title: i18n['KCHUPD6001M'], + toolbarButtons: [{ + id: softwareUpdatesGridID + '-update-button', + label: i18n['KCHUPD6006M'], + disabled: true, + onClick: function(event) { + var updateButton = $(this); + var progressArea = $('#' + progressAreaID)[0]; + $('#software-updates-progress-container').removeClass('hidden'); + $(progressArea).text(''); + !kimchi.isElementInViewport(progressArea) && + progressArea.scrollIntoView(); + $(updateButton).text(i18n['KCHUPD6007M']).prop('disabled', true); + + kimchi.updateSoftwares(function(result) { + reloadProgressArea(result); + $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false); + kimchi.topic('kimchi/softwareUpdated').publish({ + result: result + }); + }, function() {}, reloadProgressArea); + } + }], + frozenFields: [{ + name: 'id', + label: ' ', + 'class': 'software-update-id' + }], + fields: [{ + name: 'package_name', + label: i18n['KCHUPD6002M'], + 'class': 'software-update-name' + }, { + name: 'version', + label: i18n['KCHUPD6003M'], + 'class': 'software-update-version' + }, { + name: 'arch', + label: i18n['KCHUPD6004M'], + 'class': 'software-update-arch' + }, { + name: 'repository', + label: i18n['KCHUPD6005M'], + 'class': 'software-update-repos' + }], + data: softwareUpdates + }); + }; + + var listSoftwareUpdates = function() { + kimchi.listSoftwareUpdates(function(softwareUpdates) { + $.each(softwareUpdates, function(i, item) { + softwareUpdates[i]['id'] = i + 1; + }); + + if(softwareUpdatesGrid) { + softwareUpdatesGrid.setData(softwareUpdates); + } + else { + initSoftwareUpdatesGrid(softwareUpdates); + } + + var updateButton = $('#' + softwareUpdatesGridID + '-update-button'); + $(updateButton).prop('disabled', softwareUpdates.length === 0); + }); + }; + var shutdownButtonID = '#host-button-shutdown'; var restartButtonID = '#host-button-restart'; var shutdownHost = function(params) { @@ -186,6 +267,8 @@ kimchi.host_main = function() { kimchi.keepMonitoringHost = this['checked']; }); + listSoftwareUpdates(); + kimchi.getCapabilities(function(capabilities) { if(!capabilities['system_report_tool']) { return; @@ -199,6 +282,10 @@ kimchi.host_main = function() { listDebugReports(); }); + kimchi.topic('kimchi/softwareUpdated').subscribe(function() { + listSoftwareUpdates(); + }); + kimchi.getHost(function(data) { var htmlTmpl = $('#host-tmpl').html(); data['logo'] = data['logo'] || ''; @@ -464,5 +551,6 @@ kimchi.host_main = function() { delete kimchi.hostTimer; } reportGrid && reportGrid.destroy(); + softwareUpdatesGrid && softwareUpdatesGrid.destroy(); }); }; diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl index db6166e..4223403 100644 --- a/ui/pages/i18n.html.tmpl +++ b/ui/pages/i18n.html.tmpl @@ -89,6 +89,16 @@ var i18n = { 'KCHDR6010M': "$_("Download")", 'KCHDR6011M': "$_("Report name should contain only letters, digits and/or hyphen ('-').")", + + 'KCHUPD6001M': "$_("Software Updates")", + 'KCHUPD6002M': "$_("Package Name")", + 'KCHUPD6003M': "$_("Version")", + 'KCHUPD6004M': "$_("Architecture")", + 'KCHUPD6005M': "$_("Repository")", + 'KCHUPD6006M': "$_("Update All")", + 'KCHUPD6007M': "$_("Updating...")", + + 'KCHVM6001M': "$_("This will delete the virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")", 'KCHVM6002M': "$_("Delete Confirmation")", diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl index 23b9853..f6ecd47 100644 --- a/ui/pages/tabs/host.html.tmpl +++ b/ui/pages/tabs/host.html.tmpl @@ -120,6 +120,23 @@ </div> </div> </div> + <div id="software-update-section" class="host-section"> + <h3 class="section-header" + aria-controls="content-software-update"> + $_("Software Updates") + </h3> + <div id="content-software-update" class="section-content"> + <div class="section-row"> + <div class="section-value"> + <div id="software-updates-grid-container"></div> + <div id="software-updates-progress-container" class="hidden"> + <label for="software-updates-progress-textarea">$_("Update Progress")</label> + <textarea id="software-updates-progress-textarea" readonly></textarea> + </div> + </div> + </div> + </div> + </div> <div id="debug-report-section" class="host-section hidden"> <h3 class="section-header" aria-controls="content-sys-reports">

On 02/28/2014 05:02 PM, Royce Lv wrote: > Just some humble suggestion cause I'm not a UI expert. > > 1. The selection effect on grid confused me, whether we can update a > single software. ACK. It's a good point! I'll disable the single selection in grid widget. Single selection is designed for cases when there is action for single record like: update a single package. > > 2. Is that possible to select multiple software and update it? Because > on our system, especially when our server is a virtualization server, > we only focus on virtualization related software and don't want to > update others. But of course, for a period of time we need a full > upgrade. I mean partial update may be more convinient. Yes, it's better to allow user select whichever he/she wants to update. @Adam and @Aline , seems the back-end API only supports update all action. I think we can add this feature in the next release. > > On 2014年02月28日 11:33, 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. >> >> V3 -> V4: >> 4a) Added the last update output >> (Thanks to Aline's comment) >> 4b) Disabled horizontal resize function of output textarea >> (Thanks to Aline's comment) >> 4c) Added "Update Progress" label to the output textarea >> (Thanks to Aline's comment) >> 4d) Added refreshing the software grid after updating is finished >> (Thanks to Aline's comment) >> 4e) Added software updates grid cleanup when host tab is unloaded >> >> V2 -> V3: >> 3a) Fixed "Update All" Button always being disabled issue >> (Thanks to Paulo and Aline's comment) >> 3b) Updated REST API calling 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 | 29 ++++++++++++++ >> ui/js/src/kimchi.api.js | 53 ++++++++++++++++++++++++++ >> ui/js/src/kimchi.host.js | 88 >> +++++++++++++++++++++++++++++++++++++++++++ >> ui/pages/i18n.html.tmpl | 10 +++++ >> ui/pages/tabs/host.html.tmpl | 17 +++++++++ >> 5 files changed, 197 insertions(+) >> >> diff --git a/ui/css/theme-default/host.css >> b/ui/css/theme-default/host.css >> index 470ed1b..0f8b941 100644 >> --- a/ui/css/theme-default/host.css >> +++ b/ui/css/theme-default/host.css >> @@ -224,3 +224,32 @@ >> width: 300px; >> } >> /* End of Debug Report */ >> + >> +/* Software Updates */ >> +.host-panel #software-updates-grid { >> + border-color: #ddd; >> + height: 300px; >> + width: 850px; >> +} >> + >> +.software-update-id { >> + width: 30px; >> +} >> + >> +.software-update-name, >> +.software-update-repos { >> + width: 220px; >> +} >> + >> +.software-update-version, >> +.software-update-arch { >> + width: 190px; >> +} >> + >> +.host-panel #software-updates-progress-textarea { >> + border: 1px solid #ddd; >> + height: 100px; >> + resize: vertical; >> + width: 846px; >> +} >> +/* End of Software Updates */ >> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js >> index fdd9cfc..beaf314 100644 >> --- a/ui/js/src/kimchi.api.js >> +++ b/ui/js/src/kimchi.api.js >> @@ -727,5 +727,58 @@ var kimchi = { >> success : suc, >> error : err >> }); >> + }, >> + >> + listSoftwareUpdates : function(suc, err) { >> + kimchi.requestJSON({ >> + url : kimchi.url + 'host/packagesupdate', >> + type : 'GET', >> + contentType : 'application/json', >> + dataType : 'json', >> + resend: true, >> + success : suc, >> + error : err >> + }); >> + }, >> + >> + updateSoftwares : function(suc, err, progress) { >> + var taskID = -1; >> + var onResponse = function(data) { >> + taskID = data['id']; >> + trackTask(); >> + }; >> + >> + var trackTask = function() { >> + kimchi.getTask(taskID, onTaskResponse, err); >> + }; >> + >> + var onTaskResponse = function(result) { >> + var taskStatus = result['status']; >> + switch(taskStatus) { >> + case 'running': >> + progress && progress(result); >> + setTimeout(function() { >> + trackTask(); >> + }, 200); >> + break; >> + case 'finished': >> + suc(result); >> + break; >> + case 'failed': >> + err(result); >> + break; >> + default: >> + break; >> + } >> + }; >> + >> + kimchi.requestJSON({ >> + url : kimchi.url + 'host/swupdate', >> + type : "POST", >> + contentType : "application/json", >> + dataType : "json", >> + success : onResponse, >> + error : err >> + }); >> } >> }; >> diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js >> index 6e7f333..df27313 100644 >> --- a/ui/js/src/kimchi.host.js >> +++ b/ui/js/src/kimchi.host.js >> @@ -128,6 +128,87 @@ kimchi.host_main = function() { >> }); >> }; >> >> + var softwareUpdatesGridID = 'software-updates-grid'; >> + var softwareUpdatesGrid = null; >> + var progressAreaID = 'software-updates-progress-textarea'; >> + var reloadProgressArea = function(result) { >> + var progressArea = $('#' + progressAreaID)[0]; >> + $(progressArea).text(result['message']); >> + var scrollTop = $(progressArea).prop('scrollHeight'); >> + $(progressArea).prop('scrollTop', scrollTop); >> + }; >> + >> + var initSoftwareUpdatesGrid = function(softwareUpdates) { >> + softwareUpdatesGrid = new kimchi.widget.Grid({ >> + container: 'software-updates-grid-container', >> + id: softwareUpdatesGridID, >> + title: i18n['KCHUPD6001M'], >> + toolbarButtons: [{ >> + id: softwareUpdatesGridID + '-update-button', >> + label: i18n['KCHUPD6006M'], >> + disabled: true, >> + onClick: function(event) { >> + var updateButton = $(this); >> + var progressArea = $('#' + progressAreaID)[0]; >> + $('#software-updates-progress-container').removeClass('hidden'); >> + $(progressArea).text(''); >> + !kimchi.isElementInViewport(progressArea) && >> + progressArea.scrollIntoView(); >> + $(updateButton).text(i18n['KCHUPD6007M']).prop('disabled', true); >> + >> + kimchi.updateSoftwares(function(result) { >> + reloadProgressArea(result); >> + $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false); >> + kimchi.topic('kimchi/softwareUpdated').publish({ >> + result: result >> + }); >> + }, function() {}, reloadProgressArea); >> + } >> + }], >> + frozenFields: [{ >> + name: 'id', >> + label: ' ', >> + 'class': 'software-update-id' >> + }], >> + fields: [{ >> + name: 'package_name', >> + label: i18n['KCHUPD6002M'], >> + 'class': 'software-update-name' >> + }, { >> + name: 'version', >> + label: i18n['KCHUPD6003M'], >> + 'class': 'software-update-version' >> + }, { >> + name: 'arch', >> + label: i18n['KCHUPD6004M'], >> + 'class': 'software-update-arch' >> + }, { >> + name: 'repository', >> + label: i18n['KCHUPD6005M'], >> + 'class': 'software-update-repos' >> + }], >> + data: softwareUpdates >> + }); >> + }; >> + >> + var listSoftwareUpdates = function() { >> + kimchi.listSoftwareUpdates(function(softwareUpdates) { >> + $.each(softwareUpdates, function(i, item) { >> + softwareUpdates[i]['id'] = i + 1; >> + }); >> + >> + if(softwareUpdatesGrid) { >> + softwareUpdatesGrid.setData(softwareUpdates); >> + } >> + else { >> + initSoftwareUpdatesGrid(softwareUpdates); >> + } >> + >> + var updateButton = $('#' + softwareUpdatesGridID + >> '-update-button'); >> + $(updateButton).prop('disabled', softwareUpdates.length >> === 0); >> + }); >> + }; >> + >> var shutdownButtonID = '#host-button-shutdown'; >> var restartButtonID = '#host-button-restart'; >> var shutdownHost = function(params) { >> @@ -186,6 +267,8 @@ kimchi.host_main = function() { >> kimchi.keepMonitoringHost = this['checked']; >> }); >> >> + listSoftwareUpdates(); >> + >> kimchi.getCapabilities(function(capabilities) { >> if(!capabilities['system_report_tool']) { >> return; >> @@ -199,6 +282,10 @@ kimchi.host_main = function() { >> listDebugReports(); >> }); >> >> + kimchi.topic('kimchi/softwareUpdated').subscribe(function() { >> + listSoftwareUpdates(); >> + }); >> + >> kimchi.getHost(function(data) { >> var htmlTmpl = $('#host-tmpl').html(); >> data['logo'] = data['logo'] || ''; >> @@ -464,5 +551,6 @@ kimchi.host_main = function() { >> delete kimchi.hostTimer; >> } >> reportGrid && reportGrid.destroy(); >> + softwareUpdatesGrid && softwareUpdatesGrid.destroy(); >> }); >> }; >> diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl >> index db6166e..4223403 100644 >> --- a/ui/pages/i18n.html.tmpl >> +++ b/ui/pages/i18n.html.tmpl >> @@ -89,6 +89,16 @@ var i18n = { >> 'KCHDR6010M': "$_("Download")", >> 'KCHDR6011M': "$_("Report name should contain only letters, >> digits and/or hyphen ('-').")", >> >> + >> + 'KCHUPD6001M': "$_("Software Updates")", >> + 'KCHUPD6002M': "$_("Package Name")", >> + 'KCHUPD6003M': "$_("Version")", >> + 'KCHUPD6004M': "$_("Architecture")", >> + 'KCHUPD6005M': "$_("Repository")", >> + 'KCHUPD6006M': "$_("Update All")", >> + 'KCHUPD6007M': "$_("Updating...")", >> + >> + >> 'KCHVM6001M': "$_("This will delete the virtual machine and its >> virtual disks. This operation cannot be undone. Would you like to >> continue?")", >> 'KCHVM6002M': "$_("Delete Confirmation")", >> >> diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl >> index 23b9853..f6ecd47 100644 >> --- a/ui/pages/tabs/host.html.tmpl >> +++ b/ui/pages/tabs/host.html.tmpl >> @@ -120,6 +120,23 @@ >> </div> >> </div> >> </div> >> + <div id="software-update-section" class="host-section"> >> + <h3 class="section-header" >> + aria-controls="content-software-update"> >> + $_("Software Updates") >> + </h3> >> + <div id="content-software-update" >> class="section-content"> >> + <div class="section-row"> >> + <div class="section-value"> >> + <div >> id="software-updates-grid-container"></div> >> + <div >> id="software-updates-progress-container" class="hidden"> >> + <label >> for="software-updates-progress-textarea">$_("Update Progress")</label> >> + <textarea >> id="software-updates-progress-textarea" readonly></textarea> >> + </div> >> + </div> >> + </div> >> + </div> >> + </div> >> <div id="debug-report-section" class="host-section >> hidden"> >> <h3 class="section-header" >> aria-controls="content-sys-reports"> > _______________________________________________ Kimchi-devel mailing list Kimchi-devel(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel

On 02/28/2014 05:02 PM, Royce Lv wrote: > Just some humble suggestion cause I'm not a UI expert. > > 1. The selection effect on grid confused me, whether we can update a > single software. ACK. It's a good point! I'll disable the single selection in grid widget. Single selection is designed for cases when there is action for single record like: update a single package. > > 2. Is that possible to select multiple software and update it? > Because on our system, especially when our server is a virtualization > server, we only focus on virtualization related software and don't > want to update others. But of course, for a period of time we need a > full upgrade. I mean partial update may be more convinient. Yes, it's better to allow user select whichever he/she wants to update. @Adam and @Aline , seems the back-end API only supports update all action. I think we can add this feature in the next release.

> > On 2014年02月28日 11:33, 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. >> >> V3 -> V4: >> 4a) Added the last update output >> (Thanks to Aline's comment) >> 4b) Disabled horizontal resize function of output textarea >> (Thanks to Aline's comment) >> 4c) Added "Update Progress" label to the output textarea >> (Thanks to Aline's comment) >> 4d) Added refreshing the software grid after updating is finished >> (Thanks to Aline's comment) >> 4e) Added software updates grid cleanup when host tab is unloaded >> >> V2 -> V3: >> 3a) Fixed "Update All" Button always being disabled issue >> (Thanks to Paulo and Aline's comment) >> 3b) Updated REST API calling 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 | 29 ++++++++++++++ >> ui/js/src/kimchi.api.js | 53 ++++++++++++++++++++++++++ >> ui/js/src/kimchi.host.js | 88 >> +++++++++++++++++++++++++++++++++++++++++++ >> ui/pages/i18n.html.tmpl | 10 +++++ >> ui/pages/tabs/host.html.tmpl | 17 +++++++++ >> 5 files changed, 197 insertions(+) >> >> diff --git a/ui/css/theme-default/host.css >> b/ui/css/theme-default/host.css >> index 470ed1b..0f8b941 100644 >> --- a/ui/css/theme-default/host.css >> +++ b/ui/css/theme-default/host.css >> @@ -224,3 +224,32 @@ >> width: 300px; >> } >> /* End of Debug Report */ >> + >> +/* Software Updates */ >> +.host-panel #software-updates-grid { >> + border-color: #ddd; >> + height: 300px; >> + width: 850px; >> +} >> + >> +.software-update-id { >> + width: 30px; >> +} >> + >> +.software-update-name, >> +.software-update-repos { >> + width: 220px; >> +} >> + >> +.software-update-version, >> +.software-update-arch { >> + width: 190px; >> +} >> + >> +.host-panel #software-updates-progress-textarea { >> + border: 1px solid #ddd; >> + height: 100px; >> + resize: vertical; >> + width: 846px; >> +} >> +/* End of Software Updates */ >> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js >> index fdd9cfc..beaf314 100644 >> --- a/ui/js/src/kimchi.api.js >> +++ b/ui/js/src/kimchi.api.js >> @@ -727,5 +727,58 @@ var kimchi = { >> success : suc, >> error : err >> }); >> + }, >> + >> + listSoftwareUpdates : function(suc, err) { >> + kimchi.requestJSON({ >> + url : kimchi.url + 'host/packagesupdate', >> + type : 'GET', >> + contentType : 'application/json', >> + dataType : 'json', >> + resend: true, >> + success : suc, >> + error : err >> + }); >> + }, >> + >> + updateSoftwares : function(suc, err, progress) { >> + var taskID = -1; >> + var onResponse = function(data) { >> + taskID = data['id']; >> + trackTask(); >> + }; >> + >> + var trackTask = function() { >> + kimchi.getTask(taskID, onTaskResponse, err); >> + }; >> + >> + var onTaskResponse = function(result) { >> + var taskStatus = result['status']; >> + switch(taskStatus) { >> + case 'running': >> + progress && progress(result); >> + setTimeout(function() { >> + trackTask(); >> + }, 200); >> + break; >> + case 'finished': >> + suc(result); >> + break; >> + case 'failed': >> + err(result); >> + break; >> + default: >> + break; >> + } >> + }; >> + >> + kimchi.requestJSON({ >> + url : kimchi.url + 'host/swupdate', >> + type : "POST", >> + contentType : "application/json", >> + dataType : "json", >> + success : onResponse, >> + error : err >> + }); >> } >> }; >> diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js >> index 6e7f333..df27313 100644 >> --- a/ui/js/src/kimchi.host.js >> +++ b/ui/js/src/kimchi.host.js >> @@ -128,6 +128,87 @@ kimchi.host_main = function() { >> }); >> }; >> >> + var softwareUpdatesGridID = 'software-updates-grid'; >> + var softwareUpdatesGrid = null; >> + var progressAreaID = 'software-updates-progress-textarea'; >> + var reloadProgressArea = function(result) { >> + var progressArea = $('#' + progressAreaID)[0]; >> + $(progressArea).text(result['message']); >> + var scrollTop = $(progressArea).prop('scrollHeight'); >> + $(progressArea).prop('scrollTop', scrollTop); >> + }; >> + >> + var initSoftwareUpdatesGrid = function(softwareUpdates) { >> + softwareUpdatesGrid = new kimchi.widget.Grid({ >> + container: 'software-updates-grid-container', >> + id: softwareUpdatesGridID, >> + title: i18n['KCHUPD6001M'], >> + toolbarButtons: [{ >> + id: softwareUpdatesGridID + '-update-button', >> + label: i18n['KCHUPD6006M'], >> + disabled: true, >> + onClick: function(event) { >> + var updateButton = $(this); >> + var progressArea = $('#' + progressAreaID)[0]; >> + $('#software-updates-progress-container').removeClass('hidden'); >> + $(progressArea).text(''); >> + !kimchi.isElementInViewport(progressArea) && >> + progressArea.scrollIntoView(); >> + $(updateButton).text(i18n['KCHUPD6007M']).prop('disabled', true); >> + >> + kimchi.updateSoftwares(function(result) { >> + reloadProgressArea(result); >> + $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false); >> + kimchi.topic('kimchi/softwareUpdated').publish({ >> + result: result >> + }); >> + }, function() {}, reloadProgressArea); >> + } >> + }], >> + frozenFields: [{ >> + name: 'id', >> + label: ' ', >> + 'class': 'software-update-id' >> + }], >> + fields: [{ >> + name: 'package_name', >> + label: i18n['KCHUPD6002M'], >> + 'class': 'software-update-name' >> + }, { >> + name: 'version', >> + label: i18n['KCHUPD6003M'], >> + 'class': 'software-update-version' >> + }, { >> + name: 'arch', >> + label: i18n['KCHUPD6004M'], >> + 'class': 'software-update-arch' >> + }, { >> + name: 'repository', >> + label: i18n['KCHUPD6005M'], >> + 'class': 'software-update-repos' >> + }], >> + data: softwareUpdates >> + }); >> + }; >> + >> + var listSoftwareUpdates = function() { >> + kimchi.listSoftwareUpdates(function(softwareUpdates) { >> + $.each(softwareUpdates, function(i, item) { >> + softwareUpdates[i]['id'] = i + 1; >> + }); >> + >> + if(softwareUpdatesGrid) { >> + softwareUpdatesGrid.setData(softwareUpdates); >> + } >> + else { >> + initSoftwareUpdatesGrid(softwareUpdates); >> + } >> + >> + var updateButton = $('#' + softwareUpdatesGridID + >> '-update-button'); >> + $(updateButton).prop('disabled', softwareUpdates.length >> === 0); >> + }); >> + }; >> + >> var shutdownButtonID = '#host-button-shutdown'; >> var restartButtonID = '#host-button-restart'; >> var shutdownHost = function(params) { >> @@ -186,6 +267,8 @@ kimchi.host_main = function() { >> kimchi.keepMonitoringHost = this['checked']; >> }); >> >> + listSoftwareUpdates(); >> + >> kimchi.getCapabilities(function(capabilities) { >> if(!capabilities['system_report_tool']) { >> return; >> @@ -199,6 +282,10 @@ kimchi.host_main = function() { >> listDebugReports(); >> }); >> >> + kimchi.topic('kimchi/softwareUpdated').subscribe(function() { >> + listSoftwareUpdates(); >> + }); >> + >> kimchi.getHost(function(data) { >> var htmlTmpl = $('#host-tmpl').html(); >> data['logo'] = data['logo'] || ''; >> @@ -464,5 +551,6 @@ kimchi.host_main = function() { >> delete kimchi.hostTimer; >> } >> reportGrid && reportGrid.destroy(); >> + softwareUpdatesGrid && softwareUpdatesGrid.destroy(); >> }); >> }; >> diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl >> index db6166e..4223403 100644 >> --- a/ui/pages/i18n.html.tmpl >> +++ b/ui/pages/i18n.html.tmpl >> @@ -89,6 +89,16 @@ var i18n = { >> 'KCHDR6010M': "$_("Download")", >> 'KCHDR6011M': "$_("Report name should contain only letters, >> digits and/or hyphen ('-').")", >> >> + >> + 'KCHUPD6001M': "$_("Software Updates")", >> + 'KCHUPD6002M': "$_("Package Name")", >> + 'KCHUPD6003M': "$_("Version")", >> + 'KCHUPD6004M': "$_("Architecture")", >> + 'KCHUPD6005M': "$_("Repository")", >> + 'KCHUPD6006M': "$_("Update All")", >> + 'KCHUPD6007M': "$_("Updating...")", >> + >> + >> 'KCHVM6001M': "$_("This will delete the virtual machine and >> its virtual disks. This operation cannot be undone. Would you like >> to continue?")", >> 'KCHVM6002M': "$_("Delete Confirmation")", >> >> diff --git a/ui/pages/tabs/host.html.tmpl >> b/ui/pages/tabs/host.html.tmpl >> index 23b9853..f6ecd47 100644 >> --- a/ui/pages/tabs/host.html.tmpl >> +++ b/ui/pages/tabs/host.html.tmpl >> @@ -120,6 +120,23 @@ >> </div> >> </div> >> </div> >> + <div id="software-update-section" class="host-section"> >> + <h3 class="section-header" >> + aria-controls="content-software-update"> >> + $_("Software Updates") >> + </h3> >> + <div id="content-software-update" >> class="section-content"> >> + <div class="section-row"> >> + <div class="section-value"> >> + <div >> id="software-updates-grid-container"></div> >> + <div >> id="software-updates-progress-container" class="hidden"> >> + <label >> for="software-updates-progress-textarea">$_("Update Progress")</label> >> + <textarea >> id="software-updates-progress-textarea" readonly></textarea> >> + </div> >> + </div> >> + </div> >> + </div> >> + </div> >> <div id="debug-report-section" class="host-section >> hidden"> >> <h3 class="section-header" >> aria-controls="content-sys-reports"> > _______________________________________________ Kimchi-devel mailing list Kimchi-devel(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel

On 02/28/2014 07:20 AM, Hongliang Wang wrote: > On 02/28/2014 05:02 PM, Royce Lv wrote: >> Just some humble suggestion cause I'm not a UI expert. >> >> 1. The selection effect on grid confused me, whether we can update a >> single software. > ACK. It's a good point! I'll disable the single selection in grid > widget. Single selection is designed for cases when there is action > for single record like: update a single package. Hi Hongliang, Will you do that on V5 or on a separated patch?

>> >> 2. Is that possible to select multiple software and update it? >> Because on our system, especially when our server is a >> virtualization server, we only focus on virtualization related >> software and don't want to update others. But of course, for a >> period of time we need a full upgrade. I mean partial update may be >> more convinient. > Yes, it's better to allow user select whichever he/she wants to update. > @Adam and @Aline , seems the back-end API only supports update all > action. I think we can add this feature in the next release. >> >> On 2014年02月28日 11:33, 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. >>> >>> V3 -> V4: >>> 4a) Added the last update output >>> (Thanks to Aline's comment) >>> 4b) Disabled horizontal resize function of output textarea >>> (Thanks to Aline's comment) >>> 4c) Added "Update Progress" label to the output textarea >>> (Thanks to Aline's comment) >>> 4d) Added refreshing the software grid after updating is finished >>> (Thanks to Aline's comment) >>> 4e) Added software updates grid cleanup when host tab is unloaded >>> >>> V2 -> V3: >>> 3a) Fixed "Update All" Button always being disabled issue >>> (Thanks to Paulo and Aline's comment) >>> 3b) Updated REST API calling 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 | 29 ++++++++++++++ >>> ui/js/src/kimchi.api.js | 53 ++++++++++++++++++++++++++ >>> ui/js/src/kimchi.host.js | 88 >>> +++++++++++++++++++++++++++++++++++++++++++ >>> ui/pages/i18n.html.tmpl | 10 +++++ >>> ui/pages/tabs/host.html.tmpl | 17 +++++++++ >>> 5 files changed, 197 insertions(+) >>> >>> diff --git a/ui/css/theme-default/host.css >>> b/ui/css/theme-default/host.css >>> index 470ed1b..0f8b941 100644 >>> --- a/ui/css/theme-default/host.css >>> +++ b/ui/css/theme-default/host.css >>> @@ -224,3 +224,32 @@ >>> width: 300px; >>> } >>> /* End of Debug Report */ >>> + >>> +/* Software Updates */ >>> +.host-panel #software-updates-grid { >>> + border-color: #ddd; >>> + height: 300px; >>> + width: 850px; >>> +} >>> + >>> +.software-update-id { >>> + width: 30px; >>> +} >>> + >>> +.software-update-name, >>> +.software-update-repos { >>> + width: 220px; >>> +} >>> + >>> +.software-update-version, >>> +.software-update-arch { >>> + width: 190px; >>> +} >>> + >>> +.host-panel #software-updates-progress-textarea { >>> + border: 1px solid #ddd; >>> + height: 100px; >>> + resize: vertical; >>> + width: 846px; >>> +} >>> +/* End of Software Updates */ >>> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js >>> index fdd9cfc..beaf314 100644 >>> --- a/ui/js/src/kimchi.api.js >>> +++ b/ui/js/src/kimchi.api.js >>> @@ -727,5 +727,58 @@ var kimchi = { >>> success : suc, >>> error : err >>> }); >>> + }, >>> + >>> + listSoftwareUpdates : function(suc, err) { >>> + kimchi.requestJSON({ >>> + url : kimchi.url + 'host/packagesupdate', >>> + type : 'GET', >>> + contentType : 'application/json', >>> + dataType : 'json', >>> + resend: true, >>> + success : suc, >>> + error : err >>> + }); >>> + }, >>> + >>> + updateSoftwares : function(suc, err, progress) { >>> + var taskID = -1; >>> + var onResponse = function(data) { >>> + taskID = data['id']; >>> + trackTask(); >>> + }; >>> + >>> + var trackTask = function() { >>> + kimchi.getTask(taskID, onTaskResponse, err); >>> + }; >>> + >>> + var onTaskResponse = function(result) { >>> + var taskStatus = result['status']; >>> + switch(taskStatus) { >>> + case 'running': >>> + progress && progress(result); >>> + setTimeout(function() { >>> + trackTask(); >>> + }, 200); >>> + break; >>> + case 'finished': >>> + suc(result); >>> + break; >>> + case 'failed': >>> + err(result); >>> + break; >>> + default: >>> + break; >>> + } >>> + }; >>> + >>> + kimchi.requestJSON({ >>> + url : kimchi.url + 'host/swupdate', >>> + type : "POST", >>> + contentType : "application/json", >>> + dataType : "json", >>> + success : onResponse, >>> + error : err >>> + }); >>> } >>> }; >>> diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js >>> index 6e7f333..df27313 100644 >>> --- a/ui/js/src/kimchi.host.js >>> +++ b/ui/js/src/kimchi.host.js >>> @@ -128,6 +128,87 @@ kimchi.host_main = function() { >>> }); >>> }; >>> >>> + var softwareUpdatesGridID = 'software-updates-grid'; >>> + var softwareUpdatesGrid = null; >>> + var progressAreaID = 'software-updates-progress-textarea'; >>> + var reloadProgressArea = function(result) { >>> + var progressArea = $('#' + progressAreaID)[0]; >>> + $(progressArea).text(result['message']); >>> + var scrollTop = $(progressArea).prop('scrollHeight'); >>> + $(progressArea).prop('scrollTop', scrollTop); >>> + }; >>> + >>> + var initSoftwareUpdatesGrid = function(softwareUpdates) { >>> + softwareUpdatesGrid = new kimchi.widget.Grid({ >>> + container: 'software-updates-grid-container', >>> + id: softwareUpdatesGridID, >>> + title: i18n['KCHUPD6001M'], >>> + toolbarButtons: [{ >>> + id: softwareUpdatesGridID + '-update-button', >>> + label: i18n['KCHUPD6006M'], >>> + disabled: true, >>> + onClick: function(event) { >>> + var updateButton = $(this); >>> + var progressArea = $('#' + progressAreaID)[0]; >>> + $('#software-updates-progress-container').removeClass('hidden'); >>> + $(progressArea).text(''); >>> + !kimchi.isElementInViewport(progressArea) && >>> + progressArea.scrollIntoView(); >>> + $(updateButton).text(i18n['KCHUPD6007M']).prop('disabled', true); >>> + >>> + kimchi.updateSoftwares(function(result) { >>> + reloadProgressArea(result); >>> + $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false); >>> + kimchi.topic('kimchi/softwareUpdated').publish({ >>> + result: result >>> + }); >>> + }, function() {}, reloadProgressArea); >>> + } >>> + }], >>> + frozenFields: [{ >>> + name: 'id', >>> + label: ' ', >>> + 'class': 'software-update-id' >>> + }], >>> + fields: [{ >>> + name: 'package_name', >>> + label: i18n['KCHUPD6002M'], >>> + 'class': 'software-update-name' >>> + }, { >>> + name: 'version', >>> + label: i18n['KCHUPD6003M'], >>> + 'class': 'software-update-version' >>> + }, { >>> + name: 'arch', >>> + label: i18n['KCHUPD6004M'], >>> + 'class': 'software-update-arch' >>> + }, { >>> + name: 'repository', >>> + label: i18n['KCHUPD6005M'], >>> + 'class': 'software-update-repos' >>> + }], >>> + data: softwareUpdates >>> + }); >>> + }; >>> + >>> + var listSoftwareUpdates = function() { >>> + kimchi.listSoftwareUpdates(function(softwareUpdates) { >>> + $.each(softwareUpdates, function(i, item) { >>> + softwareUpdates[i]['id'] = i + 1; >>> + }); >>> + >>> + if(softwareUpdatesGrid) { >>> + softwareUpdatesGrid.setData(softwareUpdates); >>> + } >>> + else { >>> + initSoftwareUpdatesGrid(softwareUpdates); >>> + } >>> + >>> + var updateButton = $('#' + softwareUpdatesGridID + >>> '-update-button'); >>> + $(updateButton).prop('disabled', >>> softwareUpdates.length === 0); >>> + }); >>> + }; >>> + >>> var shutdownButtonID = '#host-button-shutdown'; >>> var restartButtonID = '#host-button-restart'; >>> var shutdownHost = function(params) { >>> @@ -186,6 +267,8 @@ kimchi.host_main = function() { >>> kimchi.keepMonitoringHost = this['checked']; >>> }); >>> >>> + listSoftwareUpdates(); >>> + >>> kimchi.getCapabilities(function(capabilities) { >>> if(!capabilities['system_report_tool']) { >>> return; >>> @@ -199,6 +282,10 @@ kimchi.host_main = function() { >>> listDebugReports(); >>> }); >>> >>> + kimchi.topic('kimchi/softwareUpdated').subscribe(function() { >>> + listSoftwareUpdates(); >>> + }); >>> + >>> kimchi.getHost(function(data) { >>> var htmlTmpl = $('#host-tmpl').html(); >>> data['logo'] = data['logo'] || ''; >>> @@ -464,5 +551,6 @@ kimchi.host_main = function() { >>> delete kimchi.hostTimer; >>> } >>> reportGrid && reportGrid.destroy(); >>> + softwareUpdatesGrid && softwareUpdatesGrid.destroy(); >>> }); >>> }; >>> diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl >>> index db6166e..4223403 100644 >>> --- a/ui/pages/i18n.html.tmpl >>> +++ b/ui/pages/i18n.html.tmpl >>> @@ -89,6 +89,16 @@ var i18n = { >>> 'KCHDR6010M': "$_("Download")", >>> 'KCHDR6011M': "$_("Report name should contain only letters, >>> digits and/or hyphen ('-').")", >>> >>> + >>> + 'KCHUPD6001M': "$_("Software Updates")", >>> + 'KCHUPD6002M': "$_("Package Name")", >>> + 'KCHUPD6003M': "$_("Version")", >>> + 'KCHUPD6004M': "$_("Architecture")", >>> + 'KCHUPD6005M': "$_("Repository")", >>> + 'KCHUPD6006M': "$_("Update All")", >>> + 'KCHUPD6007M': "$_("Updating...")", >>> + >>> + >>> 'KCHVM6001M': "$_("This will delete the virtual machine and >>> its virtual disks. This operation cannot be undone. Would you like >>> to continue?")", >>> 'KCHVM6002M': "$_("Delete Confirmation")", >>> >>> diff --git a/ui/pages/tabs/host.html.tmpl >>> b/ui/pages/tabs/host.html.tmpl >>> index 23b9853..f6ecd47 100644 >>> --- a/ui/pages/tabs/host.html.tmpl >>> +++ b/ui/pages/tabs/host.html.tmpl >>> @@ -120,6 +120,23 @@ >>> </div> >>> </div> >>> </div> >>> + <div id="software-update-section" class="host-section"> >>> + <h3 class="section-header" >>> + aria-controls="content-software-update"> >>> + $_("Software Updates") >>> + </h3> >>> + <div id="content-software-update" >>> class="section-content"> >>> + <div class="section-row"> >>> + <div class="section-value"> >>> + <div >>> id="software-updates-grid-container"></div> >>> + <div >>> id="software-updates-progress-container" class="hidden"> >>> + <label >>> for="software-updates-progress-textarea">$_("Update Progress")</label> >>> + <textarea >>> id="software-updates-progress-textarea" readonly></textarea> >>> + </div> >>> + </div> >>> + </div> >>> + </div> >>> + </div> >>> <div id="debug-report-section" class="host-section >>> hidden"> >>> <h3 class="section-header" >>> aria-controls="content-sys-reports"> >> > > _______________________________________________ > Kimchi-devel mailing list > Kimchi-devel(a)ovirt.org > http://lists.ovirt.org/mailman/listinfo/kimchi-devel