[Kimchi-devel] [V3] UI: List iSCSI Servers & Targets

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 | 31 ++++++++++- ui/js/src/kimchi.api.js | 20 +++++++- ui/js/src/kimchi.storagepool_add_main.js | 88 ++++++++++++++++++++++++++++++ ui/pages/storagepool-add.html.tmpl | 12 +++- 4 files changed, 146 insertions(+), 5 deletions(-) diff --git a/ui/css/theme-default/storage.css b/ui/css/theme-default/storage.css index 4f439e8..ab92de2 100644 --- a/ui/css/theme-default/storage.css +++ b/ui/css/theme-default/storage.css @@ -315,7 +315,7 @@ } .hide-content { - display: none; + display: none!important; } .volumeslist { @@ -593,3 +593,32 @@ center no-repeat; padding: 0 20px 0 26px; } + +.storage-admin .filter-select { + display: inline-block; + position: relative; +} + +#iscsiportId, .storage-admin .filter-select input { + border: 1px solid #CCCCCC; + border-radius: 1px; + font-size: 14px; + padding: 3px 3px 3px 10px; + height: 30px; +} + +.storage-admin .filter-select input::-ms-clear { + display: none; +} + +#iSCSIServer input { + width: 410px; +} + +#iscsiportId { + width: 60px; +} + +#iSCSITarget input { + width: 493px; +} diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js index 4562992..b657aeb 100644 --- a/ui/js/src/kimchi.api.js +++ b/ui/js/src/kimchi.api.js @@ -774,7 +774,9 @@ var kimchi = { contentType : 'application/json', dataType : 'json', success : suc, - error : err + error : err ? err : function(data) { + kimchi.message.error(data.responseJSON.reason); + } }); }, @@ -1098,5 +1100,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..dc1b1c6 100644 --- a/ui/js/src/kimchi.storagepool_add_main.js +++ b/ui/js/src/kimchi.storagepool_add_main.js @@ -34,6 +34,90 @@ 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){ + input.on("keyup", function(){ + filter(options, input.val()); + }); + } + options.children().each(function(){ + $(this).click(function(){ + options.children().removeClass("active"); + input.val($(this).text()); + $(this).addClass("active"); + filter(options, ""); + }); + }); +}; + +kimchi.setupISCSI = function(){ + var loadTargets = function(server, port, callback){ + var isUpdate = $(".option", "#iSCSITarget").children().length > 0; + $(".option", "#iSCSITarget").empty(); + $('input', "#iSCSITarget").attr("placeholder", "loading targets..."); + kimchi.getISCSITargets(server, port, function(data){ + if(data.length==0){ + $('input', "#iSCSITarget").attr("placeholder", "no targets is got, please input one."); + }else{ + for(var i=0; i<data.length; i++){ + var itemNode = $.parseHTML("<li>"+data[i].target+"</li>"); + $(".option", "#iSCSITarget").append(itemNode); + } + $('input', "#iSCSITarget").attr("placeholder", ""); + $(".popover", "#iSCSITarget").css("display", "block"); + } + kimchi.storageFilterSelect('iSCSITarget', isUpdate); + $('input', "#iSCSITarget").trigger("focus"); + callback(); + }, function(data){ + $('input', "#iSCSITarget").attr("placeholder","failed to load targets."); + callback(); + kimchi.message.error(data.responseJSON.reason); + }); + }; + var triggerLoadTarget = function(){ + $('input', "#iSCSITarget").val(""); + 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(); + }); + var initISCSIServers = function(){ + kimchi.getStorageServers("iscsi", function(data){ + for(var i=0;i<data.length;i++){ + var itemNode = $.parseHTML("<li>"+data[i].host+"</li>"); + $(".option", "#iSCSIServer").append(itemNode); + $(itemNode).click(function(){ + $("#iscsiportId").val($(this).prop("port")); + $("#iscsiserverId").val($(this).text()); + triggerLoadTarget(); + }).prop("port", data[i].port); + } + kimchi.storageFilterSelect('iSCSIServer', false); + }); + }; + initISCSIServers(); +}; + kimchi.initStorageAddPage = function() { kimchi.listHostPartitions(function(data) { if (data.length > 0) { @@ -160,6 +244,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.setupISCSI(); }; /* 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..6f1861b 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> @@ -111,7 +111,10 @@ <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 storage-base-input-width"> + <span class="filter-select popable" id="iSCSIServer"> + <input id="iscsiserverId" type="text" placeholder="$_("Server")"> + <div class="popover"><ul class="option select-list"></ul></div> + </span> <input id="iscsiportId" placeholder="$_("Port")" type="text" class="text storage-port-width" maxlength="4"> </div> </section> @@ -119,7 +122,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 popable" id="iSCSITarget"> + <input id="iscsiTargetId" type="text"> + <div class="popover"><ul class="option select-list"></ul></div> + </span> </div> </section> <section class="form-section"> -- 1.7.1