Re: [Kimchi-devel] [RFC 1/2] Add nfs server and target UI in create storage pool

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(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/button.css | 11 +++---- ui/css/theme-default/form.css | 6 ++++ ui/css/theme-default/storage.css | 4 +- ui/js/src/kimchi.api.js | 26 +++++++++++++++++- ui/js/src/kimchi.storagepool_add_main.js | 42 ++++++++++++++++++++++++++++++ ui/pages/i18n.html.tmpl | 3 +- ui/pages/storagepool-add.html.tmpl | 39 +++++++++++++++++++++------ 7 files changed, 112 insertions(+), 19 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/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..504ba01 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,32 @@ 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 + }); + }); + } + kimchi.select('nfs-server-target', serverContent); + }); + }); }); }; 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 5a2dd45..04354ee 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 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> </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">