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

[Hongliang Wang]

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
>               });