Added breadcrumb to TPS UI.

The TPS UI has been modified to use Backbone.Router to assign a
unique path for each page. This way the browser's Back button will
work properly and the page can be bookmarked.

A home page has been added for the UI. Currently it provide links
to all available pages. In the future it might be changed to
display more useful information.

A breadcrumb has been added to the top of each page to provide
links back to the home page.

Some new font files have been added from PatternFly library.

The EntryWithPropertiesPage has been renamed to ConfigEntryPage.
The Navigation class is no longer used so it has been removed.

Ticket #959

4 files changed, 58 insertions, 66 deletions

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index 36210154b..73d287704 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -29,6 +29,11 @@
   margin-bottom: 10px;
 }
 
+.pki-header .breadcrumb {
+  padding: 0;
+  margin-bottom: 5px;
+}
+
 .pki-title {
   font-family: "Open Sans",sans-serif;
   font-size: 25px;
diff --git a/base/server/share/webapps/pki/font/OpenSans-Light-webfont.woff b/base/server/share/webapps/pki/font/OpenSans-Light-webfont.woff
new file mode 100755
index 000000000..99514d1a8
--- /dev/null
+++ b/base/server/share/webapps/pki/font/OpenSans-Light-webfont.woff
diff --git a/base/server/share/webapps/pki/font/glyphicons-halflings-regular.woff b/base/server/share/webapps/pki/font/glyphicons-halflings-regular.woff
new file mode 100755
index 000000000..8c54182aa
--- /dev/null
+++ b/base/server/share/webapps/pki/font/glyphicons-halflings-regular.woff
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 0800887cb..df6812bf6 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -19,6 +19,36 @@
  * @author Endi S. Dewata
  */
 
+var PKI = {
+    substitute: function(content, map) {
+
+        var newContent = "";
+
+        // substitute ${attribute} with attribute value
+        var pattern = /\${([^}]*)}/;
+
+        while (content.length) {
+            // search for ${attribute} pattern
+            var index = content.search(pattern);
+            if (index < 0) {
+                newContent += content;
+                break;
+            }
+
+            var name = RegExp.$1;
+            var value = map[name];
+
+            // replace pattern occurrence with attribute value
+            newContent += content.substring(0, index) + (value === undefined ? "" : value);
+
+            // process the remaining content
+            content = content.substring(index + name.length + 3);
+        }
+
+        return newContent;
+    }
+};
+
 var Model = Backbone.Model.extend({
     parseResponse: function(response) {
         return response;
@@ -143,57 +173,6 @@ var Page = Backbone.View.extend({
     }
 });
 
-var Navigation = Backbone.View.extend({
-    initialize: function(options) {
-        var self = this;
-        Navigation.__super__.initialize.call(self, options);
-        self.pages = options.pages || {};
-        self.homePage = options.homePage;
-
-        $("li", self.$el).each(function(index) {
-            var li = $(this);
-            var link = $("a", li);
-            var url = link.attr("href");
-            link.click(function(e) {
-                if (url == "#logout") {
-                    if (options.logout) {
-                        options.logout.call(self);
-                    }
-
-                } else if (url.charAt(0) == "#" && url.length > 1) {
-                    // get page name
-                    var name = url.substring(1);
-                    self.load(name);
-                }
-                e.preventDefault();
-            });
-        });
-    },
-    page: function(name, page) {
-        var self = this;
-        self.pages[name] = page;
-    },
-    load: function(name) {
-        var self = this;
-
-        var page = self.pages[name];
-        if (!page) {
-            new ErrorDialog({
-                el: $("#error-dialog"),
-                title: "Error",
-                content: "Invalid page: " + name
-            }).open();
-            return;
-        }
-
-        page.open();
-    },
-    render: function() {
-        var self = this;
-        if (self.homePage) self.load(self.homePage);
-    }
-});
-
 var Dialog = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
@@ -470,17 +449,6 @@ var TableItem = Backbone.View.extend({
         }
 
         td.html(newContent);
-
-        // add link handler
-        $("a", td).click(function(e) {
-            e.preventDefault();
-            self.open(td);
-        });
-    },
-    open: function(td) {
-        var self = this;
-        var column = td.attr("name");
-        self.table.open(self, column);
     }
 });
 
@@ -927,7 +895,10 @@ var EntryPage = Page.extend({
         EntryPage.__super__.initialize.call(self, options);
         self.model = options.model;
         self.mode = options.mode || "view";
+        self.title = options.title;
         self.editable = options.editable || [];
+        self.parentPage = options.parentPage;
+        self.parentHash = options.parentHash;
     },
     load: function() {
         var self = this;
@@ -986,12 +957,19 @@ var EntryPage = Page.extend({
             // Use blank entry.
             self.entry = {};
 
+            // Replace title.
+            self.$("span[name='title']").text(self.title);
+
         } else {
             // Use fetched entry.
             self.entry = _.clone(self.model.attributes);
 
-            // Show entry ID in the title.
-            self.$("span[name='id']").text(self.entry.id);
+            // Update title with entry attributes.
+            self.$("span[name='title']").each(function() {
+                var title = $(this);
+                var text = title.text();
+                title.text(PKI.substitute(text, self.entry));
+            });
 
         }
 
@@ -1036,8 +1014,17 @@ var EntryPage = Page.extend({
     },
     close: function() {
         var self = this;
-        self.mode = "view";
-        self.render();
+
+        if (self.parentHash) {
+            window.location.hash = self.parentHash;
+
+        } else if (self.parentPage) {
+            self.parentPage.open();
+
+        } else {
+            self.mode = "view";
+            self.render();
+        }
     },
     cancel: function() {
         var self = this;