Re: [Kimchi-devel] [PATCH] UI: Display iSCSI targets for Selection

From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; Signed-off-by: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/storage.css | 50 +++++++++++++++++++ ui/js/src/kimchi.api.js | 16 ++++++ ui/js/src/kimchi.storagepool_add_main.js | 76 ++++++++++++++++++++++++++++++ ui/pages/storagepool-add.html.tmpl | 7 ++- 4 files changed, 147 insertions(+), 2 deletions(-) diff --git a/ui/css/theme-default/storage.css b/ui/css/theme-default/storage.css index 4f439e8..cb0caee 100644 --- a/ui/css/theme-default/storage.css +++ b/ui/css/theme-default/storage.css @@ -593,3 +593,53 @@ center no-repeat; padding: 0 20px 0 26px; } + +.storage-admin .filter-select { + display: inline-block; + position: relative; +} + +.storage-admin .filter-select input { + border: 1px solid #CCCCCC; + border-radius: 1px; + font-size: 14px; + color: #666666; + padding: 3px 3px 3px 10px; + height: 30px; + width: 493px; +} + +.storage-admin .filter-select input::-ms-clear { + display: none; +} + +.storage-admin .filter-select .arrow { + display: inline-block; + vertical-align: middle; + position: relative; + left: -25px; +} + +.storage-admin .filter-select .option { + border-style: solid; + border-color: #CCCCCC; + border-width: 0px 1px 1px 1px; + border-radius: 1px; + font-size: 14px; + background-color: white; + width: 506px; + max-height: 140px; + overflow: auto; + color: #666666; + position: absolute; + z-index: 1000; +} + +.storage-admin .filter-select .option .item { + padding: 5px 10px; + cursor: pointer; +} + +.storage-admin .filter-select .option .item:hover { + background-color: #DDDDDD; +} diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js index 4562992..d89919e 100644 --- a/ui/js/src/kimchi.api.js +++ b/ui/js/src/kimchi.api.js @@ -1098,5 +1098,21 @@ var kimchi = { kimchi.message.error(data.responseJSON.reason); } }); + }, + + getISCSITargets : function(server, port, suc, err) { + server = encodeURIComponent(server); + port = encodeURIComponent(port); + kimchi.requestJSON({ + url : kimchi.url + 'storageservers/'+server+'/storagetargets?_target_type=iscsi&_server_port='+port, + type : 'GET', + contentType : 'application/json', + dataType : 'json', + resend : true, + success : suc, + error : err ? err : function(data) { + kimchi.message.error(data.responseJSON.reason); + } + }); } }; diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js index ecbc682..49ba9e1 100644 --- a/ui/js/src/kimchi.storagepool_add_main.js +++ b/ui/js/src/kimchi.storagepool_add_main.js @@ -34,6 +34,78 @@ kimchi.storagepool_add_main = function() { }); }; +kimchi.storageFilterSelect = function(id, isUpdate) { + var input = $('input', '#'+id); + var options = $(".option", '#'+id); + var filter = function(container, key){ + container.children().each(function(){ + $(this).css("display", $(this).text().indexOf(key)==-1 ? "none" : ""); + }); + }; + if(!isUpdate){ + $('.arrow', '#'+id).click(function(){ + options.toggleClass("hide-content"); + }); + input.focus(function(){ + options.removeClass("hide-content"); + }).on("keyup", function(){ + filter(options, input.val()); + }); + } + options.children().each(function(){ + $(this).click(function(){ + input.val($(this).text()); + $('.option', "#iSCSITarget").addClass("hide-content"); + filter(options, ""); + }); + }); +}; + +kimchi.initISCSITargets = function(){ + var loadTargets = function(server, port, callback){ + var isUpdate = $(".option", "#iSCSITarget").children().length > 0; + $(".option", "#iSCSITarget").empty(); + $('input', "#iSCSITarget").val("loading targets..."); + kimchi.getISCSITargets(server, port, function(data){ + if(data.length==0){ + $('input', "#iSCSITarget").val("no targets is got."); + }else{ + for(var i=0; i<data.length; i++){ + var itemNode = $.parseHTML("<div class='item'>"+data[i].target+"</div>"); + $(".option", "#iSCSITarget").append(itemNode); + } + kimchi.storageFilterSelect('iSCSITarget', isUpdate); + $('input', "#iSCSITarget").attr("readonly", false); + $('input', "#iSCSITarget").val(""); + $('input', "#iSCSITarget").trigger("focus"); + } + callback(); + }, function(data){ + $('input', "#iSCSITarget").val("failed to load targets."); + kimchi.message.error(data.responseJSON.reason); + callback(); + }); + }; + var triggerLoadTarget = function(){ + var server = $("#iscsiserverId").val().trim(); + var port = $("#iscsiportId").val().trim(); + if(server!="" && port!="" && !$("#iscsiserverId").hasClass("invalid-field") && !$("#iscsiportId").hasClass("invalid-field")){ + $("#iscsiserverId").attr("disabled", true); + $("#iscsiportId").attr("disabled", true); + loadTargets(server, port, function(){ + $("#iscsiserverId").attr("disabled", false); + $("#iscsiportId").attr("disabled", false); + }); + } + }; + $("#iscsiserverId").change(function(){ + triggerLoadTarget(); + }); + $("#iscsiportId").change(function(){ + triggerLoadTarget(); + }); +}; + kimchi.initStorageAddPage = function() { kimchi.listHostPartitions(function(data) { if (data.length > 0) { @@ -160,6 +232,10 @@ kimchi.initStorageAddPage = function() { $('#iscsiportId').keyup(function(event) { $(this).toggleClass("invalid-field",!/^[0-9]+$/.test($(this).val())); }); + $('#iscsiserverId').keyup(function(event) { + $(this).toggleClass("invalid-field",!kimchi.isServer($(this).val().trim())); + }); + kimchi.initISCSITargets(); }; /* Returns 'true' if all form fields were filled, 'false' if diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl index 1eb2029..ee19ed5 100644 --- a/ui/pages/storagepool-add.html.tmpl +++ b/ui/pages/storagepool-add.html.tmpl @@ -23,7 +23,7 @@ <!DOCTYPE html> <html> <body> - <div class="window storage-window"> + <div class="window storage-window storage-admin"> <header> <h1 class="title">$_("Define a New Storage Pool")</h1> <div class="close">X</div> @@ -119,7 +119,10 @@ <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 storage-base-input-width"> + <span class="filter-select" id="iSCSITarget"> + <div><input id="iscsiTargetId" type="text" readonly><a class="ui-icon ui-icon-triangle-1-s arrow"></a></div> + <div class="option hide-content"></div> + </span> </div> </section> <section class="form-section">