[Kimchi-devel] [RFC 1/2] Add nfs server and target UI in create storage pool
Aline Manera
alinefm at linux.vnet.ibm.com
Fri Dec 27 17:21:18 UTC 2013
Please, merge this RFC patch with "[PATCH 1/2] Add the nfs server select
UI" and send a V2.
On 12/26/2013 04:43 AM, zhoumeina wrote:
> 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/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">
More information about the Kimchi-devel
mailing list