[Kimchi-devel] [PATCH V4 1/2] Add UI support of iscsi

Zhou Zheng Sheng zhshzhou at linux.vnet.ibm.com
Tue Jan 7 03:51:28 UTC 2014


on 2014/01/03 17:29, zhoumeina wrote:
> This patch is working for add iscsi type in storage pool create
> page.
> 1.Add iscsi server to create storage pool page.
> 2.Add iscsi target to create storage pool page.
> 
> Signed-off-by: zhoumeina <zhoumein at linux.vnet.ibm.com>
> ---
>  ui/css/theme-default/form.css            |    5 ++
>  ui/js/src/kimchi.storagepool_add_main.js |   77 +++++++++++++++++++++++++----
>  ui/js/src/kimchi.utils.js                |    5 ++
>  ui/pages/i18n.html.tmpl                  |    7 ++-
>  ui/pages/storagepool-add.html.tmpl       |   48 +++++++++++++++----
>  5 files changed, 119 insertions(+), 23 deletions(-)
> 
> diff --git a/ui/css/theme-default/form.css b/ui/css/theme-default/form.css
> index c24b277..28e30a5 100644
> --- a/ui/css/theme-default/form.css
> +++ b/ui/css/theme-default/form.css
> @@ -45,3 +45,8 @@
>      line-height: 30px;
>      padding: 0 5px;
>  }
> +
> +
> +.form-section input.invalid-field[type="text"] {
> +    border-color: #FF4444;
> +}
> \ 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 a154933..a2e1f15 100644
> --- a/ui/js/src/kimchi.storagepool_add_main.js
> +++ b/ui/js/src/kimchi.storagepool_add_main.js
> @@ -35,6 +35,9 @@ kimchi.initStorageAddPage = function() {
>      }, {
>          label : "NFS",
>          value : "netfs"
> +    } ,{
> +        label : "iSCSI",
> +        value : "iscsi"
>      } ];
>      kimchi.listHostPartitions(function(data) {
>          if (data.length > 0) {
> @@ -57,16 +60,34 @@ kimchi.initStorageAddPage = function() {
>                  $('.path-section').removeClass('tmpl-html');
>                  $('.logical-section').addClass('tmpl-html');
>                  $('.nfs-section').addClass('tmpl-html');
> +                $('.iscsi-section').addClass('tmpl-html');
>              } else if ($(this).val() === 'netfs') {
>                  $('.path-section').addClass('tmpl-html');
>                  $('.logical-section').addClass('tmpl-html');
>                  $('.nfs-section').removeClass('tmpl-html');
> +                $('.iscsi-section').addClass('tmpl-html');
> +            } else if ($(this).val() === 'iscsi') {
> +                $('.path-section').addClass('tmpl-html');
> +                $('.logical-section').addClass('tmpl-html');
> +                $('.nfs-section').addClass('tmpl-html');
> +                $('.iscsi-section').removeClass('tmpl-html');
>              } else {
>                  $('.path-section').addClass('tmpl-html');
>                  $('.logical-section').removeClass('tmpl-html');
>                  $('.nfs-section').addClass('tmpl-html');
> +                $('.iscsi-section').addClass('tmpl-html');
>              }
>          });
> +        $('#authId').click(function() {
> +            if ($(this).prop("checked")) {
> +                $('.authenticationfield').removeClass('tmpl-html');
> +            } else {
> +                $('.authenticationfield').addClass('tmpl-html');
> +            }
> +        });
> +        $('#iscsiportId').keyup(function(event) {
> +            $(this).toggleClass("invalid-field",!/^[0-9]+$/.test($(this).val()));
> +        });
>      });
>  };
> 
> @@ -85,6 +106,8 @@ kimchi.validateForm = function() {
>          return kimchi.validateDirForm();
>      } else if (poolType === "netfs") {
>          return kimchi.validateNfsForm();
> +    } else if (poolType === "iscsi") {
> +        return kimchi.validateIscsiForm();
>      } else {
>          return kimchi.validateLogicalForm();
>      }
> @@ -107,26 +130,44 @@ kimchi.validateDirForm = function () {
>  kimchi.validateNfsForm = function () {
>      var nfspath = $('#nfspathId').val();
>      var nfsserver = $('#nfsserverId').val();
> -    if ('' === nfsserver) {
> -        kimchi.message.error(i18n['msg.pool.edit.nfsserver.blank']);
> +    if (!kimchi.validateServer(nfsserver)) {
>          return false;
>      }
> -
>      if ('' === nfspath) {
>          kimchi.message.error(i18n['msg.pool.edit.nfspath.blank']);
>          return false;
>      }
> -    var domain = "([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6}"
> -    var ip = "(\\d{1,3}\.){3}\\d{1,3}"
> -    regex = new RegExp('^' + domain + '|' + ip + '$')
> +    if (!/((\/([0-9a-zA-Z-_\.]+)))$/.test(nfspath)) {
> +        kimchi.message.error(i18n['msg.validate.pool.edit.nfspath']);
> +        return false;
> +    }
> +    return true;
> +};
> 
> -    if(!regex.test(nfsserver)) {
> -        kimchi.message.error(i18n['msg.validate.pool.edit.nfsserver']);
> +kimchi.validateIscsiForm = function() {
> +    var iscsiServer = $('#iscsiserverId').val();
> +    var iscsiTarget = $('#iscsiTargetId').val();
> +    if (!kimchi.validateServer(iscsiServer)) {
>          return false;
>      }
> +    if ('' === iscsiTarget) {
> +        kimchi.message.error(i18n['msg.pool.edit.iscsitarget.blank']);
> +        return false;
> +    }
> +    return true;
> +};
> 
> -    if (!/((\/([0-9a-zA-Z-_\.]+)))$/.test(nfspath)) {
> -        kimchi.message.error(i18n['msg.validate.pool.edit.nfspath']);
> +kimchi.validateServer = function(serverField) {
> +    if ('' === serverField) {
> +        kimchi.message.error(i18n['msg.pool.edit.server.blank']);
> +        return false;
> +    }
> +    var domain = "([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6}"
> +    var ip = "(\\d{1,3}\.){3}\\d{1,3}"
> +    regex = new RegExp('^' + domain + '|' + ip + '$')
> +
> +    if (!regex.test(serverField)) {
> +        kimchi.message.error(i18n['msg.validate.pool.edit.server']);
>          return false;
>      }
>      return true;
> @@ -144,6 +185,7 @@ kimchi.validateLogicalForm = function () {
>  kimchi.addPool = function(event) {
>      if (kimchi.validateForm()) {
>          var formData = $('#form-pool-add').serializeObject();
> +        delete formData.authname;
>          var poolType = $("#poolType").val();
>          if (poolType === 'dir') {
>              formData.path = $('#pathId').val();
> @@ -158,11 +200,24 @@ kimchi.addPool = function(event) {
>              }
>              delete formData.devices;
>              formData.source = source;
> -        } else {
> +        } else if (poolType === 'netfs'){
>              var source = {};
>              source.path = $('#nfspathId').val();
>              source.host = $('#nfsserverId').val();
>              formData.source = source;
> +        } else {
> +            var source = {};
> +            source.target = $('#iscsiTargetId').val();
> +            source.host = $('#iscsiserverId').val();
> +            source.port = $('#iscsiportId').val();

Hello, as we discussed, if "$('#iscsiportId').val()" is empty, we should
not assign it to source.port. Maybe you could add a "if" to check if
port is empty and only add a "port" attribute to "source" when port is
non-empty.

Another small problem is the back-end actually expects source.port a
integer. So in all the port assignment logic can be expressed by the
following pseudo-code.

if $('#nfsserverId').val() is not empty
    source.port = parseInt($('#iscsiportId').val())

> +            if ($('#authId').prop("checked")) {
> +                source.auth = [];
> +                source.auth.push({
> +                    "username" : $('#usernameId').val(),
> +                    "password" : $('#passwordId').val()
> +                });

The back-end expects the auth is a dict, but here it is an array. I
change it to a dict and test the following.

if ($('#authId').prop("checked")) {
    source.auth = {};
    source.auth.username = $('#usernameId').val();
    source.auth.password = $('#passwordId').val();
}
> +            }
> +            formData.source = source;
>          }
>          if (poolType === 'logical') {
>              var settings = {
> diff --git a/ui/js/src/kimchi.utils.js b/ui/js/src/kimchi.utils.js
> index 8af6a11..a23bf51 100644
> --- a/ui/js/src/kimchi.utils.js
> +++ b/ui/js/src/kimchi.utils.js
> @@ -163,3 +163,8 @@ kimchi.changetoProperUnit = function(numOrg, digits, base) {
> 
>      kimchi.formatMeasurement = format;
>  })();
> +
> +kimchi.isUnsignedNumeric = function(number) {
> +    var reg = /^d+(.d+)?$/
> +    return reg.test(number);
> +}
> diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
> index c1fc3d1..4a02e4d 100644
> --- a/ui/pages/i18n.html.tmpl
> +++ b/ui/pages/i18n.html.tmpl
> @@ -94,11 +94,9 @@ var i18n = {
>      'msg.storagepool.confirm.delete':"$_("This will permanently delete the Storage Pool. Would you like to continue?")",
>      'msg.pool.edit.name.blank':"$_("The storage pool name can not be blank.")",
>      'msg.pool.edit.path.blank':"$_("The storage pool path can not be blank.")",
> -    'msg.pool.edit.nfsserver.blank':"$_("NFS server can not be blank.")",
>      'msg.pool.edit.nfspath.blank':"$_("NFS server mount path can not be blank.")",
>      'msg.validate.pool.edit.name':"$_("Invalid Storage Pool name.  It may only contain letters, numbers, underscores, and hyphens.")",
>      'msg.validate.pool.edit.path':"$_("This is not a real linux path.")",
> -    'msg.validate.pool.edit.nfsserver':"$_("This is not a valid NFS server.")",
>      'msg.validate.pool.edit.nfspath':"$_("Invalid nfs mount path.")",
>      'msg.kimchi.storage.pool.empty':"$_("This storage pool is empty.")",
>      'msg.kimchi.list.volume.fail':"$_("Failed to list the storage pool.")",
> @@ -121,7 +119,10 @@ 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? ")",
> +    'msg.pool.edit.iscsitarget.blank': "$_("The iscsi target can not be blank.")",
> +    'msg.pool.edit.server.blank':"$_("Server name can not be blank.")",
> +    'msg.validate.pool.edit.server':"$_("This is not a valid Server Name or IP. please, modify it.")"
>  };
>  </script>
>  </body>
> diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
> index 5a2dd45..fa77a8b 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: 600px; height: 700px;">
>          <header>
>              <h1 class="title">$_("Define a New Storage Pool")</h1>
>              <div class="close">X</div>
> @@ -40,7 +40,7 @@
>                          <p class="text-help">
>                              $_("The name used to identify the storage pools, and it should not be empty.")
>                          </p>
> -                        <input id="poolId" type="text" class="text" style="width: 300px"
> +                        <input id="poolId" required="required" type="text" class="text" style="width: 300px"
>                              name="name">
>                      </div>
>                  </section>
> @@ -65,7 +65,7 @@
>                                  $_("The path of the Storage Pool. Each Storage Pool must have a unique path.")</p>
>                              <p class="text-help">
>                                  $_("Kimchi will try to create the directory when it does not already exist in your system.")</p>
> -                            <input id="pathId" type="text" class="text" style="width: 300px">
> +                            <input id="pathId" type="text" class="text" required="required" style="width: 300px">
>                          </div>
>                          <div class="clear"></div>
>                      </section>
> @@ -76,7 +76,7 @@
>                          <div class="field">
>                              <p class="text-help">
>                                  $_("NFS server IP or hostname. It should not be empty.")</p>
> -                            <input id="nfsserverId" type="text" class="text"
> +                            <input id="nfsserverId" required="required" type="text" class="text"
>                                  style="width: 300px">
>                          </div>
>                      </section>
> @@ -84,10 +84,9 @@
>                          <h2>4. $_("NFS Path")</h2>
>                          <div class="field">
>                              <p class="text-help">$_("The nfs exported path on nfs server")</p>
> -                            <input id="nfspathId" type="text" class="text"
> +                            <input id="nfspathId" required="required" type="text" class="text"
>                                  style="width: 300px">
> -                            <input type="hidden" id="localpathId" class="text"
> -                                value="none">
> +                            <input type="hidden" id="localpathId" class="text" value="none">
>                          </div>
>                          <div class="clear"></div>
>                      </section>
> @@ -98,6 +97,37 @@
>                          <div class="host-partition"></div>
>                      </section>
>                  </div>
> +                <div class="iscsi-section tmpl-html">
> +					<section class="form-section">
> +						<h2>3. $_("iSCSI Server")</h2>
> +						<div class="field">
> +							<p class="text-help">
> +	                            $_("iSCSI server IP or hostname. It should not be empty.")</p>
> +							<input id="iscsiserverId" placeholder="$_("Server")" type="text" class="text" style="width: 300px">
> +							<input id="iscsiportId" placeholder="$_("Port")" type="text" class="text" style="width:40px" maxlength='4'>
> +						</div>
> +					</section>
> +					<section class="form-section">
> +						<h2>4. $_("Target")</h2>
> +						<div class="field">
> +							<p class="text-help">$_("The iSCSI target on iSCSI server")</p>
> +							<input id="iscsiTargetId" type="text" class="text" style="width: 300px">
> +						</div>
> +					</section>
> +					<section class="form-section">
> +						<div class="field">
> +				            <input type="checkbox" id="authId" name="authname">
> +				            <label>$_("Add iSCSI Authentication...")</label>
> +				        </div>
> +					</section>
> +					<section class="authenticationfield form-section tmpl-html">
> +					    <h2>5. $_("iSCSI Authentication")</h2>
> +						<div class="field">
> +				            <input id="usernameId" placeholder="$_("User Name")" type="text" class="text" style="width: 150px">
> +				            <input id="passwordId" placeholder="$_("Password")" type="text" class="text" style="width: 150px">
> +				        </div>
> +					</section>
> +		        </div>
>              </form>
>          </div>
>          <footer>
> @@ -113,8 +143,8 @@
>      </script>
>      <script id="partitionTmpl" type="html/text">
>          <div>
> -        <input type="checkbox" value="{path}" name="devices">
> -        <label>{path}</label>
> +            <input type="checkbox" value="{path}" name="source.devices">
> +            <label>{path}</label>
>          </div>
>      </script>
>  </body>
> 


-- 
Thanks and best regards!

Zhou Zheng Sheng / 周征晟
E-mail: zhshzhou at linux.vnet.ibm.com
Telephone: 86-10-82454397




More information about the Kimchi-devel mailing list