adding pagination support to the Consumers resource

src/html/apis/index.html

@@ -5,17 +5,39 @@
 
     <h3 class="header">APIs</h3>
 
-    <p class="flow-text center" ng-show="apis.length < 1" style="margin-top:50px;">
+    <p class="flow-text center" ng-show="total == 0" style="margin-top:50px;">
         You haven't created any API in Kong yet.
     </p>
 
-    <p class="center" ng-show="apis.length < 1">
+    <p class="flow-text center" ng-show="apis.length == 0 && total > 0" style="margin-top:50px;">
+        You have reached the end of the list. 
+    </p>
+
+    <p class="flow-text left" ng-show="apis.length > 0" style="margin-top:50px;">
+        Showing {{apis.length}} Apis / {{total}}
+    </p>
+
+     <p class="right" ng-show="next" style="margin-top:50px;">
+        <a href="#/apis?offset={{offset}}&size={{size}}" class="waves-effect waves-light btn">
+            <i class="material-icons left">navigate_next</i>
+            Go to next page
+        </a>
+    </p>
+
+    <p class="center" ng-show="total == 0">
         <a href="#/apis/add" class="waves-effect waves-light btn">
             <i class="material-icons left">add_box</i>
             Add API
         </a>
     </p>
 
+    <p class="center" ng-show="apis.length == 0 && total > 0">
+        <a href="#/apis?size={{size}}" class="waves-effect waves-light btn">
+            <i class="material-icons left">skip_previous</i>
+            Go to first page
+        </a>
+    </p>
+
     <table class="bordered" ng-show="apis.length >= 1">
         <thead>
         <tr>

src/html/config.html

@@ -31,6 +31,13 @@ <h3 class="col s12 header center-align">Kong node configuration</h3>
                 </div>
             </div>
 
+            <div class="row">
+                <div class="input-field col s12">
+                    <input ng-model="config.gelato" name="gelato_option" type="checkbox" id="gelato_option" />
+                    <label for="gelato_option" ">Gelato Links for Consumers</label>
+                </div>
+            </div>
+
             <div class="row">
                 <div class="input-field col s12">
                     <button type="submit" class="waves-effect waves-green btn right">Save</button>

src/html/consumers/form.html

@@ -9,8 +9,10 @@ <h3 class="header">{{title}}</h3>
                 </p>
 
                 <p class="white-text">
-                    Checkout <a href="https://getkong.org/docs/0.5.x/admin-api/#create-consumer" target="_blank">Kong
-                    documentation</a> for the meaning of the form parameters.
+                    Checkout <a href="https://getkong.org/docs/latest/admin-api/#create-consumer" target="_blank">Kong documentation</a> for the meaning of the form parameters.
+                </p>
+                <p class="white-text" ng-show="location">
+                    Check the <a href=/#{{location.path()}}/plugins>Plugins</a> for this Consumer
                 </p>
             </div>
         </div>

src/html/consumers/index.html

@@ -5,17 +5,39 @@
 
     <h3 class="header">Consumers</h3>
 
-    <p class="flow-text center" ng-show="consumers.length < 1" style="margin-top:50px;">
+    <p class="flow-text center" ng-show="total == 0" style="margin-top:50px;">
         You haven't defined any Consumers in Kong yet.
     </p>
 
-    <p class="center" ng-show="consumers.length < 1">
+    <p class="flow-text center" ng-show="consumers.length == 0 && total > 0" style="margin-top:50px;">
+        You have reached the end of the list. 
+    </p>
+
+    <p class="flow-text left" ng-show="consumers.length > 0" style="margin-top:50px;">
+        Showing {{consumers.length}} Consumers / {{total}}
+    </p>
+
+    <p class="right" ng-show="next" style="margin-top:50px;">
+        <a href="#/consumers?offset={{offset}}&size={{size}}" class="waves-effect waves-light btn">
+            <i class="material-icons left">navigate_next</i>
+            Go to next page
+        </a>
+    </p>
+
+    <p class="center" ng-show="total == 0">
         <a href="#/consumers/add" class="waves-effect waves-light btn">
             <i class="material-icons left">add_box</i>
             Add Consumer
         </a>
     </p>
 
+     <p class="center" ng-show="consumers.length == 0 && total > 0">
+        <a href="#/consumers?size={{size}}" class="waves-effect waves-light btn">
+            <i class="material-icons left">skip_previous</i>
+            Go to first page
+        </a>
+    </p>
+
     <table class="bordered" ng-show="consumers.length >= 1">
         <thead>
         <tr>
