From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/form.css | 2 +- ui/css/theme-default/storage.css | 31 +++++++++- ui/js/src/kimchi.api.js | 20 ++++++- ui/js/src/kimchi.storagepool_add_main.js | 95 +++++++++++++++++++++++++++++- ui/pages/i18n.json.tmpl | 3 + ui/pages/storagepool-add.html.tmpl | 12 +++- 6 files changed, 156 insertions(+), 7 deletions(-) diff --git a/ui/css/theme-default/form.css b/ui/css/theme-default/form.css index d98cf9e..9a442fb 100644 --- a/ui/css/theme-default/form.css +++ b/ui/css/theme-default/form.css @@ -45,7 +45,7 @@ .form-section input.invalid-field[type="text"] { - border-color: #FF4444; + border-color: #FF4444!important; } .text-help { 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..bc43881 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 = port ? '&_server_port='+encodeURIComponent(port) : ''; + kimchi.requestJSON({ + url : kimchi.url + 'storageservers/'+server+'/storagetargets?_target_type=iscsi'+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..618892d 100644 --- a/ui/js/src/kimchi.storagepool_add_main.js +++ b/ui/js/src/kimchi.storagepool_add_main.js @@ -34,6 +34,93 @@ 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()); + input.trigger("change"); + $(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", i18n['KCHPOOL6006M']); + kimchi.getISCSITargets(server, port, function(data){ + if(data.length==0){ + $('input', "#iSCSITarget").attr("placeholder", i18n['KCHPOOL6007M']); + }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", i18n['KCHPOOL6008M']); + 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!="" && !$("#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(){ + $('input', "#iSCSITarget").off('focus', triggerLoadTarget); + $('input', "#iSCSITarget").one('focus', triggerLoadTarget); + }); + $("#iscsiportId").change(function(){ + $('input', "#iSCSITarget").off('focus', triggerLoadTarget); + $('input', "#iSCSITarget").one('focus', 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) { @@ -158,8 +245,14 @@ kimchi.initStorageAddPage = function() { } }); $('#iscsiportId').keyup(function(event) { - $(this).toggleClass("invalid-field",!/^[0-9]+$/.test($(this).val())); + $(this).toggleClass("invalid-field",!/^[0-9]*$/.test($(this).val())); + }); + $('#iscsiserverId').keyup(function(event) { + $(this).toggleClass("invalid-field",!kimchi.isServer($(this).val().trim())); + }).change(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/i18n.json.tmpl b/ui/pages/i18n.json.tmpl index fc5d5e4..d920ae2 100644 --- a/ui/pages/i18n.json.tmpl +++ b/ui/pages/i18n.json.tmpl @@ -152,6 +152,9 @@ "KCHPOOL6003M": "$_("It will format your disk and you will loose any data in there, are you sure to continue? ")", "KCHPOOL6004M": "$_("SCSI Fibre Channel")", "KCHPOOL6005M": "$_("No SCSI adapters found.")", + "KCHPOOL6006M": "$_("loading targets...")", + "KCHPOOL6007M": "$_("no targets is got, please input one.")", + "KCHPOOL6008M": "$_("failed to load targets.")", "KCHPOOL6001E": "$_("The storage pool name can not be blank.")", "KCHPOOL6002E": "$_("The storage pool path can not be blank.")", 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