[Kimchi-devel] [PATCH V2] [Kimchi] UI fixes for edit virtual network
Socorro Stoppler
socorro at linux.vnet.ibm.com
Fri May 20 22:33:58 UTC 2016
Reviewed-by: Socorro Stoppler <socorro at linux.vnet.ibm.com>
Tested-by: Socorro Stoppler <socorro at linux.vnet.ibm.com>
On 05/20/2016 03:12 PM, Aline Manera wrote:
> 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
>
> Signed-off-by: Aline Manera <alinefm at linux.vnet.ibm.com>
> ---
> ui/js/src/kimchi.api.js | 12 ++++++++
> ui/js/src/kimchi.network_add_main.js | 48 ++++++++++++++++---------------
> ui/js/src/kimchi.network_edit_main.js | 53 +++++++++++++++++++++++------------
> ui/pages/network-edit.html.tmpl | 3 --
> 4 files changed, 73 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..4dd830a 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,30 @@ 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);
> +
> + for (var i = 0; i < currentIfaces.length; i++) {
> + $("#networkDestinationID option[value='" + currentIfaces[i] + "']").attr('selected','selected');
> + }
> + $('#networkDestinationID').selectpicker('refresh');
> + };
> +
> + 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 +129,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 +196,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>
More information about the Kimchi-devel
mailing list