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

The targets are only filled when I provided the iSCSI server port. But the port is optional. We should be able to list the targets only with the server information.

Also when we need to improve combo box style to don't display a blue row when no value is set on it.

Some comments below: On 08/29/2014 07:45 AM, huoyuxin(a)linux.vnet.ibm.com wrote: > 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..."); Will this message "loading targets..." be translated ? I think you need to add it to i18n.html.tmpl and user kimchi.message.code() to get the translated value

> + kimchi.getISCSITargets(server, port, function(data){ > + if(data.length==0){ > + $('input', "#iSCSITarget").attr("placeholder", "no > targets is got, please input one."); Same here.

> + }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."); And here.

> + 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">