<html>
  <head>
    <meta content="text/html; charset=windows-1252"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    <p>Please ignore following patch will be sending another patch with
      corrections.<br>
    </p>
    <br>
    <blockquote
      cite="mid:16e0b257-5a0b-b3e2-7ce4-8d3772d8921f@linux.vnet.ibm.com"
      type="cite">
      <div class="moz-forward-container"> -------- Forwarded Message
        --------
        <table class="moz-email-headers-table" border="0"
          cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <th align="RIGHT" nowrap="nowrap" valign="BASELINE">Subject:
              </th>
              <td>[Kimchi-devel] [PATCH] [Kimchi] Introducing s390x UI
                Interfaces module for Edit Template under virtualization</td>
            </tr>
            <tr>
              <th align="RIGHT" nowrap="nowrap" valign="BASELINE">Date:
              </th>
              <td>Wed, 7 Sep 2016 15:56:48 +0530</td>
            </tr>
            <tr>
              <th align="RIGHT" nowrap="nowrap" valign="BASELINE">From:
              </th>
              <td><a moz-do-not-send="true"
                  class="moz-txt-link-abbreviated"
                  href="mailto:rajgupta@linux.vnet.ibm.com">rajgupta@linux.vnet.ibm.com</a></td>
            </tr>
            <tr>
              <th align="RIGHT" nowrap="nowrap" valign="BASELINE">To: </th>
              <td>Kimchi Devel <a moz-do-not-send="true"
                  class="moz-txt-link-rfc2396E"
                  href="mailto:kimchi-devel@ovirt.org">&lt;kimchi-devel@ovirt.org&gt;</a></td>
            </tr>
          </tbody>
        </table>
        <br>
        <br>
        <pre>From: Rajat Gupta <a moz-do-not-send="true" class="moz-txt-link-rfc2396E" href="mailto:rajgupta@linux.vnet.ibm.com">&lt;rajgupta@linux.vnet.ibm.com&gt;</a>

Introducing s390x UI Interfaces module for Edit Template under virtualization

Signed-off-by: Rajat Gupta <a moz-do-not-send="true" class="moz-txt-link-rfc2396E" href="mailto:rajgupta@linux.vnet.ibm.com">&lt;rajgupta@linux.vnet.ibm.com&gt;</a>
---
 ui/js/src/kimchi.api.js                |  58 ++++++++
 ui/js/src/kimchi.main.js               |   5 +
 ui/js/src/kimchi.template_edit_main.js | 260 +++++++++++++++++++++++++++++++--
 ui/pages/template-edit.html.tmpl       |  33 +++++
 4 files changed, 341 insertions(+), 15 deletions(-)

diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index 2f127aa..ce0e07c 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -596,6 +596,35 @@ var kimchi = {
         });
     },

