[Kimchi-devel] [V2] UI: Edit Guest Network Interface
huoyuxin at linux.vnet.ibm.com
huoyuxin at linux.vnet.ibm.com
Thu Apr 17 07:08:10 UTC 2014
From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
---
ui/css/theme-default/guest-edit.css | 43 +++++++++++++++++
ui/js/src/kimchi.api.js | 55 +++++++++++++++++++++
ui/js/src/kimchi.guest_edit_main.js | 90 +++++++++++++++++++++++++++++++++++
ui/pages/guest-edit.html.tmpl | 28 +++++++++++
4 files changed, 216 insertions(+), 0 deletions(-)
diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
index 0b7ba21..39bf1fb 100644
--- a/ui/css/theme-default/guest-edit.css
+++ b/ui/css/theme-default/guest-edit.css
@@ -156,3 +156,46 @@
.guest-edit-cdrom-button.detach[disabled] {
background-position: -54px -108px;
}
+
+.guest-edit-interface .header {
+ margin-bottom: 8px;
+ padding-bottom: 2px;
+ font-weight: bold;
+ border-bottom: 1px solid #999999;
+ overflow: hidden;
+}
+
+.guest-edit-interface .body .item {
+ margin: 5px 0;
+}
+
+.guest-edit-interface .cell {
+ display: inline-block;
+ width: 250px;
+}
+
+.guest-edit-interface .body select {
+ width: 180px;
+ padding: 0px;
+}
+
+.guest-edit-interface .action-area {
+ float: right;
+}
+
+.guest-edit-interface button {
+ width: 20px;
+ height: 20px;
+}
+
+.guest-edit-interface .header button {
+ margin-bottom: 1px;
+}
+
+.guest-edit-interface .body button:not(:last-child) {
+ margin-right: 2px;
+}
+
+.guest-edit-interface .hide {
+ display: none;
+}
diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index e96a67a..71b552f 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -959,5 +959,60 @@ var kimchi = {
kimchi.message.error(data.responseJSON.reason);
}
});
+ },
+
+ getGuestInterfaces: function(name, suc, err) {
+ var url = kimchi.url+'vms/'+encodeURIComponent(name)+'/ifaces';
+ kimchi.requestJSON({
+ url : url,
+ type : 'GET',
+ contentType : 'application/json',
+ dataType : 'json',
+ success : suc,
+ error : err || function(data) {
+ kimchi.message.error(data.responseJSON.reason);
+ }
+ });
+ },
+
+ createGuestInterface : function(name, interface, suc, err) {
+ kimchi.requestJSON({
+ url : kimchi.url+'vms/'+encodeURIComponent(name)+'/ifaces',
+ type : 'POST',
+ contentType : 'application/json',
+ dataType : 'json',
+ data : JSON.stringify(interface),
+ success : suc,
+ error : err || function(data) {
+ kimchi.message.error(data.responseJSON.reason);
+ }
+ });
+ },
+
+ deleteGuestInterface : function(vm, mac, suc, err) {
+ kimchi.requestJSON({
+ url : kimchi.url+'vms/'+encodeURIComponent(vm)+'/ifaces/'+encodeURIComponent(mac),
+ type : 'DELETE',
+ contentType : 'application/json',
+ dataType : 'json',
+ success : suc,
+ error : err ? err : function(data) {
+ kimchi.message.error(data.responseJSON.reason);
+ }
+ });
+ },
+
+ updateGuestInterface : function(vm, mac, interface, suc, err) {
+ $.ajax({
+ url : kimchi.url+'vms/'+encodeURIComponent(vm)+'/ifaces/'+encodeURIComponent(mac),
+ type : 'PUT',
+ contentType : 'application/json',
+ data : JSON.stringify(interface),
+ dataType : 'json',
+ success: suc,
+ error: err ? err : function(data) {
+ kimchi.message.error(data.responseJSON.reason);
+ }
+ });
}
};
diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
index 9375c51..4337150 100644
--- a/ui/js/src/kimchi.guest_edit_main.js
+++ b/ui/js/src/kimchi.guest_edit_main.js
@@ -78,6 +78,94 @@ kimchi.guest_edit_main = function() {
});
};
+ var setupInterface = function() {
+ $(".add", "#form-guest-edit-interface").button({
+ icons: { primary: "ui-icon-plusthick" },
+ text: false
+ }).click(function(){
+ addItem({
+ mac: "",
+ network: "",
+ type: "network",
+ viewMode: "hide",
+ editMode: ""
+ });
+ });
+ var toggleEdit = function(item, on){
+ $("label", item).toggleClass("hide", on);
+ $("select", item).toggleClass("hide", !on);
+ $(".action-area", item).toggleClass("hide");
+ };
+ var addItem = function(data) {
+ var itemNode = $.parseHTML(kimchi.template($('#interface-tmpl').html(),data));
+ $(".body", "#form-guest-edit-interface").append(itemNode);
+ $("select", itemNode).append(networkOptions);
+ if(data.network!==""){
+ $("select", itemNode).val(data.network);
+ }
+ $(".edit", itemNode).button({
+ icons: { primary: "ui-icon-pencil" },
+ text: false
+ }).click(function(){
+ toggleEdit($(this).parent().parent(), true);
+ });
+ $(".delete", itemNode).button({
+ icons: { primary: "ui-icon-trash" },
+ text: false
+ }).click(function(){
+ var item = $(this).parent().parent();
+ kimchi.deleteGuestInterface(kimchi.selectedGuest, item.prop("id"), function(){
+ item.remove();
+ });
+ });
+ $(".save", itemNode).button({
+ icons: { primary: "ui-icon-disk" },
+ text: false
+ }).click(function(){
+ var item = $(this).parent().parent();
+ var interface = {
+ network: $("select", item).val(),
+ type: "network"
+ };
+ var postUpdate = function(){
+ $("label", item).text(interface.network);
+ toggleEdit(item, false);
+ };
+ if(item.prop("id")==""){
+ kimchi.createGuestInterface(kimchi.selectedGuest, interface, function(data){
+ item.prop("id", data.mac);
+ postUpdate();
+ });
+ }else{
+ kimchi.updateGuestInterface(kimchi.selectedGuest, item.prop("id"), interface, function(){
+ postUpdate();
+ });
+ }
+ });
+ $(".cancel", itemNode).button({
+ icons: { primary: "ui-icon-arrowreturnthick-1-w" },
+ text: false
+ }).click(function(){
+ var item = $(this).parent().parent();
+ $("label", item).text()==="" ? item.remove() : toggleEdit(item, false);
+ });
+ };
+ var networkOptions = "";
+ kimchi.listNetworks(function(data){
+ for(var i=0;i<data.length;i++){
+ var isSlected = i==0 ? " selected" : "";
+ networkOptions += "<option"+isSlected+">"+data[i].name+"</option>";
+ }
+ kimchi.getGuestInterfaces(kimchi.selectedGuest, function(data){
+ for(var i=0;i<data.length;i++){
+ data[i].viewMode = "";
+ data[i].editMode = "hide";
+ addItem(data[i]);
+ }
+ });
+ });
+ };
+
var initContent = function(guest) {
guest['icon'] = guest['icon'] || 'images/icon-vm.png';
for ( var prop in guest) {
@@ -101,6 +189,8 @@ kimchi.guest_edit_main = function() {
refreshCDROMs();
};
+ setupInterface();
+
kimchi.topic('kimchi/vmCDROMAttached').subscribe(onAttached);
kimchi.topic('kimchi/vmCDROMReplaced').subscribe(onReplaced);
kimchi.topic('kimchi/vmCDROMDetached').subscribe(onDetached);
diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
index 804fc39..d54b3ab 100644
--- a/ui/pages/guest-edit.html.tmpl
+++ b/ui/pages/guest-edit.html.tmpl
@@ -35,6 +35,9 @@
<li>
<a href="#form-guest-edit-storage">$_("Storage")</a>
</li>
+ <li>
+ <a href="#form-guest-edit-interface">$_("Interface")</a>
+ </li>
</ul>
<form id="form-guest-edit-general">
<fieldset class="guest-edit-fieldset">
@@ -103,6 +106,14 @@
</div>
</fieldset>
</form>
+ <form id="form-guest-edit-interface" class="guest-edit-interface">
+ <div class="header">
+ <span class="cell">$_("Network")</span>
+ <span class="cell">$_("Type")</span>
+ <button class="add action-area"></button>
+ </div>
+ <div class="body"></div>
+ </form>
</div>
</div>
<footer>
@@ -133,6 +144,23 @@
</div>
</div>
</script>
+<script id="interface-tmpl" type="text/html">
+ <div class="item" id="{mac}">
+ <span class="cell">
+ <label class="{viewMode}">{network}</label>
+ <select class="{editMode}"></select>
+ </span>
+ <span class="cell">
+ <span>{type}</span>
+ </span>
+ <span class="action-area {editMode}">
+ <button class="save"></button><button class="cancel"></button>
+ </span>
+ <span class="action-area {viewMode}">
+ <button class="edit"></button><button class="delete"></button>
+ </span>
+ <div>
+</script>
<script type="text/javascript">
kimchi.guest_edit_main();
--
1.7.1
More information about the Kimchi-devel
mailing list