[Kimchi-devel] [PATCH 1/2] Add the nfs server select UI

[zhoumeina]

This patch is working adding a select box in create nfs pool,
when user don't want to input the server ip or name, he can
simply select "used the server I have used before" and choose
a server in a select box, this is more convinent.
Signed-off-by: zhoumeina <zhoumein at linux.vnet.ibm.com>
---
 ui/css/theme-default/storage.css         |    2 +-
 ui/js/src/kimchi.api.js                  |    2 +-
 ui/js/src/kimchi.storagepool_add_main.js |   32 ++++++++++++++++++-----------
 ui/pages/i18n.html.tmpl                  |    3 +-
 ui/pages/storagepool-add.html.tmpl       |   17 +++++++--------
 5 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/ui/css/theme-default/storage.css b/ui/css/theme-default/storage.css
index 7bb685f..ae89f1b 100644
--- a/ui/css/theme-default/storage.css
+++ b/ui/css/theme-default/storage.css
@@ -548,7 +548,7 @@
 
 .storage-type-wrapper-controls > .dropdown {
     margin: 5px 0 0 1px;
-    width: 100px;
+    width: 150px;
 }
 
 .storage-type-wrapper-controls input[type="text"][disabled] {
diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index 0461b30..3af1673 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -684,7 +684,7 @@ var kimchi = {
     },
 
     getStorageServers: function(type, suc, err) {
-        var url = kimchi.url + 'storageservers?type=' + type;
+        var url = kimchi.url + 'storageservers?target_type=' + type;
         kimchi.requestJSON({
             url : url,
             type : 'GET',
diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
index 42c6bf5..5cd5b15 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -52,6 +52,23 @@ kimchi.initStorageAddPage = function() {
             $('.host-partition').html(listHtml);
         }
         kimchi.select('storagePool-list', options);
+        kimchi.getStorageServers('netfs', function(data) {
+            console.log($("#nfsServerSelect").val());
+            var serverContent = [];
+            serverContent.push({
+                label : i18n['select_default'],
+                value : ''
+            });
+            if (data.length > 0) {
+                $.each(data, function(index, value) {
+                    serverContent.push({
+                        label : value,
+                        value : value
+                    });
+                });
+            }
+            kimchi.select('nfs-server-used', serverContent);
+        });
         $('#poolType').change(function() {
             if ($(this).val() === 'dir') {
                 $('.path-section').removeClass('tmpl-html');
@@ -74,20 +91,11 @@ kimchi.initStorageAddPage = function() {
             } else {
                 $('#nfsServerInputDiv').addClass('tmpl-html');
                 $('#nfsServerChooseDiv').removeClass('tmpl-html');
-                kimchi.getStorageServers('netfs', function(data) {
-                    var serverContent = [];
-                    if (data.length > 0) {
-                        $.each(data, function(index, value) {
-                            serverContent.push({
-                                label : data.value,
-                                value : data.value
-                            });
-                        });
-                    }
-                    kimchi.select('nfs-server-used', serverContent);
-                });
             }
         });
+        $('#nfsServerSelect').change(function() {
+            $('#nfsserverId').val($(this).val());
+        });
     });
 };
 
diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
index c1fc3d1..45c301d 100644
--- a/ui/pages/i18n.html.tmpl
+++ b/ui/pages/i18n.html.tmpl
@@ -121,7 +121,8 @@ var i18n = {
     'action_create': "$_("Create")",
     'msg_warning': "$_("Warning")",
     'msg.logicalpool.confirm.delete': "$_("It will format your disk and you will loose any data in"
-                                      " there, are you sure to continue? ")"
+                                      " there, are you sure to continue? ")",
+    'select_default': "$_("Please choose")",
 };
 </script>
 </body>
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
index 9d16ae6..31af028 100644
--- a/ui/pages/storagepool-add.html.tmpl
+++ b/ui/pages/storagepool-add.html.tmpl
@@ -83,19 +83,18 @@
                             <input id="nfsserverId" type="text" class="text"
                                 style="width: 300px">
                         </div>
-                        <div id="nfsServerChooseDiv" class="tmpl-html">
+                        <div id="nfsServerChooseDiv" class="field tmpl-html" style="overflow:visible">
                             <p class="text-help">
                                 $_("Please choose the nfs server you want to create storage pool.")</p>
-                            <div class="storage-type-wrapper-controls">
-                            <div class="btn-select dropdown popable">
-                            <span class="text" id="nfs-server-label"></span><span class="arrow"></span>
-                            <div class="popover" style="width: 100%">
-                                <ul class="select-list" id="nfs-server-used" data-target="nfsServerSelect" data-label="nfs-server-label">
-                                </ul>
+                            <div class="btn-select dropdown popable" style="width: 285px">
+                                <input id="nfsServerSelect" type="hidden"/>
+                                <span class="text" id="nfs-server-label"></span><span class="arrow"></span>
+                                <div class="popover" style="width: 100%">
+                                    <ul class="select-list" id="nfs-server-used" data-target="nfsServerSelect" data-label="nfs-server-label">
+                                    </ul>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                        </div>
                     </section>
                     <section class="form-section">
                         <h2>4. $_("NFS Path")</h2>
-- 
1.7.1