7:40 p.m.
From: peterpennings <peterpnns(a)gmail.com>
This patch adds Linux and OVS bridges. netinfo.py had to be updated to show OVS bridges in
order to reflect the changes made in the UI.
V2:
* Fixed error messages
* Fixed function name
* Form validations
V3:
* Fixed submit function to send the name of interface instead of type.
peterpennings (1):
Issue #791: New UI for adding network bridges
netinfo.py | 3 +-
ui/js/src/kimchi.network.js | 2 +
ui/js/src/kimchi.network_add_main.js | 152 ++++++++++++++++++++---------------
ui/pages/network-add.html.tmpl | 5 +-
4 files changed, 95 insertions(+), 67 deletions(-)
--
2.5.0
7:40 p.m.
New subject: [PATCH] [Kimchi] Issue #791: New UI for adding network bridges V3
From: peterpennings <peterpnns(a)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(a)gmail.com>
---
netinfo.py | 3 +-
ui/js/src/kimchi.network.js | 2 +
ui/js/src/kimchi.network_add_main.js | 152 ++++++++++++++++++++---------------
ui/pages/network-add.html.tmpl | 5 +-
4 files changed, 95 insertions(+), 67 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..8d906a1 100644
--- a/ui/js/src/kimchi.network_add_main.js
+++ b/ui/js/src/kimchi.network_add_main.js
@@ -31,20 +31,11 @@ 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")) {
- 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 +50,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,33 +67,12 @@ 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);
$("#networkBriDisabledLabel").removeClass('hidden');
} else {
- if (kimchi.capabilities && kimchi.capabilities.nm_running) {
-
wok.message.warn(i18n['KCHNET6001W'],'#alert-modal-container');
- }
$("#networkBriDisabledLabel").remove();
}
};
@@ -136,23 +84,43 @@ 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 ($("#enableVlan").prop("checked") &&
($("#networkDestinationID").find(':selected').data('type') ===
'nic' ||
$("#networkDestinationID").find(':selected').data('type') ===
'bonding')) {
+ network.vlan_id = parseInt($("#networkVlanID").val());
+ }
}
return network;
};
kimchi.setupNetworkFormEvent = function() {
+ if (kimchi.capabilities && kimchi.capabilities.nm_running) {
+
wok.message.warn(i18n['KCHNET6001W'],'#alert-modal-container');
+ }
$('#bridgedContent').hide();
$("#networkName").on("keyup", function(event) {
$("#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 selectedDestinationType =
$("#networkDestinationID").find(':selected').data('type');
if(selectedType == 'isolated' || selectedType == 'nat') {
kimchi.enableBridgeOptions(false);
- } else if (selectedType == 'macvtap') {
- kimchi.enableBridgeOptions(true);
+ } else {
+ kimchi.enableBridgeOptions(true, selectedType, selectedDestinationType);
+ }
+
+ });
+
+ $('#networkType').on('change', function() {
+ var selectedType = $("#networkType").val();
+ if(selectedType === kimchi.NETWORK_TYPE_MACVTAP) {
+ kimchi.loadInterfaces(new Array("nic", "bonding"));
+ } else {
+ kimchi.loadInterfaces();
}
});
};
@@ -164,3 +132,61 @@ kimchi.updateNetworkFormButton = function() {
$("#networkFormOk").button("enable");
}
};
+
+kimchi.enableBridgeOptions = function(enable, networkType, networkDestinationType) {
+ $("#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 &&
(networkDestinationType === 'nic' || networkDestinationType ===
'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 data-type="'+
result[i].type +'" 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
data-type="'+ result[i].type +'" 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();
+ });
+};
\ No newline at end of file
diff --git a/ui/pages/network-add.html.tmpl b/ui/pages/network-add.html.tmpl
index 7158b75..6bd2acf 100644
--- a/ui/pages/network-add.html.tmpl
+++ b/ui/pages/network-add.html.tmpl
@@ -40,7 +40,8 @@
<select id="networkType" class="selectpicker col-md-12
col-lg-12">
<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="macvtap">$_("Macvtap: Virtual
machines are connected to physical network directly")</option>
+ <option value="bridge">$_("Bridged: Virtual machines
are connected through a network bridge")</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">
--
2.5.0
8:24 p.m.
New subject: [PATCH] [Kimchi] Issue #791: New UI for adding network bridges V3
Hi Peter, code is fine now, but I still cannot see VLAN checkbox and
field when I select bridged network.
Meanwhile I will fix backend to accept vlan for bridges instead of macvtap.
On 08-02-2016 16:40, peterpnns(a)gmail.com wrote:
From: peterpennings <peterpnns(a)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(a)gmail.com>
---
netinfo.py | 3 +-
ui/js/src/kimchi.network.js | 2 +
ui/js/src/kimchi.network_add_main.js | 152 ++++++++++++++++++++---------------
ui/pages/network-add.html.tmpl | 5 +-
4 files changed, 95 insertions(+), 67 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..8d906a1 100644
--- a/ui/js/src/kimchi.network_add_main.js
+++ b/ui/js/src/kimchi.network_add_main.js
@@ -31,20 +31,11 @@ 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")) {
- 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 +50,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,33 +67,12 @@ 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);
$("#networkBriDisabledLabel").removeClass('hidden');
} else {
- if (kimchi.capabilities && kimchi.capabilities.nm_running) {
-
wok.message.warn(i18n['KCHNET6001W'],'#alert-modal-container');
- }
$("#networkBriDisabledLabel").remove();
}
};
@@ -136,23 +84,43 @@ 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 ($("#enableVlan").prop("checked") &&
($("#networkDestinationID").find(':selected').data('type') ===
'nic' ||
$("#networkDestinationID").find(':selected').data('type') ===
'bonding')) {
+ network.vlan_id = parseInt($("#networkVlanID").val());
+ }
}
return network;
};
kimchi.setupNetworkFormEvent = function() {
+ if (kimchi.capabilities && kimchi.capabilities.nm_running) {
+
wok.message.warn(i18n['KCHNET6001W'],'#alert-modal-container');
+ }
$('#bridgedContent').hide();
$("#networkName").on("keyup", function(event) {
$("#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 selectedDestinationType =
$("#networkDestinationID").find(':selected').data('type');
if(selectedType == 'isolated' || selectedType == 'nat') {
kimchi.enableBridgeOptions(false);
- } else if (selectedType == 'macvtap') {
- kimchi.enableBridgeOptions(true);
+ } else {
+ kimchi.enableBridgeOptions(true, selectedType, selectedDestinationType);
+ }
+
+ });
+
+ $('#networkType').on('change', function() {
+ var selectedType = $("#networkType").val();
+ if(selectedType === kimchi.NETWORK_TYPE_MACVTAP) {
+ kimchi.loadInterfaces(new Array("nic", "bonding"));
+ } else {
+ kimchi.loadInterfaces();
}
});
};
@@ -164,3 +132,61 @@ kimchi.updateNetworkFormButton = function() {
$("#networkFormOk").button("enable");
}
};
+
+kimchi.enableBridgeOptions = function(enable, networkType, networkDestinationType) {
+ $("#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 &&
(networkDestinationType === 'nic' || networkDestinationType ===
'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 data-type="'+
result[i].type +'" 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
data-type="'+ result[i].type +'" 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();
+ });
+};
\ No newline at end of file
diff --git a/ui/pages/network-add.html.tmpl b/ui/pages/network-add.html.tmpl
index 7158b75..6bd2acf 100644
--- a/ui/pages/network-add.html.tmpl
+++ b/ui/pages/network-add.html.tmpl
@@ -40,7 +40,8 @@
<select id="networkType" class="selectpicker col-md-12
col-lg-12">
<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="macvtap">$_("Macvtap: Virtual
machines are connected to physical network directly")</option>
+ <option value="bridge">$_("Bridged: Virtual
machines are connected through a network bridge")</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">
--
Lucio Correia
Software Engineer
IBM LTC Brazil
2992
days inactive
2992
days old
2 comments
2 participants
participants (2)
-
Lucio Correia -
peterpnns＠gmail.com