[Kimchi-devel] [PATCH v2] UI: Host Software Update Support
Hongliang Wang
hlwang at linux.vnet.ibm.com
Fri Feb 21 03:38:50 UTC 2014
On 02/20/2014 03:21 AM, Aline Manera wrote:
>
> The "Update All" link is still disabled even when there are packages
> to be updated.
>
> Also I'd suggest to remove the horizontal scroll bar as it is not needed.
>
> More comments below
Agree. Though seems it's a bug in grid widget. The initial width of the
grid content is always a little larger than the grid width so horizontal
scroll bar appears. Let's track it in another issue with a lower priority.
>
> On 02/18/2014 12:06 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.
>>
>> 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 at linux.vnet.ibm.com>
>> ---
>> ui/css/theme-default/host.css | 22 +++++++++++++++
>> ui/js/src/kimchi.api.js | 52 ++++++++++++++++++++++++++++++++++
>> ui/js/src/kimchi.host.js | 65
>> +++++++++++++++++++++++++++++++++++++++++++
>> ui/pages/i18n.html.tmpl | 9 ++++++
>> ui/pages/tabs/host.html.tmpl | 13 +++++++++
>> 5 files changed, 161 insertions(+)
>>
>> diff --git a/ui/css/theme-default/host.css
>> b/ui/css/theme-default/host.css
>> index 67daeaf..1342ade 100644
>> --- a/ui/css/theme-default/host.css
>> +++ b/ui/css/theme-default/host.css
>> @@ -227,3 +227,25 @@
>> 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;
>> +}
>> +/* End of Software Updates */
>> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
>> index 6433fe0..c3a9516 100644
>> --- a/ui/js/src/kimchi.api.js
>> +++ b/ui/js/src/kimchi.api.js
>> @@ -731,5 +731,57 @@ 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) {
>> + 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':
>> + setTimeout(function() {
>> + trackTask();
>> + }, 200);
>> + break;
>> + case 'finished':
>> + suc(result);
>> + break;
>> + case 'failed':
>> + err(result);
>> + break;
>> + default:
>> + break;
>> + }
>> + };
>
> In the 'message' parameter from task, there will be the update output
> process.
> I think would be good to show it to user - but I don't know where in
> the window
>
> example:
>
> Add a tab to the update grid with "Update output" where we can show
> the user the update progress
Good point!
For a complete coverage, we need consider following cases:
1. No Updates Available
Disable "Update All" Button and list nothing in the grid.
2. There are Updates Found
User Logged in Kimchi First Time and He Found Available Updates
Because it's the first time the user found available updates and no
action was taken before, so enable "Update All" Button here.
User operations and system processes:
#1 Clicks "Update All" Button
#2 UI disable the button and send request to update software
#3 Back-end stores the status of the update process (/task can be
used by UI to track it)
#4 User intentionally close the browser or the browser crashes so
the user reopens browser to log in Kimchi
#5 Because updating is time-consuming, so the task is still
running. Here the UI should disable the "Update All" Button and set the
content of the button with "Updating..." to tell the user the progress.
So you can find that we need provide a "progress" here such as 10%, 20%,
etc. to let user know the progress at any time.
#6 After updating completed, list available updates again and if
there is any, enable "Update All" Button at the same time.
*Potential Effort*
The recommended enhancement for above includes:
1) Add a property to host status like:
GET /host
{
// ...
"swupdate": {
"status": "processing or running",
"taskid": "1"
},
"status": "running"
}
2) Enhance task to allow showing progress like:
GET /task/1
{
"id": 1,
"status": "running",
"progress": 0.5
}
3) For UI, we need a new visual widget: progress widget and
integrate it with grid widget.
*Conclusion*
As discussed above, extra effort is needed for the task, so I suggest
add a new item in enhancement and defer it to next release.
>
>> +
>> + kimchi.requestJSON({
>> + url : kimchi.url + 'host/packagesupdate/update',
>
> Need to adjust it according to the latest patches
>
> /host/swupdate
ACK.
>
>> + 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 a5c341b..b6a5878 100644
>> --- a/ui/js/src/kimchi.host.js
>> +++ b/ui/js/src/kimchi.host.js
>> @@ -131,6 +131,69 @@ kimchi.host_main = function() {
>> });
>> };
>>
>> + var softwareUpdatesGridID = 'software-updates-grid';
>> + var softwareUpdatesGrid = null;
>> + 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);
>> + $(updateButton).text(i18n['KCHUPD6007M']).prop('disabled', true);
>> + kimchi.updateSoftwares(function(result) {
>> + $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false);
>> + });
>> + }
>> + }],
>> + 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);
>> + }
>> +
>> + $(softwareUpdatesGridID + '-update-button')
>> + .prop('disabled', softwareUpdates.length === 0);
>> + });
>> + };
>> +
>> var shutdownButtonID = '#host-button-shutdown';
>> var restartButtonID = '#host-button-restart';
>> var shutdownHost = function(params) {
>> @@ -189,6 +252,8 @@ kimchi.host_main = function() {
>> kimchi.keepMonitoringHost = this['checked'];
>> });
>>
>> + listSoftwareUpdates();
>> +
>> kimchi.getCapabilities(function(capabilities) {
>> if(!capabilities['system_report_tool']) {
>> return;
>> diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
>> index 098a0a9..a9d86b3 100644
>> --- a/ui/pages/i18n.html.tmpl
>> +++ b/ui/pages/i18n.html.tmpl
>> @@ -94,6 +94,15 @@ var i18n = {
>> 'KCHDR6010M': "$_("Download")",
>>
>>
>> + '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?")",
>>
>> 'KCHNET6001E': "$_("The VLAN id must be between 1 and 4094.")",
>> diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl
>> index d32773a..1de4fcd 100644
>> --- a/ui/pages/tabs/host.html.tmpl
>> +++ b/ui/pages/tabs/host.html.tmpl
>> @@ -123,6 +123,19 @@
>> </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>
>> + </div>
>> + </div>
>> + </div>
>> <div id="debug-report-section" class="host-section
>> hidden">
>> <h3 class="section-header"
>> aria-controls="content-sys-reports">
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140221/32b869ec/attachment.html>
More information about the Kimchi-devel
mailing list