Merge pull request #740 from shapeblue/CLOUDSTACK-8766-master

CLOUDSTACK-8766: Fix infinite scrolling pagination for zonal template listing

Uses listViewDataProvider to implement pagination on listTemplates API
requests in the UI, when a template's zone tab is viewed.

(cherry picked from commit 95c76ef)

This from the other PR, for master branch.

* pr/740:
  CLOUDSTACK-8766: Fix infinite scrolling pagination for zonal template listing

Signed-off-by: Remi Bergsma <github@remi.nl>

Author: remibergsma

ui/scripts/templates.js

@@ -16,6 +16,8 @@
 // under the License.
 (function(cloudStack, $) {
     var ostypeObjs;
+    var previousCollection = [];
+    var previousFilterType = null;
 
     cloudStack.sections.templates = {
         title: 'label.menu.templates',
@@ -881,6 +883,10 @@
                         var ignoreProject = false;
                         if (args.filterBy != null) { //filter dropdown
                             if (args.filterBy.kind != null) {
+                                if (previousFilterType != args.filterBy.kind || args.page == 1) {
+                                    previousFilterType = args.filterBy.kind;
+                                    previousCollection = [];
+                                }
                                 switch (args.filterBy.kind) {
                                     case "all":
                                         ignoreProject = true;
@@ -924,19 +930,19 @@
                                 var itemsView = [];
 
                                 $(items).each(function(index, item) {
-                                    var existing = $.grep(itemsView, function(it){
+                                    var existing = $.grep(previousCollection, function(it){
                                         return it != null && it.id !=null && it.id == item.id;
                                     });
 
-                                    if (existing.length == 0) {
-                                        itemsView.push($.extend(item, {
+                                    if (existing.length > 0) {
+                                        return true; // skip adding this entry
+                                    } else {
+                                        var templateItem = $.extend(item, {
                                             zones: item.zonename,
                                             zoneids: [item.zoneid]
-                                        }));
-                                    }
-                                    else {
-                                        existing[0].zones = 'label.multiplezones';
-                                        existing[0].zoneids.push(item.zoneid);
+                                        });
+                                        itemsView.push(templateItem);
+                                        previousCollection.push(templateItem);
                                     }
                                 });
 
@@ -1377,12 +1383,13 @@
 
 
                                     dataProvider: function(args) {  // UI > Templates menu (listing) > select a template from listing > Details tab > Zones tab (listing)
+                                        var data = { templatefilter: "self",
+                                                     id: args.context.templates[0].id
+                                                   };
+                                        listViewDataProvider(args, data);
                                         $.ajax({
                                             url: createURL("listTemplates"),
-                                            data: {
-                                                templatefilter: "self",
-                                                id: args.context.templates[0].id
-                                            },
+                                            data: data,
                                             success: function(json) {
                                                 var jsonObjs = json.listtemplatesresponse.template;
 
@@ -2021,6 +2028,10 @@
                         var ignoreProject = false;
                         if (args.filterBy != null) { //filter dropdown
                             if (args.filterBy.kind != null) {
+                                if (previousFilterType != args.filterBy.kind || args.page == 1) {
+                                    previousFilterType = args.filterBy.kind;
+                                    previousCollection = [];
+                                }
                                 switch (args.filterBy.kind) {
                                     case "all":
                                         ignoreProject = true;
@@ -2064,22 +2075,24 @@
 
                                 var itemsView = [];
                                 $(items).each(function(index, item) {
-                                    var existing = $.grep(itemsView, function(it){
+                                    var existing = $.grep(previousCollection, function(it){
                                         return it != null && it.id !=null && it.id == item.id;
                                     });
-                                    if (existing.length == 0) {
-                                        itemsView.push({
+
+
+                                    if (existing.length > 0) {
+                                        return true; // skip adding this entry
+                                    } else {
+                                        var isoItem = {
                                             id: item.id,
                                             name: item.name,
                                             description: item.description,
                                             ostypeid: item.ostypeid,
                                             zones: item.zonename,
                                             zoneids: [item.zoneid]
-                                        });
-                                    }
-                                    else {
-                                        existing[0].zones = 'Multiple Zones';
-                                        existing[0].zoneids.push(item.zoneid);
+                                        };
+                                        itemsView.push(isoItem);
+                                        previousCollection.push(isoItem);
                                     }
                                 }
 );
@@ -2382,11 +2395,14 @@
                                     hideSearchBar: true,
 
                                     dataProvider: function(args) {
-                                                var jsonObj = args.context.isos[0];
-                                                var apiCmd = "listIsos&isofilter=self&id=" + jsonObj.id;
-
+                                                var data = {
+                                                    isofilter: 'self',
+                                                    id: args.context.isos[0].id
+                                                };
+                                                listViewDataProvider(args, data);
                                                 $.ajax({
-                                                    url: createURL(apiCmd),
+                                                    url: createURL('listIsos'),
+                                                    data: data,
                                                     dataType: "json",
                                                     success: function(json) {
                                                             var isos = json.listisosresponse.iso;