[PATCH V1 1/2] Add nfs server and target UI in create storage pool

27 Dec 2013

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@linux.vnet.ibm.com>
---
 ui/css/theme-default/button.css          |   11 +++----
 ui/css/theme-default/form.css            |    6 ++++
 ui/css/theme-default/storage.css         |    4 +-
 ui/js/Makefile.am                        |    4 +-
 ui/js/src/kimchi.api.js                  |   26 +++++++++++++++++-
 ui/js/src/kimchi.storagepool_add_main.js |   43 ++++++++++++++++++++++++++++++
 ui/pages/i18n.html.tmpl                  |    4 ++-
 ui/pages/storagepool-add.html.tmpl       |   39 +++++++++++++++++++++------
 8 files changed, 116 insertions(+), 21 deletions(-)

diff --git a/ui/css/theme-default/button.css b/ui/css/theme-default/button.css
index c7ed3f6..f99679a 100644
--- a/ui/css/theme-default/button.css
+++ b/ui/css/theme-default/button.css
@@ -247,17 +247,16 @@
 .btn-select {
     display: inline-block;
     position: relative;
-    height: 38px;
+    height: 30px;
     padding-right: 20px;
     margin: 5px;
     vertical-align: top;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
-    border-radius: 5px;
-    background: #eee;
+    background: #fff;
     box-shadow: -1px -1px 1px #666, 1px 1px 1px #fff, 2px 2px 2px rgba(0, 0, 0, .15) inset;
     font-size: 13px;
-    line-height: 38px;
+    line-height: 30px;
     text-align: left;
     cursor: pointer;
 }
@@ -269,8 +268,8 @@
 .btn-select .arrow {
     position: absolute;
     width: 15px;
-    height: 38px;
-    line-height: 38px;
+    height: 30px;
+    line-height: 30px;
     top: 0;
     right: 5px;
     background: url(../images/theme-default/arrow-down-black.png) no-repeat center center;
diff --git a/ui/css/theme-default/form.css b/ui/css/theme-default/form.css
index c24b277..9db4bba 100644
--- a/ui/css/theme-default/form.css
+++ b/ui/css/theme-default/form.css
@@ -45,3 +45,9 @@
     line-height: 30px;
     padding: 0 5px;
 }
+
+.text-help {
+	font-size: 12px;
+    color: #333;
+    margin: 0 0 5px 5px;
+}
diff --git a/ui/css/theme-default/storage.css b/ui/css/theme-default/storage.css
index d81dc75..ae89f1b 100644
--- a/ui/css/theme-default/storage.css
+++ b/ui/css/theme-default/storage.css
@@ -529,7 +529,7 @@
     width: 300px;
     display: inline-block;
     vertical-align: top;
