Added TPS UI navigation.

A navigation bar has been added to the top of the UI. When a
navigation link is clicked, the target page will be loaded into
the content area in the same page.

Ticket #654

11 files changed, 122 insertions, 44 deletions

diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index dc41668c6..c16af03ba 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -107,6 +107,30 @@ var Collection = Backbone.Collection.extend({
     }
 });
 
+var Navigation = Backbone.View.extend({
+    initialize: function(options) {
+        var self = this;
+        Navigation.__super__.initialize.call(self, options);
+
+        self.content = options.content;
+        self.homeURL = options.homeURL;
+
+        $("li", self.$el).each(function(index) {
+            var li = $(this);
+            var link = $("a", li);
+            var url = link.attr("href");
+            link.click(function(e) {
+                if (url != "#") {
+                    self.content.load(url);
+                }
+                e.preventDefault();
+            });
+        });
+
+        if (self.homeURL) self.content.load(self.homeURL);
+    }
+});
+
 var Dialog = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
@@ -316,10 +340,10 @@ var BlankTableItem = Backbone.View.extend({
     }
 });
 
-var TableItemView = Backbone.View.extend({
+var TableItem = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
-        TableItemView.__super__.initialize.call(self, options);
+        TableItem.__super__.initialize.call(self, options);
         self.table = options.table;
     },
     render: function() {
@@ -366,11 +390,11 @@ var TableItemView = Backbone.View.extend({
     }
 });
 
-var TableView = Backbone.View.extend({
+var Table = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
 
-        TableView.__super__.initialize.call(self, options);
+        Table.__super__.initialize.call(self, options);
         self.addDialog = options.addDialog;
         self.editDialog = options.editDialog;
 
@@ -417,7 +441,7 @@ var TableView = Backbone.View.extend({
 
                 // display result page
                 _(self.collection.models).each(function(model) {
-                    var item = new TableItemView({
+                    var item = new TableItem({
                         el: self.template.clone(),
                         table: self,
                         model: model
diff --git a/base/tps-tomcat/shared/webapps/tps/activities.html b/base/tps-tomcat/shared/webapps/tps/activities.html
index b0a2469db..367b5e459 100644
--- a/base/tps-tomcat/shared/webapps/tps/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/activities.html
@@ -32,7 +32,7 @@ $(function() {
             "operation", "result", "date"]
     });
 
-    new TableView({
+    new Table({
         el: $("table[name='activities']"),
         collection: new ActivityCollection({ size: 3 }),
         editDialog: editDialog
@@ -53,7 +53,7 @@ $(function() {
          </th>
     </tr>
     <tr>
-        <th class="checkbox"><input id="activity_selectall" type="checkbox"><label for="activity_selectall">&nbsp;</label></th>
+        <th><input id="activity_selectall" type="checkbox"><label for="activity_selectall">&nbsp;</label></th>
         <th>Activity ID</th>
         <th>Token ID</th>
         <th>User ID</th>
@@ -65,7 +65,7 @@ $(function() {
 </thead>
 <tbody>
     <tr>
-        <td class="checkbox"><input id="activity_select" type="checkbox"><label for="activity_select">&nbsp;</label></td>
+        <td><input id="activity_select" type="checkbox"><label for="activity_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="tokenID">&nbsp;</td>
         <td name="userID">&nbsp;</td>
diff --git a/base/tps-tomcat/shared/webapps/tps/authenticators.html b/base/tps-tomcat/shared/webapps/tps/authenticators.html
index 68afa3278..fa588ebbb 100644
--- a/base/tps-tomcat/shared/webapps/tps/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/authenticators.html
@@ -31,7 +31,7 @@ $(function() {
         readonly: ["id", "status"]
     });
 
-    new TableView({
+    new Table({
         el: $("table[name='authenticators']"),
         collection: new AuthenticatorCollection({ size: 3 }),
         editDialog: editDialog
@@ -52,14 +52,14 @@ $(function() {
          </th>
     </tr>
     <tr>
-        <th class="checkbox"><input id="authenticator_selectall" type="checkbox"><label for="authenticator_selectall">&nbsp;</label></th>
+        <th><input id="authenticator_selectall" type="checkbox"><label for="authenticator_selectall">&nbsp;</label></th>
         <th>Authenticator ID</th>
         <th>Status</th>
     </tr>
 </thead>
 <tbody>
     <tr>
-        <td class="checkbox"><input id="authenticator_select" type="checkbox"><label for="authenticator_select">&nbsp;</label></td>
+        <td><input id="authenticator_select" type="checkbox"><label for="authenticator_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="status">&nbsp;</td>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/certs.html b/base/tps-tomcat/shared/webapps/tps/certs.html
index 43b405261..f5335b7a5 100644
--- a/base/tps-tomcat/shared/webapps/tps/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/certs.html
@@ -32,7 +32,7 @@ $(function() {
             "keyType", "status", "createTime", "modifyTime"]
     });
 
-    new TableView({
+    new Table({
         el: $("table[name='certificates']"),
         collection: new CertificateCollection({ size: 3 }),
         editDialog: editDialog
@@ -53,7 +53,7 @@ $(function() {
          </th>
     </tr>
     <tr>
-        <th class="checkbox"><input id="cert_selectall" type="checkbox"><label for="cert_selectall">&nbsp;</label></tdh>
+        <th><input id="cert_selectall" type="checkbox"><label for="cert_selectall">&nbsp;</label></tdh>
         <th>Certificate ID</th>
         <th>Serial Number</th>
         <th>Subject</th>
@@ -67,7 +67,7 @@ $(function() {
 </thead>
 <tbody>
     <tr>
-        <td class="checkbox"><input id="cert_select" type="checkbox"><label for="cert_select">&nbsp;</label></td>
+        <td><input id="cert_select" type="checkbox"><label for="cert_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="serialNumber">&nbsp;</td>
         <td name="subject">&nbsp;</td>
diff --git a/base/tps-tomcat/shared/webapps/tps/connections.html b/base/tps-tomcat/shared/webapps/tps/connections.html
index 85eaf57c2..33f43d7ff 100644
--- a/base/tps-tomcat/shared/webapps/tps/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/connections.html
@@ -31,7 +31,7 @@ $(function() {
         readonly: ["id", "status"]
     });
 
-    new TableView({
+    new Table({
         el: $("table[name='connections']"),
         collection: new ConnectionCollection({ size: 3 }),
         editDialog: editDialog
@@ -52,14 +52,14 @@ $(function() {
          </th>
     </tr>
     <tr>
-        <th class="checkbox"><input id="connection_selectall" type="checkbox"><label for="connection_selectall">&nbsp;</label></th>
+        <th><input id="connection_selectall" type="checkbox"><label for="connection_selectall">&nbsp;</label></th>
         <th>Connection ID</th>
         <th>Status</th>
     </tr>
 </thead>
 <tbody>
     <tr>
-        <td class="checkbox"><input id="connection_select" type="checkbox"><label for="connection_select">&nbsp;</label></td>
+        <td><input id="connection_select" type="checkbox"><label for="connection_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="status">&nbsp;</td>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/groups.html b/base/tps-tomcat/shared/webapps/tps/groups.html
index bab15295c..27bd77a90 100644
--- a/base/tps-tomcat/shared/webapps/tps/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/groups.html
@@ -38,7 +38,7 @@ $(function() {
         actions: ["cancel", "save"]
     });
 
-    new TableView({
+    new Table({
         el: $("table[name='groups']"),
         collection: new GroupCollection({ size: 3 }),
         addDialog: addDialog,
@@ -63,14 +63,14 @@ $(function() {
          </th>
     </tr>
     <tr>
-        <th class="checkbox"><input id="group_selectall" type="checkbox"><label for="group_selectall">&nbsp;</label></th>
+        <th><input id="group_selectall" type="checkbox"><label for="group_selectall">&nbsp;</label></th>
         <th>Group ID</th>
         <th>Description</th>
     </tr>
 </thead>
 <tbody>
     <tr>
-        <td class="checkbox"><input id="group_select" type="checkbox"><label for="group_select">&nbsp;</label></td>
+        <td><input id="group_select" type="checkbox"><label for="group_select">&nbsp;</label></td>
         <td name="groupID">&nbsp;</td>
         <td name="description">&nbsp;</td>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/index.html b/base/tps-tomcat/shared/webapps/tps/index.html
index ace02a9cf..b5c8c957a 100644
--- a/base/tps-tomcat/shared/webapps/tps/index.html
+++ b/base/tps-tomcat/shared/webapps/tps/index.html
@@ -17,23 +17,77 @@
      --- END COPYRIGHT BLOCK --- -->
 <html>
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="/pki/css/rcue.css" rel="stylesheet" media="screen, print">
     <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
+    <script src="/pki/js/jquery.js"></script>
+    <script src="/pki/js/underscore.js"></script>
+    <script src="/pki/js/backbone.js"></script>
+    <script src="/pki/js/bootstrap.js"></script>
+    <script src="/pki/js/pki-ui.js"></script>
+    <script>
+$(function() {
+    new Navigation({
+        el: $("#navigation"),
+        content: $("#content"),
+        homeURL: "tokens.html"
+    });
+});
+    </script>
 </head>
 <body>
 
-<h1>Token Processing Service</h1>
+<nav id="navigation" class="navbar navbar-default navbar-rcue" role="navigation">
+<div class="navbar-header">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+    </button>
+    <a class="navbar-brand" href="/tps">
+        <b>Token Processing Service</b>
+    </a>
+</div>
+<div class="collapse navbar-collapse navbar-collapse-1">
+    <ul class="nav navbar-nav navbar-utility">
+    <li><a href="#">Status</a></li>
+    <li class="dropdown">
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <span class="rcueicon rcueicon-user"></span>
+        Administrator<b class="caret"></b>
+        </a>
+        <ul class="dropdown-menu">
+        <li><a href="settings.html">Settings</a></li>
+        <li class="divider"></li>
+        <li><a href="logout.html">Logout</a></li>
+        </ul>
+    </li>
+    </ul>
+    <ul class="nav navbar-nav navbar-primary">
+    <li><a href="tokens.html">Tokens</a></li>
+    <li><a href="certs.html">Certificates</a></li>
+    <li><a href="activities.html">Activities</a></li>
+    <li><a href="profiles.html">Profiles</a></li>
+    <li><a href="selftests.html">SelfTests</a></li>
+    <li><a href="users.html">Users</a></li>
+    <li><a href="groups.html">Groups</a></li>
+    <li class="dropdown context">
+      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        Configuration
+        <b class="caret"></b>
+      </a>
+      <ul class="dropdown-menu">
+        <li><a href="authenticators.html">Authenticators</a></li>
+        <li><a href="connections.html">Connections</a></li>
+      </ul>
+    </li>
+    </ul>
+</div>
+</nav>
 
-<ul>
-<li><a href="tokens.html">Tokens</a></li>
-<li><a href="certs.html">Certificates</a></li>
-<li><a href="activities.html">Activities</a></li>
-<li><a href="profiles.html">Profiles</a></li>
-<li><a href="selftests.html">Self Tests</a></li>
-<li><a href="users.html">Users</a></li>
-<li><a href="groups.html">Groups</a></li>
-<li><a href="authenticators.html">Authenticators</a></li>
-<li><a href="connections.html">Connections</a></li>
-</ul>
+<div id="content">
+</div>
 
 </body>
 </html>
diff --git a/base/tps-tomcat/shared/webapps/tps/profiles.html b/base/tps-tomcat/shared/webapps/tps/profiles.html
index 875ec7934..151fdc1a4 100644
--- a/base/tps-tomcat/shared/webapps/tps/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/profiles.html
@@ -31,7 +31,7 @@ $(function() {
         readonly: ["id", "status"]
     });
 
-    new TableView({
+    new Table({
         el: $("table[name='profiles']"),
         collection: new ProfileCollection({ size: 3 }),
         editDialog: editDialog
@@ -52,14 +52,14 @@ $(function() {
          </th>
     </tr>
     <tr>
-        <th class="checkbox"><input id="profile_selectall" type="checkbox"><label for="profile_selectall">&nbsp;</label></th>
+        <th><input id="profile_selectall" type="checkbox"><label for="profile_selectall">&nbsp;</label></th>
         <th>Profile ID</th>
         <th>Status</th>
     </tr>
 </thead>
 <tbody>
     <tr>
-        <td class="checkbox"><input id="profile_select" type="checkbox"><label for="profile_select">&nbsp;</label></td>
+        <td><input id="profile_select" type="checkbox"><label for="profile_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="status">&nbsp;</td>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/selftests.html b/base/tps-tomcat/shared/webapps/tps/selftests.html
index 1f93655ef..8cac37a24 100644
--- a/base/tps-tomcat/shared/webapps/tps/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/selftests.html
@@ -31,7 +31,7 @@ $(function() {
         readonly: ["id", "enabledAtStartup", "criticalAtStartup", "enabledOnDemand", "criticalOnDemand"]
     });
 
-    new TableView({
+    new Table({
         el: $("table[name='selftests']"),
         collection: new SelfTestCollection({ size: 3 }),
         editDialog: editDialog
@@ -52,7 +52,7 @@ $(function() {
          </th>
     </tr>
     <tr>
-        <th class="checkbox"><input id="selftest_selectall" type="checkbox"><label for="selftest_selectall">&nbsp;</label></th>
+        <th><input id="selftest_selectall" type="checkbox"><label for="selftest_selectall">&nbsp;</label></th>
         <th>Self Test ID</th>
         <th>Enabled at Statup</th>
         <th>Critical at Startup</th>
@@ -62,7 +62,7 @@ $(function() {
 </thead>
 <tbody>
     <tr>
-        <td class="checkbox"><input id="selftest_select" type="checkbox"><label for="selftest_select">&nbsp;</label></td>
+        <td><input id="selftest_select" type="checkbox"><label for="selftest_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="enabledAtStartup">&nbsp;</td>
         <td name="criticalAtStartup">&nbsp;</td>
diff --git a/base/tps-tomcat/shared/webapps/tps/tokens.html b/base/tps-tomcat/shared/webapps/tps/tokens.html
index a04a66b71..e82c9a320 100644
--- a/base/tps-tomcat/shared/webapps/tps/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/tokens.html
@@ -41,7 +41,7 @@ $(function() {
         actions: ["cancel", "save"]
     });
 
-    new TableView({
+    new Table({
         el: $("table[name='tokens']"),
         collection: new TokenCollection({ size: 3 }),
         addDialog: addDialog,
@@ -66,7 +66,7 @@ $(function() {
          </th>
     </tr>
     <tr>
-        <th class="checkbox"><input id="token_selectall" type="checkbox"><label for="token_selectall">&nbsp;</label></th>
+        <th><input id="token_selectall" type="checkbox"><label for="token_selectall">&nbsp;</label></th>
         <th>Token ID</th>
         <th>User ID</th>
         <th>Status</th>
@@ -79,7 +79,7 @@ $(function() {
 </thead>
 <tbody>
     <tr>
-        <td class="checkbox"><input id="token_select" type="checkbox"><label for="token_select">&nbsp;</label></td>
+        <td><input id="token_select" type="checkbox"><label for="token_select">&nbsp;</label></td>
         <td name="tokenID">&nbsp;</td>
         <td name="userID">&nbsp;</td>
         <td name="status">&nbsp;</td>
diff --git a/base/tps-tomcat/shared/webapps/tps/users.html b/base/tps-tomcat/shared/webapps/tps/users.html
index eb86a3d6f..08656fbef 100644
--- a/base/tps-tomcat/shared/webapps/tps/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/users.html
@@ -39,7 +39,7 @@ $(function() {
         actions: ["cancel", "save"]
     });
 
-    new TableView({
+    new Table({
         el: $("table[name='users']"),
         collection: new UserCollection({ size: 3 }),
         addDialog: addDialog,
@@ -64,14 +64,14 @@ $(function() {
          </th>
     </tr>
     <tr>
-        <th class="checkbox"><input id="user_selectall" type="checkbox"><label for="user_selectall">&nbsp;</label></th>
+        <th><input id="user_selectall" type="checkbox"><label for="user_selectall">&nbsp;</label></th>
         <th>User ID</th>
         <th>Full Name</th>
     </tr>
 </thead>
 <tbody>
     <tr>
-        <td class="checkbox"><input id="user_select" type="checkbox"><label for="user_select">&nbsp;</label></td>
+        <td><input id="user_select" type="checkbox"><label for="user_select">&nbsp;</label></td>
         <td name="userID">&nbsp;</td>
         <td name="fullName">&nbsp;</td>
     </tr>