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

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(a)linux.vnet.ibm.com&gt; --- 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();

+ if ($('#authId').prop("checked")) { + source.auth = []; + source.auth.push({ + "username" : $('#usernameId').val(), + "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>