[Kimchi-devel] [PATCH V2] Issue #296 [enhance]kimchi UI should not waiting while generating reports

[Wang Wen]

From: Wen Wang <wenwang at linux.vnet.ibm.com>

V1 -> V2
Accroding to Yu Xin, this patch move the progress bar to the top of the
grid and use ellipsis for hiding the name that is too long for the
generating progress bar.

1) Removed the dialogue window when generating a debug report.
2) Designed an animation bar indicate user there is a report generating
   during the generating progress.
3) Disable the buttons' functions in debug report area when generating a new
   report in case there might be any conflict. Meanwhile user can operate
   on other parts of Kimchi.
4) Enable all buttonss' functions in debug report area after generating
   progress.
---
 ui/css/theme-default/host.css       |   28 ++++++++++++++++++++++++++++
 ui/js/src/kimchi.report_add_main.js |   30 +++++++++++++++++++++++++-----
 2 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css
index ed28d25..4e319cb 100644
--- a/ui/css/theme-default/host.css
+++ b/ui/css/theme-default/host.css
@@ -219,6 +219,34 @@
     width: 200px;
 }
 
+#id-generate-bar {
+    text-align: center;
+    vertical-align: middle;
+}
+
+#id-generate-panel {
+    vertical-align: middle;
+    margin: 0 auto;
+    text-align: center;
+    height: 20px;
+    width: 250px;
+    border: 1px solid #ccc;
+    background-color: #5af;
+    color: #fff;
+    background: #5af url(../../images/theme-default/loading.gif) 25px
+            center no-repeat;
+    padding-left: 26px;
+}
+
+#id-generating > span{
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    max-width: 120px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 /* End of Debug Report */
 
 /* Software Updates */
diff --git a/ui/js/src/kimchi.report_add_main.js b/ui/js/src/kimchi.report_add_main.js
index 8759c2b..f8149ea 100644
--- a/ui/js/src/kimchi.report_add_main.js
+++ b/ui/js/src/kimchi.report_add_main.js
@@ -1,4 +1,5 @@
 kimchi.report_add_main = function() {
+    var reportGridID = 'available-reports-grid';
     var addReportForm = $('#form-report-add');
     var submitButton = $('#button-report-add');
     var nameTextbox = $('input[name="name"]', addReportForm);
@@ -13,12 +14,31 @@ kimchi.report_add_main = function() {
             return false;
         }
         var formData = addReportForm.serializeObject();
-        submitButton
-            .text(i18n['KCHDR6007M'])
-            .prop('disabled', true);
-        nameTextbox.prop('disabled', true);
+        kimchi.window.close();
+        var reportGrid = null;
+        $('#' + reportGridID + '-generate-button').prop('disabled',true);
+        $('#' + reportGridID + '-remove-button').prop('disabled',true);
+        $('#' + reportGridID + '-download-button').prop('disabled',true);
+        $('#' + reportGridID + '-rename-button').prop('disabled',true);
+        $('#' + reportGridID).find('.grid-body').find('table').find('tr').click(function() {
+            $('#' + reportGridID + '-remove-button').prop('disabled',true);
+            $('#' + reportGridID + '-download-button').prop('disabled',true);
+            $('#' + reportGridID + '-rename-button').prop('disabled',true);
+        });
+        $('#available-reports-grid').find('.grid-frozen-body-view').find('table').prepend('<tr id="temp-row-col1"><td></td></tr>');
+        $('#available-reports-grid').find('.grid-body-view').find('table').prepend('<tr id="temp-row-col2"><td id="id-generate-bar"; colspan="2"></td></tr>');
+        var textboxValue = $('#report-name-textbox').val();
+        $('#id-generate-bar').append('<div id="id-generate-panel"></div>');
+        if (textboxValue != "") {
+            $('#id-generate-panel').append('<div id="id-generating"><span>"' + textboxValue + '</span><span>" is ' + i18n['KCHDR6007M'] + '</span></div>');
+        }
+        else {
+            $('#id-generate-panel').append('<div id="id-generating">' + i18n['KCHDR6007M'] + '</div>');
+        }
         kimchi.createReport(formData, function(result) {
-            kimchi.window.close();
+            $('#temp-row-col1').remove();
+            $('#temp-row-col2').remove();
+            $('#' + reportGridID + '-generate-button').prop('disabled',false);
             kimchi.topic('kimchi/debugReportAdded').publish({
                 result: result
             });
-- 
1.7.1