[Kimchi-devel] [PATCH v2 1/2] Github bug #307: add storage pool type list - JS changes

Aline Manera alinefm at linux.vnet.ibm.com
Mon Mar 3 20:15:43 UTC 2014


On 03/03/2014 05:13 PM, Daniel H Barboza wrote:
>
> On 03/03/2014 03:09 PM, Aline Manera wrote:
>> On 02/28/2014 04:50 PM, Daniel Barboza wrote:
>>> From: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>
>>>
>>> The changes in ui/js/src/kimchi.storagepool_add_main.js were made
>>> to relieve the storage pool type dropbox from the return of the
>>> ajax call to retrieve the available partitions of the host.
>>>
>>> The dropbox will always have all the options displayed. In case
>>> of the LOGICAL pool type the user won't be able to proceed with
>>> the creation of the pool if no partitions are found. A message
>>> is being displayed to warn the user.
>>
>>
>> As all the options will be always shown to user I suggest to put them 
>> on tmpl.html file
>
> I tried to do that but failed miserably :(
>
> If you see in the JS you'll notice that this select is created using 
> this call
>
> $('#poolTypeId').selectMenu("setData", options);
>
> This call is declared in the widgets/select-menu.js and it is a rather 
> complex JQuery call, which
> I wasn't able to put it "hardcoded" in the template.

Got it.
Thanks for the explanation

>
>>
>>>
>>> Signed-off-by: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>
>>> ---
>>>   ui/js/src/kimchi.storagepool_add_main.js | 177 
>>> ++++++++++++++++---------------
>>>   1 file changed, 89 insertions(+), 88 deletions(-)
>>>
>>> diff --git a/ui/js/src/kimchi.storagepool_add_main.js 
>>> b/ui/js/src/kimchi.storagepool_add_main.js
>>> index 5960c8d..1332051 100644
>>> --- a/ui/js/src/kimchi.storagepool_add_main.js
>>> +++ b/ui/js/src/kimchi.storagepool_add_main.js
>>> @@ -23,25 +23,8 @@ kimchi.storagepool_add_main = function() {
>>>   };
>>>
>>>   kimchi.initStorageAddPage = function() {
>>> -    $('#poolTypeId').selectMenu();
>>> -    $('#serverComboboxId').combobox();
>>> -    $('#targetFilterSelectId').filterselect();
>>> -    var options = [ {
>>> -        label : "DIR",
>>> -        value : "dir"
>>> -    }, {
>>> -        label : "NFS",
>>> -        value : "netfs"
>>> -    } ,{
>>> -        label : "iSCSI",
>>> -        value : "iscsi"
>>> -    } ];
>>>       kimchi.listHostPartitions(function(data) {
>>>           if (data.length > 0) {
>>> -            options.push({
>>> -                label : "LOGICAL",
>>> -                value : "logical"
>>> -            });
>>>               var deviceHtml = $('#partitionTmpl').html();
>>>               var listHtml = '';
>>>               $.each(data, function(index, value) {
>>> @@ -50,87 +33,105 @@ kimchi.initStorageAddPage = function() {
>>>                   }
>>>               });
>>>               $('.host-partition').html(listHtml);
>>> +        } else {
>>> +            $('.host-partition').html(i18n['KCHPOOL6011E']);
>>>           }
>>> -        $('#poolTypeId').selectMenu("setData", options);
>>> -        kimchi.getStorageServers('netfs', function(data) {
>>> -            var serverContent = [];
>>> -            if (data.length > 0) {
>>> -                $.each(data, function(index, value) {
>>> -                    serverContent.push({
>>> -                        label : value.host,
>>> -                        value : value.host
>>> -                    });
>>> -                });
>>> -            }
>>> -            $('#serverComboboxId').combobox("setData", serverContent);
>>> -            $('input[name=nfsServerType]').change(function() {
>>> -                if ($(this).val() === 'input') {
>>> - $('#nfsServerInputDiv').removeClass('tmpl-html');
>>> - $('#nfsServerChooseDiv').addClass('tmpl-html');
>>> -                } else {
>>> - $('#nfsServerInputDiv').addClass('tmpl-html');
>>> - $('#nfsServerChooseDiv').removeClass('tmpl-html');
>>> -                }
>>> -            });
>>> -            $('#nfsserverId').on("change",function() {
>>> -                if ($(this).val() !== '' && 
>>> kimchi.isServer($(this).val())) {
>>> -                    $('#nfspathId').prop('disabled',false);
>>> -                    $(this).removeClass("invalid-field");
>>> -                } else {
>>> -                    $(this).addClass("invalid-field");
>>> -                    $('#nfspathId').prop( "disabled",true);
>>> -                }
>>> - $('#targetFilterSelectId').filterselect('clear');
>>> -            });
>>> -            $('#nfspathId').focus(function() {
>>> -                var targetContent = [];
>>> - kimchi.getStorageTargets($('#nfsserverId').val(), 'netfs', 
>>> function(data) {
>>> -                    if (data.length > 0) {
>>> -                        $.each(data, function(index, value) {
>>> -                            targetContent.push({
>>> -                                label : value.target,
>>> -                                value : value.target
>>> -                            });
>>> -                        });
>>> -                    }
>>> - $('#targetFilterSelectId').filterselect("setData", targetContent);
>>> +    });
>>> +    kimchi.getStorageServers('netfs', function(data) {
>>> +        var serverContent = [];
>>> +        if (data.length > 0) {
>>> +            $.each(data, function(index, value) {
>>> +                serverContent.push({
>>> +                    label : value.host,
>>> +                    value : value.host
>>>                   });
>>>               });
>>> -        });
>>> -        $('#poolTypeInputId').change(function() {
>>> -            if ($(this).val() === 'dir') {
>>> -                $('.path-section').removeClass('tmpl-html');
>>> -                $('.logical-section').addClass('tmpl-html');
>>> -                $('.nfs-section').addClass('tmpl-html');
>>> -                $('.iscsi-section').addClass('tmpl-html');
>>> -            } else if ($(this).val() === 'netfs') {
>>> -                $('.path-section').addClass('tmpl-html');
>>> -                $('.logical-section').addClass('tmpl-html');
>>> -                $('.nfs-section').removeClass('tmpl-html');
>>> -                $('.iscsi-section').addClass('tmpl-html');
>>> -            } else if ($(this).val() === 'iscsi') {
>>> -                $('.path-section').addClass('tmpl-html');
>>> -                $('.logical-section').addClass('tmpl-html');
>>> -                $('.nfs-section').addClass('tmpl-html');
>>> -                $('.iscsi-section').removeClass('tmpl-html');
>>> -            } else if ($(this).val() === 'logical') {
>>> -                $('.path-section').addClass('tmpl-html');
>>> - $('.logical-section').removeClass('tmpl-html');
>>> -                $('.nfs-section').addClass('tmpl-html');
>>> -                $('.iscsi-section').addClass('tmpl-html');
>>> +        }
>>> +        $('#serverComboboxId').combobox("setData", serverContent);
>>> +        $('input[name=nfsServerType]').change(function() {
>>> +            if ($(this).val() === 'input') {
>>> + $('#nfsServerInputDiv').removeClass('tmpl-html');
>>> + $('#nfsServerChooseDiv').addClass('tmpl-html');
>>> +            } else {
>>> + $('#nfsServerInputDiv').addClass('tmpl-html');
>>> + $('#nfsServerChooseDiv').removeClass('tmpl-html');
>>>               }
>>>           });
>>> -        $('#authId').click(function() {
>>> -            if ($(this).prop("checked")) {
>>> - $('.authenticationfield').removeClass('tmpl-html');
>>> +        $('#nfsserverId').on("change",function() {
>>> +            if ($(this).val() !== '' && 
>>> kimchi.isServer($(this).val())) {
>>> +                $('#nfspathId').prop('disabled',false);
>>> +                $(this).removeClass("invalid-field");
>>>               } else {
>>> - $('.authenticationfield').addClass('tmpl-html');
>>> +                $(this).addClass("invalid-field");
>>> +                $('#nfspathId').prop( "disabled",true);
>>>               }
>>> +            $('#targetFilterSelectId').filterselect('clear');
>>>           });
>>> -        $('#iscsiportId').keyup(function(event) {
>>> - $(this).toggleClass("invalid-field",!/^[0-9]+$/.test($(this).val()));
>>> +        $('#nfspathId').focus(function() {
>>> +            var targetContent = [];
>>> +            kimchi.getStorageTargets($('#nfsserverId').val(), 
>>> 'netfs', function(data) {
>>> +                if (data.length > 0) {
>>> +                    $.each(data, function(index, value) {
>>> +                        targetContent.push({
>>> +                            label : value.target,
>>> +                            value : value.target
>>> +                        });
>>> +                    });
>>> +                }
>>> + $('#targetFilterSelectId').filterselect("setData", targetContent);
>>> +            });
>>>           });
>>>       });
>>> +    $('#poolTypeId').selectMenu();
>>> +    $('#serverComboboxId').combobox();
>>> +    $('#targetFilterSelectId').filterselect();
>>> +    var options = [ {
>>> +        label : "DIR",
>>> +        value : "dir"
>>> +    }, {
>>> +        label : "NFS",
>>> +        value : "netfs"
>>> +    } ,{
>>> +        label : "iSCSI",
>>> +        value : "iscsi"
>>> +    } ,{
>>> +        label : "LOGICAL",
>>> +        value : "logical"
>>> +    } ];
>>> +    $('#poolTypeId').selectMenu("setData", options);
>>> +    $('#poolTypeInputId').change(function() {
>>> +        if ($(this).val() === 'dir') {
>>> +            $('.path-section').removeClass('tmpl-html');
>>> +            $('.logical-section').addClass('tmpl-html');
>>> +            $('.nfs-section').addClass('tmpl-html');
>>> +            $('.iscsi-section').addClass('tmpl-html');
>>> +        } else if ($(this).val() === 'netfs') {
>>> +            $('.path-section').addClass('tmpl-html');
>>> +            $('.logical-section').addClass('tmpl-html');
>>> +            $('.nfs-section').removeClass('tmpl-html');
>>> +            $('.iscsi-section').addClass('tmpl-html');
>>> +        } else if ($(this).val() === 'iscsi') {
>>> +            $('.path-section').addClass('tmpl-html');
>>> +            $('.logical-section').addClass('tmpl-html');
>>> +            $('.nfs-section').addClass('tmpl-html');
>>> +            $('.iscsi-section').removeClass('tmpl-html');
>>> +        } else if ($(this).val() === 'logical') {
>>> +            $('.path-section').addClass('tmpl-html');
>>> +            $('.logical-section').removeClass('tmpl-html');
>>> +            $('.nfs-section').addClass('tmpl-html');
>>> +            $('.iscsi-section').addClass('tmpl-html');
>>> +        }
>>> +    });
>>> +    $('#authId').click(function() {
>>> +        if ($(this).prop("checked")) {
>>> + $('.authenticationfield').removeClass('tmpl-html');
>>> +        } else {
>>> +            $('.authenticationfield').addClass('tmpl-html');
>>> +        }
>>> +    });
>>> +    $('#iscsiportId').keyup(function(event) {
>>> + $(this).toggleClass("invalid-field",!/^[0-9]+$/.test($(this).val()));
>>> +    });
>>>   };
>>>
>>>   kimchi.validateForm = function() {
>>
>




More information about the Kimchi-devel mailing list