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

[Wang Wen]

Good point. For current process, I enabled all other parts of Kimchi 
except the Debug report area. I have some thoughts of enable the buttons 
when generating the debug report which don't seem to work with current 
design. I believe it's better to enable the buttons during the 
generating procedure. I will have that done in the future.

Thanks Hongliang!

On 05/30/2014 05:03 PM, Hongliang Wang wrote:
> What if I want to rename/remove/download another debug report when 
> there is a new debug report being generated? All buttons are disabled 
> when generating a debug report so it's impossible to access any debug 
> reports.
>
> On 05/28/2014 09: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() 
>> {
>> +            $('#' + 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>');
>> +        }
>>           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
>>               });
>