[Kimchi-devel] [V3] UI: List iSCSI Servers & Targets
Aline Manera
alinefm at linux.vnet.ibm.com
Fri Aug 29 18:26:22 UTC 2014
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 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
> + 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">
More information about the Kimchi-devel
mailing list