[Kimchi-devel] [V2] UI: Edit Guest Network Interface
Aline Manera
alinefm at linux.vnet.ibm.com
Tue Apr 22 17:46:23 UTC 2014
On 04/22/2014 11:40 AM, Aline Manera wrote:
>
> The UI looks good but it still refers to interface update which is not
> implemented on backend.
> I suggest disabling it until we have the backend completed.
>
Never mind! Just saw Sheldon's patches about the backend
> On 04/17/2014 04:08 AM, huoyuxin at linux.vnet.ibm.com wrote:
>> 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();
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>
More information about the Kimchi-devel
mailing list