From b3c5de6da17e62df213e124a7a1fc470acf5e9a8 Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Tue, 18 Mar 2014 10:32:45 -0400
Subject: [PATCH] Pagination improvement for TPS UI.

The TPS UI has been modified to provide buttons to go to the first
page, previous page, next page, and last page. The UI will also show
the total entries, the current page number, and the total number of
pages. Users can jump to a specific page by entering the page number.

The CSS has been modified to allow better control of UI components.
The UI table now has a default size of 5. It's no longer necessary
to specify the size in each table.

Ticket #848
---
 base/server/share/webapps/pki/css/pki-ui.css       |  41 +++++++
 base/server/share/webapps/pki/js/pki-ui.js         | 121 +++++++++++++++------
 base/tps-tomcat/shared/webapps/tps/js/activity.js  |   2 +-
 .../shared/webapps/tps/js/authenticator.js         |   2 +-
 base/tps-tomcat/shared/webapps/tps/js/cert.js      |   2 +-
 .../tps-tomcat/shared/webapps/tps/js/connection.js |   2 +-
 base/tps-tomcat/shared/webapps/tps/js/group.js     |   2 +-
 base/tps-tomcat/shared/webapps/tps/js/profile.js   |   2 +-
 base/tps-tomcat/shared/webapps/tps/js/selftest.js  |   2 +-
 base/tps-tomcat/shared/webapps/tps/js/token.js     |   2 +-
 base/tps-tomcat/shared/webapps/tps/js/user.js      |   2 +-
 .../shared/webapps/tps/ui/activities.html          |  29 +++--
 .../shared/webapps/tps/ui/authenticators.html      |  28 +++--
 base/tps-tomcat/shared/webapps/tps/ui/certs.html   |  29 +++--
 .../shared/webapps/tps/ui/connections.html         |  28 +++--
 base/tps-tomcat/shared/webapps/tps/ui/groups.html  |  26 +++--
 .../tps-tomcat/shared/webapps/tps/ui/profiles.html |  28 +++--
 .../shared/webapps/tps/ui/selftests.html           |  29 +++--
 base/tps-tomcat/shared/webapps/tps/ui/tokens.html  |  28 +++--
 base/tps-tomcat/shared/webapps/tps/ui/users.html   |  28 +++--
 20 files changed, 322 insertions(+), 111 deletions(-)

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index cbdd9205a0d4390cb4404d9a5f2698e46c94bead..8802d41625731ee0fc417f6f968f59b30f2bbc9f 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -74,9 +74,50 @@ table tr th:first-child, table tr td:first-child {
 }
 
 table input[type="checkbox"] + label {
+  margin: 0;
   padding: 0 0 0 13px;
 }
 
