Added save functionality for some TPS resources.

A new DetailsPage has been added to view and edit TPS resources
including profiles, connections, and authenticators. Initially, in
view mode the page is read-only. User can view properties but they
are non-editable. To enter the edit mode the user needs to click
the Edit link. In this mode the properties become editable. To save
the all changes the user must click the Save button, and it will go
back to view mode. The page also provides links to enable or disable
the resource. The add functionality will be added separately later.

New HTML templates and the CSS code have been modified to better
control the formatting. Some unused code has been removed as well.

Ticket #654

17 files changed, 410 insertions, 394 deletions

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index f562667a2..3743c0c87 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -25,6 +25,35 @@
 @import url("pki-tables.css");
 @import url("pki-dialogs.css");
 
+.pki-header {
+  margin-bottom: 10px;
+}
+
+.pki-title {
+  font-family: "Open Sans",sans-serif;
+  font-size: 30px;
+  margin: 0;
+  color: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  display: inline-block;
+}
+
+.pki-actions {
+  float: right;
+  display: inline-block;
+}
+
+.pki-fields {
+  margin-bottom: 5px;
+}
+
+.pki-fields fieldset label {
+  min-width: 100px;
+  display: inline-block;
+  line-height: 30px;
+}
+
 .rcue-dialog-background {
   display: none;
 }
@@ -105,11 +134,6 @@ table tfoot tr th {
   margin: 4px;
 }
 
