[Kimchi-devel] [PATCH 2/2] Implement the frontend to use existing VG as storage pool

Aline Manera alinefm at linux.vnet.ibm.com
Tue Oct 27 17:14:39 UTC 2015



On 22/10/2015 22:52, Jose Ricardo Ziviani wrote:
> Signed-off-by: Jose Ricardo Ziviani <joserz at linux.vnet.ibm.com>
> ---
>   src/wok/plugins/kimchi/API.json                    |  5 ++
>   .../kimchi/ui/css/theme-default/storage.css        | 22 ++++++++
>   src/wok/plugins/kimchi/ui/js/src/kimchi.api.js     | 11 ++++
>   .../ui/js/src/kimchi.storagepool_add_main.js       | 58 ++++++++++++++++++++--
>   .../kimchi/ui/pages/storagepool-add.html.tmpl      | 38 +++++++++++++-
>   5 files changed, 129 insertions(+), 5 deletions(-)
>
> diff --git a/src/wok/plugins/kimchi/API.json b/src/wok/plugins/kimchi/API.json
> index fc1d2dd..ce09039 100644
> --- a/src/wok/plugins/kimchi/API.json
> +++ b/src/wok/plugins/kimchi/API.json
> @@ -165,6 +165,11 @@
>                                       "error": "KCHPOOL0025E"
>                                   }
>                               }
> +                        },
> +                        "vgselect": {
> +                            "description": "Use an existing VG or create a new one",
> +                            "type": "string",
> +                            "error": "KCHPOOL0026E"

It is better to use a boolean parameter here.

>                           }
>                       }
>                   }
> diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/storage.css b/src/wok/plugins/kimchi/ui/css/theme-default/storage.css
> index 88447b5..a5952ae 100644
> --- a/src/wok/plugins/kimchi/ui/css/theme-default/storage.css
> +++ b/src/wok/plugins/kimchi/ui/css/theme-default/storage.css
> @@ -422,6 +422,28 @@
>       white-space: nowrap;
>   }
>
> +.existing-groups {
> +    padding-left:13px;
> +}
> +
> +.form-section .field {
> +    font-size: 13px;
> +    font-weight: lighter;
> +}
> +
> +.existing-groups>table {
> +    width: 300px;
> +    padding: 13px;
> +    margin-left: 20px;
> +    font-size: 13px;
> +    font-weight: lighter;
> +}
> +
> +.existing-groups>table>thead {
> +    text-align: left;
> +    background-color: rgb(0, 138, 191);
> +}
> +
>   .storage-type-wrapper-controls {
>       width: 300px;
>       display: inline-block;
> diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
> index a16c95e..bd60bbb 100644
> --- a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
> +++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
> @@ -745,6 +745,17 @@ var kimchi = {
>           });
>       },
>
> +    listExistingVGs : function(suc, err) {
> +        wok.requestJSON({
> +            url : 'plugins/kimchi/host/vgs',
> +            type: 'GET',
> +            contentType : 'aplication/json',
> +            dataType : 'json',
> +            success : suc,
> +            error : err
> +        });
> +    },
> +
>       getStorageServers: function(type, suc, err) {
>           var url = 'plugins/kimchi/storageservers?_target_type=' + type;
>           wok.requestJSON({
> diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js
> index 8c27539..9cfa446 100644
> --- a/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js
> +++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js
> @@ -141,6 +141,32 @@ kimchi.initStorageAddPage = function() {
>           $('.host-partition').addClass('text-help');
>       });
>
> +    kimchi.listExistingVGs(function(data) {
> +        if (data.length == 0) {
> +            $('.existing-groups').html(i18n['KCHPOOL6011M']);
> +            $('.existing-groups').addClass('text-help');
> +            return;
> +        }
> +        var deviceHtml = $('#vgTmpl').html();
> +        var listHtml = '';
> +        $.each(data, function(index, value) {
> +            value.size /= Math.pow(1024, 3);
> +            value.size = value.size.toFixed() + " GiB";
> +            value.free /= Math.pow(1024, 3);
> +            value.free = value.free.toFixed() + " GiB";
> +            listHtml += wok.substitute(deviceHtml, value);
> +        });
> +        $('#vgrows').html(listHtml);
> +
> +        $('input[type=radio][name=devices]').change(function() {
> +            var vgdev=$('input[type=radio][name=devices]:checked').val();
> +            $('#poolId').val(vgdev);
> +        });
> +    }, function(err) {
> +        $('.existing-groups').html(i18n['KCHPOOL6013M'] + '<br/>(' + err.responseJSON.reason + ')');
> +        $('.existing-groups').addClass('text-help');
> +    });
> +
>       kimchi.getHostFCDevices(function(data){
>           if(data.length>0){
>               for(var i=0;i<data.length;i++){
> @@ -235,6 +261,22 @@ kimchi.initStorageAddPage = function() {
>                   $(value).addClass('tmpl-html');
>               }
>           });
> +
> +        $("#poolId").removeAttr("disabled");
> +        if (selectType == 'logical') {
> +            $('input[type=radio][name=vgselect]').attr('checked', 'checked');
> +        }
> +    });
> +    $('input[type=radio][name=vgselect]').change(function() {
> +        if ($(this).val() == 'existingvg') {
> +            $('.existing-groups').removeClass('tmpl-html');
> +            $('.host-partition').addClass('tmpl-html');
> +            $("#poolId").attr("disabled", "disabled");
> +        } else {
> +            $('.existing-groups').addClass('tmpl-html');
> +            $('.host-partition').removeClass('tmpl-html');
> +            $("#poolId").removeAttr("disabled");
> +        }
>       });
>       $('#authId').click(function() {
>           if ($(this).prop("checked")) {
> @@ -274,7 +316,11 @@ kimchi.inputsNotBlank = function() {
>           if (!$('#iscsiserverId').val()) return false;
>           if (!$('#iscsiTargetId').val()) return false;
>       } else if (poolType === "logical") {
> -        if ($("input[name=devices]:checked").length === 0)
> +        var vgtype=$('input[type=radio][name=vgselect]:checked').val();
> +        if (vgtype == 'newvg' && $('input[name=devices]:checked').length === 0)
> +            return false;
> +        else if (vgtype == 'existingvg' &&
> +                 $('input[type=radio][name=devices]:checked').length !== 1)
>               return false;
>       }
>       return true;
> @@ -336,12 +382,16 @@ kimchi.validateServer = function(serverField) {
>   };
>
>   kimchi.validateLogicalForm = function () {
> -    if ($("input[name=devices]:checked").length === 0) {
> +    var vgtype=$('input[type=radio][name=vgselect]:checked').val();
> +    if (vgtype == 'newvg' && $("input[name=devices]:checked").length === 0) {
> +        wok.message.error.code('KCHPOOL6006E');
> +        return false;
> +    } else if (vgtype == 'existingvg' &&
> +               $('input[type=radio][name=devices]:checked').length !== 1) {
>           wok.message.error.code('KCHPOOL6006E');
>           return false;
> -    } else {
> -        return true;
>       }
> +    return true;
>   };
>
>   kimchi.addPool = function(event) {
> diff --git a/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl
> index a697af5..23e5877 100644
> --- a/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl
> +++ b/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl
> @@ -99,8 +99,15 @@
>                       </section>
>                   </div>
>                   <div class="logical-section tmpl-html">
> +                    <section class="form-section">
> +                        <h2>3. Create a new volume group or use an existing one?</h2>
> +                        <div class="field">
> +                            <input type="radio" name="vgselect" value="newvg" checked="checked">New VG</input>
> +                            <input type="radio" name="vgselect" value="existingvg">Existing VG</input>
> +                        </div>
> +                    </section>
>                       <section class="form-section storageType">
> -                        <h2>3. $_("Device path")</h2>
> +                        <h2>4. $_("Device path")</h2>
>                           <div class="host-partition">
>                               <div class="icon-info-circled light-grey c1 help-inline"></div>
>                               <p class="text-help help-inline">
> @@ -108,6 +115,27 @@
>                                   <img src = "plugins/kimchi/images/theme-default/loading.gif" />
>                               </p>
>                           </div>
> +                        <div class="existing-groups tmpl-html">
> +                            <div class="icon-info-circled light-grey c1 help-inline"></div>
> +                            <table class="volume-groups">
> +                                <thead>
> +                                    <tr>
> +                                        <th></th>
> +                                        <th>Volume Group</th>
> +                                        <th>Size</th>
> +                                        <th>Free space</th>
> +                                    </tr>
> +                                </thead>
> +                                <tbody id="vgrows">
> +                                    <tr class="text-help help-inline">
> +                                        <td colspan="4">
> +                                            $_("Looking for available partitions ...")
> +                                            <img src = "plugins/kimchi/images/theme-default/loading.gif" />
> +                                        </td>
> +                                    </tr>
> +                                </tbody>
> +                            </table>
> +                        </div>
>                       </section>
>                   </div>
>                   <div class="iscsi-section tmpl-html">
> @@ -182,5 +210,13 @@
>               <label for="{name}">{path}</label>
>           </div>
>       </script>
> +    <script id="vgTmpl" type="html/text">
> +        <tr>
> +            <td><input type="radio" name="devices" value="{vgname}"/></td>
> +            <td>{vgname}</td>
> +            <td>{size}</td>
> +            <td>{free}</td>
> +        </tr>
> +    </script>
>   </body>
>   </html>




More information about the Kimchi-devel mailing list