[PATCH v6 0/3] UI: Software Update Support

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. Please apply following patch first: * [PATCH] [UI] Grid Enhancement - Show Message when Loading Data v5 -> v6: 6a) Added a loading icon on top of grid when loading data (Adam King's comment) 6b) Removed row number column (Adam King's comment) v4 -> v5: 5a) Disable row selection in software update grid (Thanks to Royce's comment) 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) Hongliang Wang (3): Software Update - i18n Translation Strings Software Update - APIs in kimchi.api.js Software Update Support in Host Tab ui/css/theme-default/host.css | 29 ++++++++++++ ui/js/src/kimchi.api.js | 55 +++++++++++++++++++++- ui/js/src/kimchi.host.js | 104 ++++++++++++++++++++++++++++++++++++++---- ui/pages/i18n.html.tmpl | 10 ++++ ui/pages/tabs/host.html.tmpl | 17 +++++++ 5 files changed, 206 insertions(+), 9 deletions(-) -- 1.8.1.4

Added i18n strings. Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- ui/pages/i18n.html.tmpl | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl index 1a3a6d2..2f47e50 100644 --- a/ui/pages/i18n.html.tmpl +++ b/ui/pages/i18n.html.tmpl @@ -79,6 +79,16 @@ var i18n = { 'KCHHOST6007M': "$_("Sent")", 'KCHHOST6008M': "$_("Shutting down or restarting host will cause unsaved work lost. Continue to shut down/restarting?")", + + 'KCHUPD6001M': "$_("Software Updates")", + 'KCHUPD6002M': "$_("Package Name")", + 'KCHUPD6003M': "$_("Version")", + 'KCHUPD6004M': "$_("Architecture")", + 'KCHUPD6005M': "$_("Repository")", + 'KCHUPD6006M': "$_("Update All")", + 'KCHUPD6007M': "$_("Updating...")", + + 'KCHDR6001M': "$_("Debug report will be removed permanently and can't be recovered. Do you want to continue?")", 'KCHDR6002M': "$_("Debug Reports")", 'KCHDR6003M': "$_("Name")", -- 1.8.1.4

Reviewed-by: Adam King <rak@linux.vnet.ibm.com> On 03/12/2014 08:20 AM, Hongliang Wang wrote:
Added i18n strings.
Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- ui/pages/i18n.html.tmpl | 10 ++++++++++ 1 file changed, 10 insertions(+)
diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl index 1a3a6d2..2f47e50 100644 --- a/ui/pages/i18n.html.tmpl +++ b/ui/pages/i18n.html.tmpl @@ -79,6 +79,16 @@ var i18n = { 'KCHHOST6007M': "$_("Sent")", 'KCHHOST6008M': "$_("Shutting down or restarting host will cause unsaved work lost. Continue to shut down/restarting?")",
+ + 'KCHUPD6001M': "$_("Software Updates")", + 'KCHUPD6002M': "$_("Package Name")", + 'KCHUPD6003M': "$_("Version")", + 'KCHUPD6004M': "$_("Architecture")", + 'KCHUPD6005M': "$_("Repository")", + 'KCHUPD6006M': "$_("Update All")", + 'KCHUPD6007M': "$_("Updating...")", + + 'KCHDR6001M': "$_("Debug report will be removed permanently and can't be recovered. Do you want to continue?")", 'KCHDR6002M': "$_("Debug Reports")", 'KCHDR6003M': "$_("Name")",
-- Adam King <rak@linux.vnet.ibm.com> IBM CSI

Added APIs calling in kimchi.api.js. Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- ui/js/src/kimchi.api.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 54 insertions(+), 1 deletion(-) diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js index 02137fb..79518ed 100644 --- a/ui/js/src/kimchi.api.js +++ b/ui/js/src/kimchi.api.js @@ -803,5 +803,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 + }); + }, + + updateSoftware : 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 + }); + } }; -- 1.8.1.4

Reviewed-by: Adam King <rak@linux.vnet.ibm.com> On 03/12/2014 08:20 AM, Hongliang Wang wrote:
Added APIs calling in kimchi.api.js.
Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- ui/js/src/kimchi.api.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 54 insertions(+), 1 deletion(-)
diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js index 02137fb..79518ed 100644 --- a/ui/js/src/kimchi.api.js +++ b/ui/js/src/kimchi.api.js @@ -803,5 +803,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 + }); + }, + + updateSoftware : 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 + }); + } };
-- Adam King <rak@linux.vnet.ibm.com> IBM CSI

