Feature #3893: Add pagination to vcenter import dialog

src/sunstone/public/app/utils/tab-datatable.js

@@ -255,7 +255,7 @@ define(function(require) {
         $('.check_item', this).trigger('click');
       }
 
-      return false;
+      return true;
     });
   }
 

src/sunstone/public/app/utils/vcenter/networks.js

@@ -19,6 +19,8 @@ define(function(require) {
   var Locale = require('utils/locale');
   var OpenNebulaNetwork = require('opennebula/network');
   var OpenNebulaError = require('opennebula/error');
+  var DomDataTable = require('utils/dom-datatable');
+  var Notifier = require('utils/notifier');
 
   var TemplateHTML = require('hbs!./networks/html');
 
@@ -99,6 +101,18 @@ define(function(require) {
                 '</div>' +
               '</div>').appendTo($(".content", context))
           } else {
+            var newdiv = $(
+                '<div class="row">' +
+                  '<div class="large-12 columns">' +
+                    '<table class="dataTable no-hover vcenter_network_table" id="vcenter_network_table_' + datacenter_name + '">' +
+                      '<thead><th/></thead>' +
+                      '<tbody/>' +
+                    '</table>' +
+                  '</div>' +
+                '</div>').appendTo($(".content", context));
+
+            var tbody = $('tbody', newdiv);
+
             $.each(networks, function(id, network){
               var netname   = network.name.replace(" ","_");
               var vlan_info = ""
@@ -113,7 +127,9 @@ define(function(require) {
                     '</div>';
               }
 
-              var trow = $('<div class="vcenter_network">' +
+              var trow = $(
+              '<tr class="vcenter_network">' +
+                '<td>' +
                   '<div class="row">' +
                     '<div class="large-10 columns">' +
                       '<div class="large-12 columns">' +
@@ -150,7 +166,8 @@ define(function(require) {
                     '<div class="large-2 columns vcenter_network_result">'+
                     '</div>'+
                   '</div>'+
-                '</div>').appendTo($(".content", context))
+                '</td>' +
+              '</tr>').appendTo(tbody);
 
 
               $('.type_select', trow).on("change",function(){
@@ -207,7 +224,24 @@ define(function(require) {
               $(".network_name", trow).data("network_name", netname)
               $(".network_name", trow).data("one_network", network.one)
             });
-          };
+
+            var networkDataTable = new DomDataTable(
+              'vcenter_network_table_' + datacenter_name,
+              {
+                actions: false,
+                info: false,
+                dataTableOptions: {
+                  "bAutoWidth": false,
+                  "bSortClasses" : false,
+                  "bDeferRender": false,
+                  "ordering": false,
+                  "aoColumnDefs": [
+                  ]
+                }
+              });
+
+            networkDataTable.initialize();
+          }
         });
       },
       error: function(response){
@@ -218,102 +252,104 @@ define(function(require) {
   }
 
   function _import(context) {
-    $.each($(".network_name:checked", context), function() {
-      var network_context = $(this).closest(".vcenter_network");
+    $.each($("table.vcenter_network_table", context), function() {
+      $.each($(this).DataTable().$(".network_name:checked"), function() {
+        var network_context = $(this).closest(".vcenter_network");
 
-      $(".vcenter_network_result:not(.success)", network_context).html(
-          '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
-            '<i class="fa fa-cloud fa-stack-2x"></i>' +
-            '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>' +
-          '</span>');
+        $(".vcenter_network_result:not(.success)", network_context).html(
+            '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
+              '<i class="fa fa-cloud fa-stack-2x"></i>' +
+              '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>' +
+            '</span>');
 
-      var network_size = $(".netsize", network_context).val();
-      var network_tmpl = $(this).data("one_network");
-      var netname      = $(this).data("network_name");
-      var type         = $('.type_select', network_context).val();
+        var network_size = $(".netsize", network_context).val();
+        var network_tmpl = $(this).data("one_network");
+        var netname      = $(this).data("network_name");
+        var type         = $('.type_select', network_context).val();
 
-      var ar_array = [];
-      ar_array.push("TYPE=" + type);
-      ar_array.push("SIZE=" + network_size);
+        var ar_array = [];
+        ar_array.push("TYPE=" + type);
+        ar_array.push("SIZE=" + network_size);
 
-      switch (type) {
-        case 'ETHER':
-          var mac = $('.eth_mac_net', network_context).val();
+        switch (type) {
+          case 'ETHER':
+            var mac = $('.eth_mac_net', network_context).val();
 
-          if (mac) {
-            ar_array.push("MAC=" + mac);
-          }
+            if (mac) {
+              ar_array.push("MAC=" + mac);
+            }
 
-          break;
-        case 'IP4':
-          var mac = $('.four_mac_net', network_context).val();
-          var ip = $('.four_ip_net', network_context).val();
+            break;
+          case 'IP4':
+            var mac = $('.four_mac_net', network_context).val();
+            var ip = $('.four_ip_net', network_context).val();
 
-          if (mac) {
-            ar_array.push("MAC=" + mac);
-          }
-          if (ip) {
-            ar_array.push("IP=" + ip);
-          }
+            if (mac) {
+              ar_array.push("MAC=" + mac);
+            }
+            if (ip) {
+              ar_array.push("IP=" + ip);
+            }
 
-          break;
-        case 'IP6':
-          var mac = $('.six_mac_net', network_context).val();
-          var gp = $('.six_global_net', network_context).val();
-          var ula = $('.six_mac_net', network_context).val();
+            break;
+          case 'IP6':
+            var mac = $('.six_mac_net', network_context).val();
+            var gp = $('.six_global_net', network_context).val();
+            var ula = $('.six_mac_net', network_context).val();
 
-          if (mac) {
-            ar_array.push("MAC=" + mac);
-          }
-          if (gp) {
-            ar_array.push("GLOBAL_PREFIX=" + gp);
-          }
-          if (ula) {
-            ar_array.push("ULA_PREFIX=" + ula);
-          }
+            if (mac) {
+              ar_array.push("MAC=" + mac);
+            }
+            if (gp) {
+              ar_array.push("GLOBAL_PREFIX=" + gp);
+            }
+            if (ula) {
+              ar_array.push("ULA_PREFIX=" + ula);
+            }
 
-          break;
-      }
-
-      network_tmpl += "\nAR=["
-      network_tmpl += ar_array.join(",\n")
-      network_tmpl += "]"
-
-      if ($(".vlaninfo", network_context)) {
-        network_tmpl += "VLAN=\"YES\"\n";
-        network_tmpl += "VLAN_ID=" + $(".vlaninfo", network_context).val() + "\n";
-      }
-
-      var vnet_json = {
-        "vnet": {
-          "vnet_raw": network_tmpl
+            break;
         }
-      };
 
-      OpenNebulaNetwork.create({
-        timeout: true,
-        data: vnet_json,
-        success: function(request, response) {
-          $(".vcenter_network_result", network_context).addClass("success").html(
-              '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
-                '<i class="fa fa-cloud fa-stack-2x"></i>' +
-                '<i class="fa  fa-check fa-stack-1x fa-inverse"></i>' +
-              '</span>');
+        network_tmpl += "\nAR=["
+        network_tmpl += ar_array.join(",\n")
+        network_tmpl += "]"
 
-          $(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="running-color">' +
-                Locale.tr("Virtual Network created successfully") + ' ID:' + response.VNET.ID +
-              '</p>');
-        },
-        error: function (request, error_json) {
-          $(".vcenter_network_result", network_context).html('<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
-                '<i class="fa fa-cloud fa-stack-2x"></i>' +
-                '<i class="fa  fa-warning fa-stack-1x fa-inverse"></i>' +
-              '</span>');
-
-          $(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="error-color">' +
-                (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
-              '</p>');
+        if ($(".vlaninfo", network_context)) {
+          network_tmpl += "VLAN=\"YES\"\n";
+          network_tmpl += "VLAN_ID=" + $(".vlaninfo", network_context).val() + "\n";
         }
+
+        var vnet_json = {
+          "vnet": {
+            "vnet_raw": network_tmpl
+          }
+        };
+
+        OpenNebulaNetwork.create({
+          timeout: true,
+          data: vnet_json,
+          success: function(request, response) {
+            $(".vcenter_network_result", network_context).addClass("success").html(
+                '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
+                  '<i class="fa fa-cloud fa-stack-2x"></i>' +
+                  '<i class="fa  fa-check fa-stack-1x fa-inverse"></i>' +
+                '</span>');
+
+            $(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="running-color">' +
+                  Locale.tr("Virtual Network created successfully") + ' ID:' + response.VNET.ID +
+                '</p>');
+          },
+          error: function (request, error_json) {
+            $(".vcenter_network_result", network_context).html('<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
+                  '<i class="fa fa-cloud fa-stack-2x"></i>' +
+                  '<i class="fa  fa-warning fa-stack-1x fa-inverse"></i>' +
+                '</span>');
+
+            $(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="error-color">' +
+                  (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
+                '</p>');
+          }
+        });
       });
     });
 

src/sunstone/public/app/utils/vcenter/templates.js

@@ -19,6 +19,8 @@ define(function(require) {
   var Locale = require('utils/locale');
   var OpenNebulaTemplate = require('opennebula/template');
   var OpenNebulaError = require('opennebula/error');
+  var DomDataTable = require('utils/dom-datatable');
+  var Notifier = require('utils/notifier');
 
   var TemplateHTML = require('hbs!./templates/html');
 
@@ -99,25 +101,60 @@ define(function(require) {
                   '</div>' +
                 '</div>').appendTo($(".content", context))
           } else {
+            var newdiv = $(
+                '<div class="row">' +
+                  '<div class="large-12 columns">' +
+                    '<table class="dataTable vcenter_template_table" id="vcenter_template_table_' + datacenter_name + '">' +
+                      '<thead>' +
+                        '<th/>' +
+                        '<th>' + Locale.tr("Name") + '</th>' +
+                        '<th>' + Locale.tr("Datacenter") + '</th>' +
+                        '<th/>' +
+                        '<th/>' +
+                      '</thead>' +
+                      '<tbody/>' +
+                    '</table>' +
+                  '</div>' +
+                '</div>').appendTo($(".content", context));
+
+            var tbody = $('tbody', newdiv);
+
             $.each(templates, function(id, template){
-              var trow = $('<div class="vcenter_template">' +
-                  '<div class="row">' +
-                    '<div class="large-10 columns">' +
-                      '<label>' +
-                        '<input type="checkbox" class="template_name" checked/> ' +
-                        template.name + '&emsp;<span style="color: #999">' + template.host + '</span>' +
-                      '</label>' +
-                      '<div class="large-12 columns vcenter_template_response">'+
-                      '</div>'+
-                    '</div>' +
-                    '<div class="large-2 columns vcenter_template_result">'+
-                    '</div>'+
-                  '</div>'+
-                '</div>').appendTo($(".content", context))
+              var trow = $(
+                '<tr class="vcenter_template">' +
+                  '<td><input type="checkbox" class="template_name" checked/></td>' +
+                  '<td>' + template.name + '</td>' +
+                  '<td>' + template.host + '</td>' +
+                  '<td><div class="vcenter_template_response"/></td>' +
+                  '<td><div class="vcenter_template_result"/></td>' +
+                '</tr>').appendTo(tbody);
 
               $(".template_name", trow).data("template_name", template.name)
               $(".template_name", trow).data("one_template", template.one)
             });
+
+            var tmplDataTable = new DomDataTable(
+              'vcenter_template_table_' + datacenter_name,
+              {
+                actions: false,
+                info: false,
+                dataTableOptions: {
+                  "bAutoWidth": false,
+                  "bSortClasses" : false,
+                  "bDeferRender": false,
+                  //"ordering": true,
+                  "order": [],
+                  "aoColumnDefs": [
+                    {"bSortable": true, "aTargets": [1,2]},
+                    {"sWidth": "35px", "aTargets": [0]},
+                  ]
+                },
+                customTrListener: function(tableObj, tr){
+                  $("input.template_name", tr).click();
+                }
+              });
+
+            tmplDataTable.initialize();
           };
         });
       },
@@ -129,45 +166,47 @@ define(function(require) {
   }
 
   function _import(context) {
-    $.each($(".template_name:checked", context), function() {
-      var template_context = $(this).closest(".vcenter_template");
+    $.each($("table.vcenter_template_table", context), function() {
+      $.each($(this).DataTable().$(".template_name:checked"), function() {
+        var template_context = $(this).closest(".vcenter_template");
 
-      $(".vcenter_template_result:not(.success)", template_context).html(
-          '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
-            '<i class="fa fa-cloud fa-stack-2x"></i>' +
-            '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>' +
-          '</span>');
+        $(".vcenter_template_result:not(.success)", template_context).html(
+            '<span class="fa-stack" style="color: #dfdfdf">' +
+              '<i class="fa fa-cloud fa-stack-2x"></i>' +
+              '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>' +
+            '</span>');
 
-      var template_json = {
-        "vmtemplate": {
-          "template_raw": $(this).data("one_template")
-        }
-      };
+        var template_json = {
+          "vmtemplate": {
+            "template_raw": $(this).data("one_template")
+          }
+        };
 
-      OpenNebulaTemplate.create({
-        timeout: true,
-        data: template_json,
-        success: function(request, response) {
-          $(".vcenter_template_result", template_context).addClass("success").html(
-              '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
-                '<i class="fa fa-cloud fa-stack-2x"></i>' +
-                '<i class="fa  fa-check fa-stack-1x fa-inverse"></i>' +
-              '</span>');
+        OpenNebulaTemplate.create({
+          timeout: true,
+          data: template_json,
+          success: function(request, response) {
+            $(".vcenter_template_result", template_context).addClass("success").html(
+                '<span class="fa-stack" style="color: #dfdfdf">' +
+                  '<i class="fa fa-cloud fa-stack-2x"></i>' +
+                  '<i class="fa  fa-check fa-stack-1x fa-inverse"></i>' +
+                '</span>');
 
-          $(".vcenter_template_response", template_context).html('<p style="font-size:12px" class="running-color">' +
-                Locale.tr("Template created successfully") + ' ID:' + response.VMTEMPLATE.ID +
-              '</p>');
-        },
-        error: function (request, error_json) {
-          $(".vcenter_template_result", template_context).html('<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
-                '<i class="fa fa-cloud fa-stack-2x"></i>' +
-                '<i class="fa  fa-warning fa-stack-1x fa-inverse"></i>' +
-              '</span>');
+            $(".vcenter_template_response", template_context).html('<p style="font-size:12px" class="running-color">' +
+                  Locale.tr("Template created successfully") + ' ID:' + response.VMTEMPLATE.ID +
+                '</p>');
+          },
+          error: function (request, error_json) {
+            $(".vcenter_template_result", template_context).html('<span class="fa-stack" style="color: #dfdfdf">' +
+                  '<i class="fa fa-cloud fa-stack-2x"></i>' +
+                  '<i class="fa  fa-warning fa-stack-1x fa-inverse"></i>' +
+                '</span>');
 
-          $(".vcenter_template_response", template_context).html('<p style="font-size:12px" class="error-color">' +
-                (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
-              '</p>');
-        }
+            $(".vcenter_template_response", template_context).html('<p style="font-size:12px" class="error-color">' +
+                  (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
+                '</p>');
+          }
+        });
       });
     });
   }