-.pki-fields fieldset label {
-  min-width: 100px;
-  display: inline-block;
-}
-
 .pki-table-actions {
   padding: 1px;
   border-top: none;
@@ -127,7 +151,7 @@ table tfoot tr th {
   min-width: 50px;
 }
 
-.pki-table-actions span[name="actions"] {
+.pki-table-buttons {
   float: right;
 }
 
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 26118b731..dffa7d8e1 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -202,10 +202,13 @@ var Dialog = Backbone.View.extend({
 
         self.handlers = {};
 
-        // add default cancel handler
+        // add default handlers
         self.handlers["cancel"] = function() {
             self.close();
         };
+        self.handlers["close"] = function() {
+            self.close();
+        };
     },
     render: function() {
         var self = this;
@@ -360,16 +363,7 @@ var TableItem = Backbone.View.extend({
                 label.show();
 
             } else if (name == "id") {
-                // setup link to edit dialog
-                td.empty();
-                $("<a/>", {
-                    href: "#",
-                    text: self.id(),
-                    click: function(e) {
-                        self.table.open(self);
-                        e.preventDefault();
-                    }
-                }).appendTo(td);
+                self.renderIDColumn(td);
 
             } else {
                 self.renderColumn(td);
@@ -380,17 +374,26 @@ var TableItem = Backbone.View.extend({
         var self = this;
         return self.model.id;
     },
+    renderIDColumn: function(td) {
+        var self = this;
+
+        // show content as link to open item
+        td.empty();
+        $("<a/>", {
+            href: "#",
+            text: self.id(),
+            click: function(e) {
+                self.table.open(self);
+                e.preventDefault();
+            }
+        }).appendTo(td);
+    },
     renderColumn: function(td) {
         var self = this;
-        var name = td.attr("name");
 
-        // show cell content in plain text
+        // show content in plain text
+        var name = td.attr("name");
         td.text(self.model.get(name));
-
-        // update cell automatically on model change
-        self.model.on("change:" + name, function(event) {
-            td.text(self.model.get(name));
-        });
     }
 });
 
@@ -401,6 +404,7 @@ var Table = Backbone.View.extend({
         Table.__super__.initialize.call(self, options);
         self.addDialog = options.addDialog;
         self.editDialog = options.editDialog;
+        self.viewDialog = options.viewDialog;
         self.tableItem = options.tableItem || TableItem;
 
         // number of table rows
@@ -411,6 +415,7 @@ var Table = Backbone.View.extend({
         self.totalPages = 1;
 
         self.thead = $("thead", self.$el);
+        self.buttons = $(".pki-table-buttons", self.thead);
 
         // setup search field handler
         self.searchField = $("input[name='search']", self.thead);
@@ -423,12 +428,12 @@ var Table = Backbone.View.extend({
         });
 
         // setup add button handler
-        $("button[name='add']", self.thead).click(function(e) {
+        $("button[name='add']", self.buttons).click(function(e) {
             self.add();
         });
 
         // setup remove button handler
-        $("button[name='remove']", self.thead).click(function(e) {
+        $("button[name='remove']", self.buttons).click(function(e) {
             var items = [];
             var message = "Are you sure you want to remove the following entries?\n";
 
@@ -510,6 +515,21 @@ var Table = Backbone.View.extend({
             e.preventDefault();
         });
     },
+    readOnly: function(value) {
+        var self = this;
+        if (value === undefined) {
+            var display = self.buttons.css("display");
+            value = display == "none";
+
+        } else if (value) {
+            self.buttons.hide();
+
+        } else {
+            self.buttons.show();
+        }
+
+        return value;
+    },
     render: function() {
         var self = this;
 
@@ -738,19 +758,26 @@ var PropertiesTable = Table.extend({
     open: function(item) {
         var self = this;
 
-        var dialog = self.editDialog;
-        dialog.attributes = _.clone(item.property);
+        var dialog;
+        if (self.readOnly()) {
+            dialog = self.viewDialog;
 
-        dialog.handler("save", function() {
+        } else {
+            dialog = self.editDialog;
 
-            // save property changes
-            dialog.save();
-            _.extend(item.property, dialog.attributes);
+            dialog.handler("save", function() {
 
-            // redraw table after saving property changes
-            self.render();
-            dialog.close();
-        });
+                // save property changes
+                dialog.save();
+                _.extend(item.property, dialog.attributes);
+
+                // redraw table after saving property changes
+                self.render();
+                dialog.close();
+            });
+		}
+
+        dialog.attributes = _.clone(item.property);
 
         dialog.open();
     },
@@ -790,3 +817,197 @@ var PropertiesTable = Table.extend({
         self.render();
     }
 });
+
+var DetailsPage = Page.extend({
+    initialize: function(options) {
+        var self = this;
+        DetailsPage.__super__.initialize.call(self, options);
+        self.model = options.model;
+        self.mode = "view";
+    },
+    load: function() {
+        var self = this;
+
+        self.menu = self.$(".pki-menu");
+        self.editLink = $("a[name='edit']", self.menu);
+        self.enableLink = $("a[name='enable']", self.menu);
+        self.disableLink = $("a[name='disable']", self.menu);
+
+        self.buttons = self.$(".pki-buttons");
+        self.cancelButton = $("button[name='cancel']", self.buttons);
+        self.saveButton = $("button[name='save']", self.buttons);
+
+        self.idField = self.$("input[name='id']");
+        self.statusField = self.$("input[name='status']");
+
+        var table = self.$("table[name='properties']");
+        self.propertiesButtons = $(".pki-table-buttons", table);
+        self.addButton = $("button[name='add']", self.propertiesButtons);
+        self.removeButton = $("button[name='remove']", self.propertiesButtons);
+
+        self.editLink.click(function(e) {
+            self.mode = "edit";
+            self.render();
+            e.preventDefault();
+        });
+
+        self.enableLink.click(function(e) {
+            var message = "Are you sure you want to enable this entry?";
+            if (!confirm(message)) return;
+            self.model.enable({
+                success: function(data,textStatus, jqXHR) {
+                    self.attributes = _.clone(self.model.attributes);
+                    self.render();
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    alert("ERROR: " + textStatus);
+                }
+            });
+        });
+
+        self.disableLink.click(function(e) {
+            var message = "Are you sure you want to disable this entry?";
+            if (!confirm(message)) return;
+            self.model.disable({
+                success: function(data,textStatus, jqXHR) {
+                    self.attributes = _.clone(self.model.attributes);
+                    self.render();
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    alert("ERROR: " + textStatus);
+                }
+            });
+        });
+
+        self.cancelButton.click(function(e) {
+            self.mode = "view";
+            self.render();
+            e.preventDefault();
+        });
+
+        self.saveButton.click(function(e) {
+            self.save();
+            e.preventDefault();
+        });
+
+        var dialog = self.$("#property-dialog");
+
+        var addDialog = new Dialog({
+            el: dialog,
+            title: "Add Property",
+            actions: ["cancel", "add"]
+        });
+
+        var editDialog = new Dialog({
+            el: dialog,
+            title: "Edit Property",
+            readonly: ["name"],
+            actions: ["cancel", "save"]
+        });
+
+        var viewDialog = new Dialog({
+            el: dialog,
+            title: "Property",
+            readonly: ["name", "value"],
+            actions: ["close"]
+        });
+
+        self.propertiesTable = new PropertiesTable({
+            el: table,
+            addDialog: addDialog,
+            editDialog: editDialog,
+            viewDialog: viewDialog,
+            pageSize: 10
+        });
+
+        self.render();
+    },
+    render: function() {
+        var self = this;
+
+        self.model.fetch({
+            success: function(model, response, options) {
+
+                self.attributes = _.clone(self.model.attributes);
+                self.propertiesTable.properties = self.attributes.properties;
+
+                self.$("span[name='id']").text(self.model.id);
+
+                var status = self.model.get("status");
+                if (status == "Disabled") {
+                    self.enableLink.show();
+                    self.disableLink.hide();
+                } else if (status == "Enabled") {
+                    self.enableLink.hide();
+                    self.disableLink.show();
+                }
+
+                if (self.mode == "view") {
+                    self.menu.show();
+                    self.buttons.hide();
+                    self.propertiesButtons.hide();
+
+                } else {
+                    self.menu.hide();
+                    self.buttons.show();
+                    self.propertiesButtons.show();
+                }
+
+                self.$(".pki-fields input").each(function(index) {
+                    var input = $(this);
+                    self.renderField(input);
+                });
+
+                self.propertiesTable.render();
+            }
+        });
+    },
+    renderField: function(input) {
+        var self = this;
+        var name = input.attr("name");
+        var value = self.attributes[name];
+        if (!value) value = "";
+        input.val(value);
+    },
+    save: function() {
+        var self = this;
+
+        self.$(".pki-fields input").each(function(index) {
+            var input = $(this);
+            self.saveField(input);
+        });
+
+        var attributes = {};
+        _.each(self.attributes, function(value, name) {
+            if (value == "") return;
+            attributes[name] = value;
+        });
+
+        attributes.properties = self.propertiesTable.properties;
+
+        // save changed attributes with PATCH
+        self.model.save(attributes, {
+            patch: true,
+            wait: true,
+            success: function(model, response, options) {
+                // redraw table after saving entries
+                self.mode = "view";
+                self.render();
+            },
+            error: function(model, response, options) {
+                if (response.status == 200) {
+                    // redraw table after saving entries
+                    self.mode = "view";
+                    self.render();
+                    return;
+                }
+                alert("ERROR: " + response.responseText);
+            }
+        });
+    },
+    saveField: function(input) {
+        var self = this;
+        var name = input.attr("name");
+        self.attributes[name] = input.val();
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index 059aa9eb6..9c632e160 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -82,110 +82,31 @@ var AuthenticatorCollection = Collection.extend({
     }
 });
 
-var AuthenticatorDialog = Dialog.extend({
-    render: function() {
-        var self = this;
-        var status = self.model.get("status");
-        if (status == "Enabled") {
-            self.actions = ["disable", "cancel"];
-        } else if (status == "Disabled") {
-            self.actions = ["enable", "cancel"];
-        } else {
-            alert("ERROR: Invalid status: " + status);
-        }
-        AuthenticatorDialog.__super__.render.call(self);
-    },
-    performAction: function(action) {
-        var self = this;
-
-        if (action == "enable") {
-            self.model.enable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else if (action == "disable") {
-            self.model.disable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else {
-            AuthenticatorDialog.__super__.performAction.call(self, action);
-        }
-    }
-});
-
 var AuthenticatorsTable = Table.extend({
     initialize: function(options) {
         var self = this;
         AuthenticatorsTable.__super__.initialize.call(self, options);
-        self.url = options.url;
         self.container = options.container;
     },
     open: function(item) {
         var self = this;
 
-        // load entry properties
-        item.model.fetch({
-            success: function(model, response, options) {
-                self.container.load(self.url, function(response, status, xhr) {
-                    $("h1 span[name='id']", self.container).text(model.id);
-
-                    var fields = $("div[name='authenticator']", self.container);
-                    $("input[name='id']", fields).val(model.id);
-                    $("input[name='status']", fields).val(model.get("status"));
-
-                    var dialog = $("#property-dialog");
-
-                    var addDialog = new Dialog({
-                        el: dialog,
-                        title: "Add Property",
-                        actions: ["cancel", "add"]
-                    });
-
-                    var editDialog = new Dialog({
-                        el: dialog,
-                        title: "Edit Property",
-                        readonly: ["name"],
-                        actions: ["cancel", "save"]
-                    });
+        var page = new DetailsPage({
+            el: self.container,
+            model: item.model
+        });
 
-                    var properties = new PropertiesTable({
-                        el: $("table[name='authenticator-properties']"),
-                        properties: model.get("properties"),
-                        addDialog: addDialog,
-                        editDialog: editDialog,
-                        pageSize: 10
-                    });
-                    properties.render();
-                });
-            }
+        self.container.load("authenticator.html", function(response, status, xhr) {
+            page.load();
         });
     }
 });
 
 var AuthenticatorsPage = Page.extend({
     load: function(container) {
-        var editDialog = new AuthenticatorDialog({
-            el: $("#authenticator-dialog"),
-            title: "Edit Authenticator",
-            readonly: ["id", "status"]
-        });
-
         var table = new AuthenticatorsTable({
-            url: "authenticator.html",
             el: $("table[name='authenticators']"),
             collection: new AuthenticatorCollection(),
-            editDialog: editDialog,
             container: container
         });
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index 7c3743d45..36b17bc27 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -82,110 +82,31 @@ var ConnectionCollection = Collection.extend({
     }
 });
 
-var ConnectionDialog = Dialog.extend({
-    render: function() {
-        var self = this;
-        var status = self.model.get("status");
-        if (status == "Enabled") {
-            self.actions = ["disable", "cancel"];
-        } else if (status == "Disabled") {
-            self.actions = ["enable", "cancel"];
-        } else {
-            alert("ERROR: Invalid status: " + status);
-        }
-        ConnectionDialog.__super__.render.call(self);
-    },
-    performAction: function(action) {
-        var self = this;
-
-        if (action == "enable") {
-            self.model.enable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else if (action == "disable") {
-            self.model.disable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else {
-            ConnectionDialog.__super__.performAction.call(self, action);
-        }
-    }
-});
-
 var ConnectionsTable = Table.extend({
     initialize: function(options) {
         var self = this;
         ConnectionsTable.__super__.initialize.call(self, options);
-        self.url = options.url;
         self.container = options.container;
     },
     open: function(item) {
         var self = this;
 
-        // load entry properties
-        item.model.fetch({
-            success: function(model, response, options) {
-                self.container.load(self.url, function(response, status, xhr) {
-                    $("h1 span[name='id']", self.container).text(model.id);
-
-                    var fields = $("div[name='connection']", self.container);
-                    $("input[name='id']", fields).val(model.id);
-                    $("input[name='status']", fields).val(model.get("status"));
-
-                    var dialog = $("#property-dialog");
-
-                    var addDialog = new Dialog({
-                        el: dialog,
-                        title: "Add Property",
-                        actions: ["cancel", "add"]
-                    });
-
-                    var editDialog = new Dialog({
-                        el: dialog,
-                        title: "Edit Property",
-                        readonly: ["name"],
-                        actions: ["cancel", "save"]
-                    });
+        var page = new DetailsPage({
+            el: self.container,
+            model: item.model
+        });
 
-                    var properties = new PropertiesTable({
-                        el: $("table[name='connection-properties']"),
-                        properties: model.get("properties"),
-                        addDialog: addDialog,
-                        editDialog: editDialog,
-                        pageSize: 10
-                    });
-                    properties.render();
-                });
-            }
+        self.container.load("connection.html", function(response, status, xhr) {
+            page.load();
         });
     }
 });
 
 var ConnectionsPage = Page.extend({
     load: function(container) {
-        var editDialog = new ConnectionDialog({
-            el: $("#connection-dialog"),
-            title: "Edit Connection",
-            readonly: ["id", "status"]
-        });
-
         var table = new ConnectionsTable({
-            url: "connection.html",
             el: $("table[name='connections']"),
             collection: new ConnectionCollection(),
-            editDialog: editDialog,
             container: container
         });
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index 410328ca8..caaa08ec6 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -82,117 +82,31 @@ var ProfileCollection = Collection.extend({
     }
 });
 
-var ProfileDialog = Dialog.extend({
-    render: function() {
-        var self = this;
-        var status = self.model.get("status");
-        if (status == "Enabled") {
-            self.actions = ["disable", "cancel"];
-        } else if (status == "Disabled") {
-            self.actions = ["enable", "cancel"];
-        } else {
-            alert("ERROR: Invalid status: " + status);
-        }
-        ProfileDialog.__super__.render.call(self);
-    },
-    performAction: function(action) {
-        var self = this;
-
-        if (action == "enable") {
-            self.model.enable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else if (action == "disable") {
-            self.model.disable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else {
-            ProfileDialog.__super__.performAction.call(self, action);
-        }
-    }
-});
-
 var ProfilesTable = Table.extend({
     initialize: function(options) {
         var self = this;
         ProfilesTable.__super__.initialize.call(self, options);
-        self.url = options.url;
         self.container = options.container;
     },
     open: function(item) {
         var self = this;
 
-        // load entry properties
-        item.model.fetch({
-            success: function(model, response, options) {
-                self.container.load(self.url, function(response, status, xhr) {
-                    $("h1 span[name='id']", self.container).text(model.id);
-
-                    var fields = $("div[name='profile']", self.container);
-                    $("input[name='id']", fields).val(model.id);
-                    $("input[name='status']", fields).val(model.get("status"));
-
-                    var dialog = $("#property-dialog");
-
-                    var addDialog = new Dialog({
-                        el: dialog,
-                        title: "Add Property",
-                        actions: ["cancel", "add"]
-                    });
-
-                    var editDialog = new Dialog({
-                        el: dialog,
-                        title: "Edit Property",
-                        readonly: ["name"],
-                        actions: ["cancel", "save"]
-                    });
+        var page = new DetailsPage({
+            el: self.container,
+            model: item.model
+        });
 
-                    var properties = new PropertiesTable({
-                        el: $("table[name='profile-properties']"),
-                        properties: model.get("properties"),
-                        addDialog: addDialog,
-                        editDialog: editDialog,
-                        pageSize: 10
-                    });
-                    properties.render();
-                });
-            }
+        self.container.load("profile.html", function(response, status, xhr) {
+            page.load();
         });
     }
 });
 
 var ProfilesPage = Page.extend({
-    initialize: function(options) {
-        var self = this;
-        ProfilesPage.__super__.initialize.call(self, options);
-        self.container = options.container;
-    },
     load: function(container) {
-        var self = this;
-
-        var editDialog = new ProfileDialog({
-            el: $("#profile-dialog"),
-            title: "Edit Profile",
-            readonly: ["id", "status"]
-        });
-
         var table = new ProfilesTable({
-            url: "profile.html",
             el: $("table[name='profiles']"),
             collection: new ProfileCollection(),
-            editDialog: editDialog,
             container: container
         });
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/activities.html b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
index 3453f81e1..244755f02 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Activities</h1>
+<div class="pki-header">
+<span class="pki-title">Activities</span>
+</div>
 
 <table name="activities">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
              </span>
          </th>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
index 202e8a476..b1cb3792d 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
@@ -15,29 +15,47 @@
      Copyright (C) 2014 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Authenticator <span name="id"></span></h1>
+<div class="pki-header">
+
+<span class="pki-title">Authenticator <span name="id"></span></span>
+
+<span class="pki-actions">
+
+<span class="pki-menu" style="display: none;">
+<a name="edit" href="#">Edit Authenticator</a><br>
+<a name="enable" href="#">Enable Authenticator</a><a name="disable" href="#" style="display: none;">Disable Authenticator</a><br>
+</span>
+
+<span class="pki-buttons" style="display: none;">
+<button name="cancel">Cancel</button>
+<button name="save" class="primary">Save</button>
+</span>
+
+</span>
+
+</div>
 
 <div name="authenticator" class="pki-fields">
 <fieldset>
     <label>Authenticator ID</label>
-    <input name="id" readonly>
+    <input name="authenticatorID" readonly="readonly">
     <br>
     <label>Status</label>
-    <input name="status" readonly>
+    <input name="status" readonly="readonly">
     <br>
 </fieldset>
 </div>
 
 <h2>Properties</h2>
 
-<table name="authenticator-properties">
+<table name="properties">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons" style="display: none;">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -52,7 +70,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="authenticator_select" type="checkbox"><label for="authenticator_select">&nbsp;</label></td>
-        <td name="id" class="pki-property-name-column"><a href="authenticator.html">&nbsp;</a></td>
+        <td name="id" class="pki-property-name-column"><a href="#">&nbsp;</a></td>
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
@@ -91,6 +109,7 @@
         <footer>
             <button name="add" class="primary">Add</button>
             <button name="save" class="primary">Save</button>
+            <button name="close" class="primary">Close</button>
             <button name="cancel">Cancel</button>
         </footer>
     </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
index 29eb8261e..318aa4a10 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Authenticators</h1>
+<div class="pki-header">
+<span class="pki-title">Authenticators</span>
+</div>
 
 <table name="authenticators">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -64,23 +66,3 @@
     </tr>
 </tfoot>
 </table>
-
-<div id="authenticator-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Authenticator</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Authenticator ID</label><input name="id" type="text"><br>
-            <label>Status</label><input name="status" type="text"><br>
-        </fieldset>
-        <footer>
-            <button name="approve">Approve</button>
-            <button name="reject">Reject</button>
-            <button name="enable" class="primary">Enable</button>
-            <button name="disable" class="primary">Disable</button>
-            <button name="cancel">Cancel</button>
-        </footer>
-    </div>
-</div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/certs.html b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
index 473742d22..e694ac3fc 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Certificates</h1>
+<div class="pki-header">
+<span class="pki-title">Certificates</span>
+</div>
 
 <table name="certificates">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
              </span>
          </th>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connection.html b/base/tps-tomcat/shared/webapps/tps/ui/connection.html
index 2cafd0d99..61cd4b9ed 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connection.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connection.html
@@ -15,29 +15,47 @@
      Copyright (C) 2014 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Connection <span name="id"></span></h1>
+<div class="pki-header">
+
+<span class="pki-title">Connection <span name="id"></span></span>
+
+<span class="pki-actions">
+
+<span class="pki-menu" style="display: none;">
+<a name="edit" href="#">Edit Connection</a><br>
+<a name="enable" href="#">Enable Connection</a><a name="disable" href="#" style="display: none;">Disable Connection</a><br>
+</span>
+
+<span class="pki-buttons" style="display: none;">
+<button name="cancel">Cancel</button>
+<button name="save" class="primary">Save</button>
+</span>
+
+</span>
+
+</div>
 
 <div name="connection" class="pki-fields">
 <fieldset>
     <label>Connection ID</label>
-    <input name="id" readonly>
+    <input name="id" readonly="readonly">
     <br>
     <label>Status</label>
-    <input name="status" readonly>
+    <input name="status" readonly="readonly">
     <br>
 </fieldset>
 </div>
 
 <h2>Properties</h2>
 
-<table name="connection-properties">
+<table name="properties">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons" style="display: none;">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -52,7 +70,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="connection_select" type="checkbox"><label for="connection_select">&nbsp;</label></td>
-        <td name="id" class="pki-property-name-column"><a href="connection.html">&nbsp;</a></td>
+        <td name="id" class="pki-property-name-column"><a href="#">&nbsp;</a></td>
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
@@ -91,6 +109,7 @@
         <footer>
             <button name="add" class="primary">Add</button>
             <button name="save" class="primary">Save</button>
+            <button name="close" class="primary">Close</button>
             <button name="cancel">Cancel</button>
         </footer>
     </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connections.html b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
index 404a7234f..636cc4244 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Connections</h1>
+<div class="pki-header">
+<span class="pki-title">Connections</span>
+</div>
 
 <table name="connections">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -64,23 +66,3 @@
     </tr>
 </tfoot>
 </table>
-
-<div id="connection-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Connection</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Connection ID</label><input name="id" type="text"><br>
-            <label>Status</label><input name="status" type="text"><br>
-        </fieldset>
-        <footer>
-            <button name="approve">Approve</button>
-            <button name="reject">Reject</button>
-            <button name="enable" class="primary">Enable</button>
-            <button name="disable" class="primary">Disable</button>
-            <button name="cancel">Cancel</button>
-        </footer>
-    </div>
-</div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/groups.html b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
index 1c001a029..bb481a8d5 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Groups</h1>
+<div class="pki-header">
+<span class="pki-title">Groups</span>
+</div>
 
 <table name="groups">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile.html b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
index a5180eecb..337c9f102 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
@@ -15,29 +15,47 @@
      Copyright (C) 2014 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Profile <span name="id"></span></h1>
+<div class="pki-header">
+
+<span class="pki-title">Profile <span name="id"></span></span>
+
+<span class="pki-actions">
+
+<span class="pki-menu" style="display: none;">
+<a name="edit" href="#">Edit Profile</a><br>
+<a name="enable" href="#">Enable Profile</a><a name="disable" href="#" style="display: none;">Disable Profile</a><br>
+</span>
+
+<span class="pki-buttons" style="display: none;">
+<button name="cancel">Cancel</button>
+<button name="save" class="primary">Save</button>
+</span>
+
+</span>
+
+</div>
 
 <div name="profile" class="pki-fields">
 <fieldset>
     <label>Profile ID</label>
-    <input name="id" readonly>
+    <input name="profileID" readonly="readonly">
     <br>
     <label>Status</label>
-    <input name="status" readonly>
+    <input name="status" readonly="readonly">
     <br>
 </fieldset>
 </div>
 
 <h2>Properties</h2>
 
-<table name="profile-properties">
+<table name="properties">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons" style="display: none;">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -52,7 +70,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="profile_select" type="checkbox"><label for="profile_select">&nbsp;</label></td>
-        <td name="id" class="pki-property-name-column"><a href="profile.html">&nbsp;</a></td>
+        <td name="id" class="pki-property-name-column"><a href="#">&nbsp;</a></td>
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
@@ -91,6 +109,7 @@
         <footer>
             <button name="add" class="primary">Add</button>
             <button name="save" class="primary">Save</button>
+            <button name="close" class="primary">Close</button>
             <button name="cancel">Cancel</button>
         </footer>
     </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
index 2ea3d48c1..ca36f3ce5 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Profiles</h1>
+<div class="pki-header">
+<span class="pki-title">Profiles</span>
+</div>
 
 <table name="profiles">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -64,23 +66,3 @@
     </tr>
 </tfoot>
 </table>
-
-<div id="profile-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Profile</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Profile ID</label><input name="id" type="text"><br>
-            <label>Status</label><input name="status" type="text"><br>
-        </fieldset>
-        <footer>
-            <button name="approve">Approve</button>
-            <button name="reject">Reject</button>
-            <button name="enable" class="primary">Enable</button>
-            <button name="disable" class="primary">Disable</button>
-            <button name="cancel">Cancel</button>
-        </footer>
-    </div>
-</div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
index 978f6cd37..d2b4e2b9f 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Self Tests</h1>
+<div class="pki-header">
+<span class="pki-title">Self Tests</span>
+</div>
 
 <table name="selftests">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
              </span>
          </th>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
index 48fc8c285..61c46b358 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Tokens</h1>
+<div class="pki-header">
+<span class="pki-title">Tokens</span>
+</div>
 
 <table name="tokens">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/users.html b/base/tps-tomcat/shared/webapps/tps/ui/users.html
index b504d419d..54e6947ae 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/users.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Users</h1>
+<div class="pki-header">
+<span class="pki-title">Users</span>
+</div>
 
 <table name="users">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>