-    padding: 5px 5px 5px 20px;
+    padding: 5px 5px 5px 22px;
 }
 
 .storage-type-wrapper-controls input[type="text"] {
@@ -548,7 +548,7 @@
 
 .storage-type-wrapper-controls > .dropdown {
     margin: 5px 0 0 1px;
-    width: 250px;
+    width: 150px;
 }
 
 .storage-type-wrapper-controls input[type="text"][disabled] {
diff --git a/ui/js/Makefile.am b/ui/js/Makefile.am
index 337e369..8dfd4d6 100644
--- a/ui/js/Makefile.am
+++ b/ui/js/Makefile.am
@@ -20,7 +20,7 @@
 
 SUBDIRS = novnc
 
-EXTRA_DIST = src
+EXTRA_DIST = src widgets
 
 jsdir = $(datadir)/kimchi/ui/js
 
@@ -32,7 +32,7 @@ dist_js_DATA = \
 	modernizr.custom.2.6.2.min.js \
 	$(NULL)
 
-kimchi.min.js: src/*.js
+kimchi.min.js: widgets/*.js src/*.js
 	cat $(sort $^) > $@
 
 CLEANFILES = kimchi.min.js
diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index fbcf4a2..46072cd 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -681,5 +681,29 @@ var kimchi = {
             success : suc,
             error : err
         });
+    },
+
+    getStorageServers: function(type, suc, err) {
+        var url = kimchi.url + 'storageservers?target_type=' + type;
+        kimchi.requestJSON({
+            url : url,
+            type : 'GET',
+            contentType : 'application/json',
+            dataType : 'json',
+            success : suc,
+            error : err
+        });
+    },
+
+    getStorageTargets: function(server,type, suc, err) {
+        var url = kimchi.url + 'storageservers/' + server + '/storagetargets?type=' + type;
+        kimchi.requestJSON({
+            url : url,
+            type : 'GET',
+            contentType : 'application/json',
+            dataType : 'json',
+            success : suc,
+            error : err
+        });
     }
-};
+};
\ No newline at end of file
diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
index b31610a..fb6ec89 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -52,6 +52,22 @@ kimchi.initStorageAddPage = function() {
             $('.host-partition').html(listHtml);
         }
         kimchi.select('storagePool-list', options);
+        kimchi.getStorageServers('netfs', function(data) {
+            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');
@@ -67,6 +83,33 @@ kimchi.initStorageAddPage = function() {
                 $('.nfs-section').addClass('tmpl-html');
             }
         });
+        $('input[name=nfsServerType]').change(function() {
+            if ($(this).val() === 'input') {
+                $('#nfsServerInputDiv').removeClass('tmpl-html');
+                $('#nfsServerChooseDiv').addClass('tmpl-html');
+            } else {
+                $('#nfsServerInputDiv').addClass('tmpl-html');
+                $('#nfsServerChooseDiv').removeClass('tmpl-html');
+            }
+        });
+        $('#nfsServerSelect').change(function() {
+            $('#nfsserverId').val($(this).val());
+        });
+        $('#nfsserverId').blur(function() {
+            kimchi.getStorageTargets($(this).val(),'netfs', function(data) {
+                var serverContent = [];
+                if (data.length > 0) {
+                    $.each(data, function(index, value) {
+                        serverContent.push({
+                            label : value,
+                            value : value
+                        });
+                    });
+                }
+                $('#nfs-server-target').filterselect();
+                $('#nfs-server-target').filterselect("setData",options);
+            });
+        });
     });
 };
 
diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
index c1fc3d1..222459e 100644
--- a/ui/pages/i18n.html.tmpl
+++ b/ui/pages/i18n.html.tmpl
@@ -121,7 +121,9 @@ 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")",
+    'msg.storagepool.unvalid.path': "$_("This is not a valid path")"
 };
 </script>
 </body>
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
index 5a2dd45..2b522ff 100644
--- a/ui/pages/storagepool-add.html.tmpl
+++ b/ui/pages/storagepool-add.html.tmpl
@@ -27,7 +27,7 @@
 <!DOCTYPE html>
 <html>
 <body>
-    <div class="window" style="width: 600px; height: 600px;">
+    <div class="window" style="width: 800px; height: 600px;">
         <header>
             <h1 class="title">$_("Define a New Storage Pool")</h1>
             <div class="close">X</div>
@@ -47,7 +47,7 @@
                 <section class="form-section">
                     <h2>2. $_("Storage Pool Type")</h2>
                     <div class="storage-type-wrapper-controls">
-                        <div class="btn dropdown popable">
+                        <div class="btn-select dropdown popable">
                             <input id="poolType" name="type" type="hidden" value="dir"/>
                             <span class="text" id="pool-type-label"></span><span class="arrow"></span>
                             <div class="popover" style="width: 100%">
@@ -74,22 +74,43 @@
                     <section class="form-section">
                         <h2>3. $_("NFS server IP")</h2>
                         <div class="field">
+                            <input type="radio" id="nfsServerInput" value="input" name="nfsServerType" checked="true">
+                            <label>$_("I want to input the server myself.")</label>
+                            <input type="radio" id="nfsServerChoose" value="choose" name="nfsServerType">
+                            <label>$_("I want to choose a server I used before.")</label>
+                        </div>
+                        <div id="nfsServerInputDiv" class="field">
                             <p class="text-help">
                                 $_("NFS server IP or hostname. It should not be empty.")</p>
                             <input id="nfsserverId" type="text" class="text"
                                 style="width: 300px">
                         </div>
+                        <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="btn-select dropdown" 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>
                     </section>
                     <section class="form-section">
                         <h2>4. $_("NFS Path")</h2>
-                        <div class="field">
+                        <div class="field" style="overflow:visible">
                             <p class="text-help">$_("The nfs exported path on nfs server")</p>
-                            <input id="nfspathId" type="text" class="text"
-                                style="width: 300px">
-                            <input type="hidden" id="localpathId" class="text"
-                                value="none">
-                        </div>
-                        <div class="clear"></div>
+		                    <div class="btn-select dropdown popable" style="width: 285px">
+		                        <input id="nfspathId" class="text" style="width:293px;"/>
+		                        <span class="text" id="nfs-target-label"></span><span class="arrow"></span>
+		                        <div class="popover" style="width: 100%">
+		                            <ul class="select-list" id="nfs-server-target" data-target="nfspathId" data-label="nfs-target-label">
+		                            </ul>
+		                        </div>
+		                    </div>
+	                    </div>
                     </section>
                 </div>
                 <div class="logical-section tmpl-html">
-- 
1.7.1

    

zhoumeina

tags

participants (1)