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.

for current design, when generate a report, need to get the grid to scroll down to the bottom to get it seen.

if all actions are disabled, then just make a bar float on top of the gird in the middle.
if you plan to enable some action when generating the report in the future, then just keep current design.

On 5/28/2014 9:45 AM, Wen Wang wrote:
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() {
at the beginning, there is a "reportGridID" defined, so here just use that varialble.
+            $('#' + 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('<tr id="temp-row-col1"><td>' + len + '</td></tr>');
+        $('#available-reports-grid').find('.grid-body-view').find('table').append('<tr id="temp-row-col2"><td id="id-generate-bar"; colspan="2"></td></tr>');
+        var textboxValue = $('#report-name-textbox').val();
+        if (textboxValue != "") {
+            if (textboxValue.length <= 15) {
+                $('#id-generate-bar').append('<div id="id-generate-panel"></div>');
+                $('#id-generate-panel').append('<label id="id-generating"><span>' + '"' + textboxValue +'"  ' + i18n['KCHDR6007M'] + '</span></label>');
+            }
+            else {
+                $('#id-generate-bar').append('<div id="id-generate-panel"></div>');
+                $('#id-generate-panel').append('<label id="id-generating"><span>' + '"' + textboxValue.substring(0,13) +'..."  ' + i18n['KCHDR6007M'] + '</span></label>');
+            }
+        }
+        else {
+            $('#id-generate-bar').append('<div id="id-generate-panel"></div>');
+            $('#id-generate-panel').append('<label id="id-generating"><span>' + i18n['KCHDR6007M'] + '</span></label>');
+        }
Looks like here it is trying to make sure there is sufficient horizontal space for the report name
to make it scalable for different size of real screen estate, try text-overflow: ellipsis; where browser will handle overflow issue.
Then there is no need to check below, always
'"' + textboxValue +'" ' + i18n['KCHDR6007M']
if (textboxValue != "")
         kimchi.createReport(formData, function(result) {
-            kimchi.window.close();
+            $('#temp-row-col1').remove();
+            $('#temp-row-col2').remove();
the whole row need to be removed?
+            $('#' + reportGridID + '-generate-button').prop('disabled',false);
             kimchi.topic('kimchi/debugReportAdded').publish({
                 result: result
             });
why there is no error handling?