[Kimchi-devel] [PATCH v2 3/3] UI: All user to specify a vlan ID for a virtual network.

[Mark Wu]

It adds a checkbox to provide choice of enabling vlan. If it's checked,
it all user to type the vlan ID.

Signed-off-by: Mark Wu <wudxw at linux.vnet.ibm.com>
---
 po/en_US.po                      |  3 +++
 po/kimchi.pot                    |  3 +++
 po/pt_BR.po                      |  3 +++
 po/zh_CN.po                      |  3 +++
 ui/css/theme-default/network.css |  9 +++++++++
 ui/js/src/kimchi.network.js      | 10 +++++++++-
 ui/pages/tabs/network.html.tmpl  |  6 ++++++
 7 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/po/en_US.po b/po/en_US.po
index f2810db..aa80424 100644
--- a/po/en_US.po
+++ b/po/en_US.po
@@ -543,6 +543,9 @@ msgstr "Bridged: VMs are connected to physical network directly"
 msgid "Destination"
 msgstr "Destination"
 
+msgid "Enable VLAN"
+msgstr "Enable VLAN"
+
 msgid "No templates found."
 msgstr "No templates found."
 
diff --git a/po/kimchi.pot b/po/kimchi.pot
index 762f4e4..3a25dc5 100644
--- a/po/kimchi.pot
+++ b/po/kimchi.pot
@@ -523,6 +523,9 @@ msgstr ""
 msgid "Destination"
 msgstr ""
 
+msgid "Enable VLAN"
+msgstr ""
+
 msgid "No templates found."
 msgstr ""
 
diff --git a/po/pt_BR.po b/po/pt_BR.po
index 7d59503..bff7c42 100644
--- a/po/pt_BR.po
+++ b/po/pt_BR.po
@@ -559,6 +559,9 @@ msgstr "Bridged: Máquinas virtuais estão conectadas diretamente a rede física
 msgid "Destination"
 msgstr "Destino"
 
+msgid "Enable VLAN"
+msgstr "Activar VLAN"
+
 msgid "No templates found."
 msgstr "Nenhum modelo encontrado."
 
diff --git a/po/zh_CN.po b/po/zh_CN.po
index de759ef..addae1a 100644
--- a/po/zh_CN.po
+++ b/po/zh_CN.po
@@ -541,6 +541,9 @@ msgstr "桥接: 虚拟机直接接入物理网络"
 msgid "Destination"
 msgstr "目标设备"
 
+msgid "Enable VLAN"
+msgstr "启用VLAN"
+
 msgid "No templates found."
 msgstr "没有发现模板"
 
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index f7d1e14..8987e9a 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -351,6 +351,15 @@
     margin-left: 28px;
 }
 
+.network-config .VLAN {
+    margin-left: 28px;
+}
+
+.network-config .VLAN input[type="text"] {
+    height: 25px;
+    width: 60px;
+}
+
 .network-config .input-hint-icon {
     margin: -1px 1px 0 0;
     display: inline-block;
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index f7b7eed..07cac60 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -135,11 +135,13 @@ kimchi.initNetworkCreation = function() {
             var network = kimchi.getNetworkDialogValues();
             var data = {
                 name : network.name,
-                connection: network.type
+                connection: network.type,
+                vlan_id: network.vlan_id,
             };
             if (network.type === kimchi.NETWORK_TYPE_BRIDGE) {
                 data.connection = "bridge";
                 data.interface = network.interface;
+                data.vlan_id = network.vlan_id;
             }
             kimchi.createNetwork(data, function(result) {
                 network.state = result.state === "active" ? "up" : "down";
@@ -193,6 +195,9 @@ kimchi.openNetworkDialog = function(okCallback) {
         okCallback();
         $("#networkConfig").dialog("close");
     });
+    $("#enableVlan").on("click", function() {
+        $("#networkVlanID").prop("disabled", !this.checked);
+    });
     $("#networkConfig").dialog("open");
 };
 
@@ -210,6 +215,7 @@ kimchi.getNetworkDialogValues = function() {
     };
     if (network.type === kimchi.NETWORK_TYPE_BRIDGE) {
         network.interface = $("#networkInterface").val();
+        network.vlan_id = parseInt($("#networkVlanID").val());
     }
     return network;
 };
@@ -224,6 +230,8 @@ kimchi.cleanNetworkDialog = function() {
     $("#networkInterface option").removeAttr("selected").find(":first").attr("selected", "selected");
     $("#networkFormOk").off("click");
     $("#networkFormOk").button("disable");
+    $("#networkVlanID").prop("disabled", true);
+    $("#enableVlan").prop("checked", false);
 };
 
 kimchi.setupNetworkFormEvent = function() {
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index d850140..308e6d5 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -75,6 +75,12 @@
                     <label>$_("Destination"): </label>
                     <select id="networkInterface"></select>
                 </div>
+                <div class="VLAN">
+                    <label>$_("Enable VLAN"): </label>
+                    <input id="enableVlan" type="checkbox" value=""/>
+                    <label>$_("VLAN ID"): </label>
+                    <input type="text" id="networkVlanID" disabled>
+                </div>
             </div>
         </div>
     </div>
-- 
1.8.4.2