Added software update grid in host tab. Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- ui/css/theme-default/host.css | 29 ++++++++++++ ui/js/src/kimchi.host.js | 104 ++++++++++++++++++++++++++++++++++++++---- ui/pages/tabs/host.html.tmpl | 17 +++++++ 3 files changed, 142 insertions(+), 8 deletions(-) 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.host.js b/ui/js/src/kimchi.host.js index 7974054..46b37ee 100644 --- a/ui/js/src/kimchi.host.js +++ b/ui/js/src/kimchi.host.js @@ -22,6 +22,85 @@ kimchi.host_main = function() { $(header).attr('aria-expanded', toExpand ? 'true' : 'false'); }; + 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'], + rowSelection: 'disabled', + 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.updateSoftware(function(result) { + reloadProgressArea(result); + $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false); + kimchi.topic('kimchi/softwareUpdated').publish({ + result: result + }); + }, function() {}, reloadProgressArea); + } + }], + frozenFields: [], + 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: listSoftwareUpdates + }); + }; + + var listSoftwareUpdates = function(gridCallback) { + kimchi.listSoftwareUpdates(function(softwareUpdates) { + if(gridCallback) { + gridCallback(softwareUpdates); + } + else { + if(softwareUpdatesGrid) { + softwareUpdatesGrid.setData(softwareUpdates); + } + else { + initSoftwareUpdatesGrid(softwareUpdates); + } + } + + var updateButton = $('#' + softwareUpdatesGridID + '-update-button'); + $(updateButton).prop('disabled', softwareUpdates.length === 0); + }); + }; + var reportGridID = 'available-reports-grid'; var reportGrid = null; var initReportGrid = function(reports) { @@ -192,18 +271,22 @@ kimchi.host_main = function() { }); kimchi.getCapabilities(function(capabilities) { - if(!capabilities['system_report_tool']) { - return; + if(capabilities['update_tool']) { + $('#software-update-section').removeClass('hidden'); + initSoftwareUpdatesGrid(); + kimchi.topic('kimchi/softwareUpdated') + .subscribe(listSoftwareUpdates); + } + + if(capabilities['system_report_tool']) { + $('#debug-report-section').removeClass('hidden'); + listDebugReports(); + kimchi.topic('kimchi/debugReportAdded') + .subscribe(listDebugReports); } - $('#debug-report-section').removeClass('hidden'); - listDebugReports(); }); }; - kimchi.topic('kimchi/debugReportAdded').subscribe(function(params) { - listDebugReports(); - }); - kimchi.getHost(function(data) { var htmlTmpl = $('#host-tmpl').html(); data['logo'] = data['logo'] || ''; @@ -468,6 +551,11 @@ kimchi.host_main = function() { kimchi.hostTimer = null; delete kimchi.hostTimer; } + + softwareUpdatesGrid && softwareUpdatesGrid.destroy(); + kimchi.topic('kimchi/softwareUpdated').unsubscribe(listSoftwareUpdates); + reportGrid && reportGrid.destroy(); + kimchi.topic('kimchi/debugReportAdded').unsubscribe(listDebugReports); }); }; diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl index 52f849b..179deba 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 hidden"> + <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"> -- 1.8.1.4

