[Kimchi-devel] [PATCH v4 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 1061b20..ebbe1ee 100644
--- a/po/en_US.po
+++ b/po/en_US.po
@@ -517,6 +517,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 5f3a106..a2bbcf5 100755
--- a/po/kimchi.pot
+++ b/po/kimchi.pot
@@ -494,6 +494,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 737e5db..69bb554 100644
--- a/po/pt_BR.po
+++ b/po/pt_BR.po
@@ -531,6 +531,9 @@ msgstr "Bridged: Máquinas virtuais estão conectadas diretamente a rede física
 msgid "Destination"
 msgstr "Destino"
 
+msgid "Enable VLAN"
+msgstr "Ativar VLAN"
+
 msgid "No templates found."
 msgstr "Nenhum modelo encontrado."
 
diff --git a/po/zh_CN.po b/po/zh_CN.po
index 47027e5..411fcaa 100644
--- a/po/zh_CN.po
+++ b/po/zh_CN.po
@@ -513,6 +513,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 257540f..58c228b 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -207,6 +207,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 cdcf099..65479b2 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";
@@ -194,6 +196,9 @@ kimchi.openNetworkDialog = function(okCallback) {
         okCallback();
         $("#networkConfig").dialog("close");
     });
+    $("#enableVlan").on("click", function() {
+        $("#networkVlanID").prop("disabled", !this.checked);
+    });
     $("#networkConfig").dialog("open");
 };
 
@@ -211,6 +216,7 @@ kimchi.getNetworkDialogValues = function() {
     };
     if (network.type === kimchi.NETWORK_TYPE_BRIDGE) {
         network.interface = $("#networkInterface").val();
+        network.vlan_id = parseInt($("#networkVlanID").val());
     }
     return network;
 };
@@ -225,6 +231,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 9c2ec2a..fcf8556 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