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

[lvroyce at linux.vnet.ibm.com]

From: Royce Lv <lvroyce at linux.vnet.ibm.com>

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 at linux.vnet.ibm.com>
---
 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>
-- 
1.8.3.2