[Kimchi-devel] [PATCH] [Kimchi] Issue #791: New UI for adding network bridges
Aline Manera
alinefm at linux.vnet.ibm.com
Thu Feb 4 16:37:06 UTC 2016
On 02/04/2016 12:38 PM, Peter Pennings wrote:
> Hi Aline,
>
> *- Why did you rename the function name to 'enableBridgedOptions2' ?*
>
> Sorry, my mistake, I will replace the name of this function.
>
>
> *- The VLAN information is associated with a macvtap bridge not with a
> Linux brigde.*
> *- We will only add a new option "Linux bridged" which will also list
> the interface combo box but without the VLAN configuration.*
> *
> *
> I followed this specification:
> https://github.com/kimchi-project/kimchi/issues/791. Maybe I
> understood something wrong. Should I show de VLAN information for macvtap?
>
Sorry, you are correct!
But either way, I am not able to set a VLAN when selecting the Linux
bridge option.
>
> *- Please, use: "Linux bridged: Virtual machines are connected through
> a network bridge"*
> *
> *
> Ok, I will do it.
>
>
> 2016-02-04 11:18 GMT-02:00 Aline Manera <alinefm at linux.vnet.ibm.com
> <mailto:alinefm at linux.vnet.ibm.com>>:
>
>
>
> On 02/03/2016 02:41 PM, peterpnns at gmail.com
> <mailto:peterpnns at gmail.com> wrote:
>> From: peterpennings<peterpnns at gmail.com> <mailto:peterpnns at gmail.com>
>>
>> This commit adds the new UI changes for network bridges and enables OVS bridges that where temporary hidden
>>
>> Signed-off-by: peterpennings<peterpnns at gmail.com> <mailto:peterpnns at gmail.com>
>> ---
>> netinfo.py | 3 +-
>> ui/js/src/kimchi.network.js | 2 +
>> ui/js/src/kimchi.network_add_main.js | 146 ++++++++++++++++++++++-------------
>> ui/pages/network-add.html.tmpl | 3 +-
>> 4 files changed, 96 insertions(+), 58 deletions(-)
>>
>> diff --git a/netinfo.py b/netinfo.py
>> index 2d83466..c00f603 100644
>> --- a/netinfo.py
>> +++ b/netinfo.py
>> @@ -221,8 +221,7 @@ def is_bare_nic(iface):
>> # a slave of bond.
>> # The bridge will not be exposed when all it's port are tap.
>> def all_favored_interfaces():
>> - return list(set(aggregated_bridges() + bare_nics() + bondings()) -
>> - set(ovs_bridges()))
>> + return aggregated_bridges() + bare_nics() + bondings()
>>
>>
>> def get_interface_type(iface):
>> diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
>> index 923aeb9..96c3fea 100644
>> --- a/ui/js/src/kimchi.network.js
>> +++ b/ui/js/src/kimchi.network.js
>> @@ -17,6 +17,8 @@
>> */
>>
>> kimchi.NETWORK_TYPE_MACVTAP = "macvtap";
>> +kimchi.NETWORK_TYPE_BRIDGED = "bridge";
>> +
>>
>> kimchi.initNetwork = function() {
>> if(wok.tabMode['network'] === 'admin') {
>> diff --git a/ui/js/src/kimchi.network_add_main.js b/ui/js/src/kimchi.network_add_main.js
>> index 76d436f..603a5ee 100644
>> --- a/ui/js/src/kimchi.network_add_main.js
>> +++ b/ui/js/src/kimchi.network_add_main.js
>> @@ -31,20 +31,20 @@ kimchi.startNetworkCreation = function() {
>> var network = kimchi.getNetworkDialogValues();
>> var data = {
>> name :network.name <http://network.name>,
>> - connection: network.type
>> + connection: network.type,
>> + interface: network.interface,
>> + vlan_id: network.vlan_id
>> };
>> - if (network.type === kimchi.NETWORK_TYPE_MACVTAP) {
>> - data.connection = "macvtap";
>> - data.interface = network.interface;
>> - if ($("#enableVlan").prop("checked")) {
>> +
>> + if (network.type === kimchi.NETWORK_TYPE_BRIDGED && $("#enableVlan").prop("checked")) {
>> data.vlan_id = network.vlan_id;
>> if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) {
>> wok.message.error.code('KCHNET6001E');
>> errorCallback();
>> return;
>> }
>> - }
>> }
>> +
>> kimchi.createNetwork(data, function(result) {
>> network.state = result.state === "active" ? "up" : "down";
>> network.interface = result.interface ? result.interface : i18n["KCHNET6001M"];
>> @@ -59,30 +59,8 @@ kimchi.startNetworkCreation = function() {
>> };
>>
>> kimchi.openNetworkDialog = function(okCallback) {
>> - kimchi.getInterfaces(function(result) {
>> - var options = [];
>> - $selectDestination = $('#networkDestinationID');
>> - var nics = {};
>> - var selectDestinationOptionHTML = '';
>> - for (var i = 0; i < result.length; i++) {
>> - options.push({label:result[i].name,value:result[i].name});
>> - nics[result[i].name] = result[i];
>> - selectDestinationOptionHTML += '<option value="'+ result[i].name + '">' + result[i].name + '</option>';
>> - }
>> - $selectDestination.append(selectDestinationOptionHTML);
>> - $selectDestination.selectpicker();
>> - onChange = function() {
>> - if (result.length>0 && $selectDestination.val() !== "") {
>> - $("#enableVlan").prop("disabled",false);
>> - $("#networkVlanID").val("");
>> - } else {
>> - $("#enableVlan").prop("disabled",true);
>> - }
>> - };
>> - $("#networkDestinationID").on("change", onChange);
>> - kimchi.setDefaultNetworkType(result.length!==0);
>> - onChange();
>> - });
>> + kimchi.loadInterfaces();
>> +
>> $("#networkFormOk").on("click", function() {
>> $("#networkFormOk").button("disable");
>> $("#networkName").prop("readonly", "readonly"); @@ -98,28 +76,10 @@ kimchi.openNetworkDialog =
>> function(okCallback) { }); }; -kimchi.enableBridgeOptions =
>> function(enable) { - $("
>> <mailto:%29;@@-98,28+76,10@@kimchi.openNetworkDialog=function%28okCallback%29%7B%7D%29;%7D;-kimchi.enableBridgeOptions=function%28enable%29%7B-$%28>#enableVlan").prop("checked", false);
>> - $("#networkVlanID").val("");
>> - if (enable) {
>> - $('#bridgedContent').slideDown(300);
>> - $('#enableVlan').prop("disabled", false);
>> - $('#networkVlanID').prop("disabled", true);
>> - } else {
>> - $('#bridgedContent').slideUp(300);
>> - $('#enableVlan').prop("disabled", true);
>> - $('#networkVlanID').prop("disabled", true);
>> - }
>> -};
>> -
>> -
>> kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
>> - $("#networkType").val('macvtap', isInterfaceAvail);
>> - $("#networkType option:contains('bridged')").prop("disabled", !isInterfaceAvail);
>> - $("#networkType").val('nat', !isInterfaceAvail);
>> $("#networkType").selectpicker();
>> if (!isInterfaceAvail) {
>
>> - kimchi.enableBridgeOptions(false);
>> + kimchi.enableBridgeOptions2(false);
>
> Why did you rename the function name to 'enableBridgedOptions*2*' ?
>
>> $("#networkBriDisabledLabel").removeClass('hidden');
>> } else {
>> if (kimchi.capabilities && kimchi.capabilities.nm_running) {
>> @@ -136,7 +96,12 @@ kimchi.getNetworkDialogValues = function() {
>> };
>> if (network.type === kimchi.NETWORK_TYPE_MACVTAP) {
>> network.interface = $("#networkDestinationID").val();
>> - network.vlan_id = parseInt($("#networkVlanID").val());
>> + }
>> + if (network.type === kimchi.NETWORK_TYPE_BRIDGED) {
>> + network.interface = $("#networkDestinationID").val();
>> + if (network.interface === 'nic' || network.interface === 'bonding') {
>> + network.vlan_id = parseInt($("#networkVlanID").val());
>> + }
>> }
>
> The VLAN information is associated with a macvtap bridge not with
> a Linux brigde.
>
> The current bridged UI (ie, macvtap) needs to keep the same.
>
> We will only add a new option "Linux bridged" which will also list
> the interface combo box but without the VLAN configuration.
>
>
>> return network;
>> };
>> @@ -147,14 +112,26 @@ kimchi.setupNetworkFormEvent = function() {
>> $("#networkName").toggleClass("invalid-field", !$("#networkName").val().match(/^[^\"\/]+$/));
>> kimchi.updateNetworkFormButton();
>> });
>> - $('#networkType').on('change', function() {
>> - var selectedType = $(this).val();
>> +
>> + $('#networkType, #networkDestinationID').on('change', function() {
>> + var selectedType = $("#networkType").val();
>> + var selectedDestination = $("#networkDestinationID").val();
>> if(selectedType == 'isolated' || selectedType == 'nat') {
>> - kimchi.enableBridgeOptions(false);
>> - } else if (selectedType == 'macvtap') {
>> - kimchi.enableBridgeOptions(true);
>> + kimchi.enableBridgeOptions2(false);
>> + } else {
>> + kimchi.enableBridgeOptions2(true, selectedType, selectedDestination);
>> }
>> +
>> });
>> +
>> + $('#networkType').on('change', function() {
>> + var selectedType = $("#networkType").val();
>> + if(selectedType === kimchi.NETWORK_TYPE_MACVTAP) {
>> + kimchi.loadInterfaces(new Array("nic", "bonding"));
>> + } else {
>> + kimchi.loadInterfaces();
>> + }
>> + });
>> };
>>
>> kimchi.updateNetworkFormButton = function() {
>> @@ -164,3 +141,62 @@ kimchi.updateNetworkFormButton = function() {
>> $("#networkFormOk").button("enable");
>> }
>> };
>> +
>> +kimchi.enableBridgeOptions2 = function(enable, networkType, networkDestination) {
>> + $("#enableVlan").prop("checked", false);
>> + $("#networkVlanID").val("");
>> + $('#vlan').hide();
>> + if (enable) {
>> + $('#bridgedContent').slideDown(300);
>> + $('#enableVlan').prop("disabled", false);
>> + $('#networkVlanID').prop("disabled", true);
>> + if (networkType === kimchi.NETWORK_TYPE_BRIDGED && (networkDestination === 'nic' || networkDestination === 'bonding')) {
>> + $('#vlan').show();
>> + }
>> + } else {
>> + $('#bridgedContent').slideUp(300);
>> + $('#enableVlan').prop("disabled", true);
>> + $('#networkVlanID').prop("disabled", true);
>> + };
>> +
>> +};
>> +
>> +kimchi.loadInterfaces = function(interfaceFilterArray) {
>> + kimchi.getInterfaces(function(result) {
>> +
>> + var options = [];
>> + $selectDestination = $('#networkDestinationID');
>> + var nics = {};
>> + $('#networkDestinationID').find('option').remove();
>> + var selectDestinationOptionHTML = '';
>> + for (var i = 0; i < result.length; i++) {
>> + if (typeof interfaceFilterArray === 'undefined') {
>> + options.push({label:result[i].name,value:result[i].name});
>> + nics[result[i].name] = result[i];
>> + selectDestinationOptionHTML += '<option value="'+ result[i].name + '">' + result[i].name + '</option>';
>> + } else {
>> + for (var k = 0; k < interfaceFilterArray.length; k++) {
>> + if (result[i].type == interfaceFilterArray[k]) {
>> + options.push({label:result[i].name,value:result[i].name});
>> + nics[result[i].name] = result[i];
>> + selectDestinationOptionHTML += '<option value="'+ result[i].name + '">' + result[i].name + '</option>';
>> + }
>> + }
>> + }
>> +
>> + }
>> + $selectDestination.append(selectDestinationOptionHTML);
>> + $('#networkDestinationID').selectpicker('refresh');
>> + onChange = function() {
>> + if (result.length>0 && $selectDestination.val() !== "") {
>> + $("#enableVlan").prop("disabled",false);
>> + $("#networkVlanID").val("");
>> + } else {
>> + $("#enableVlan").prop("disabled",true);
>> + }
>> + };
>> + kimchi.setDefaultNetworkType(result.length!==0);
>> + onChange();
>> + });
>> +};
>> +
>> diff --git a/ui/pages/network-add.html.tmpl b/ui/pages/network-add.html.tmpl
>> index 7158b75..b1f3e21 100644
>> --- a/ui/pages/network-add.html.tmpl
>> +++ b/ui/pages/network-add.html.tmpl
>> @@ -41,6 +41,7 @@
>> <option value="isolated">$_("Isolated: no external network connection")</option>
>> <option value="nat">$_("NAT: outbound physical network connection only")</option>
>> <option value="macvtap">$_("Bridged: Virtual machines are connected to physical network directly")</option>
>
>> + <option value="bridge">$_("Linux bridges and OVS bridges")</option>
>
> Please, use: "Linux bridged: Virtual machines are connected
> through a network bridge"
>
>> </select>
>> </div>
>> <div id="networkBriDisabledLabel" class="form-group hidden">
>> @@ -52,7 +53,7 @@
>> <select id="networkDestinationID" class="selectpicker col-md-12 col-lg-12">
>> </select>
>> </div>
>> - <div class="form-group">
>> + <div class="form-group" id="vlan">
>> <input id="enableVlan" class="wok-checkbox" type="checkbox" value="" />
>> <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label>
>> <div id="vlan-enabled">
>
> Also every time, I change the network type on combo box a new
> warning message about the Network Manager is appended in the dialog.
> It happened to have 4 messages in a time.
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20160204/1def41ae/attachment.html>
More information about the Kimchi-devel
mailing list