Reviewed-by: Adam King <rak@linux.vnet.ibm.com> On 03/12/2014 08:20 AM, Hongliang Wang wrote:
Added software update grid in host tab.
Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- ui/css/theme-default/host.css | 29 ++++++++++++ ui/js/src/kimchi.host.js | 104 ++++++++++++++++++++++++++++++++++++++---- ui/pages/tabs/host.html.tmpl | 17 +++++++ 3 files changed, 142 insertions(+), 8 deletions(-)
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.host.js b/ui/js/src/kimchi.host.js index 7974054..46b37ee 100644 --- a/ui/js/src/kimchi.host.js +++ b/ui/js/src/kimchi.host.js @@ -22,6 +22,85 @@ kimchi.host_main = function() { $(header).attr('aria-expanded', toExpand ? 'true' : 'false'); };
+ 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'], + rowSelection: 'disabled', + 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.updateSoftware(function(result) { + reloadProgressArea(result); + $(updateButton).text(i18n['KCHUPD6006M']).prop('disabled', false); + kimchi.topic('kimchi/softwareUpdated').publish({ + result: result + }); + }, function() {}, reloadProgressArea); + } + }], + frozenFields: [], + 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: listSoftwareUpdates + }); + }; + + var listSoftwareUpdates = function(gridCallback) { + kimchi.listSoftwareUpdates(function(softwareUpdates) { + if(gridCallback) { + gridCallback(softwareUpdates); + } + else { + if(softwareUpdatesGrid) { + softwareUpdatesGrid.setData(softwareUpdates); + } + else { + initSoftwareUpdatesGrid(softwareUpdates); + } + } + + var updateButton = $('#' + softwareUpdatesGridID + '-update-button'); + $(updateButton).prop('disabled', softwareUpdates.length === 0); + }); + }; + var reportGridID = 'available-reports-grid'; var reportGrid = null; var initReportGrid = function(reports) { @@ -192,18 +271,22 @@ kimchi.host_main = function() { });
kimchi.getCapabilities(function(capabilities) { - if(!capabilities['system_report_tool']) { - return; + if(capabilities['update_tool']) { + $('#software-update-section').removeClass('hidden'); + initSoftwareUpdatesGrid(); + kimchi.topic('kimchi/softwareUpdated') + .subscribe(listSoftwareUpdates); + } + + if(capabilities['system_report_tool']) { + $('#debug-report-section').removeClass('hidden'); + listDebugReports(); + kimchi.topic('kimchi/debugReportAdded') + .subscribe(listDebugReports); } - $('#debug-report-section').removeClass('hidden'); - listDebugReports(); }); };
- kimchi.topic('kimchi/debugReportAdded').subscribe(function(params) { - listDebugReports(); - }); - kimchi.getHost(function(data) { var htmlTmpl = $('#host-tmpl').html(); data['logo'] = data['logo'] || ''; @@ -468,6 +551,11 @@ kimchi.host_main = function() { kimchi.hostTimer = null; delete kimchi.hostTimer; } + + softwareUpdatesGrid && softwareUpdatesGrid.destroy(); + kimchi.topic('kimchi/softwareUpdated').unsubscribe(listSoftwareUpdates); + reportGrid && reportGrid.destroy(); + kimchi.topic('kimchi/debugReportAdded').unsubscribe(listDebugReports); }); }; diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl index 52f849b..179deba 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 hidden"> + <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">
-- Adam King <rak@linux.vnet.ibm.com> IBM CSI