+.pagination {
+  margin: 4px;
+}
+
+.pki-table-actions {
+  padding: 1px;
+  border-top: none;
+}
+
+.pki-table-actions button {
+  padding: 3px 8px;
+  font-size: 11px;
+  box-shadow: 1px 2px 2px #e3e3e3;
+  margin: 4px 4px 4px 0;
+}
+
+.pki-table-actions input[name="page"] {
+  width: 50px;
+  min-width: 50px;
+}
+
+.pki-table-actions span[name="actions"] {
+  float: right;
+}
+
+.pki-table-actions span[name="info"] {
+  line-height: 26px;
+  margin: 4px;
+  display: inline-block;
+}
+
+table span[name="page-controls"] {
+  float: right;
+}
+
+table span[name="page-jump"] {
+  margin: 0 8px 0 0;
+  float: right;
+}
+
 #content {
   margin: 20px;
 }
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 00c9f05c7da1453862210786233698d08cb8e484..056607a766957879acd1211eb197dde9f50bc7c0 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -48,7 +48,7 @@ var Collection = Backbone.Collection.extend({
 
         self.options = options;
         self.links = {};
-        self.filter(null);
+        self.query({});
     },
     url: function() {
         return this.currentURL;
@@ -56,6 +56,9 @@ var Collection = Backbone.Collection.extend({
     parse: function(response) {
         var self = this;
 
+        // get total entries
+        self.total = self.getTotal(response);
+
         // parse links
         var links = self.getLinks(response);
         links = links == undefined ? [] : [].concat(links);
@@ -73,6 +76,9 @@ var Collection = Backbone.Collection.extend({
 
         return models;
     },
+    getTotal: function(response) {
+        return response.total;
+    },
     getEntries: function(response) {
         return null;
     },
@@ -95,23 +101,25 @@ var Collection = Backbone.Collection.extend({
         return this.links[name];
     },
     go: function(name) {
-        if (this.links[name] == undefined) return;
-        this.currentURL = this.links[name];
+        var self = this;
+        if (self.links[name] == undefined) return;
+        self.currentURL = self.links[name];
     },
-    filter: function(filter) {
+    query: function(params) {
         var self = this;
 
+        // add default options into the params
+        _.defaults(params, self.options);
+
+        // generate query string
         var query = "";
-        _(self.options).each(function(value, name) {
+        _(params).each(function(value, name) {
+            // skip null or empty string, but don't skip 0
+            if (value === null || value === "") return;
             query = query == "" ? "?" : query + "&";
             query = query + name + "=" + encodeURIComponent(value);
         });
 
-        if (filter) {
-            query = query == "" ? "?" : query + "&";
-            query = query + "filter=" + encodeURIComponent(filter);
-        }
-
         self.currentURL = self.urlRoot + query;
     }
 });
@@ -450,13 +458,21 @@ var Table = Backbone.View.extend({
         self.addDialog = options.addDialog;
         self.editDialog = options.editDialog;
 
+        // number of table rows
+        self.pageSize = options.pageSize || 5;
+
+        // current page: 1, 2, 3, ...
+        self.page = 1;
+        self.totalPages = 1;
+
         self.thead = $("thead", self.$el);
 
         // setup search field handler
-        $("input[name='search']", self.thead).keypress(function(e) {
+        self.searchField = $("input[name='search']", self.thead);
+        self.searchField.keypress(function(e) {
             if (e.which == 13) {
-                var input = $(e.target);
-                self.collection.filter(input.val());
+                // show the first page of search results
+                self.page = 1;
                 self.render();
             }
         });
@@ -505,17 +521,43 @@ var Table = Backbone.View.extend({
         self.tbody = $("tbody", self.$el);
         self.template = $("tr", self.tbody).detach();
 
-        // attach link handlers
         self.tfoot = $("tfoot", self.$el);
-        $("a.prev", self.tfoot).click(function(e) {
-            if (self.collection.link("prev") == undefined) return;
-            self.collection.go("prev");
+        self.totalEntriesField = $("span[name='totalEntries']", self.tfoot);
+        self.pageField = $("input[name='page']", self.tfoot);
+        self.totalPagesField = $("span[name='totalPages']", self.tfoot);
+
+        // setup page jump handler
+        self.pageField.keypress(function(e) {
+            if (e.which == 13) {
+                // parse user entered page number
+                self.page = parseInt(self.pageField.val());
+                if (isNaN(self.page)) self.page = 1;
+
+                // make sure 1 <= page <= total pages
+                self.page = Math.max(self.page, 1);
+                self.page = Math.min(self.page, self.totalPages);
+                self.render();
+            }
+        });
+
+        // setup handlers for first, prev, next, and last buttons
+        $("a[name='first']", self.tfoot).click(function(e) {
+            self.page = 1;
+            self.render();
+            e.preventDefault();
+        });
+        $("a[name='prev']", self.tfoot).click(function(e) {
+            self.page = Math.max(self.page - 1, 1);
+            self.render();
+            e.preventDefault();
+        });
+        $("a[name='next']", self.tfoot).click(function(e) {
+            self.page = Math.min(self.page + 1, self.totalPages);
             self.render();
             e.preventDefault();
         });
-        $("a.next", self.tfoot).click(function(e) {
-            if (self.collection.link("next") == undefined) return;
-            self.collection.go("next");
+        $("a[name='last']", self.tfoot).click(function(e) {
+            self.page = self.totalPages;
             self.render();
             e.preventDefault();
         });
@@ -524,12 +566,31 @@ var Table = Backbone.View.extend({
     },
     render: function() {
         var self = this;
+
+        // set query based on current page, page size, and filter
+        self.collection.query({
+            start: (self.page - 1) * self.pageSize,
+            size: self.pageSize,
+            filter: self.searchField.val()
+        });
+
+        // fetch data based on query
         self.collection.fetch({
             reset: true,
             success: function(collection, response, options) {
                 self.tbody.empty();
 
-                // display result page
+                // display total entries
+                self.totalEntriesField.text(self.collection.total);
+
+                // display current page number
+                self.pageField.val(self.page);
+
+                // calculate and display total number of pages
+                self.totalPages = Math.floor(Math.max(0, self.collection.total - 1) / self.pageSize) + 1;
+                self.totalPagesField.text(self.totalPages);
+
+                // display entries in the current page
                 _(self.collection.models).each(function(model) {
                     var item = new TableItem({
                         el: self.template.clone(),
@@ -540,16 +601,14 @@ var Table = Backbone.View.extend({
                     self.tbody.append(item.$el);
                 }, self);
 
-                // add blank lines
-                if (self.collection.options.size != undefined) {
-                    var blanks = self.collection.options.size - self.collection.models.length;
-                    for (var i = 0; i < blanks; i++) {
-                        var item = new BlankTableItem({
-                            el: self.template.clone()
-                        });
-                        item.render();
-                        self.tbody.append(item.$el);
-                    }
+                // add blank rows to keep page size consistent
+                var blanks = self.pageSize - self.collection.models.length;
+                for (var i = 0; i < blanks; i++) {
+                    var item = new BlankTableItem({
+                        el: self.template.clone()
+                    });
+                    item.render();
+                    self.tbody.append(item.$el);
                 }
             },
             error: function(collection, response, options) {
diff --git a/base/tps-tomcat/shared/webapps/tps/js/activity.js b/base/tps-tomcat/shared/webapps/tps/js/activity.js
index fdde689867d5ab7cd1c2442a87fe4552b633b7f1..35ea96b285ada8f1e5b7fc4a8d71fded2356f965 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/activity.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/activity.js
@@ -77,7 +77,7 @@ var ActivityPage = Page.extend({
 
         new Table({
             el: $("table[name='activities']"),
-            collection: new ActivityCollection({ size: 5 }),
+            collection: new ActivityCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index bdbe1f839eab577ee2de07ce71d1c6d7a2bb72ba..83a7805a868156fe9cf1caae88e9fe449030fa4a 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -134,7 +134,7 @@ var AuthenticatorPage = Page.extend({
 
         new Table({
             el: $("table[name='authenticators']"),
-            collection: new AuthenticatorCollection({ size: 5 }),
+            collection: new AuthenticatorCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/cert.js b/base/tps-tomcat/shared/webapps/tps/js/cert.js
index cd4164dee0119e30fc125e25f5913e3996a29be6..9163db4fb828e836acc8a8e00e3f7214904b5588 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/cert.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/cert.js
@@ -83,7 +83,7 @@ var CertificatePage = Page.extend({
 
         new Table({
             el: $("table[name='certificates']"),
-            collection: new CertificateCollection({ size: 5 }),
+            collection: new CertificateCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index a796cec7fe7698224ac340ca3ad9a6da8619629f..c55cad0f74ceed19cd9ed468a5f922143b96ff49 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -134,7 +134,7 @@ var ConnectionPage = Page.extend({
 
         new Table({
             el: $("table[name='connections']"),
-            collection: new ConnectionCollection({ size: 5 }),
+            collection: new ConnectionCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/group.js b/base/tps-tomcat/shared/webapps/tps/js/group.js
index 4f03d69329956e754ea0025e5283836fe01dafd4..fe558133ec433118fce6ff6f6197b6db0de61bec 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/group.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/group.js
@@ -72,7 +72,7 @@ var GroupPage = Page.extend({
 
         new Table({
             el: $("table[name='groups']"),
-            collection: new GroupCollection({ size: 5 }),
+            collection: new GroupCollection(),
             addDialog: addDialog,
             editDialog: editDialog
         });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index 5b8d06e2bc6bcdaf324447f653859e02a924c9fd..dde917f17961f57996dd52e3bec5b66f7c9036d4 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -134,7 +134,7 @@ var ProfilePage = Page.extend({
 
         new Table({
             el: $("table[name='profiles']"),
-            collection: new ProfileCollection({ size: 5 }),
+            collection: new ProfileCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/selftest.js b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
index 9104c6c6f0ccea02947c075d89f81e67ad16039a..c4991e7b3d08352b235d31c7d84595c33b39c0b9 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/selftest.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
@@ -70,7 +70,7 @@ var SelfTestPage = Page.extend({
 
         new Table({
             el: $("table[name='selftests']"),
-            collection: new SelfTestCollection({ size: 5 }),
+            collection: new SelfTestCollection(),
             editDialog: editDialog
         });
     }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js
index b9686f10e10865ac88badb8bec2ba1952bb2109c..573e40eaf83c3716e52a5275b881082f9e535f34 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/token.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/token.js
@@ -93,7 +93,7 @@ var TokenPage = Page.extend({
 
         new Table({
             el: $("table[name='tokens']"),
-            collection: new TokenCollection({ size: 5 }),
+            collection: new TokenCollection(),
             addDialog: addDialog,
             editDialog: editDialog
         });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/user.js b/base/tps-tomcat/shared/webapps/tps/js/user.js
index abcac34ddb4a9e0af4582a04b4a47b69f79f4007..68f50113756a52aa00dfbbf1dc1cf6835b895ed8 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/user.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/user.js
@@ -136,7 +136,7 @@ var UserPage = Page.extend({
 
         new Table({
             el: $("table[name='users']"),
-            collection: new UserCollection({ size: 5 }),
+            collection: new UserCollection(),
             addDialog: addDialog,
             editDialog: editDialog
         });
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/activities.html b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
index 04995e5726677e0a13f935b80c8097302aae0099..2e96bb82e7d49dbb6da804b0646471259b360327 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
@@ -20,9 +20,12 @@
 <table name="activities">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="8">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span></span>
+         <th class="pki-table-actions" colspan="8">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
+             </span>
          </th>
     </tr>
     <tr>
@@ -50,11 +53,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="8">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="8">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
index c7e0e3e967ac446a2551d349b4821d4783bac477..771fe2e7b4e8e02b6d63f00d091e79d95c9268fd 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
@@ -20,9 +20,11 @@
 <table name="authenticators">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,11 +45,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/certs.html b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
index c454170d1c20df03816620667dd3fff5af8dc14f..997b7c06c798dac99a632f660e653f2e4da2ce6d 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
@@ -20,9 +20,12 @@
 <table name="certificates">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="10">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span></span>
+         <th class="pki-table-actions" colspan="10">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
+             </span>
          </th>
     </tr>
     <tr>
@@ -54,11 +57,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="10">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="10">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connections.html b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
index 0d438470323dbd70e24d2b6cb791ffdc80738be7..6f401f56f4b0385e29d7a8ca2bc5ca9da4922a07 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
@@ -20,9 +20,11 @@
 <table name="connections">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,11 +45,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/groups.html b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
index a835180b7f507ce1322faca4cc94ec3fe966be2f..b0e8fedb1a9dd01b6aa95f74912926817cee3378 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
@@ -20,9 +20,11 @@
 <table name="groups">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,10 +45,20 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
              </span>
          </th>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
index 57c86df10fed5e53f7574a36ae561c12980c9847..95b556257e9860fbb7a5da085c17d8948b6fe25e 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
@@ -20,9 +20,11 @@
 <table name="profiles">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,11 +45,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
index d184703c818b3dcf585a6c03f9360e26c2b7dcf6..c6771763104f303fbf70b29a8e6dc16e5fc44d8b 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
@@ -20,9 +20,12 @@
 <table name="selftests">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="6">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span></span>
+         <th class="pki-table-actions" colspan="6">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
+             </span>
          </th>
     </tr>
     <tr>
@@ -46,11 +49,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="6">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="6">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
index 3edcd2cd4248841ec5ae193b33e901928787c952..cb8d1a88b58b82c8db67ea46da62076d56126cff 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
@@ -20,9 +20,11 @@
 <table name="tokens">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="9">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="9">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -55,11 +57,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="9">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="9">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/users.html b/base/tps-tomcat/shared/webapps/tps/ui/users.html
index 4757ff5d9214e7593d2da1988fc53609c47248a3..a23fdbb8b2cdd44caf30ba959662c94afa9c54ee 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/users.html
@@ -20,9 +20,11 @@
 <table name="users">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span><input name="search" type="text" placeholder="Search..."></span>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="search">
+                 <input name="search" type="text" placeholder="Search...">
+             </span>
+             <span name="actions">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -43,11 +45,21 @@
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="3">
-             <span>
-                 <a href="#" class="prev">Prev</a>
-                 <a href="#" class="next">Next</a>
-             <span>
+         <th class="pki-table-actions" colspan="3">
+             <span name="info">
+                 Total: <span name="totalEntries">0</span> entries
+             </span>
+             <span name="page-controls">
+                 <ul class="pagination">
+                     <li><a href="#" name="first"><span class="i fa fa-angle-double-left"></span></a></li>
+                     <li><a href="#" name="prev"><span class="i fa fa-angle-left"></span></a></li>
+                     <li><a href="#" name="next"><span class="i fa fa-angle-right"></span></a></li>
+                     <li><a href="#" name="last"><span class="i fa fa-angle-double-right"></span></a></li>
+                 </ul>
+             </span>
+             <span name="page-jump">
+                 Page <input name="page" type="text"> of <span name="totalPages">1</span>
+             </span>
          </th>
     </tr>
 </tfoot>
-- 
1.8.4.2

