[Kimchi-devel] [V4] UI: List iSCSI Servers & Targets
huoyuxin at linux.vnet.ibm.com
huoyuxin at linux.vnet.ibm.com
Mon Sep 1 11:39:23 UTC 2014
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/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
More information about the Kimchi-devel
mailing list