6:54 p.m.
v2:
- Fixed bugs encountered while testing
- Added support for macvtap passthrough
- Addressed feedback from Lucio
- UI issues below are still unresolved
- Due to value from backend currently is not showing up when edit comes up and instead
'Nothing selected' is showing, this is being handled gracefully in that if
user leaves
the Destination field as is, the value (from backend) is preserved.
v1:
- First attempt of Edit Virtual Network UI
- Known UI Issues:s
- 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
- Bridged network has not been tested so there's bound to be issues there
Proposal:
Per discussion w/Lucio, with regards to vlan_id, I'd like to propose to have the
backend show the vlan_id as a separate field.
This came about when I couldn't find that field and as it turns out, it was because it
was appended to the interface names
Signed-off-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com>
---
ui/js/src/kimchi.api.js | 23 ++++
ui/js/src/kimchi.network.js | 14 +++
ui/js/src/kimchi.network_add_main.js | 20 ++--
ui/js/src/kimchi.network_edit_main.js | 198 ++++++++++++++++++++++++++++++++++
ui/pages/network-edit.html.tmpl | 78 ++++++++++++++
ui/pages/tabs/network.html.tmpl | 3 +-
6 files changed, 327 insertions(+), 9 deletions(-)
create mode 100644 ui/js/src/kimchi.network_edit_main.js
create mode 100644 ui/pages/network-edit.html.tmpl
diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index 83d1cc7..8c01646 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -648,6 +648,17 @@ var kimchi = {
});
},
+ retrieveNetwork : function(name, suc, err) {
+ wok.requestJSON({
+ url : 'plugins/kimchi/networks/' + encodeURIComponent(name),
+ type : 'GET',
+ contentType : 'application/json',
+ dataType : 'json',
+ success: suc,
+ error: err
+ });
+ },
+
deleteNetwork : function(name, suc, err) {
wok.requestJSON({
url : 'plugins/kimchi/networks/' + encodeURIComponent(name),
@@ -661,6 +672,18 @@ var kimchi = {
});
},
+ updateNetwork : function(name, settings, suc, err) {
+ wok.requestJSON({
+ url : "plugins/kimchi/networks/" + encodeURIComponent(name),
+ type : 'PUT',
+ contentType : 'application/json',
+ data : JSON.stringify(settings),
+ dataType : 'json',
+ success: suc,
+ error: err
+ });
+ },
+
listHostPartitions : function(suc, err) {
wok.requestJSON({
url : 'plugins/kimchi/host/partitions',
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index c0100cf..381449d 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -91,6 +91,8 @@ kimchi.getNetworkItemHtml = function(network) {
startClass : network.state === "up" ? "wok-hide-action-item"
: "",
stopClass : network.state === "down" ? "wok-hide-action-item"
: disable_in_use,
stopDisabled : network.in_use ? "disabled" : "",
+ editClass : network.state === "up" || network.in_use ?
"disabled" : "",
+ editDisabled : network.state === "up" || network.in_use ?
"disabled" : "",
deleteClass : network.state === "up" || network.in_use ?
"disabled" : "",
deleteDisabled: network.state === "up" || network.in_use ?
"disabled" : ""
});
@@ -107,6 +109,8 @@ kimchi.stopNetwork = function(network,menu) {
if (!network.in_use) {
$("[nwAct='delete']",
menu).removeClass("disabled");
$(":first-child", $("[nwAct='delete']",
menu)).removeAttr("disabled");
+ $("[nwAct='edit']",
menu).removeClass("disabled");
+ $(":first-child", $("[nwAct='edit']",
menu)).removeAttr("disabled");
}
$(".network-state", $("#" +
wok.escapeStr(network.name))).switchClass("loading", "down");
}, function(err) {
@@ -128,6 +132,8 @@ kimchi.addNetworkActions = function(network) {
$("[nwAct='start']", menu).addClass("disabled");
$("[nwAct='delete']",
menu).addClass("disabled");
$(":first-child", $("[nwAct='delete']",
menu)).attr("disabled", true);
+ $("[nwAct='edit']", menu).addClass("disabled");
+ $(":first-child", $("[nwAct='edit']",
menu)).attr("disabled", true);
kimchi.toggleNetwork(network.name, true, function() {
$("[nwAct='start']",
menu).addClass("wok-hide-action-item");
$("[nwAct='start']",
menu).removeClass("disabled");
@@ -142,8 +148,10 @@ kimchi.addNetworkActions = function(network) {
$("[nwAct='start']",
menu).removeClass("disabled");
if (!network.in_use) {
$("[nwAct='delete']",
menu).removeClass("disabled");
+ $("[nwAct='edit']",
menu).removeClass("disabled");
}
$(":first-child", $("[nwAct='delete']",
menu)).removeAttr("disabled");
+ $(":first-child", $("[nwAct='edit']",
menu)).removeAttr("disabled");
wok.message.error(err.responseJSON.reason);
});
} else if ($(evt.currentTarget).attr("nwAct") === "stop") {
@@ -180,6 +188,12 @@ kimchi.addNetworkActions = function(network) {
$('#networkGrid').dataGrid('deleteRow',
$(evt.currentTarget).parents(".wok-datagrid-row"));
});
}, null);
+ } else if ($(evt.currentTarget).attr("nwAct") === "edit") {
+ if (network.state === "up" || network.in_use) {
+ return false;
+ }
+ kimchi.selectedNetwork = network.name;
+ wok.window.open('plugins/kimchi/network-edit.html');
}
});
diff --git a/ui/js/src/kimchi.network_add_main.js b/ui/js/src/kimchi.network_add_main.js
index 3090aeb..a500cf8 100644
--- a/ui/js/src/kimchi.network_add_main.js
+++ b/ui/js/src/kimchi.network_add_main.js
@@ -56,7 +56,7 @@ kimchi.startNetworkCreation = function() {
};
kimchi.openNetworkDialog = function(okCallback) {
- kimchi.loadInterfaces();
+ kimchi.loadInterfaces(undefined, false);
$("#networkFormOk").on("click", function() {
$("#networkFormOk").button("disable");
@@ -73,10 +73,12 @@ kimchi.openNetworkDialog = function(okCallback) {
});
};
-kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
+kimchi.setDefaultNetworkType = function(isInterfaceAvail, bEdit) {
$("#networkType").selectpicker();
if (!isInterfaceAvail) {
- kimchi.enableBridgeOptions(false);
+ if (!bEdit) {
+ kimchi.enableBridgeOptions(false);
+ }
$("#networkBriDisabledLabel").removeClass('hidden');
} else {
$("#networkBriDisabledLabel").remove();
@@ -128,9 +130,9 @@ kimchi.setupNetworkFormEvent = function() {
}
}
$('#networkDestinationID').selectpicker('destroy');
- kimchi.loadInterfaces(new Array("nic", "bonding"));
+ kimchi.loadInterfaces(new Array("nic", "bonding"),
false);
} else {
- kimchi.loadInterfaces();
+ kimchi.loadInterfaces(undefined, false);
}
});
@@ -175,7 +177,7 @@ kimchi.enableBridgeOptions = function(enable, networkType,
networkDestinationTyp
};
};
-kimchi.loadInterfaces = function(interfaceFilterArray) {
+kimchi.loadInterfaces = function(interfaceFilterArray, bEdit) {
var loadInterfacesHTML = function(result) {
var options = [];
@@ -200,8 +202,10 @@ kimchi.loadInterfaces = function(interfaceFilterArray) {
}
$selectDestination.append(selectDestinationOptionHTML);
$('#networkDestinationID').selectpicker('refresh');
- kimchi.setDefaultNetworkType(result.length!==0);
- kimchi.changeNetworkDestination();
+ kimchi.setDefaultNetworkType(result.length!==0, bEdit);
+ if (!bEdit) {
+ kimchi.changeNetworkDestination();
+ }
};
var networkType = $("#networkType").val();
diff --git a/ui/js/src/kimchi.network_edit_main.js
b/ui/js/src/kimchi.network_edit_main.js
new file mode 100644
index 0000000..761d2f4
--- /dev/null
+++ b/ui/js/src/kimchi.network_edit_main.js
@@ -0,0 +1,198 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM Corp, 2016
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+kimchi.network_edit_main = function() {
+ var initNetwork = function(network) {
+ var networkType = network['connection'];
+ $('#bridgedContent').hide();
+ $('#networkType').val(networkType);
+ $('#networkName').val(kimchi.selectedNetwork);
+
+ var subnetValue = network['subnet'];
+ if (subnetValue === "") {
+ $('#networkSubnetRange').val("unavailable");
+ } else {
+ $('#networkSubnetRange').val(subnetValue);
+ }
+
+ // Default to hide Subnet
+ $('#subnetRange').hide();
+
+ if(networkType === "nat" || networkType === "isolated") {
+ //Show subnet/dhcp range
+ $('#subnetRange').show();
+ }
+
+ if (networkType === kimchi.NETWORK_TYPE_MACVTAP ||
+ networkType === kimchi.NETWORK_TYPE_PASSTHROUGH ||
+ networkType === kimchi.NETWORK_TYPE_VEPA ||
+ networkType === kimchi.NETWORK_TYPE_BRIDGED) {
+ $('#bridgedContent').show();
+ $('#networkDestination').show();
+ $('#vlan').hide();
+ if (networkType === kimchi.NETWORK_TYPE_BRIDGED) {
+ //Now check if there's a vlan id and only show if one exists
+ var netInterface = network['interfaces'];
+ var netInterfaceParts = netInterface[0].split('-', 2);
+ var netvlanID = netInterfaceParts[1];
+ if (netvlanID !== undefined) {
+ //Show vlan ID field; do not show the checkbox
+ $('#vlan').show();
+ $('#vlan_chkbox').hide();
+ $('#vlan-enabled').show();
+ $('#networkVlanID').val(netvlanID);
+ }
+ }
+ }
+
+ 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);
+
+ var generalSubmit = function(event) {
+ $('#networkFormOk').text(i18n['KCHAPI6010M']);
+ $('#networkFormOk').prop('disabled', true);
+
+ var data = $('#networkConfig').serializeObject();
+ kimchi.updateNetworkValues();
+ };
+
+ $('#networkConfig').on('submit', generalSubmit);
+ $('#networkFormOk').on('click', generalSubmit);
+};
+
+kimchi.setupNetworkFormEventForEdit = function(network) {
+ var selectedType = network['connection'];
+ if (selectedType === kimchi.NETWORK_TYPE_BRIDGED) {
+ if (kimchi.capabilities && kimchi.capabilities.nm_running) {
+
wok.message.warn(i18n['KCHNET6001W'],'#alert-modal-container');
+ }
+ }
+
+ // Network name validation
+ $("#networkName").on("keyup", function(event) {
+ $("#networkName").toggleClass("invalid-field",
!$("#networkName").val().match(/^[^\"\/]+$/));
+ kimchi.updateNetworkFormButtonForEdit();
+ });
+
+ var selectedType = network['connection'];
+ if(selectedType === kimchi.NETWORK_TYPE_MACVTAP ||
+ selectedType === kimchi.NETWORK_TYPE_PASSTHROUGH ||
+ selectedType === kimchi.NETWORK_TYPE_VEPA) {
+ if (selectedType === kimchi.NETWORK_TYPE_MACVTAP) {
+ $('#networkDestinationID').attr('multiple',
false).data('liveSearch',false);
+ } else {
+ $('#networkDestinationID').attr('multiple', true);
+ if($('#networkDestinationID option').length > 10 ) {
+ $('#networkDestinationID').data('liveSearch',true);
+ }
+ }
+ $('#networkDestinationID').selectpicker('destroy');
+
+ kimchi.loadInterfaces(new Array("nic", "bonding"), true);
+ } else {
+ kimchi.loadInterfaces(undefined, true);
+ }
+ //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() {
+ if ($("#networkName").hasClass("invalid-field")) {
+ $('#networkFormOk').prop('disabled', true);
+ } else{
+ $('#networkFormOk').prop('disabled', false);
+ }
+};
+
+kimchi.getNetworkDialogValuesForEdit = function() {
+ var network = {
+ name : $("#networkName").val(),
+ type : $("#networkType").val(),
+ subnetRange: $("#networkSubnetRange").val(),
+ interface: $("#networkDestinationID").val(),
+ vlan_id: $("#networkVlanID").val()
+ };
+ if (network.type === kimchi.NETWORK_TYPE_BRIDGED) {
+ if (network.vlan_id !== "") {
+ network.vlan_id = parseInt($("#networkVlanID").val());
+ }
+ }
+ return network;
+};
+
+kimchi.updateNetworkValues = function() {
+ kimchi.retrieveNetwork(kimchi.selectedNetwork, function(settings) {
+ var network = kimchi.getNetworkDialogValuesForEdit();
+ var data = {
+ name : network.name,
+ subnet: network.subnetRange,
+ interfaces: [ network.interface ],
+ vlan_id: network.vlan_id
+ };
+ var originalDest = settings.interfaces;
+ var updatedDest = $('#networkDestinationID').val();
+ if (originalDest === updatedDest || updatedDest === null) {
+ delete data['interfaces'];
+ }
+ if (network.type !== "nat" && network.type !==
"isolated") {
+ delete data['subnet'];
+ } else { // either nat or isolated
+ delete data['interfaces'];
+ delete data['vlan_id'];
+ }
+ if (network.type === kimchi.NETWORK_TYPE_BRIDGED) {
+ if (data.vlan_id === "") {
+ delete data['vlan_id'];
+ } else {
+ data.vlan_id = parseInt($("#networkVlanID").val());
+ }
+ } else {
+ delete data['vlan_id'];
+ }
+
+ // Just like in Add Network, VEPA connection - network.interface - is already an
array
+ if (network.type === kimchi.NETWORK_TYPE_VEPA || network.type ===
kimchi.NETWORK_TYPE_PASSTHROUGH) {
+ if (network.interface !== null) {
+ data.interfaces = network.interface;
+ }
+ }
+
+ kimchi.updateNetwork(kimchi.selectedNetwork, data, function() {
+ $("#networkBody").empty();
+ kimchi.initNetworkListView();
+ wok.window.close();
+ }, function(settings) {
+
wok.message.error(settings.responseJSON.reason,'#alert-modal-container');
+ $('#networkFormOk').text(i18n['KCHAPI6007M']);
+ $('#networkFormOk').prop('disabled', false);
+ });
+ });
+};
diff --git a/ui/pages/network-edit.html.tmpl b/ui/pages/network-edit.html.tmpl
new file mode 100644
index 0000000..4cc7232
--- /dev/null
+++ b/ui/pages/network-edit.html.tmpl
@@ -0,0 +1,78 @@
+#*
+ * Project Kimchi
+ *
+ * Copyright IBM Corp, 2016
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *#
+#unicode UTF-8
+#import gettext
+#from wok.cachebust import href
+#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang,
fallback=True)
+#silent _ = t.gettext
+#silent _t = t.gettext
+<html>
+<body>
+<div id="edit-network-window" class="window modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title"
id="networkModalLabel">$_("Edit Network")</h4>
+ </div>
+ <div id="networkConfig" class="modal-body">
+ <span id="alert-modal-container"></span>
+ <div class="form-group">
+ <label for="networkType">$_("Network
Type")</label>
+ <input type="text" class="form-control"
id="networkType" disabled="disabled" />
+ </div>
+ <div class="form-group">
+ <label for="networkName">$_("Network
Name")</label>
+ <input type="text" class="form-control"
name="netName" id="networkName" />
+ <p class="help-block">
+ <i class="fa fa-info-circle"></i> $_("Name
should not contain '/' and '\"'.")</p>
+ </div>
+ <div id="subnetRange" class="form-group"
"col-md-3">
+ <div class="form-group">
+ <label for="networkSubnetRange">$_("Address
Space")</label>
+ <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>
+ <select id="networkDestinationID" data-size="5"
class="selectpicker col-md-12 col-lg-12 form-control">
+ </select>
+ </div>
+ <div class="form-group" id="vlan">
+ <div id="vlan_chkbox">
+ <input id="enableVlan" class="wok-checkbox"
type="checkbox" value="" />
+ <label for="enableVlan"
id="labelEnableVlan">$_("Enable VLAN") </label>
+ </div>
+ <div id="vlan-enabled">
+ <label for="networkVlanID"
id="labelNetworkVlanID">$_("VLAN ID"): </label>
+ <input type="text" id="networkVlanID"
class="form-control" />
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="submit" id="networkFormOk" class="btn
btn-default">$_("Save")</button>
+ <button type="button" id="networkFormCancel"
data-dismiss="modal" class="btn
btn-default">$_("Cancel")</button>
+ </div>
+</div>
+<script type="text/javascript">
+kimchi.network_edit_main();
+</script>
+</body>
+</html>
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index d8660d3..6ddabaa 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -99,6 +99,7 @@
<ul class="dropdown-menu"
role="menu">
<li role="presentation"
nwAct="start" class='{startClass}'><a><i class="fa
fa-undo"></i>$_("Start")</a></li>
<li role="presentation"
nwAct="stop" class='{stopClass}'><a {stopDisabled}><i
class="fa fa-ban"></i>$_("Stop")</a></li>
+ <li role="presentation"
nwAct="edit" class='{editClass}'><a {editDisabled}><i
class="fa fa-pencil"></i>$_("Edit")</a></li>
<li role="presentation"
nwAct="delete" class='critical {deleteClass}'><a
{deleteDisabled}><i class="fa
fa-minus-circle"></i>$_("Delete")</a></li>
</ul>
</div>
@@ -110,4 +111,4 @@
kimchi.initNetwork();
</script>
</body>
-</html>
\ No newline at end of file
+</html>
--
2.5.0