[Kimchi-devel] [V2] UI: Edit Guest Network Interface
Aline Manera
alinefm at linux.vnet.ibm.com
Wed Apr 23 16:30:22 UTC 2014
On 04/23/2014 04:44 AM, Yu Xin Huo wrote:
> 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.
Yeap. I was talking about UPDATE method. But as we decided in the scrum
meeting today we will disable update for now.
>>
>>
>>>
>>>> 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