Added TPS token filter dialog.

The TPS UI Tokens page and the pki tps-token-find CLI have been
modified to provide an interface to filter tokens based on their
attributes.

The TokenService.findTokens() has been modified to accept
additional search criteria based on token attributes.

https://fedorahosted.org/pki/ticket/1482

2 files changed, 100 insertions, 1 deletions

diff --git a/base/tps/shared/webapps/tps/js/token.js b/base/tps/shared/webapps/tps/js/token.js
index fb1c3ea46..e09fa5fc6 100644
--- a/base/tps/shared/webapps/tps/js/token.js
+++ b/base/tps/shared/webapps/tps/js/token.js
@@ -19,6 +19,17 @@
  * @author Endi S. Dewata
  */
 
+// TODO: load labels from server
+var TokenStatus = {
+    UNINITIALIZED       : "Uninitialized",
+    ACTIVE              : "Active",
+    TEMP_LOST           : "Temporarily lost",
+    PERM_LOST           : "Permanently lost",
+    DAMAGED             : "Physically damaged",
+    TEMP_LOST_PERM_LOST : "Temporarily lost then permanently lost",
+    TERMINATED          : "Terminated"
+};
+
 var TokenModel = Model.extend({
     urlRoot: "/tps/rest/tokens",
     parseResponse: function(response) {
@@ -119,6 +130,34 @@ var TokenDialog = Dialog.extend({
     }
 });
 
+var TokenFilterDialog = Dialog.extend({
+    loadField: function(input) {
+        var self = this;
+
+        var name = input.attr("name");
+        if (name != "status") {
+            TokenFilterDialog.__super__.loadField.call(self, input);
+            return;
+        }
+
+        var select = input.empty();
+        var status = self.entry.status;
+
+        $('<option/>', {
+            text: "",
+            value: ""
+        }).appendTo(select);
+
+        _.each(TokenStatus, function(value, key) {
+            $('<option/>', {
+                value: key,
+                text: value,
+                selected: key == status
+            }).appendTo(select);
+        });
+    }
+});
+
 var TokenPage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
@@ -314,11 +353,40 @@ var TokensPage = Page.extend({
     load: function() {
         var self = this;
 
+        self.tokensTable = self.$("table[name='tokens']");
+
         var table = new TokensTable({
-            el: $("table[name='tokens']"),
+            el: self.tokensTable,
             collection: new TokenCollection()
         });
 
         table.render();
+
+        $("a[name='filter']", self.tokensTable).click(function(e) {
+
+            e.preventDefault();
+
+            var dialog = new TokenFilterDialog({
+                el: $("#token-filter-dialog"),
+                actions: ["cancel", "apply"]
+            });
+
+            dialog.entry = _.clone(table.searchAttributes);
+
+            dialog.handler("apply", function() {
+
+                dialog.save();
+
+                table.searchAttributes = _.clone(dialog.entry);
+
+                // show the first page of search results
+                table.page = 1;
+                table.render();
+
+                dialog.close();
+            });
+
+            dialog.open();
+        });
     }
 });
diff --git a/base/tps/shared/webapps/tps/ui/tokens.html b/base/tps/shared/webapps/tps/ui/tokens.html
index b0782d373..b085c0b06 100644
--- a/base/tps/shared/webapps/tps/ui/tokens.html
+++ b/base/tps/shared/webapps/tps/ui/tokens.html
@@ -30,6 +30,7 @@
          <th class="pki-table-actions" colspan="10">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
+                 <a name="filter" href="#tokens-search">Advanced Search</a>
              </span>
              <span class="pki-table-buttons">
                  <button name="add">Add</button>
@@ -127,3 +128,33 @@
         </div>
     </div>
 </div>
+
+<div id="token-filter-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Token Filter</h4>
+            </div>
+            <div class="modal-body">
+                <fieldset>
+                    <label>Token ID</label>
+                    <input name="tokenID"><br>
+                    <label>User ID</label>
+                    <input name="userID"><br>
+                    <label>Type</label>
+                    <input name="type"><br>
+                    <label>Status</label>
+                    <select name="status">
+                    </select><br>
+                </fieldset>
+            </div>
+            <div class="modal-footer">
+                <button name="apply" class="btn btn-primary">Apply</button>
+                <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>