Re: [Kimchi-devel] [PATCHv3 2/2] Issue#348: Fix UI for nfs mount

From: Royce Lv <lvroyce(a)linux.vnet.ibm.com&gt; When NFS mount is progressing, all input will be blocked, and a waiting button will show user mounting is in progress. Signed-off-by: Royce Lv <lvroyce(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/storage.css | 7 +++++++ ui/js/src/kimchi.storagepool_add_main.js | 10 ++++++++++ ui/pages/storagepool-add.html.tmpl | 1 + 3 files changed, 18 insertions(+) diff --git a/ui/css/theme-default/storage.css b/ui/css/theme-default/storage.css index 4c2f46f..e94c1ec 100644 --- a/ui/css/theme-default/storage.css +++ b/ui/css/theme-default/storage.css @@ -582,3 +582,10 @@ .storage-window .form-section .field { overflow: visible; } + +#pool-loading { + margin: 10px 15px; + background: #C0C0C0 url(../../images/theme-default/loading.gif) 7px + center no-repeat; + padding: 0 20px 0 26px; +} diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js index 0f3df32..2584b38 100644 --- a/ui/js/src/kimchi.storagepool_add_main.js +++ b/ui/js/src/kimchi.storagepool_add_main.js @@ -198,6 +198,7 @@ kimchi.validateNfsForm = function () { kimchi.message.error.code('KCHPOOL6005E'); return false; } + $('#nfs-mount-loading').removeClass('hidden'); return true; }; @@ -236,6 +237,8 @@ kimchi.validateLogicalForm = function () { }; kimchi.addPool = function(event) { + $('#pool-doAdd').hide(); + $('#pool-loading').show(); if (kimchi.validateForm()) { var formData = $('#form-pool-add').serializeObject(); delete formData.authname; @@ -273,6 +276,7 @@ kimchi.addPool = function(event) { } else if (poolType === 'scsi'){ formData.source = { adapter_name: $('#scsiAdapter').selectMenu('value') }; } + $('input', '#form-pool-add').attr('disabled','disabled'); if (poolType === 'logical') { var settings = { title : i18n['KCHAPI6001M'], @@ -286,6 +290,9 @@ kimchi.addPool = function(event) { kimchi.window.close(); }, function(err) { kimchi.message.error(err.responseJSON.reason); + $('input', '#form-pool-add').removeAttr('disabled'); + $('#pool-loading').hide(); + $('#pool-doAdd').show(); }); }, function() { }); @@ -295,6 +302,9 @@ kimchi.addPool = function(event) { kimchi.window.close(); }, function(err) { kimchi.message.error(err.responseJSON.reason); + $('input', '#form-pool-add').removeAttr('disabled'); + $('#pool-loading').hide(); + $('#pool-doAdd').show(); }); } } diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl index ba85e6e..6840e9c 100644 --- a/ui/pages/storagepool-add.html.tmpl +++ b/ui/pages/storagepool-add.html.tmpl @@ -155,6 +155,7 @@ <button id="pool-doAdd" class="btn-normal"> <span class="text">$_("Create")</span> </button> + <button class="btn-normal" id="pool-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button> </div> </footer> </div>