@@ -28,8 +50,10 @@ <h3 class="header">Consumers</h3>
 
         <tbody>
         <tr ng-repeat="consumer in consumers">
-            <td>{{consumer.username}}</td>
-            <td>{{consumer.custom_id}}</td>
+            <td>{{consumer.username}} <p ng-show="!consumer.username">nope</p></td>
+            <td><a ng-show="gelato" href="https://gelato.io/app/developers/{{consumer.custom_id}}">{{consumer.custom_id}}</a>
+                <p ng-show="!gelato">{{consumer.custom_id}}</p>
+                <p ng-show="!consumer.custom_id">nope</p></td>
             <td>{{consumer.created_at | date}}</td>
             <td class="right">
                 <a class="btn-floating waves-effect waves-light" href="#/consumers/{{consumer.id}}">

src/html/plugins/index.html

@@ -11,23 +11,45 @@ <h3 class="header" ng-show="owner_type==='Consumer'">
         Plugins of consumer "<a href="#/consumers/{{owner.id}}">{{owner.username}}</a>"
     </h3>
 
-    <p class="flow-text center" ng-show="plugins.length < 1 && !owner_type" style="margin-top:50px;">
+    <p class="flow-text center" ng-show="total == 0 && !owner_type" style="margin-top:50px;">
         There are no plugin configured yet.
     </p>
-    <p class="flow-text center" ng-show="plugins.length < 1 && owner_type=='API'" style="margin-top:50px;">
+    <p class="flow-text center" ng-show="total == 0 && owner_type=='API'" style="margin-top:50px;">
         This API doesn't have any plugin configured yet.
     </p>
-    <p class="flow-text center" ng-show="plugins.length < 1 && owner_type=='Consumer'" style="margin-top:50px;">
+    <p class="flow-text center" ng-show="total == 0 && owner_type=='Consumer'" style="margin-top:50px;">
         This Consumer doesn't have any plugin configured yet.
     </p>
 
-    <p class="center" ng-show="plugins.length < 1">
+    <p class="flow-text center" ng-show="plugins.length == 0 && total > 0" style="margin-top:50px;">
+        You have reached the end of the list. 
+    </p>
+
+    <p class="flow-text left" ng-show="plugins.length > 0" style="margin-top:50px;">
+        Showing {{plugins.length}} Plugins / {{total}}
+    </p>
+
+     <p class="right" ng-show="next" style="margin-top:50px;">
+        <a href="#{{location.path()}}?offset={{offset}}&size={{size}}" class="waves-effect waves-light btn">
+            <i class="material-icons left">navigate_next</i>
+            Go to next page
+        </a>
+    </p>
+
+    <p class="center" ng-show="total == 0">
         <a href="#/plugins/add" class="waves-effect waves-light btn">
             <i class="material-icons left">add_box</i>
             Add Plugin
         </a>
     </p>
 
+    <p class="center" ng-show="plugins.length == 0 && total > 0">
+        <a href="#{{location.path()}}?size={{size}}" class="waves-effect waves-light btn">
+            <i class="material-icons left">skip_previous</i>
+            Go to first page
+        </a>
+    </p>
+
     <table class="bordered" ng-show="plugins.length >= 1">
         <thead>
         <tr>

src/js/app.js