The original patch series leaves the "loading" image displayed over the debug reports indefinistly. This patch corrects that error, as well as centering the images over the grid. Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/css/theme-default/grid.css | 10 ++++++---- ui/js/src/kimchi.grid.js | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/ui/css/theme-default/grid.css b/ui/css/theme-default/grid.css index 761d32f..958bdb0 100644 --- a/ui/css/theme-default/grid.css +++ b/ui/css/theme-default/grid.css @@ -218,21 +218,23 @@ left: 0; position: absolute; right: 0; + top: 48px; } .grid-loading { bottom: 0; - height: 68px; + height: 100%; left: 0; margin: auto; right: 0; text-align: center; top: 0; - width: 49px; + width: 100%; } .grid-loading-icon { background: url("../images/theme-default/kimchi-loading.gif") no-repeat left top; - height: 48px; - width: 49px; + height: 100%; + width: 100%; + background-position: center; } diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js index c53e584..2e3d0ed 100644 --- a/ui/js/src/kimchi.grid.js +++ b/ui/js/src/kimchi.grid.js @@ -54,7 +54,7 @@ kimchi.widget.Grid = function(params) { '<div class="grid-resizer hidden"></div>', '</div>', '<div class="grid-footer"></div>', - '<div class="grid-mask">', + '<div class="grid-mask hidden">', '<div class="grid-loading">', '<div class="grid-loading-icon"></div>', '<div class="grid-loading-text"></div>', -- 1.8.1.4

On 03/13/2014 05:51 AM, Adam King wrote:
The original patch series leaves the "loading" image displayed over the debug reports indefinistly. This patch corrects that error, as well as centering the images over the grid. Thanks for the fixes! Though I noticed it and sent a patch to fix it. Sorry for my late patch. See comments inline.
Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/css/theme-default/grid.css | 10 ++++++---- ui/js/src/kimchi.grid.js | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-)
diff --git a/ui/css/theme-default/grid.css b/ui/css/theme-default/grid.css index 761d32f..958bdb0 100644 --- a/ui/css/theme-default/grid.css +++ b/ui/css/theme-default/grid.css @@ -218,21 +218,23 @@ left: 0; position: absolute; right: 0;
+ top: 48px; It's already calculated dynamically because there may be no title bar or toolbar. Don't hard-code here. }
.grid-loading { bottom: 0;
- height: 68px; + height: 100%; left: 0; margin: auto; right: 0; text-align: center; top: 0; - width: 49px; + width: 100%; Adding a "position: absolute;" will center it both horizontally and vertically. }
.grid-loading-icon { background: url("../images/theme-default/kimchi-loading.gif") no-repeat left top; - height: 48px; - width: 49px; + height: 100%; + width: 100%; + background-position: center; Don't change the size of icon. } diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js index c53e584..2e3d0ed 100644 --- a/ui/js/src/kimchi.grid.js +++ b/ui/js/src/kimchi.grid.js @@ -54,7 +54,7 @@ kimchi.widget.Grid = function(params) { '<div class="grid-resizer hidden"></div>', '</div>', '<div class="grid-footer"></div>', - '<div class="grid-mask">', + '<div class="grid-mask hidden">', That's right. '<div class="grid-loading">', '<div class="grid-loading-icon"></div>', '<div class="grid-loading-text"></div>',

On 03/13/2014 12:30 AM, Hongliang Wang wrote:
On 03/13/2014 05:51 AM, Adam King wrote:
The original patch series leaves the "loading" image displayed over the debug reports indefinistly. This patch corrects that error, as well as centering the images over the grid. Thanks for the fixes! Though I noticed it and sent a patch to fix it. Sorry for my late patch. See comments inline.
Sorry, Hongliang! Just see your comments now I've just applied this patch set
Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/css/theme-default/grid.css | 10 ++++++---- ui/js/src/kimchi.grid.js | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-)
diff --git a/ui/css/theme-default/grid.css b/ui/css/theme-default/grid.css index 761d32f..958bdb0 100644 --- a/ui/css/theme-default/grid.css +++ b/ui/css/theme-default/grid.css @@ -218,21 +218,23 @@ left: 0; position: absolute; right: 0;
+ top: 48px; It's already calculated dynamically because there may be no title bar or toolbar. Don't hard-code here. }
.grid-loading { bottom: 0;
- height: 68px; + height: 100%; left: 0; margin: auto; right: 0; text-align: center; top: 0; - width: 49px; + width: 100%; Adding a "position: absolute;" will center it both horizontally and vertically. }
.grid-loading-icon { background: url("../images/theme-default/kimchi-loading.gif") no-repeat left top; - height: 48px; - width: 49px; + height: 100%; + width: 100%; + background-position: center; Don't change the size of icon. } diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js index c53e584..2e3d0ed 100644 --- a/ui/js/src/kimchi.grid.js +++ b/ui/js/src/kimchi.grid.js @@ -54,7 +54,7 @@ kimchi.widget.Grid = function(params) { '<div class="grid-resizer hidden"></div>', '</div>', '<div class="grid-footer"></div>', - '<div class="grid-mask">', + '<div class="grid-mask hidden">', That's right. '<div class="grid-loading">', '<div class="grid-loading-icon"></div>', '<div class="grid-loading-text"></div>',
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel

On 03/13/2014 11:36 AM, Aline Manera wrote:
On 03/13/2014 12:30 AM, Hongliang Wang wrote:
On 03/13/2014 05:51 AM, Adam King wrote:
The original patch series leaves the "loading" image displayed over the debug reports indefinistly. This patch corrects that error, as well as centering the images over the grid. Thanks for the fixes! Though I noticed it and sent a patch to fix it. Sorry for my late patch. See comments inline.
Sorry, Hongliang! Just see your comments now I've just applied this patch set
OK. Let me send another patch to fix remaining issues.
Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/css/theme-default/grid.css | 10 ++++++---- ui/js/src/kimchi.grid.js | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-)
diff --git a/ui/css/theme-default/grid.css b/ui/css/theme-default/grid.css index 761d32f..958bdb0 100644 --- a/ui/css/theme-default/grid.css +++ b/ui/css/theme-default/grid.css @@ -218,21 +218,23 @@ left: 0; position: absolute; right: 0;
+ top: 48px; It's already calculated dynamically because there may be no title bar or toolbar. Don't hard-code here. }
.grid-loading { bottom: 0;
- height: 68px; + height: 100%; left: 0; margin: auto; right: 0; text-align: center; top: 0; - width: 49px; + width: 100%; Adding a "position: absolute;" will center it both horizontally and vertically. }
.grid-loading-icon { background: url("../images/theme-default/kimchi-loading.gif") no-repeat left top; - height: 48px; - width: 49px; + height: 100%; + width: 100%; + background-position: center; Don't change the size of icon. } diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js index c53e584..2e3d0ed 100644 --- a/ui/js/src/kimchi.grid.js +++ b/ui/js/src/kimchi.grid.js @@ -54,7 +54,7 @@ kimchi.widget.Grid = function(params) { '<div class="grid-resizer hidden"></div>', '</div>', '<div class="grid-footer"></div>', - '<div class="grid-mask">', + '<div class="grid-mask hidden">', That's right. '<div class="grid-loading">', '<div class="grid-loading-icon"></div>', '<div class="grid-loading-text"></div>',
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel

On 03/13/2014 05:51 AM, Adam King wrote:
The original patch series leaves the "loading" image displayed over the debug reports indefinistly. This patch corrects that error, as well as centering the images over the grid. Thanks for the fixes! Though I noticed it and sent a patch to fix it. Sorry for my late patch. See comments inline. No worries. Trying to get these closed out before end of iteration...
Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/css/theme-default/grid.css | 10 ++++++---- ui/js/src/kimchi.grid.js | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-)
diff --git a/ui/css/theme-default/grid.css b/ui/css/theme-default/grid.css index 761d32f..958bdb0 100644 --- a/ui/css/theme-default/grid.css +++ b/ui/css/theme-default/grid.css @@ -218,21 +218,23 @@ left: 0; position: absolute; right: 0;
+ top: 48px; It's already calculated dynamically because there may be no title bar or toolbar. Don't hard-code here. I didn't realize. Calculation should override making this redundant,
On 03/12/2014 11:30 PM, Hongliang Wang wrote: though I don't recall seeing that.
}
.grid-loading { bottom: 0;
- height: 68px; + height: 100%; left: 0; margin: auto; right: 0; text-align: center; top: 0; - width: 49px; + width: 100%; Adding a "position: absolute;" will center it both horizontally and vertically. I found a way to center that worked for me. I don't object if you offer a patch that does it better. }
.grid-loading-icon { background: url("../images/theme-default/kimchi-loading.gif") no-repeat left top; - height: 48px; - width: 49px; + height: 100%; + width: 100%; + background-position: center; Don't change the size of icon. Icon size doesn't actually change, at least not in my tests. } diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js index c53e584..2e3d0ed 100644 --- a/ui/js/src/kimchi.grid.js +++ b/ui/js/src/kimchi.grid.js @@ -54,7 +54,7 @@ kimchi.widget.Grid = function(params) { '<div class="grid-resizer hidden"></div>', '</div>', '<div class="grid-footer"></div>', - '<div class="grid-mask">', + '<div class="grid-mask hidden">', That's right. '<div class="grid-loading">', '<div class="grid-loading-icon"></div>', '<div class="grid-loading-text"></div>',
-- Adam King <rak@linux.vnet.ibm.com> IBM CSI

v6 is pretty nice overall, other than the two issues I submitted a patch for. Once applied, we need to come back and add an X to close the update information panel. The set does require these patches before testing: [PATCH] [UI] Grid Enhancement - "title" Attribute for Long Values [PATCH 0/4] Fixes on update and repo management features set On 3/12/2014 8:20 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.
Please apply following patch first: * [PATCH] [UI] Grid Enhancement - Show Message when Loading Data
v5 -> v6: 6a) Added a loading icon on top of grid when loading data (Adam King's comment) 6b) Removed row number column (Adam King's comment)
v4 -> v5: 5a) Disable row selection in software update grid (Thanks to Royce's comment)
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)
Hongliang Wang (3): Software Update - i18n Translation Strings Software Update - APIs in kimchi.api.js Software Update Support in Host Tab
ui/css/theme-default/host.css | 29 ++++++++++++ ui/js/src/kimchi.api.js | 55 +++++++++++++++++++++- ui/js/src/kimchi.host.js | 104 ++++++++++++++++++++++++++++++++++++++---- ui/pages/i18n.html.tmpl | 10 ++++ ui/pages/tabs/host.html.tmpl | 17 +++++++ 5 files changed, 206 insertions(+), 9 deletions(-)
-- Adam King <rak@linux.vnet.ibm.com> IBM C&SI
participants (3)
-
Adam King
-
Aline Manera
-
Hongliang Wang