[PATCH V7 0/2]Issue#296 UI redesign when generating debug reports
From: Wen Wang <wenwang@linux.vnet.ibm.com> Issue#296 debug report: kimchi UI should not waiting while generating reports V6 -> V7 Bug fixed: Multiple generate indicator apperars when generating a debug report V5 -> V6 Added 10px margin to the left of the grid data (Aline) remove generate progross indicator when error appears during generating report (Aline) V4 -> V5 Deleted one useless line that change the loading icon's size V3 -> V4 Changed generating logo(Hong Liang Wang) V2 -> V3 Change the layout of the grid: Removed the frist column that has line number Changed the progress bar layout that make the whole table more consistant. V1 -> V2 Accroding to Yu Xin, this patch move the progress bar to the top of the grid and use ellipsis for hiding the name that is too long for the generating progress bar. 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. Wang Wen (2): Remove the first column of debug report grid Added the generating progress indicator ui/css/theme-default/host.css | 14 +++++-- ui/css/theme-default/report-add.css | 9 +---- ui/images/theme-default/kimchi-loading.gif | Bin 6181 -> 6181 bytes ui/images/theme-default/kimchi-loading15x15.gif | Bin 0 -> 1653 bytes ui/js/src/kimchi.host.js | 6 +-- ui/js/src/kimchi.report_add_main.js | 48 ++++++++++++++++++---- ui/pages/i18n.html.tmpl | 1 + 7 files changed, 52 insertions(+), 26 deletions(-) create mode 100644 ui/images/theme-default/kimchi-loading15x15.gif
From: Wang Wen <wenwang@linux.vnet.ibm.com> V1 -> V2: Added a 10px margin to the left of the grid Have the first column of debug report grid which indicate numbers removed --- ui/css/theme-default/host.css | 8 ++++---- ui/js/src/kimchi.host.js | 6 +----- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css index edebdb9..5c9a119 100644 --- a/ui/css/theme-default/host.css +++ b/ui/css/theme-default/host.css @@ -196,6 +196,10 @@ } /* Debug Report */ +.cell-text-wrapper { + margin-left: 10px; +} + .host-panel #available-reports-grid { border-color: #ddd; height: 400px; @@ -210,10 +214,6 @@ margin: .2em 1em; } -.debug-report-id { - width: 30px; -} - .debug-report-name, .debug-report-time { width: 200px; diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js index c7e8f8d..f3de831 100644 --- a/ui/js/src/kimchi.host.js +++ b/ui/js/src/kimchi.host.js @@ -357,11 +357,7 @@ kimchi.host_main = function() { $('#' + reportGridID + '-download-button') .prop('disabled', false); }, - frozenFields: [{ - name: 'id', - label: ' ', - 'class': 'debug-report-id' - }], + frozenFields: [], fields: [{ name: 'name', label: i18n['KCHDR6003M'], -- 1.7.1
From: Wang Wen <wenwang@linux.vnet.ibm.com> V2 -> V3 Bug fixed: Multiple generate indicator appears when generating the debug report V1 -> V2 Remove the generating progress indicator when debug error appears Have the generating progress indicator added, which will be removed after generating progress finished. --- ui/css/theme-default/host.css | 6 +++ ui/css/theme-default/report-add.css | 9 +---- ui/images/theme-default/kimchi-loading.gif | Bin 6181 -> 6181 bytes ui/images/theme-default/kimchi-loading15x15.gif | Bin 0 -> 1653 bytes ui/js/src/kimchi.report_add_main.js | 48 ++++++++++++++++++---- ui/pages/i18n.html.tmpl | 1 + 6 files changed, 47 insertions(+), 17 deletions(-) create mode 100644 ui/images/theme-default/kimchi-loading15x15.gif diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css index 5c9a119..96e78b7 100644 --- a/ui/css/theme-default/host.css +++ b/ui/css/theme-default/host.css @@ -219,6 +219,12 @@ width: 200px; } +#id-debug-img { + background: url(../../images/theme-default/kimchi-loading15x15.gif) 12px + center no-repeat; + padding-left: 23px; +} + /* End of Debug Report */ /* Software Updates */ diff --git a/ui/css/theme-default/report-add.css b/ui/css/theme-default/report-add.css index 236029a..3e52f63 100644 --- a/ui/css/theme-default/report-add.css +++ b/ui/css/theme-default/report-add.css @@ -12,11 +12,4 @@ box-sizing: border-box; margin: .5em 0; width: 100%; -} - -#button-report-add[disabled] { - background: #c0c0c0 url(../../images/theme-default/loading.gif) 7px - center no-repeat; - color: #DDD; - padding-left: 26px; -} +} \ No newline at end of file diff --git a/ui/images/theme-default/kimchi-loading.gif b/ui/images/theme-default/kimchi-loading.gif index af92bfdc0a44170c71fb7406d2c6bc359e176e91..233bd5f140d63a30b1944cce33bcb68aedea2efc 100644 GIT binary patch delta 88 zcmV-e0H^<@Fr_fCm;;k$7rv8U1SFGw6zr2G7eJGc53{o%6$S#cH52OrvqKOD0<&-o uF$0ru3=or#2XC`H3Pb|4j|Z&+ll})}v#kcT0h6r;3zKmLNRyZY#{oNnW*-Fr delta 92 zcmZ2#u+(6~4CcwP;>R}&2(dFx<`NH{T);nJ@>_B4$@_#Nfqd@G38JeQH;W73V%#L) w!n8SoN0E7Q70aT{UR-QUK*pQR@f@!iC(E#UZC=c_hjDTmtHb0O%=;Lv0m~sDe*gdg diff --git a/ui/images/theme-default/kimchi-loading15x15.gif b/ui/images/theme-default/kimchi-loading15x15.gif new file mode 100644 index 0000000000000000000000000000000000000000..aaa4f85a0560dcb59d4bb70154a9144417aae926 GIT binary patch literal 1653 zcmZ?wbhEHb6krfwcz&0`fx$V3fzy*s(30KRoyj+pP0*a%B9B4Xkl)0X$H9|dJd8D} zo<ZDBSSFF7*jZT0OhTc9Q7nTgk3rREDud*7MxI>8&Ju=(ISf+93MQOdag7Y~1hic{ z8T#{u6)cohTNtM^7+W$J#50+i$>`cj=^O84k`pyFn#{1$Ur8%a&i6QjtgEuCfQhw> zh77A6gQ$gokA@_-E$2dp^>Sv?oMy2Rvbjr`S1FsTIOwZtnQE_R*m$2oUC1KhF@wT7 z#vS5TPBXdYi#jqhIC*|#&}Xr)`pY25?86wZk@$x}Azj<#4}*rAu{Vcnu(UhJUj}_& zGsWW!mvn9Irz#jqI|d0m<_4Kq$D4?%x#%8bJFV#KwS(tqvz9fdTmMyIV-~+CKU<>^ zTODbStQ;$e9OEp8kfaJrQB(IojUXN?PfLA&1ruKlE$<Ybz{O>Dnh|c+IZj3l84L_z z+ZiGkGQ_8gg)Ec{ZB|VbVu;;p8Ir+}TJcZ8St};J)7e)ugI_wAy~kUSA^Gq;v#nzB zo6<uZ9TN=&l6EuXHCx41&a>X&p6tkweNrgxtWY&KLrITauKX0wDL;*ZSPITdWuHCl z7S2#|o1wN-skGcGd-j}YNrw7v?ff;HUH7htly%83WoVk=SR=P3TA8QnVNZtdt|Td^ z4tBRT;l<gOCKJSuq^f)gOk<w3o@>%d>z1S5joVY2V;E+x4Cszxn7#dGQiZ}|@k{wq ze5<)H#@>~ixp+mvx~nC^*GqKvReGJxyd=J8Z|Hp0)LG8{Q?7j|(|J;(^S(;?X-VtX z{Ej0{$vo>WNUb@RHtpd12Emt&YTJ7ve>HRaY*WxWB$BmO<7<oVrMfE&d+u577yI7H zdv${AuTG6`J!)PD74G*(XRN&WpI$)mKewN2NU*bGfUA+70W%{51B2pE7EU3C{|q`n zHZYS2Ffee)GW_S1@z}87U^9oXR?LYF3lFyoD0|KE*tqCuBO@a=9coY=j!k!j<aB0i zc<9u4hfS*nq@!EHIP1=djf>s;v1`@Ep>^V-!(BqkNq@`*laF`Fn|H~0Zd!7(0h{Hf zM42F;^~FLc<zy?bzucZ38xtI`nPf?{Nk)rZI#dI#a%KcAJ>AR3%!JJ}Tb!mjcL>V+ z&Dl|qe5_B>QtnB`#6;Il`9QBD85<TlO;@&EX5(p~fXzf_h=~b~c^s@tPtrczcWUF8 zl$)Y)G4W`lxU|rj6$Xj!z4E$EBA!9O@K)2-%Q<1V)NzW4rQ4Q{qQ@s^Df6<iU^CYa zVJ@$f%ZvcUgKd2BZZRt+Jap&~-N|`mN5EtIK6cxtnin4*pO_@<TefG1V5)aFPwc)q zGcP6L3rdhvk&Uz{R5;QluAbJjV`8#<o~Uk<jm4+?Cwh5=mxY`NNH{%#3wux+Vs{|2 sX~(-16pJpOC{Q`pufUDnn>s|9;tWh`McC5^G?`;~3OSj#0+YEl0GD)I?EnA( literal 0 HcmV?d00001 diff --git a/ui/js/src/kimchi.report_add_main.js b/ui/js/src/kimchi.report_add_main.js index 8759c2b..ad2bb39 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,44 @@ 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(); + $('#' + reportGridID + '-generate-button').prop('disabled',true); + $('#' + reportGridID + '-remove-button').prop('disabled',true); + $('#' + reportGridID + '-download-button').prop('disabled',true); + $('#' + reportGridID + '-rename-button').prop('disabled',true); + $('.grid-body table tr', '#' + reportGridID).click(function() { + $('#' + reportGridID + '-remove-button').prop('disabled',true); + $('#' + reportGridID + '-download-button').prop('disabled',true); + $('#' + reportGridID + '-rename-button').prop('disabled',true); + }); + var textboxValue = $('#report-name-textbox').val(); + if (textboxValue != "") { + $('.grid-body-view table', '#' + reportGridID).prepend( + '<tr>' + + '<td>' + + '<div class="cell-text-wrapper">' + textboxValue + '</div>' + + '</td>' + + '<td id ="id-debug-img">' + + '<div class="cell-text-wrapper">' + i18n['KCHDR6007M'] + '</div>' + + '</td>' + + '</tr>' + ); + } + else { + $('.grid-body-view table', '#' + reportGridID).prepend( + '<tr>' + + '<td>' + + '<div class="cell-text-wrapper">' + i18n['KCHDR6012M'] + '</div>' + + '</td>' + + '<td id ="id-debug-img">' + + '<div class="cell-text-wrapper">' + i18n['KCHDR6007M'] + '</div>' + + '</td>' + + '</tr>' + ); + } kimchi.createReport(formData, function(result) { - kimchi.window.close(); + $('.grid-body-view table tr:first-child', '#' + reportGridID).remove(); + $('#' + reportGridID + '-generate-button').prop('disabled',false); kimchi.topic('kimchi/debugReportAdded').publish({ result: result }); @@ -32,10 +65,7 @@ kimchi.report_add_main = function() { var errText = result['responseJSON']['reason']; } result && kimchi.message.error(errText) - submitButton - .text(i18n['KCHDR6006M']) - .prop('disabled', false); - nameTextbox.prop('disabled', false).focus(); + $('.grid-body-view table tr:first-child', '#' + reportGridID).remove(); }); event.preventDefault(); diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl index 25b81c2..375a37a 100644 --- a/ui/pages/i18n.html.tmpl +++ b/ui/pages/i18n.html.tmpl @@ -124,6 +124,7 @@ var i18n = { 'KCHDR6009M': "$_("Remove")", 'KCHDR6010M': "$_("Download")", 'KCHDR6011M': "$_("Report name should contain only letters, digits and/or hyphen ('-').")", + 'KCHDR6012M': "$_("Pending...")", 'KCHVM6001M': "$_("This will delete the virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")", 'KCHVM6002M': "$_("Power off Confirmation")", -- 1.7.1
Pls ignore this patch On 06/12/2014 12:32 PM, Wen Wang wrote:
From: Wen Wang <wenwang@linux.vnet.ibm.com>
Issue#296 debug report: kimchi UI should not waiting while generating reports
V6 -> V7 Bug fixed: Multiple generate indicator apperars when generating a debug report
V5 -> V6 Added 10px margin to the left of the grid data (Aline) remove generate progross indicator when error appears during generating report (Aline)
V4 -> V5 Deleted one useless line that change the loading icon's size
V3 -> V4 Changed generating logo(Hong Liang Wang)
V2 -> V3 Change the layout of the grid: Removed the frist column that has line number Changed the progress bar layout that make the whole table more consistant.
V1 -> V2 Accroding to Yu Xin, this patch move the progress bar to the top of the grid and use ellipsis for hiding the name that is too long for the generating progress bar.
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.
Wang Wen (2): Remove the first column of debug report grid Added the generating progress indicator
ui/css/theme-default/host.css | 14 +++++-- ui/css/theme-default/report-add.css | 9 +---- ui/images/theme-default/kimchi-loading.gif | Bin 6181 -> 6181 bytes ui/images/theme-default/kimchi-loading15x15.gif | Bin 0 -> 1653 bytes ui/js/src/kimchi.host.js | 6 +-- ui/js/src/kimchi.report_add_main.js | 48 ++++++++++++++++++---- ui/pages/i18n.html.tmpl | 1 + 7 files changed, 52 insertions(+), 26 deletions(-) create mode 100644 ui/images/theme-default/kimchi-loading15x15.gif
participants (1)
-
Wen Wang