[Kimchi-devel] [PATCH V4] Fix Add Network window

[Rodrigo Trujillo]

VLans and Interfaces must only be available for selection if network
type Bridge is selected. This restriction was not implemented in the UI.
This patch fixes this problem.

Signed-off-by: Rodrigo Trujillo <rodrigo.trujillo at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.network.js     | 22 +++++++++++++++++++++-
 ui/pages/tabs/network.html.tmpl | 20 +++++++++++---------
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index fa2319c..91324ee 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -207,11 +207,28 @@ kimchi.openNetworkDialog = function(okCallback) {
     $("#networkConfig").dialog("open");
 };
 
+kimchi.enableBridgeOptions = function(enable) {
+    if (!enable) {
+        $("#enableVlan").prop("checked", false);
+        $("#networkVlanID").prop("disabled", true);
+        $("#networkVlanID").val("");
+        $("#networkInterface").val("");
+        $("#bridge-options").slideUp(100);
+    } else if (!$("#networkInterface").val()){
+        $("#networkInterface").prop("selectedIndex", 0);
+        $("#bridge-options").slideDown(100);
+    }
+};
+
 kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
     $("#networkTypeBri").prop("checked", isInterfaceAvail);
     $("#networkTypeBri").prop("disabled", !isInterfaceAvail);
-    $("#networkInterface").prop("disabled", !isInterfaceAvail);
     $("#networkTypeNat").prop("checked", !isInterfaceAvail);
+    if (!isInterfaceAvail) {
+        kimchi.enableBridgeOptions(false);
+    } else {
+        $("#bridge-options").slideDown(100);
+    }
 };
 
 kimchi.getNetworkDialogValues = function() {
@@ -247,12 +264,15 @@ kimchi.setupNetworkFormEvent = function() {
     });
     $("#networkTypeIso").on("click", function(event) {
         $("#networkInterface").prop("disabled", true);
+        kimchi.enableBridgeOptions(false);
     });
     $("#networkTypeNat").on("click", function(event) {
         $("#networkInterface").prop("disabled", true);
+        kimchi.enableBridgeOptions(false);
     });
     $("#networkTypeBri").on("click", function(event) {
         $("#networkInterface").prop("disabled", false);
+        kimchi.enableBridgeOptions(true);
     });
 };
 
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index afa6274..f298516 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -68,15 +68,17 @@
                     <input type="radio" id="networkTypeBri" name="networkType" value="bridged">
                     <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label>
                 </div>
-                <div class="destination">
-                    <label>$_("Destination"): </label>
-                    <select id="networkInterface"></select>
-                </div>
-                <div class="VLAN">
-                    <label for="enableVlan">$_("Enable VLAN"): </label>
-                    <input id="enableVlan" type="checkbox" value=""/>
-                    <label>$_("VLAN ID"): </label>
-                    <input type="text" id="networkVlanID" disabled>
+                <div id="bridge-options">
+                    <div class="destination">
+                        <label for="networkInterface">$_("Destination"): </label>
+                        <select id="networkInterface"></select>
+                    </div>
+                    <div class="VLAN">
+                        <label for="enableVlan">$_("Enable VLAN"): </label>
+                        <input id="enableVlan" type="checkbox" value=""/>
+                        <label for="networkVlanID">$_("VLAN ID"): </label>
+                        <input type="text" id="networkVlanID" disabled>
+                    </div>
                 </div>
             </div>
         </div>
-- 
1.8.5.3