+        listmacvtapNetworks : function(suc, err) {
+            wok.requestJSON({
+                url : 'plugins/kimchi/interfaces?type=^nic|bonding|vlan$',
+                type : 'GET',
+                contentType : 'application/json',
+                dataType : 'json',
+                resend : true,
+                success : suc,
+                error : err ? err : function(data) {
+                    wok.message.error(data.responseJSON.reason);
+                }
+            });
+        },
+
+            listovsNetworks : function(suc, err) {
+                wok.requestJSON({
+                    url : 'plugins/kimchi/ovsbridges',
+                    type : 'GET',
+                    contentType : 'application/json',
+                    dataType : 'json',
+                    resend : true,
+                    success : suc,
+                    error : err ? err : function(data) {
+                        wok.message.error(data.responseJSON.reason);
+                    }
+                });
+            },
+
+
     toggleNetwork : function(name, on, suc, err) {
         var action = on ? "activate" : "deactivate";
         wok.requestJSON({
@@ -638,6 +667,20 @@ var kimchi = {
         });
     },

+    gets390xInterfaces : function(suc, err) {
+        wok.requestJSON({
+            url : 'plugins/kimchi/interfaces?type=^nic|bonding|vlan$',
+            type : 'GET',
+            contentType : 'application/json',
+            dataType : 'json',
+            resend : true,
+            success : suc,
+            error : err ? err : function(data) {
+                wok.message.error(data.responseJSON.reason);
+            }
+        });
+    },
+
     getInterface : function(iface, suc, err, sync) {
         wok.requestJSON({
             url : 'plugins/kimchi/interfaces/' + encodeURIComponent(iface),
@@ -1271,3 +1314,18 @@ var kimchi = {
         });
     }
 };
+
+/**
+ * Get the host information.
+ */
+kimchi.getHostDetails = function (suc,err) {
+  wok.requestJSON({
+      url : 'plugins/gingerbase/host',
+      type : 'GET',
+      resend: true,
+      contentType : 'application/json',
+      dataType : 'json',
+      success : suc,
+      error: err
+  });
+}
diff --git a/ui/js/src/kimchi.main.js b/ui/js/src/kimchi.main.js
index b6de2cf..ae996f0 100644
--- a/ui/js/src/kimchi.main.js
+++ b/ui/js/src/kimchi.main.js
@@ -33,6 +33,11 @@ kimchi.getCapabilities(function(result) {
     kimchi.capabilities = {};
 });

+kimchi.hostarch = undefined;
+kimchi.getHostDetails(function(result) {
+  kimchi.hostarch = result["architecture"];
+});
+
 $(function(){
     $('body').removeClass('wok-list wok-gallery');
 });
diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
index a2032cc..3cb32e8 100644
--- a/ui/js/src/kimchi.template_edit_main.js
+++ b/ui/js/src/kimchi.template_edit_main.js
@@ -19,8 +19,13 @@ kimchi.template_edit_main = function() {
     var templateEditMain = $('#edit-template-tabs');
     var origDisks;
     var origNetworks;
+    var origInterfaces;
+    var origmacvtapNetworks;
+    var origovsNetworks;
     var templateDiskSize;
     var baseImageTemplate;
+    var s390xArch = 's390x';
+
     $('#template-name', templateEditMain).val(kimchi.selectedTemplate);
     $('#edit-template-tabs a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
         $('.tab-content').css('overflow', 'hidden');
@@ -47,6 +52,7 @@ kimchi.template_edit_main = function() {
     var initTemplate = function(template) {
         origDisks = template.disks;
         origNetworks = template.networks;
+        origInterfaces = template.interfaces;
         for (var i = 0; i &lt; template.disks.length; i++) {
             if (template.disks[i].base) {
                 template["vm-image"] = template.disks[i].base;
@@ -268,10 +274,173 @@ kimchi.template_edit_main = function() {
             });
         };

-        var initProcessor = function() {
-            var setCPUValue = function() {
-                if (!$('#cores').hasClass("invalid-field") &amp;&amp; $('#cores').val() != "") {
-                    var computedCpu = parseInt($("#cores").val()) * parseInt($("#threads").val());
+        var initInterface_s390x = function(result) {
+            $('#form-template-interface-s390x').show();
+            $('#form-template-interface').hide();
+            var networkItemNum = 0;
+            var addInterfaceItem = function(networkData) {
+                var networkName = networkData.networkV;
+                var nodeInterface = $.parseHTML(wok.substitute($('#template-interface-s390x-tmpl').html(), networkData));
+                $('.template-tab-body', '#form-template-interface-s390x').append(nodeInterface);
+                $('.delete', '#form-template-interface-s390x').on("click", function(event) {
+                    event.preventDefault();
+                    $(this).parent().parent().remove();
+                });
+
+                //initialize type option
+                var typeOptionsdata = {};
+                var typeOptions = '';
+                typeOptionsdata.macvtap = 'macvtap';
+                typeOptionsdata.ovs = 'ovs';
+                typeOptionsdata.network = 'network';
+
+                $.each(typeOptionsdata, function(key, value) {
+                    if (value === networkData.type) {
+                        typeOptions += '&lt;option  value="' + key + '" selected="selected"&gt;' + networkData.type + '&lt;/option&gt;';
+                    } else {
+                        typeOptions += '&lt;option value="' + key + '"&gt;' + value + '&lt;/option&gt;';
+                    }
+                });
+
+                $('select', '#form-template-interface-s390x #networkID' + networkItemNum + ' span.type').append(typeOptions);
+                $('select', '#form-template-interface-s390x #networkID' + networkItemNum + ' span.type').on('change', function() {
+                    var itemNode = $(this).closest('div.item');
+
+                    switch ($(this).val()) {
+                        case 'macvtap':
+                            $('span.mode .label-mode', itemNode).addClass('hide');
+                            $('span.mode .bootstrap-select', itemNode).toggleClass("hide", false);
+
+                            var networkOptions = '';
+                            for (var i = 0; i &lt; origmacvtapNetworks.length; i++) {
+                                networkOptions += '&lt;option&gt;' + origmacvtapNetworks[i].name + '&lt;/option&gt;';
+                            }
+
+                            $('span.network select', itemNode).empty().append(networkOptions);
+                            $('span.network select', itemNode).selectpicker('refresh');
+
+                            break;
+                        case 'ovs':
+                            $('span.mode .label-mode', itemNode).removeClass('hide');
+                            $('span.mode .bootstrap-select', itemNode).toggleClass("hide", true);
+                            var networkOptions = '';
+                            for (var i = 0; i &lt; origovsNetworks.length; i++) {
+                                networkOptions += '&lt;option&gt;' + origovsNetworks[i] + '&lt;/option&gt;'; //it should be origovsNetworks[i].name rajat
+                            }
+
+                            $('span.network select', itemNode).empty().append(networkOptions);
+                            $('span.network select', itemNode).selectpicker('refresh');
+
+                            break;
+                        case 'network':
+                            $('span.mode .label-mode', itemNode).removeClass('hide');
+                            $('span.mode .bootstrap-select', itemNode).toggleClass("hide", true);
+
+                            var networkOptions = '';
+                            for (var i = 0; i &lt; result.length; i++) {
+                                if (result[i].state === "active") {
+                                    networkOptions += '&lt;option&gt;' + result[i].name + '&lt;/option&gt;';
+                                }
+                            }
+                            $('span.network select', itemNode).empty().append(networkOptions);
+                            $('span.network select', itemNode).selectpicker('refresh');
+                            break;
+                    }
+                });
+
+                switch (networkData.type) {
+                    case 'macvtap':
+                        //initialize network option
+
+                        var networkOptions = '';
+                        for (var i = 0; i &lt; origmacvtapNetworks.length; i++) {
+                            if (networkName === origmacvtapNetworks[i].name) {
+                                networkOptions += '&lt;option selected="selected"&gt;' + origmacvtapNetworks[i].name + '&lt;/option&gt;';
+                            }
+                            networkOptions += '&lt;option&gt;' + origmacvtapNetworks[i].name + '&lt;/option&gt;';
+                        }
+                        $('select', '#form-template-interface-s390x #networkID' + networkItemNum + ' span.network').append(networkOptions);
+
+                        //initialize Mode option for Macvtap
+                        $('select', '#form-template-interface-s390x #networkID' + networkItemNum + ' span.mode').val(networkData.mode);
+                        $('select', '#form-template-interface-s390x #networkID' + networkItemNum + ' span.mode').selectpicker('refresh');
+
+                        $('span.mode .label-mode', nodeInterface).addClass('hide');
+                        $('span.mode .bootstrap-select', nodeInterface).removeClass("hide");
+
+                        break;
+
+                    case 'ovs':
+                        var networkOptions = '';
+                        for (var i = 0; i &lt; origovsNetworks.length; i++) {
+                            if (networkName === origovsNetworks[i]) {
+                                networkOptions += '&lt;option selected="selected"&gt;' + origovsNetworks[i] + '&lt;/option&gt;';
+                            }
+                            networkOptions += '&lt;option&gt;' + origovsNetworks[i] + '&lt;/option&gt;';
+                        }
+                        $('select', '#form-template-interface-s390x #networkID' + networkItemNum + ' span.network').append(networkOptions);
+
+                        //initialize Mode option for ovs
+                        $('select', '#form-template-interface-s390x #networkID' + networkItemNum + ' span.mode').selectpicker('refresh');
+                        $('span.mode .label-mode', nodeInterface).removeClass('hide');
+                        $('span.mode .bootstrap-select', nodeInterface).addClass("hide");
+                        break;
+
+                    case 'network':
+                        var networkOptions = '';
+                        for (var i = 0; i &lt; result.length; i++) {
+                            if (networkName === result[i].name) {
+                                networkOptions += '&lt;option selected="selected"&gt;' + result[i].name + '&lt;/option&gt;';
+                            }
+                            if (result[i].state === "active" &amp;&amp; networkName !== result[i].name) {
+                                networkOptions += '&lt;option&gt;' + result[i].name + '&lt;/option&gt;';
+                            }
+                        }
+                        $('select', '#form-template-interface-s390x #networkID' + networkItemNum + ' span.network').append(networkOptions);
+
+                        //initialize Mode option for Network
+                        $('select', '#form-template-interface-s390x #networkID' + networkItemNum + ' span.mode').selectpicker('refresh');
+                        $('span.mode .label-mode', nodeInterface).removeClass('hide');
+                        $('span.mode .bootstrap-select', nodeInterface).addClass("hide");
+                        break;
+                }
+                $('select', '#form-template-interface-s390x #networkID' + networkItemNum).selectpicker();
+                networkItemNum += 1;
+            };
+            if (origInterfaces &amp;&amp; origInterfaces.length &gt; 0) {
+                for (var i = 0; i &lt; origInterfaces.length; i++) {
+                    addInterfaceItem({
+                        networkID: 'networkID' + networkItemNum,
+                        networkV: origInterfaces[i].name,
+                        type: origInterfaces[i].type,
+                        mode: origInterfaces[i].mode
+                    });
+                }
+            }
+            if (result &amp;&amp; result.length &gt; 0) {
+                for (var i = 0; i &lt; origNetworks.length; i++) {
+                    addInterfaceItem({
+                        networkID: 'networkID' + networkItemNum,
+                        networkV: origNetworks[i],
+                        type: 'network'
+                    });
+                }
+            }
+            $('#template-edit-interface-add-button-s390x').on("click", function(event) {
+                event.preventDefault();
+                addInterfaceItem({
+                    networkID: 'networkID' + networkItemNum,
+                    networkV: 'default',
+                    type: 'network',
+                    mode: 'None'
+                });
+            });
+        };
+
+        var initProcessor = function(){
+            var setCPUValue = function(){
+                if(!$('#cores').hasClass("invalid-field")&amp;&amp;$('#cores').val()!=""){
+                    var computedCpu = parseInt($("#cores").val())*parseInt($("#threads").val());
                     $("#vcpus").val(computedCpu);
                     if ($("#cpus-check").prop("checked")) {
                         //If topology is checked, set maxcpu to be the same as # of cpu otherwise, backend gives error
@@ -340,7 +509,18 @@ kimchi.template_edit_main = function() {
             });
         }

-        kimchi.listNetworks(initInterface);
+        if(kimchi.hostarch === s390xArch){
+          kimchi.listmacvtapNetworks(function(macvtapnet){
+          origmacvtapNetworks = macvtapnet;
+          kimchi.listovsNetworks(function(ovsnet){
+            origovsNetworks = ovsnet;
+            kimchi.listNetworks(initInterface_s390x);
+          });
+        });
+        }else {
+          kimchi.listNetworks(initInterface);
+        }
+
         kimchi.listStoragePools(initStorage);
         initProcessor();
         checkInvalids();
@@ -432,18 +612,68 @@ kimchi.template_edit_main = function() {
                 topology: {}
             };
         }
-        var networks = $('.template-tab-body .item', '#form-template-interface');
+        if(kimchi.hostarch === s390xArch){
+
+          var interfaces = $('.template-tab-body .item', '#form-template-interface-s390x');
         var networkForUpdate = new Array();
-        $.each(networks, function(index, networkEntities) {
-            var thisValue = $('select', networkEntities).val();
-            networkForUpdate.push(thisValue);
+        var interfacceForUpdate = new Array();
+
+        $.each(interfaces, function(index, interfaceEntities) {
+          var fields =  $('span.type select', interfaceEntities);
+          switch(fields.val()){
+            case 'network':
+              var thisValue = $('span.network select', interfaceEntities).val();
+              networkForUpdate.push(thisValue);
+              break;
+
+             case 'macvtap':
+              var thisdata = {};
+              thisdata.type = $('span.type select', interfaceEntities).val();
+              thisdata.name = $('span.network select', interfaceEntities).val();
+              thisdata.mode = $('span.mode select', interfaceEntities).val();
+
+              interfacceForUpdate.push(thisdata);
+              break;
+
+             case 'ovs':
+              var thisdata = {};
+              thisdata.type = $('span.type select', interfaceEntities).val();
+              thisdata.name = $('span.network select', interfaceEntities).val();
+              interfacceForUpdate.push(thisdata);
+              break;
+          }
+
+          if (networkForUpdate instanceof Array) {
+              data.networks = networkForUpdate;
+          } else if (networkForUpdate != null) {
+              data.networks = [networkForUpdate];
+          } else {
+              data.networks = [];
+          }
+
+          if (networkForUpdate instanceof Array) {
+              data.interfaces = interfacceForUpdate;
+          } else if (interfacceForUpdate != null) {
+              data.interfaces = [interfacceForUpdate];
+          } else {
+              data.interfaces = [];
+          }
         });
-        if (networkForUpdate instanceof Array) {
-            data.networks = networkForUpdate;
-        } else if (networkForUpdate != null) {
-            data.networks = [networkForUpdate];
-        } else {
-            data.networks = [];
+
+        }else {
+          var networks = $('.template-tab-body .item', '#form-template-interface');
+          var networkForUpdate = new Array();
+          $.each(networks, function(index, networkEntities) {
+              var thisValue = $('select', networkEntities).val();
+              networkForUpdate.push(thisValue);
+          });
+          if (networkForUpdate instanceof Array) {
+              data.networks = networkForUpdate;
+          } else if (networkForUpdate != null) {
+              data.networks = [networkForUpdate];
+          } else {
+              data.networks = [];
+          }
         }

         if ($('.has-error', '#form-template-storage').length) {
diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
index 6cac885..4e08243 100644
--- a/ui/pages/template-edit.html.tmpl
+++ b/ui/pages/template-edit.html.tmpl
@@ -129,6 +129,15 @@
                         &lt;/div&gt;
                         &lt;div class="template-tab-body"&gt;&lt;/div&gt;
                     &lt;/form&gt;
+                    &lt;form id="form-template-interface-s390x" style="display:none"&gt;
+                                &lt;div class="template-tab-header"&gt;
+                                  &lt;span class="template-interface-cell type"&gt;$_("Type")&lt;/span&gt;
+                                  &lt;span class="template-interface-cell network"&gt;$_("Network/Interface")&lt;/span&gt;
+                                  &lt;span class="template-interface-cell mode"&gt;$_("Mode")&lt;/span&gt;
+                                    &lt;button type="button" id="template-edit-interface-add-button-s390x" class="pull-right btn btn-primary"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt; $_("Add Interface")&lt;/button&gt;
+                                &lt;/div&gt;
+                                &lt;div class="template-tab-body"&gt;&lt;/div&gt;
+                            &lt;/form&gt;
                 &lt;/div&gt;
                 &lt;div role="tabpanel" class="tab-pane" id="processor"&gt;
                     &lt;form id="form-template-processor"&gt;
@@ -221,5 +230,29 @@
         &lt;/span&gt;
     &lt;/div&gt;
 &lt;/script&gt;
+&lt;script id="template-interface-s390x-tmpl" type="text/html"&gt;
+    &lt;div class="item" id={networkID}&gt;
+      &lt;span class="template-interface-cell type"&gt;
+          &lt;select&gt;
+            &lt;!-- &lt;option value="macvtap"&gt;macvtap&lt;/option&gt;
+            &lt;option value="ovs"&gt;ovs&lt;/option&gt;
+            &lt;option value="network"&gt;network&lt;/option&gt; --&gt;
+          &lt;/select&gt;
+      &lt;/span&gt;
+        &lt;span class="template-interface-cell network"&gt;
+            &lt;select&gt;&lt;/select&gt;
+        &lt;/span&gt;
+        &lt;span class="template-interface-cell mode"&gt;
+        &lt;span class="label-mode hide"&gt;None&lt;/span&gt;
+            &lt;select&gt;
+              &lt;option value="bridge"&gt;bridge&lt;/option&gt;
+              &lt;option value="vepa"&gt;vepa&lt;/option&gt;
+            &lt;/select&gt;
+        &lt;/span&gt;
+        &lt;span class="pull-right"&gt;
+            &lt;button class="delete btn-primary btn"&gt;&lt;i class="fa fa-minus-circle"&gt;&lt;/i&gt; $_("Delete")&lt;/button&gt;
+        &lt;/span&gt;
+    &lt;/div&gt;
+&lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
-- 
2.1.0

_______________________________________________
Kimchi-devel mailing list
<a moz-do-not-send="true" class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a moz-do-not-send="true" class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>

</pre>
      </div>
    </blockquote>
    <br>
  </body>
</html>