[Kimchi-devel] [PATCH] [Kimchi] UI fixes for edit virtual network
Aline Manera
alinefm at linux.vnet.ibm.com
Fri May 20 20:27:34 UTC 2016
This patch solves the issues pointed by Socorro:
- after the update happens, the list of networks are not shown
properly (i.e. rows are all bunched up and actions buttons are diagonal, but fixes itself
after you move off the tab and come back to it
- when edit panel first opens up, the value for the Destination selector (if applicable) is
either showing 'Nothing selected' or it's showing the first item on the list rather than
the value that came from backend
---
ui/js/src/kimchi.api.js | 12 +++++++++
ui/js/src/kimchi.network_add_main.js | 48 +++++++++++++++++++----------------
ui/js/src/kimchi.network_edit_main.js | 48 ++++++++++++++++++++++-------------
ui/pages/network-edit.html.tmpl | 3 ---
4 files changed, 68 insertions(+), 43 deletions(-)
diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index 8c01646..1ef3649 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -634,6 +634,18 @@ var kimchi = {
});
},
+ getInterface : function(iface, suc, err, sync) {
+ wok.requestJSON({
+ url : 'plugins/kimchi/interfaces/' + encodeURIComponent(iface),
+ type : 'GET',
+ contentType : 'application/json',
+ async : !sync,
+ dataType : 'json',
+ success : suc,
+ error : err
+ });
+ },
+
getVEPAInterfaces : function(suc, err) {
wok.requestJSON({
url : 'plugins/kimchi/interfaces?module=^(?!mlx5_core|mlx5-core).*$',
diff --git a/ui/js/src/kimchi.network_add_main.js b/ui/js/src/kimchi.network_add_main.js
index a500cf8..85df203 100644
--- a/ui/js/src/kimchi.network_add_main.js
+++ b/ui/js/src/kimchi.network_add_main.js
@@ -177,31 +177,35 @@ kimchi.enableBridgeOptions = function(enable, networkType, networkDestinationTyp
};
};
-kimchi.loadInterfaces = function(interfaceFilterArray, bEdit) {
-
- var loadInterfacesHTML = 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>';
- }
+kimchi.createInterfacesOpts = function(ifaces, interfaceFilterArray) {
+ var options = [];
+ $selectDestination = $('#networkDestinationID');
+ var nics = {};
+ $('#networkDestinationID').find('option').remove();
+ var selectDestinationOptionHTML = '';
+ for (var i = 0; i < ifaces.length; i++) {
+ if (typeof interfaceFilterArray === 'undefined') {
+ options.push({label:ifaces[i].name,value:ifaces[i].name});
+ nics[ifaces[i].name] = ifaces[i];
+ selectDestinationOptionHTML += '<option data-type="' + ifaces[i].type + '" value="'+ ifaces[i].name + '">' + ifaces[i].name + '</option>';
+ } else {
+ for (var k = 0; k < interfaceFilterArray.length; k++) {
+ if (ifaces[i].type == interfaceFilterArray[k]) {
+ options.push({label:ifaces[i].name,value:ifaces[i].name});
+ nics[ifaces[i].name] = ifaces[i];
+ selectDestinationOptionHTML += '<option data-type="'+ ifaces[i].type +'" value="'+ ifaces[i].name + '">' + ifaces[i].name + '</option>';
}
}
}
- $selectDestination.append(selectDestinationOptionHTML);
- $('#networkDestinationID').selectpicker('refresh');
+ }
+ $selectDestination.append(selectDestinationOptionHTML);
+ $('#networkDestinationID').selectpicker('refresh');
+};
+
+kimchi.loadInterfaces = function(interfaceFilterArray, bEdit) {
+
+ var loadInterfacesHTML = function(result) {
+ kimchi.createInterfacesOpts(result, interfaceFilterArray);
kimchi.setDefaultNetworkType(result.length!==0, bEdit);
if (!bEdit) {
kimchi.changeNetworkDestination();
diff --git a/ui/js/src/kimchi.network_edit_main.js b/ui/js/src/kimchi.network_edit_main.js
index 761d2f4..4b813c9 100644
--- a/ui/js/src/kimchi.network_edit_main.js
+++ b/ui/js/src/kimchi.network_edit_main.js
@@ -61,13 +61,6 @@ kimchi.network_edit_main = function() {
}
kimchi.setupNetworkFormEventForEdit(network);
-
- //TODO: Trial and error trying to get select box to show show the one that it's currently set to but it doesn't work
- var netInterface = network['interfaces'];
- $('#networkDestinationID').append('val', netInterface);
- $('#networkDestinationID').val(netInterface);
- $("#networkDestinationID option[value='+netInterface+']").prop('selected', true);
- $('#networkDestinationID').selectpicker('refresh');
};
kimchi.retrieveNetwork(kimchi.selectedNetwork, initNetwork);
@@ -98,6 +91,25 @@ kimchi.setupNetworkFormEventForEdit = function(network) {
kimchi.updateNetworkFormButtonForEdit();
});
+ var loadIfaces = function(interfaceFilterArray){
+ var buildInterfaceOpts = function(result) {
+ var currentIfaces = network['interfaces'];
+ for (var i = 0; i < currentIfaces.length; i++) {
+ kimchi.getInterface(currentIfaces[i], function(iface) {
+ result.push(iface);
+ } , null, true);
+ }
+ kimchi.createInterfacesOpts(result, interfaceFilterArray);
+ };
+
+ var networkType = $("#networkType").val();
+ if (networkType === kimchi.NETWORK_TYPE_VEPA) {
+ kimchi.getVEPAInterfaces(buildInterfaceOpts);
+ } else {
+ kimchi.getInterfaces(buildInterfaceOpts);
+ }
+ }
+
var selectedType = network['connection'];
if(selectedType === kimchi.NETWORK_TYPE_MACVTAP ||
selectedType === kimchi.NETWORK_TYPE_PASSTHROUGH ||
@@ -112,16 +124,10 @@ kimchi.setupNetworkFormEventForEdit = function(network) {
}
$('#networkDestinationID').selectpicker('destroy');
- kimchi.loadInterfaces(new Array("nic", "bonding"), true);
+ loadIfaces(new Array("nic", "bonding"));
} else {
- kimchi.loadInterfaces(undefined, true);
+ loadIfaces(undefined);
}
- //TODO: Need to confirm if this is still needed
- var netInterface = network['interfaces'];
- $('#networkDestinationID').append('val', netInterface);
- $('#networkDestinationID').val(netInterface);
- $("#networkDestinationID option[value='+netInterface+']").prop('selected', true);
- $('#networkDestinationID').selectpicker('refresh');
};
kimchi.updateNetworkFormButtonForEdit = function() {
@@ -185,9 +191,15 @@ kimchi.updateNetworkValues = function() {
}
}
- kimchi.updateNetwork(kimchi.selectedNetwork, data, function() {
- $("#networkBody").empty();
- kimchi.initNetworkListView();
+ kimchi.updateNetwork(kimchi.selectedNetwork, data, function(result) {
+ $('#' + kimchi.selectedNetwork).remove();
+ network = result;
+ network.type = result.connection;
+ network.state = result.state === "active" ? "up" : "down";
+ network.interface = result.interfaces ? result.interfaces[0] : i18n["KCHNET6001M"];
+ network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"];
+ network.persistent = result.persistent;
+ $('#networkGrid').dataGrid('addRow', kimchi.addNetworkItem(network));
wok.window.close();
}, function(settings) {
wok.message.error(settings.responseJSON.reason,'#alert-modal-container');
diff --git a/ui/pages/network-edit.html.tmpl b/ui/pages/network-edit.html.tmpl
index 4cc7232..3f2f3fe 100644
--- a/ui/pages/network-edit.html.tmpl
+++ b/ui/pages/network-edit.html.tmpl
@@ -45,9 +45,6 @@
<input type="text" class="form-control" id="networkSubnetRange" />
</div>
</div>
- <div id="networkBriDisabledLabel" class="form-group hidden">
- <p>$_("(No interfaces found)")</p>
- </div>
<div id="bridgedContent">
<div id="networkDestination" class="form-group">
<label for="networkDestinationID">$_("Destination")</label>
--
2.5.5
More information about the Kimchi-devel
mailing list