[Kimchi-devel] [V3] UI: List iSCSI Servers & Targets
Yu Xin Huo
huoyuxin at linux.vnet.ibm.com
Mon Sep 1 11:41:28 UTC 2014
On 8/30/2014 2:26 AM, Aline Manera wrote:
>
> 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.
fixed in v4
>
> Also when we need to improve combo box style to don't display a blue
> row when no value is set on it.
open a bug for this, this need to be fixed globally.
>
> Some comments below:
>
> On 08/29/2014 07:45 AM, huoyuxin at linux.vnet.ibm.com wrote:
>> From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
>>
>> Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
>> ---
>> 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
fixed in v4
>
>> + kimchi.getISCSITargets(server, port, function(data){
>> + if(data.length==0){
>> + $('input', "#iSCSITarget").attr("placeholder", "no
>> targets is got, please input one.");
>
> Same here.
fixed in v4
>
>> + }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.
fixed in v4
>
>> + 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">
>
More information about the Kimchi-devel
mailing list