<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    <div class="moz-cite-prefix">When there are many reports that make
      the grid has a scrollbar, the temp row is always append to the end
      which make it invisible.<br>
      <img src="cid:part1.00020204.08000302@linux.vnet.ibm.com" alt=""><br>
      for current design, when generate a report, need to get the grid
      to scroll down to the bottom to get it seen.<br>
      <br>
      if all actions are disabled, then just make a bar float on top of
      the gird in the middle.<br>
      if you plan to enable some action when generating the report in
      the future, then just keep current design.<br>
      <br>
      On 5/28/2014 9:45 AM, Wen Wang wrote:<br>
    </div>
    <blockquote
      cite="mid:1401241520-12457-1-git-send-email-wenwang@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">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       | 22 +++++++++++++++++++++
 ui/js/src/kimchi.report_add_main.js | 38 ++++++++++++++++++++++++++++++++-----
 2 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css
index 6a1a308..c684c0a 100644
--- a/ui/css/theme-default/host.css
+++ b/ui/css/theme-default/host.css
@@ -219,6 +219,28 @@
     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;
+    color: #fff;
+    border: 1px solid #ccc;
+    background-color: #5af;
+}
+
+#id-generating {
+    font-color: #fff;
+    background: #5af url(../../images/theme-default/loading.gif) 7px
+            center no-repeat;
+    padding-left: 26px;
+}
 /* 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..1e5df89 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,39 @@ 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);
+        $('#available-reports-grid').find('.grid-body').find('table').find('tr').click(function() {</pre>
    </blockquote>
    at the beginning, there is a "reportGridID" defined, so here just
    use that varialble.<br>
    <blockquote
      cite="mid:1401241520-12457-1-git-send-email-wenwang@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">
+            $('#' + reportGridID + '-remove-button').prop('disabled',true);
+            $('#' + reportGridID + '-download-button').prop('disabled',true);
+            $('#' + reportGridID + '-rename-button').prop('disabled',true);
+        });
+        var len = $('#available-reports-grid').find('.grid-frozen-body-view').find('tr').length + 1;
+        $('#available-reports-grid').find('.grid-frozen-body-view').find('table').append('&lt;tr id="temp-row-col1"&gt;&lt;td&gt;' + len + '&lt;/td&gt;&lt;/tr&gt;');
+        $('#available-reports-grid').find('.grid-body-view').find('table').append('&lt;tr id="temp-row-col2"&gt;&lt;td id="id-generate-bar"; colspan="2"&gt;&lt;/td&gt;&lt;/tr&gt;');
+        var textboxValue = $('#report-name-textbox').val();
+        if (textboxValue != "") {
+            if (textboxValue.length &lt;= 15) {
+                $('#id-generate-bar').append('&lt;div id="id-generate-panel"&gt;&lt;/div&gt;');
+                $('#id-generate-panel').append('&lt;label id="id-generating"&gt;&lt;span&gt;' + '"' + textboxValue +'"  ' + i18n['KCHDR6007M'] + '&lt;/span&gt;&lt;/label&gt;');
+            }
+            else {
+                $('#id-generate-bar').append('&lt;div id="id-generate-panel"&gt;&lt;/div&gt;');
+                $('#id-generate-panel').append('&lt;label id="id-generating"&gt;&lt;span&gt;' + '"' + textboxValue.substring(0,13) +'..."  ' + i18n['KCHDR6007M'] + '&lt;/span&gt;&lt;/label&gt;');
+            }
+        }
+        else {
+            $('#id-generate-bar').append('&lt;div id="id-generate-panel"&gt;&lt;/div&gt;');
+            $('#id-generate-panel').append('&lt;label id="id-generating"&gt;&lt;span&gt;' + i18n['KCHDR6007M'] + '&lt;/span&gt;&lt;/label&gt;');
+        }</pre>
    </blockquote>
    Looks like here it is trying to make sure there is sufficient
    horizontal space for the report name<br>
    to make it scalable for different size of real screen estate, try <span
      class="cssPropName editable ">text-overflow</span><span
      class="cssColon ">: </span><span class="cssPropValue editable ">ellipsis</span><span
      class="cssSemi ">; where browser will handle overflow issue.<br>
      Then there is no need to check below, always </span>'"' +
    textboxValue +'" ' + i18n['KCHDR6007M']
    <pre wrap="">if (textboxValue != "")</pre>
    <blockquote
      cite="mid:1401241520-12457-1-git-send-email-wenwang@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">
         kimchi.createReport(formData, function(result) {
-            kimchi.window.close();
+            $('#temp-row-col1').remove();
+            $('#temp-row-col2').remove();</pre>
    </blockquote>
    the whole row need to be removed?<br>
    <blockquote
      cite="mid:1401241520-12457-1-git-send-email-wenwang@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">
+            $('#' + reportGridID + '-generate-button').prop('disabled',false);
             kimchi.topic('kimchi/debugReportAdded').publish({
                 result: result
             });</pre>
    </blockquote>
    why there is no error handling?<br>
    <blockquote
      cite="mid:1401241520-12457-1-git-send-email-wenwang@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">
</pre>
    </blockquote>
    <blockquote
      cite="mid:1401241520-12457-1-git-send-email-wenwang@linux.vnet.ibm.com"
      type="cite">
    </blockquote>
    <br>
  </body>
</html>