[Kimchi-devel] [PATCH] [Kimchi] Disable Template when it has invalid parameters

Aline Manera alinefm at linux.vnet.ibm.com
Mon Apr 4 19:01:44 UTC 2016



On 03/31/2016 03:56 PM, peterpnns at gmail.com wrote:
> From: peterpennings <peterpnns at gmail.com>
>
> Signed-off-by: peterpennings <peterpnns at gmail.com>
> ---
>   ui/css/kimchi.css                    | 28 ++++++++++++++++++---
>   ui/css/src/modules/_guests.scss      |  6 +++++
>   ui/css/src/modules/_templates.scss   | 18 +++++++++++---
>   ui/js/src/kimchi.guest_add_main.js   |  8 ++++++
>   ui/js/src/kimchi.network_add_main.js | 48 +++++++++++++++++++++++++-----------
>   ui/js/src/kimchi.template_main.js    |  9 +++++--
>   ui/pages/guest-add.html.tmpl         |  7 +++---
>   ui/pages/tabs/templates.html.tmpl    |  6 +++--
>   8 files changed, 102 insertions(+), 28 deletions(-)
>
> diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
> index 27f7787..15040cd 100644
> --- a/ui/css/kimchi.css
> +++ b/ui/css/kimchi.css
> @@ -255,6 +255,13 @@
>     padding: 10px 30px;
>   }
>
> +.guests-modal .invalid-icon {
> +  position: absolute;
> +  right: 10px;
> +  bottom: 10px;
> +  font-size: 32px;
> +}
> +
>   #guest-add-window .modal-body {
>     margin: 0;
>     padding: 0;
> @@ -1771,16 +1778,20 @@ body.wok-gallery {
>   }
>
>   #templates-root-container .wok-vm-list .column-version {
> -  width: 14.2435%;
> +  width: 12.2435%;
>     font-weight: bold;
>   }
>
>   #templates-root-container .wok-vm-list .column-processors {
> -  width: 12.8413%;
> +  width: 10.8413%;
>   }
>
>   #templates-root-container .wok-vm-list .column-memory {
> -  width: 7.3800%;
> +  width: 9.6900%;
> +}
> +
> +#templates-root-container .wok-vm-list .column-status {
> +  width: 1.6900%;
>   }
>
>   #templates-root-container .wok-vm-list .column-action {
> @@ -1875,6 +1886,17 @@ body.wok-gallery {
>     cursor: default;
>   }
>
> +#templates-root-container .wok-vm-gallery .column-status {
> +  position: relative;
> +}
> +
> +#templates-root-container .wok-vm-gallery .invalid-icon {
> +  position: absolute;
> +  bottom: 10px;
> +  right: -3px;
> +  font-size: 32px;
> +}
> +
>   #templates-root-container .wok-vm-gallery .item-hidden.column-type, #templates-root-container .wok-vm-gallery .item-hidden.column-version, #templates-root-container .wok-vm-gallery .item-hidden.column-processors {
>     padding-bottom: 11px;
>   }
> diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
> index 6f5dbf0..b30f25d 100644
> --- a/ui/css/src/modules/_guests.scss
> +++ b/ui/css/src/modules/_guests.scss
> @@ -38,6 +38,12 @@
>           overflow: auto;
>           padding: 10px 30px;
>       }
> +    .invalid-icon {
> +        position: absolute;
> +        right: 10px;
> +        bottom: 10px;
> +        font-size: 32px;
> +    }
>   }
>
>   #guest-add-window {
> diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
> index 86b9305..ff4cae2 100644
> --- a/ui/css/src/modules/_templates.scss
> +++ b/ui/css/src/modules/_templates.scss
> @@ -340,14 +340,17 @@
>               font-weight: bold;
>           }
>           .column-version {
> -            width: 14.2435%;
> +            width: 12.2435%;
>               font-weight: bold;
>           }
>           .column-processors {
> -            width: 12.8413%;
> +            width: 10.8413%;
>           }
>           .column-memory {
> -            width: 7.3800%;
> +            width: 9.6900%;
> +        }
> +        .column-status {
> +            width: 1.6900%;
>           }
>           .column-action {
>               width: 33.8000%;
> @@ -425,6 +428,15 @@
>               white-space: nowrap;
>               cursor: default;
>           }
> +        .column-status {
> +            position: relative;
> +        }
> +        .invalid-icon {
> +            position: absolute;
> +            bottom: 10px;
> +            right: -3px;
> +            font-size: 32px;
> +        }
>           .item-hidden {
>               &.column-type,
>               &.column-version,
> diff --git a/ui/js/src/kimchi.guest_add_main.js b/ui/js/src/kimchi.guest_add_main.js
> index 87ad6fa..523ad7e 100644
> --- a/ui/js/src/kimchi.guest_add_main.js
> +++ b/ui/js/src/kimchi.guest_add_main.js
> @@ -29,9 +29,17 @@ kimchi.guest_add_main = function() {
>                   var html = '';
>                   var tmpl = $('#tmpl-template').html();
>                   $.each(result, function(index, value) {
> +                    value.invalid_indicator = "invalid";
> +                    if ($.isEmptyObject(value.invalid)) {
> +                        value.invalid_indicator = "valid";
> +                    }
>                       html += wok.substitute(tmpl, value);
>                   });
>                   $('#templateTile').html(html);
> +                $('.invalid-radio[data-invalid="invalid"]').attr("disabled", true);
> +                $('.invalid-icon[data-invalid="valid"]').hide();
> +                $('.template-opacity[data-invalid="invalid"]').css({ opacity: 0.7 });
> +                $('[data-toggle="tooltip"]').tooltip();
>                   return;
>               }
>
> diff --git a/ui/js/src/kimchi.network_add_main.js b/ui/js/src/kimchi.network_add_main.js
> index 99e42c1..f0507be 100644
> --- a/ui/js/src/kimchi.network_add_main.js
> +++ b/ui/js/src/kimchi.network_add_main.js
> @@ -32,21 +32,23 @@ kimchi.startNetworkCreation = function() {
>       var data = {
>           name : network.name,
>           connection: network.type,
> -        interfaces: [ network.interface ],
> +        interfaces: network.interface,
>           vlan_id: network.vlan_id
>       };
>
> -    kimchi.createNetwork(data, function(result) {
> -        network.state = result.state === "active" ? "up" : "down";
> -        network.interface = result.interfaces ? result.interfaces[0] : i18n["KCHNET6001M"];
> -        network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"];
> -        network.persistent = result.persistent;
> -        $('#networkGrid').dataGrid('addRow', kimchi.addNetworkItem(network));
> -        wok.window.close();
> -    }, function(data) {
> -        wok.message.error(data.responseJSON.reason,'#alert-modal-container');
> -        errorCallback();
> -    });

> +    console.log(data);
> +
> +    // kimchi.createNetwork(data, function(result) {
> +    //     network.state = result.state === "active" ? "up" : "down";
> +    //     network.interface = result.interfaces ? result.interfaces[0] : i18n["KCHNET6001M"];
> +    //     network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"];
> +    //     network.persistent = result.persistent;
> +    //     $('#networkGrid').dataGrid('addRow', kimchi.addNetworkItem(network));
> +    //     wok.window.close();
> +    // }, function(data) {
> +    //     wok.message.error(data.responseJSON.reason,'#alert-modal-container');
> +    //     errorCallback();
> +    // });

The block above should be removed.

>   };
>
>   kimchi.openNetworkDialog = function(okCallback) {
> @@ -80,13 +82,24 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
>   kimchi.getNetworkDialogValues = function() {
>       var network = {
>           name : $("#networkName").val(),
> -        type : $("#networkType").val()
> +        type : $("#networkType").val(),
> +        interface : []
>       };
> +
>       if (network.type === kimchi.NETWORK_TYPE_MACVTAP ||  network.type === kimchi.NETWORK_TYPE_VEPA) {
> -        network.interface = $("#networkDestinationID").val();
> +        //network.interface = $("#networkDestinationID").val();
> +        if (network.type === 'vepa') {
> +            var destinations = $("#networkDestinationID").val();
> +            $.each(destinations, function( index, value ){
> +                network.interface.push(value);
> +            });
> +        } else {
> +            network.interface.push($("#networkDestinationID").val());
> +        }
>       }
>       if (network.type === kimchi.NETWORK_TYPE_BRIDGED) {
> -        network.interface = $("#networkDestinationID").val();
> +        //network.interface = $("#networkDestinationID").val();
> +        network.interface.push($("#networkDestinationID").val());
>           if ($("#enableVlan").prop("checked") && ($("#networkDestinationID").find(':selected').data('type') === 'nic' || $("#networkDestinationID").find(':selected').data('type') === 'bonding')) {
>               network.vlan_id = parseInt($("#networkVlanID").val());
>           }
> @@ -121,6 +134,10 @@ kimchi.setupNetworkFormEvent = function() {
>           } else {
>               kimchi.loadInterfaces();
>           }
> +        if(selectedType === kimchi.NETWORK_TYPE_VEPA) {
> +            $("#networkDestinationID").multiselect('enable');
> +        }
> +
>       });
>
>       $('#networkDestinationID').on('change', function() {
> @@ -186,6 +203,7 @@ kimchi.loadInterfaces = function(interfaceFilterArray) {
>                   }
>               }
>           }
> +        selectDestinationOptionHTML += '<option data-type="teste" value="teste">teste</option>';
>           $selectDestination.append(selectDestinationOptionHTML);
>           $('#networkDestinationID').selectpicker('refresh');
>           kimchi.setDefaultNetworkType(result.length!==0);
> diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js
> index 5787d77..0a4f090 100644
> --- a/ui/js/src/kimchi.template_main.js
> +++ b/ui/js/src/kimchi.template_main.js
> @@ -7,7 +7,7 @@
>    * you may not use this file except in compliance with the License.
>    * You may obtain a copy of the License at
>    *
> - *     http://www.apache.org/licenses/LICENSE-2.0
> + *     http://www.apache.org/licenses/LICENSE-2.0invalid_indicator_template
>    *
>    * Unless required by applicable law or agreed to in writing, software
>    * distributed under the License is distributed on an "AS IS" BASIS,
> @@ -24,6 +24,10 @@ kimchi.doListTemplates = function() {
>               var listHtml = '';
>               var templateHtml = $('#templateTmpl').html();
>               $.each(result, function(index, value) {
> +                value.invalid_indicator = "invalid";
> +                if ($.isEmptyObject(value.invalid)) {
> +                    value.invalid_indicator = "valid";
> +                }
>                   listHtml += wok.substitute(templateHtml, value);
>               });
>               $('.wok-vm-list').removeClass('hidden');
> @@ -31,6 +35,7 @@ kimchi.doListTemplates = function() {
>               $('#templateList').html(listHtml);
>               kimchi.templateBindClick();
>               $('.wok-mask').fadeOut(300, function() {});
> +            $('.invalid-icon[data-invalid="valid"]').hide();
>           } else {
>               $('#templateList').html('');
>               $('#noTemplates').show();
> @@ -43,7 +48,7 @@ kimchi.doListTemplates = function() {
>               valueNames: ['name-filter', 'os-type-filter', 'os-version-filter', 'cpus-filter', 'memory-filter']
>           };
>           var templatesList = new List('templates-container', options);
> -
> +        $('[data-invalid="invalid"][data-toggle="tooltip"]').tooltip();
>       }, function(err) {
>           wok.message.error(err.responseJSON.reason);
>           $('.wok-mask').fadeOut(300, function() {
> diff --git a/ui/pages/guest-add.html.tmpl b/ui/pages/guest-add.html.tmpl
> index 33472ce..5d7ed41 100644
> --- a/ui/pages/guest-add.html.tmpl
> +++ b/ui/pages/guest-add.html.tmpl
> @@ -51,11 +51,12 @@
>                               <ul id="templateTile" class="list-template tile-check tile-template">
>                               </ul>
>                                   <script type="html/text" id="tmpl-template" class="tmpl-html">
> -                                    <li class="col-md-3">
> +                                    <li class="col-md-3 template-opacity" data-invalid="{invalid_indicator}">
>                                           <label class="box-iso-outer">
> -                                            <input type="radio" name="template" value="/plugins/kimchi/templates/{name}" class="iso-radio-hidden">
> +                                            <input type="radio" name="template" value="/plugins/kimchi/templates/{name}" class="iso-radio-hidden invalid-radio" data-invalid="{invalid_indicator}">
>                                               <span class="box-iso-border">
>                                                   <span class="box-iso-inner">
> +
>                                                       <h3 class="iso-title {os_distro}" title="{name}">{name}</h3>
>                                                           <dl class="iso-info">
>                                                               <dt>{os_distro}</dt>
> @@ -65,7 +66,7 @@
>                                                               <dt>{cpu_info.vcpus} Cores</dt>
>                                                               <dd>$_("Current CPUs")</dd>
>                                                               <dt>{memory.current} M</dt>
> -                                                            <dd>$_("Memory")</dd>
> +                                                            <dd>$_("Memory")<i class="fa fa-exclamation-triangle invalid-icon" data-invalid="{invalid_indicator}"data-toggle="tooltip" title="$_("This template has invalid parameters.")"></i></dd>
>                                                           </dl>
>                                                   </span>
>                                               </span>
> diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl
> index 50e2b22..611af35 100644
> --- a/ui/pages/tabs/templates.html.tmpl
> +++ b/ui/pages/tabs/templates.html.tmpl
> @@ -85,6 +85,7 @@
>                     --><span class="column-version">$_("Version")</span><!--
>                     --><span class="column-processors">$_("Current CPUs")</span><!--
>                     --><span class="column-memory">$_("Memory")</span><!--
> +                  --><span class="column-status"></span><!--
>                     --><span class="column-action" style="display:none"><span class="sr-only">$_("Actions")</span></span>
>                       </li>
>                       <li>
> @@ -108,7 +109,7 @@
>       kimchi.template_main();
>       </script>
>       <script id="templateTmpl" type="html/text">
> -        <li class="wok-vm-body">
> +        <li class="wok-vm-body" data-invalid="{invalid_indicator}" data-toggle="tooltip" title="$_("This template has invalid parameters.")">
>               <span class='column-name name-filter name-distro-icon icon-{os_distro}' title="{name}" val="{name}">{name}</span><!--
>               --><span class='column-action pull-right'>
>                   <span class="pull-right">
> @@ -130,7 +131,8 @@
>               --><span class='column-processors cpus-filter' val="{cpu_info.vcpus}"><strong>{cpu_info.vcpus} $_("Cores")</strong></span><!--
>               --><span class="item-hidden column-processors cpus-filter">$_("Current CPUs")</span><!--
>               --><span class='column-memory memory-filter' val="{memory.current}"><strong>{memory.current} $_("M")</strong></span><!--
> -            --><span class="item-hidden column-memory memory-filter">$_("Memory")</span>
> +            --><span class="item-hidden column-memory memory-filter">$_("Memory")</span><!--
> +            --><span class="column-status"><i class="fa fa-exclamation-triangle invalid-icon" data-invalid="{invalid_indicator}"></i></span>
>           </li>
>       </script>
>   </body>




More information about the Kimchi-devel mailing list