Re: [Kimchi-devel] [V2] UI: Edit Guest Network Interface

From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; Signed-off-by: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; --- 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();