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

[Aline Manera]

Reviewed-by: Aline Manera <alinefm at linux.vnet.ibm.com>

I have some comments about the UI, but it can be done in other patch.
I think it should be nicer if the fields for a bridged network only 
appears when selecting this option.

On 01/07/2014 01:51 AM, Mark Wu wrote:
> 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..c437c0b 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 "Ativar 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>