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

[Yu Xin Huo]

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?

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140530/6ed212eb/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: gfagahde.png
Type: image/png
Size: 7227 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140530/6ed212eb/attachment.png>