Re: [Kimchi-devel] [PATCH] [Kimchi] Issue #791: New UI for adding network bridges

From: peterpennings <peterpnns(a)gmail.com&gt; This commit adds the new UI changes for network bridges and enables OVS bridges that where temporary hidden Signed-off-by: peterpennings <peterpnns(a)gmail.com&gt; --- 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, - 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) { - $("#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); $("#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()); + } } 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>

</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">