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

peterpnns at gmail.com peterpnns at gmail.com
Thu Mar 31 18:56:56 UTC 2016


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();
+    // });
 };
 
 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>
-- 
2.5.0




More information about the Kimchi-devel mailing list