[Kimchi-devel] [V2] UI: Edit Guest Network Interface
Yu Xin Huo
huoyuxin at linux.vnet.ibm.com
Wed Apr 23 07:44:57 UTC 2014
On 4/23/2014 2:02 AM, Aline Manera wrote:
> On 04/22/2014 02:46 PM, Aline Manera wrote:
>> 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
>
> Just a comment: after checking Sheldon's patches I noticed the user
> may be able to edit "model" in a existing interface
Aline, as we have discussed in last meeting, backend will automatically
select interface model, then we decide to make model transparent to user.
>
>
>>
>>> 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
>>>
>>
>> _______________________________________________
>> 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