@@ -29,8 +29,15 @@ var app = angular.module('app', ['ngRoute', 'ngCookies', 'ngAnimate', 'ngSanitiz
                 controller: 'ApisController',
                 resolve: {
                     isAppReady: isAppReady,
-                    initialData: ['Kong', '$location', function (Kong) {
-                        return Kong.get('/apis');
+                    initialData: ['Kong', '$route', function (Kong, $route) {
+                        var url = '/apis?';
+                        if ($route.current.params.offset) {
+                           url += 'offset=' + encodeURIComponent($route.current.params.offset);
+                        }
+                        if ($route.current.params.size) {
+                            url += '&size=' + $route.current.params.size;
+                        }
+                        return Kong.get(url);
                     }]
                 }
             })
@@ -58,9 +65,16 @@ var app = angular.module('app', ['ngRoute', 'ngCookies', 'ngAnimate', 'ngSanitiz
                 controller: 'PluginsController',
                 resolve: {
                     isAppReady: isAppReady,
-                    pluginsCollection: ['Kong', '$route', function (Kong, $route) {
+                    pluginsCollection: ['Kong', '$route', '$location', function (Kong, $route, $location) {
                         var api_id = $route.current.params.api_id;
-                        return Kong.get('/apis/' + api_id + '/plugins');
+                        var url = '/apis/' + api_id + '/plugins?';
+                        if ($route.current.params.offset) {
+                           url += '&offset=' + encodeURIComponent($route.current.params.offset);
+                        }
+                        if ($route.current.params.size) {
+                            url += '&size=' + $route.current.params.size;
+                        }
+                        return Kong.get(url);
                     }],
                     owner: ['Kong', '$route', function(Kong, $route) {
                         var api_id = $route.current.params.api_id;
@@ -73,9 +87,15 @@ var app = angular.module('app', ['ngRoute', 'ngCookies', 'ngAnimate', 'ngSanitiz
                 controller: 'PluginsController',
                 resolve: {
                     isAppReady: isAppReady,
-                    pluginsCollection: ['Kong', '$route', function (Kong, $route) {
-                        var consumer_id = $route.current.params.consumer_id;
-                        return Kong.get('/plugins?consumer_id=' + consumer_id);
+                    pluginsCollection: ['Kong', '$route', '$location', function (Kong, $route, $location) {
+                        var url = '/plugins?consumer_id=' + $route.current.params.consumer_id;
+                        if ($route.current.params.offset) {
+                           url += '&offset=' + encodeURIComponent($route.current.params.offset);
+                        }
+                        if ($route.current.params.size) {
+                            url += '&size=' + $route.current.params.size;
+                        }
+                        return Kong.get(url);
                     }],
                     owner: ['Kong', '$route', function(Kong, $route) {
                         var consumer_id = $route.current.params.consumer_id;
@@ -86,10 +106,17 @@ var app = angular.module('app', ['ngRoute', 'ngCookies', 'ngAnimate', 'ngSanitiz
             .when('/plugins', {
                 templateUrl: 'html/plugins/index.html',
                 controller: 'PluginsController',
-                resolve: {
+                resolve: { 
                     isAppReady: isAppReady,
-                    pluginsCollection: ['Kong', function (Kong) {
-                        return Kong.get('/plugins');
+                    pluginsCollection: ['Kong', '$route', '$location', function (Kong, $route, $location) {
+                        var url = '/plugins?';
+                        if ($route.current.params.offset) {
+                           url += 'offset=' + encodeURIComponent($route.current.params.offset);
+                        }
+                        if ($route.current.params.size) {
+                            url += '&size=' + $route.current.params.size;
+                        }
+                        return Kong.get(url);
                     }],
                     owner: function() { return {};}
                 }
@@ -109,7 +136,7 @@ var app = angular.module('app', ['ngRoute', 'ngCookies', 'ngAnimate', 'ngSanitiz
                         return Kong.get('/apis');
                     }],
                     consumers: ['Kong', '$location', function(Kong) {
-                        return Kong.get('/consumers');
+                        return Kong.get('/consumers?size=1000');
                     }]
                 }
             })
@@ -138,8 +165,15 @@ var app = angular.module('app', ['ngRoute', 'ngCookies', 'ngAnimate', 'ngSanitiz
                 controller: 'ConsumersController',
                 resolve: {
                     isAppReady: isAppReady,
-                    consumersCollection: ['Kong', function (Kong) {
-                        return Kong.get('/consumers');
+                    consumersCollection: ['Kong', '$route', function (Kong, $route) {
+                        var url = '/consumers?';
+                        if ($route.current.params.offset) {
+                           url += 'offset=' + encodeURIComponent($route.current.params.offset);
+                        }
+                        if ($route.current.params.size) {
+                            url += '&size=' + $route.current.params.size;
+                        }
+                        return Kong.get(url);
                     }]
                 }
             })

src/js/controllers/apis.js

@@ -1,5 +1,10 @@
 angular.module('app').controller("ApisController", ["initialData", "$scope", "Kong", "$route", function (initialData, $scope, Kong, $route) {
     $scope.apis = initialData.data;
+    $scope.total = initialData.total;
+    $scope.next = initialData.next;
+    $scope.size = $route.current.params.size;
+    $scope.offset = initialData.next ? /offset=([^&]+)/.exec(initialData.next)[1] : null;
+
     $scope.showDeleteModal = function (name, id) {
         $scope.current = {name: name, id: id};
         $('#deleteAPI').openModal();

src/js/controllers/config.js

@@ -5,8 +5,10 @@ angular.module('app').controller("ConfigController", ["$scope", "Kong", "Alert",
 
     $scope.update = function() {
         if (!$scope.config.url) {
-            Alert.error("You need to indicate the url and port of the Kong node you want to manage.");
-            return;
+            $scope.config.url = "http://localhost:8001";
+        }
+        if ($scope.config.url.toLowerCase().indexOf("http") == -1) {
+            $scope.config.url = "http://" + $scope.config.url;
         }
 
         Kong.setConfig($scope.config).then(function() {

src/js/controllers/consumer.js

@@ -3,6 +3,7 @@ angular.module('app').controller("ConsumerController", ["$scope", "Kong", "$loca
         $scope.consumer = consumer;
         $scope.title = "Edit Consumer";
         $scope.action = "Save";
+        $scope.location = $location;
         loadExtensions('jwt');
         loadExtensions('basic-auth');
         loadExtensions('oauth2');

src/js/controllers/consumers.js

@@ -1,5 +1,11 @@
 angular.module('app').controller("ConsumersController", ["consumersCollection", "$scope", "Kong", "$route", function (consumersCollection, $scope, Kong, $route) {
     $scope.consumers = consumersCollection.data;
+    $scope.total = consumersCollection.total; 
+    $scope.next = consumersCollection.next;
+    $scope.size = $route.current.params.size;
+    $scope.offset = consumersCollection.next ? /offset=([^&]+)/.exec(consumersCollection.next)[1] : null;
+    //$scope.offset = encodeURIComponent(consumersCollection.offset);
+    $scope.gelato = Kong.config.gelato;
     $scope.showDeleteModal = function (username, id) {
         $scope.current = {username: username, id: id};
         $('#deleteConsumer').openModal();
@@ -14,4 +20,3 @@ angular.module('app').controller("ConsumersController", ["consumersCollection",
         });
     }
 }]);
-

src/js/controllers/plugins.js

@@ -1,4 +1,4 @@
-angular.module('app').controller("PluginsController", ["pluginsCollection", "$scope", "Kong", "$route", "$routeParams", "owner", "Alert", function (pluginsCollection, $scope, Kong, $route, $routeParams, $owner, Alert) {
+angular.module('app').controller("PluginsController", ["pluginsCollection", "$scope", "Kong", "$route", "$location", "$routeParams", "owner", "Alert", function (pluginsCollection, $scope, Kong, $route, $location, $routeParams, $owner, Alert) {
     if ($routeParams.api_id) {
         $scope.owner_type = 'API';
     } else if ($routeParams.consumer_id) {
@@ -9,6 +9,11 @@ angular.module('app').controller("PluginsController", ["pluginsCollection", "$sc
     $scope.owner = $owner;
 
     $scope.plugins = pluginsCollection.data;
+    $scope.total = pluginsCollection.total;
+    $scope.next = pluginsCollection.next;
+    $scope.size = $route.current.params.size;
+    $scope.offset = pluginsCollection.next ? /offset=([^&]+)/.exec(pluginsCollection.next)[1] : null;
+    $scope.location = $location;
 
     angular.forEach($scope.plugins, function(plugin) {
         Kong.get('/apis/' + plugin.api_id).then(function(api) {

src/js/services/kong.js

@@ -5,7 +5,8 @@ angular.module('app')
     .factory('Kong', ['$http', '$q', '$cookies', 'Request', 'Alert', function ($http, $q, $cookies, Request, Alert) {
         var config = {
             url : $cookies.getObject('config.url'),
-            auth : { type : "no_auth" }
+            auth : { type : "no_auth" },
+            gelato : $cookies.getObject('config.gelato')
         };
 
         var factory = {
@@ -36,7 +37,7 @@ angular.module('app')
                 }
                 var deferred = $q.defer();
                 if (!url) {
-                    deferred.reject('You must provide Kong node url.');
+                    deferred.reject('No URL');
                     return deferred.promise;
                 }
 
@@ -81,6 +82,9 @@ angular.module('app')
                 }, function (response) {
                     factory.handleError(response, deferred);
                 });
+                $cookies.putObject('config.gelato', config.gelato, {
+                    expires: new Date(new Date().getTime() + 1000 * 24 * 3600 * 60) // remember 60 days
+                });
                 return deferred.promise;
             }
         };