Converted entity header into facet header.

The content and the size of entity header changes depending on the
facet being displayed, so the entity header has been converted into
a facet header to allow better control via CSS.

The DNS record facet has been updated to use the same styling and
support scrolling.

To help styling and testing, all buttons have been assigned a name.

12 files changed, 348 insertions, 500 deletions

diff --git a/install/ui/association.js b/install/ui/association.js
index 4374500f1..ad8d84795 100644
--- a/install/ui/association.js
+++ b/install/ui/association.js
@@ -380,6 +380,7 @@ IPA.association_table_widget = function (spec) {
 
         var button = $('input[name=remove]', container);
         button.replaceWith(IPA.action_button({
+            name: 'remove',
             'label': button.val(),
             'icon': 'remove-icon',
             'click': function() {
@@ -409,6 +410,7 @@ IPA.association_table_widget = function (spec) {
 
         button = $('input[name=add]', container);
         button.replaceWith(IPA.action_button({
+            name: 'add',
             'label': button.val(),
             'icon': 'add-icon',
             'click': function() {
@@ -824,6 +826,7 @@ IPA.association_facet = function (spec) {
 
         if (!that.read_only) {
             that.remove_button = IPA.action_button({
+                name: 'remove',
                 label: IPA.messages.buttons.remove,
                 icon: 'remove-icon',
                 click: function() {
@@ -833,6 +836,7 @@ IPA.association_facet = function (spec) {
             }).appendTo(that.controls);
 
             that.add_button = IPA.action_button({
+                name: 'add',
                 label: IPA.messages.buttons.enroll,
                 icon: 'add-icon',
                 click: function() {
@@ -844,7 +848,7 @@ IPA.association_facet = function (spec) {
 
         if (that.indirect_attribute_member) {
             var span = $('<span/>', {
-                'class': 'right-aligned-controls'
+                'class': 'right-aligned-facet-controls'
             }).appendTo(that.controls);
 
             span.append('Show Results ');
@@ -895,10 +899,7 @@ IPA.association_facet = function (spec) {
         that.facet_show();
 
         that.pkey = $.bbq.getState(that.entity_name+'-pkey');
-        that.entity.header.set_pkey(that.pkey);
-
-        that.entity.header.back_link.css('visibility', 'visible');
-        that.entity.header.facet_tabs.css('visibility', 'visible');
+        that.header.set_pkey(that.pkey);
     };
 
     that.show_add_dialog = function() {
diff --git a/install/ui/certificate.js b/install/ui/certificate.js
index 30ac0d74a..64d93f9bd 100755
--- a/install/ui/certificate.js
+++ b/install/ui/certificate.js
@@ -515,6 +515,7 @@ IPA.cert.status_widget = function(spec) {
 
         var button = $('input[name=get]', that.container);
         that.get_button = IPA.button({
+            name: 'get',
             label: IPA.messages.buttons.get,
             'click': function() {
                 IPA.command({
@@ -531,6 +532,7 @@ IPA.cert.status_widget = function(spec) {
 
         button = $('input[name=revoke]', that.container);
         that.revoke_button = IPA.button({
+            name: 'revoke',
             label: IPA.messages.buttons.revoke,
             'click': function() {
                 IPA.command({
@@ -547,6 +549,7 @@ IPA.cert.status_widget = function(spec) {
 
         button = $('input[name=view]', that.container);
         that.view_button = IPA.button({
+            name: 'view',
             label: IPA.messages.buttons.view,
             'click': function() {
                 IPA.command({
@@ -565,6 +568,7 @@ IPA.cert.status_widget = function(spec) {
 
         button = $('input[name=restore]', that.container);
         that.restore_button = IPA.button({
+            name: 'restore',
             label: IPA.messages.buttons.restore,
             'click': function() {
                 IPA.command({
@@ -582,6 +586,7 @@ IPA.cert.status_widget = function(spec) {
         $('input[name=create]', that.container).each(function(index) {
             button = $(this);
             that.create_button = IPA.button({
+                name: 'create',
                 label: IPA.messages.objects.cert.new_certificate,
                 'click': function() {
                     request_certificate(that.result);
diff --git a/install/ui/details.js b/install/ui/details.js
index b15d17e7b..46a28e508 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -334,9 +334,19 @@ IPA.details_facet = function(spec) {
         return pkey;
     };
 
+    that.create = function(container) {
+        if (that.entity.facets.length == 1) {
+            that.disable_back_link = true;
+            that.disable_facet_tabs = true;
+        }
+
+        that.facet_create(container);
+    };
+
     that.create_controls = function() {
 
         that.reset_button = IPA.action_button({
+            name: 'reset',
             label: IPA.messages.buttons.reset,
             icon: 'reset-icon',
             'class': 'details-reset',
@@ -347,6 +357,7 @@ IPA.details_facet = function(spec) {
         }).appendTo(that.controls);
 
         that.update_button = IPA.action_button({
+            name: 'update',
             label: IPA.messages.buttons.update,
             icon: 'update-icon',
             'class': 'details-update',
@@ -376,7 +387,7 @@ IPA.details_facet = function(spec) {
             name: 'expand_all',
             href: 'expand_all',
             label: 'Expand All',
-            'class': 'right-aligned-controls',
+            'class': 'right-aligned-facet-controls',
             style: 'display: none;',
             click: function() {
                 that.expand_button.css('display', 'none');
@@ -395,7 +406,7 @@ IPA.details_facet = function(spec) {
             name: 'collapse_all',
             href: 'collapse_all',
             label: 'Collapse All',
-            'class': 'right-aligned-controls',
+            'class': 'right-aligned-facet-controls',
             click: function() {
                 that.expand_button.css('display', 'inline');
                 that.collapse_button.css('display', 'none');
@@ -477,15 +488,7 @@ IPA.details_facet = function(spec) {
         that.facet_show();
 
         that.pkey = $.bbq.getState(that.entity_name+'-pkey');
-        that.entity.header.set_pkey(that.pkey);
-
-        if (that.entity.facets.length == 1) {
-            that.entity.header.back_link.css('visibility', 'hidden');
-            that.entity.header.facet_tabs.css('visibility', 'hidden');
-        } else {
-            that.entity.header.back_link.css('visibility', 'visible');
-            that.entity.header.facet_tabs.css('visibility', 'visible');
-        }
+        that.header.set_pkey(that.pkey);
     };
 
     that.toggle = function(section, visible) {
diff --git a/install/ui/dialog.js b/install/ui/dialog.js
index ebd6c9968..efbf84ec4 100644
--- a/install/ui/dialog.js
+++ b/install/ui/dialog.js
@@ -515,6 +515,7 @@ IPA.adder_dialog = function (spec) {
 
         var button = $('input[name=find]', that.container);
         that.find_button = IPA.button({
+            name: 'find',
             'label': button.val(),
             'icon': 'ui-icon-search',
             'click': function() { that.search(); }
@@ -523,6 +524,7 @@ IPA.adder_dialog = function (spec) {
 
         button = $('input[name=remove]', that.container);
         that.remove_button = IPA.button({
+            name: 'remove',
             'label': button.val(),
             'click': function() {
                 that.remove();
@@ -533,6 +535,7 @@ IPA.adder_dialog = function (spec) {
 
         button = $('input[name=add]', that.container);
         that.add_button = IPA.button({
+            name: 'add',
             'label': button.val(),
             'click': function() {
                 that.add();
diff --git a/install/ui/dns.js b/install/ui/dns.js
index 1d6b81813..6ec807a09 100644
--- a/install/ui/dns.js
+++ b/install/ui/dns.js
@@ -55,7 +55,7 @@ IPA.entity_factories.dnszone = function() {
                     'idnsupdatepolicy']}]
         }).
         facet({
-            factory: IPA.records_facet,
+            factory: IPA.dnsrecord_facet,
             name: 'records',
             facet_group: 'member',
             label: IPA.metadata.objects.dnsrecord.label,
@@ -95,10 +95,13 @@ IPA.force_dnszone_add_checkbox_widget = function(spec) {
     return  IPA.checkbox_widget(spec);
 };
 
-IPA.records_facet = function(spec) {
+IPA.dnsrecord_facet = function(spec) {
 
     spec = spec || {};
 
+    spec.disable_back_link = false;
+    spec.disable_facet_tabs = false;
+
     var that = IPA.search_facet(spec);
 
     var record_types = [
@@ -113,9 +116,11 @@ IPA.records_facet = function(spec) {
         that.facet_init();
 
         that.table = IPA.table_widget({
+            'class': 'content-table',
             name: 'search',
             label: IPA.metadata.objects[that.entity_name].label,
-            entity_name: that.entity_name
+            entity_name: that.entity_name,
+            scrollable: true
         });
 
         var columns = that.columns.values;
@@ -334,10 +339,15 @@ IPA.records_facet = function(spec) {
 
         that.facet_create_header(container);
 
+        var span = $('<span/>', {
+            'class': 'right-aligned-facet-controls'
+        }).appendTo(that.controls);
+
         that.filter = $('<input/>', {
             type: 'text',
+            'class': 'search-filter',
             name: 'filter'
-        }).appendTo(that.controls);
+        }).appendTo(span);
 
         that.filter.keypress(function(e) {
             /* if the key pressed is the enter key */
@@ -357,20 +367,21 @@ IPA.records_facet = function(spec) {
           appendTo(that.controls);
         */
 
-        that.find_button = IPA.button({
-            label: IPA.messages.buttons.find,
-            icon: 'ui-icon-search',
+        that.find_button = IPA.action_button({
+            name: 'find',
+            icon: 'search-icon',
             click: function(){
                 that.find();
                 return false;
             }
-        }).appendTo(that.controls);
+        }).appendTo(span);
 
         that.controls.append(IPA.create_network_spinner());
 
         that.remove_button = IPA.action_button({
+            name: 'remove',
             label: IPA.messages.buttons.remove,
-            icon: 'ui-icon-trash',
+            icon: 'remove-icon',
             click: function() {
                 if (that.remove_button.hasClass('input_link_disabled')) return false;
                 that.remove();
@@ -379,8 +390,9 @@ IPA.records_facet = function(spec) {
         }).appendTo(that.controls);
 
         that.add_button = IPA.action_button({
+            name: 'add',
             label: IPA.messages.buttons.add,
-            icon: 'ui-icon-plus',
+            icon: 'add-icon',
             click: function() {
                 that.add();
                 return false;
@@ -412,13 +424,7 @@ IPA.records_facet = function(spec) {
 
         that.record = $.bbq.getState(that.entity_name+'-record');
         that.pkey = $.bbq.getState(that.entity_name+'-pkey');
-        that.entity.header.set_pkey(that.pkey);
-
-        that.entity.header.back_link.css('visibility', 'visible');
-        that.entity.header.facet_tabs.css('visibility', 'visible');
-
-        var title = IPA.messages.objects.dnsrecord.title+': '+that.pkey;
-        that.set_title(this.container, title);
+        that.header.set_pkey(that.pkey);
     };
 
 
diff --git a/install/ui/entitle.js b/install/ui/entitle.js
index 13e83ca61..66e5e2a61 100644
--- a/install/ui/entitle.js
+++ b/install/ui/entitle.js
@@ -326,6 +326,7 @@ IPA.entitle.entity = function(spec) {
 IPA.entitle.details_facet = function(spec) {
 
     spec = spec || {};
+    spec.disable_back_link = true;
 
     var that = IPA.details_facet(spec);
 
@@ -336,22 +337,26 @@ IPA.entitle.details_facet = function(spec) {
         }).appendTo(that.controls);
 
         that.register_online_button = IPA.action_button({
+            name: 'register',
             label: 'Register',
             icon: 'ui-icon-plus',
             click: function() {
                 var dialog = that.entity.get_dialog('online_registration');
                 dialog.open(that.container);
+                return false;
             }
         }).appendTo(that.register_buttons);
 
         that.register_online_button.css('display', 'none');
 /*
         that.register_offline_button = IPA.action_button({
+            name: 'import',
             label: 'Import',
             icon: 'ui-icon-plus',
             click: function() {
                 var dialog = that.entity.get_dialog('offline_registration');
                 dialog.open(that.container);
+                return false;
             }
         }).appendTo(that.register_buttons);
 
@@ -359,14 +364,6 @@ IPA.entitle.details_facet = function(spec) {
 */
     };
 
-    that.show = function() {
-        that.facet_show();
-
-        that.entity.header.set_pkey(null);
-        that.entity.header.back_link.css('visibility', 'hidden');
-        that.entity.header.facet_tabs.css('visibility', 'visible');
-    };
-
     that.refresh = function() {
 
         var summary = $('span[name=summary]', that.container).empty();
@@ -415,6 +412,7 @@ IPA.entitle.details_facet = function(spec) {
 IPA.entitle.search_facet = function(spec) {
 
     spec = spec || {};
+    spec.disable_facet_tabs = false;
     spec.selectable = false;
 
     var that = IPA.search_facet(spec);
@@ -428,36 +426,32 @@ IPA.entitle.search_facet = function(spec) {
         }).appendTo(that.controls);
 
         that.consume_button = IPA.action_button({
+            name: 'consume',
             label: 'Consume',
             icon: 'ui-icon-plus',
             click: function() {
                 var dialog = that.entity.get_dialog('consume');
                 dialog.open(that.container);
+                return false;
             }
         }).appendTo(that.consume_buttons);
 
         that.consume_button.css('display', 'none');
 
         that.import_button = IPA.action_button({
+            name: 'import',
             label: 'Import',
             icon: 'ui-icon-plus',
             click: function() {
                 var dialog = that.entity.get_dialog('import');
                 dialog.open(that.container);
+                return false;
             }
         }).appendTo(that.consume_buttons);
 
         that.import_button.css('display', 'none');
     };
 
-    that.show = function() {
-        that.facet_show();
-
-        that.entity.header.set_pkey(null);
-        that.entity.header.back_link.css('visibility', 'hidden');
-        that.entity.header.facet_tabs.css('visibility', 'visible');
-    };
-
     that.refresh = function() {
 
         function on_success(data, text_status, xhr) {
diff --git a/install/ui/entity.js b/install/ui/entity.js
index 7e600e4e7..6a01652e5 100644
--- a/install/ui/entity.js
+++ b/install/ui/entity.js
@@ -31,10 +31,16 @@ IPA.facet = function (spec) {
 
     var that = {};
 
-    that.display_class = spec.display_class || 'entity-facet';
     that.name = spec.name;
     that.label = spec.label;
     that.title = spec.title || that.label;
+    that.display_class = spec.display_class;
+
+    that.disable_back_link = spec.disable_back_link;
+    that.disable_facet_tabs = spec.disable_facet_tabs;
+
+    that.header = spec.header || IPA.facet_header({ facet: that });
+
     that._entity_name = spec.entity_name;
 
     that.dialogs = $.ordered_map();
@@ -73,10 +79,13 @@ IPA.facet = function (spec) {
 
         that.container = container;
 
-        that.header = $('<div/>', {
+        if (that.disable_facet_tabs) that.container.addClass('no-facet-tabs');
+        that.container.addClass(that.display_class);
+
+        that.header_container = $('<div/>', {
             'class': 'facet-header'
         }).appendTo(container);
-        that.create_header(that.header);
+        that.create_header(that.header_container);
 
         that.content = $('<div/>', {
             'class': 'facet-content'
@@ -86,13 +95,7 @@ IPA.facet = function (spec) {
 
     that.create_header = function(container) {
 
-        that.title_container = $('<div/>', {
-            'class': 'facet-title'
-        }).appendTo(container);
-
-        $('<h1/>').append(IPA.create_network_spinner()).appendTo(that.title_container);
-
-        that.set_title(container, that.title);
+        that.header.create(container);
 
         that.controls = $('<div/>', {
             'class': 'facet-controls'
@@ -168,6 +171,7 @@ IPA.facet = function (spec) {
 
     // methods that should be invoked by subclasses
     that.facet_init = that.init;
+    that.facet_create = that.create;
     that.facet_create_header = that.create_header;
     that.facet_create_content = that.create_content;
     that.facet_setup = that.setup;
@@ -177,6 +181,165 @@ IPA.facet = function (spec) {
     return that;
 };
 
+IPA.facet_header = function(spec) {
+
+    spec = spec || {};
+
+    var that = {};
+    that.facet = spec.facet;
+
+    that.select_tab = function() {
+        if (that.facet.disable_facet_tabs) return;
+
+        $(that.facet_tabs).find('a').removeClass('selected');
+        var facet_name = $.bbq.getState(that.facet.entity.name+'-facet');
+
+        if (!facet_name || facet_name === 'default') {
+            that.facet_tabs.find('a:first').addClass('selected');
+        } else {
+            that.facet_tabs.find('a#' + facet_name ).addClass('selected');
+        }
+    };
+
+    that.set_pkey = function(value) {
+
+        if (value) {
+            var breadcrumb = [];
+            var current_entity = that.facet.entity.containing_entity;
+
+            while(current_entity){
+                breadcrumb.unshift($('<a/>',{
+                    text:$.bbq.getState(current_entity.name+'-pkey'),
+                    title: current_entity.name,
+                    click: function() {
+                        var entity = IPA.get_entity((this.title));
+                        IPA.nav.show_page(that.facet.entity.name, 'default');
+                        $('a', that.facet_tabs).removeClass('selected');
+                        return false;
+                    }
+                }));
+
+                current_entity = current_entity.containing_entity;
+            }
+
+            that.title_container.empty();
+            var h3 =  $('<h3/>').appendTo(that.title_container);
+
+            h3.empty();
+            h3.append(that.facet.entity.title);
+            h3.append(': ');
+
+            for (var i = 0; i < breadcrumb.length; i+=1){
+                h3.append(breadcrumb[i]);
+                h3.append(' > ');
+
+            }
+            h3.append(
+                $('<span/>', {
+                    'class': 'facet-pkey',
+                    text:value
+                }));
+        } else {
+            that.title_container.empty();
+            var span =  $('<h3/>',{
+                text: that.facet.entity.metadata.label
+            }).appendTo(that.title_container);
+        }
+    };
+
+    that.create_facet_link = function(container, other_facet) {
+
+        var li = $('<li/>', {
+            title: other_facet.name,
+            click: function() {
+                if (li.hasClass('entity-facet-disabled')) {
+                    return false;
+                }
+
+                var pkey = $.bbq.getState(that.facet.entity.name+'-pkey');
+                IPA.nav.show_page(that.facet.entity.name, other_facet.name, pkey);
+
+                return false;
+            }
+        }).appendTo(container);
+
+        $('<a/>', {
+            text: other_facet.label,
+            id: other_facet.name
+        }).appendTo(li);
+    };
+
+    that.create_facet_group = function(container, facet_group) {
+
+        var section = $('<span/>', {
+            'class': 'facet-group'
+        }).appendTo(container);
+
+        $('<div/>', {
+            'class': 'facet-group-name',
+            text: facet_group.label
+        }).appendTo(section);
+
+        var ul = $('<ul/>', {
+            'class': 'facet-tab'
+        }).appendTo(section);
+
+        var facets = facet_group.facets.values;
+        for (var i=0; i<facets.length; i++) {
+            var facet = facets[i];
+            that.create_facet_link(ul, facet);
+        }
+    };
+
+    that.create = function(container) {
+
+        that.title_container = $('<div/>', {
+            'class': 'facet-title'
+        }).appendTo(container);
+
+        that.set_pkey(null);
+
+        if (!that.facet.disable_back_link) {
+            that.back_link = $('<span/>', {
+                'class': 'back-link',
+                click: function() {
+                    if ($(this).hasClass('entity-facet-disabled')) {
+                        return false;
+                    }
+
+                    var current_entity = that.facet.entity;
+                    while(current_entity.containing_entity){
+                        current_entity = current_entity.containing_entity;
+                    }
+
+                    IPA.nav.show_page(current_entity.name, 'search');
+                    $('a', that.facet_tabs).removeClass('selected');
+                    return false;
+                }
+            }).appendTo(container);
+
+            that.back_link.append('<span class="ipa-icon">&#x25C0;</span> ');
+            that.back_link.append(IPA.messages.buttons.back_to_list);
+        }
+
+        if (!that.facet.disable_facet_tabs) {
+            that.facet_tabs = $('<div/>', {
+                'class': 'facet-tabs'
+            }).appendTo(container);
+
+            var facet_groups = that.facet.entity.facet_groups.values;
+            for (var i=0; i<facet_groups.length; i++) {
+                var facet_group = facet_groups[i];
+                if (facet_group.facets.length) {
+                    that.create_facet_group(that.facet_tabs, facet_group);
+                }
+            }
+        }
+    };
+
+    return that;
+};
+
 IPA.table_facet = function(spec) {
 
     spec = spec || {};
@@ -257,8 +420,6 @@ IPA.entity = function (spec) {
     that.label = spec.label || spec.metadata.label || spec.name;
     that.title = spec.title || that.label;
 
-    that.header = spec.header || IPA.entity_header({entity: that});
-
     that.dialogs = $.ordered_map();
 
     that.facets = $.ordered_map();
@@ -342,14 +503,7 @@ IPA.entity = function (spec) {
     };
 
     that.create = function(container) {
-        var entity_header = $('<div/>', {
-            'class': 'entity-header'
-        }).appendTo(container);
-        that.header.create(entity_header);
-
-        that.content = $('<div/>', {
-            'class': 'entity-content'
-        }).appendTo(container);
+        that.container = container;
     };
 
     that.setup = function(container) {
@@ -376,19 +530,19 @@ IPA.entity = function (spec) {
             prev_facet.hide();
         }
 
-        var facet_container = $('.facet[name="'+that.facet.name+'"]', that.content);
+        var facet_container = $('.facet[name="'+that.facet.name+'"]', that.container);
         if (!facet_container.length) {
             facet_container = $('<div/>', {
                 name: that.facet.name,
                 'class': 'facet'
-            }).appendTo(that.content);
+            }).appendTo(that.container);
 
             that.facet.create(facet_container);
             that.facet.setup(facet_container);
         }
 
         that.facet.show();
-        that.header.select_tab();
+        that.facet.header.select_tab();
         that.facet.refresh();
     };
 
@@ -492,176 +646,6 @@ IPA.nested_tabs = function(entity_name) {
     return siblings;
 };
 
-IPA.selected_icon = '<span class="ipa-icon">&#x25B6;</span>';
-IPA.back_icon = '<span class="ipa-icon">&#x25C0;</span>';
-
-IPA.entity_header = function(spec) {
-
-    spec = spec || {};
-
-    var that = {};
-    that.entity = spec.entity;
-
-    that.select_tab = function() {
-        $(that.facet_tabs).find('a').removeClass('selected');
-        var facet_name = $.bbq.getState(that.entity.name+'-facet');
-
-        if (!facet_name || facet_name === 'default') {
-            that.facet_tabs.find('a:first').addClass('selected');
-        } else {
-            that.facet_tabs.find('a#' + facet_name ).addClass('selected');
-        }
-    };
-
-    that.set_pkey = function(value) {
-
-        if (value) {
-            var breadcrumb = [];
-            var current_entity = IPA.current_entity.containing_entity;
-
-            while(current_entity){
-                breadcrumb.unshift($('<a/>',{
-                    text:$.bbq.getState(current_entity.name+'-pkey'),
-                    title: current_entity.name,
-                    click: function() {
-                        var entity = IPA.get_entity((this.title));
-                        IPA.nav.show_page(entity.name, 'default');
-                        $('a', that.facet_tabs).removeClass('selected');
-                        return false;
-                    }
-                }));
-
-                current_entity = current_entity.containing_entity;
-            }
-
-            that.title_container.empty();
-            var h3 =  $('<h3/>').appendTo(that.title_container);
-
-            h3.empty();
-            h3.append(IPA.current_entity.title);
-            h3.append(': ');
-
-            for (var i = 0; i < breadcrumb.length; i+=1){
-                h3.append(breadcrumb[i]);
-                h3.append(' > ');
-
-            }
-            h3.append(
-                $('<span/>', {
-                    'class': 'entity-pkey',
-                    text:value
-                }));
-        } else {
-            that.title_container.empty();
-            var span =  $('<h3/>',{
-                text:IPA.current_entity.metadata.label
-            }).appendTo(that.title_container);
-        }
-    };
-
-    that.create_facet_link = function(container, other_facet) {
-
-        var li = $('<li/>', {
-            title: other_facet.name,
-            click: function() {
-                if (li.hasClass('entity-facet-disabled')) {
-                    return false;
-                }
-
-                var pkey = $.bbq.getState(that.entity.name+'-pkey');
-                IPA.nav.show_page(that.entity.name, other_facet.name, pkey);
-
-                return false;
-            }
-        }).appendTo(container);
-
-        $('<a/>', {
-            text: other_facet.label,
-            id: other_facet.name
-        }).appendTo(li);
-    };
-
-    that.create_facet_group = function(container, facet_group) {
-
-        var section = $('<span/>', {
-            'class': 'facet-group'
-        }).appendTo(container);
-
-        $('<div/>', {
-            'class': 'facet-group-name',
-            text: facet_group.label
-        }).appendTo(section);
-
-        var ul = $('<ul/>', {
-            'class': 'facet-tab'
-        }).appendTo(section);
-
-        var facets = facet_group.facets.values;
-        for (var i=0; i<facets.length; i++) {
-            var facet = facets[i];
-            that.create_facet_link(ul, facet);
-        }
-    };
-
-    that.create = function(container) {
-
-        that.title_container = $('<div/>', {
-            'class': 'entity-title'
-        }).appendTo(container);
-
-        var title_text = $('<h3/>', {
-            text: that.entity.metadata.label
-        }).appendTo(that.title_container);
-
-        that.pkey = $('<span/>').appendTo(title_text);
-
-        that.pkey.append(': ');
-        that.pkey.append($('<span/>', {
-            'class': 'entity-pkey'
-        }));
-
-        var search_bar = $('<div/>', {
-            'class': 'entity-search'
-        }).appendTo(container);
-
-        that.back_link = $('<span/>', {
-            'class': 'back-link',
-            click: function() {
-                if ($(this).hasClass('entity-facet-disabled')) {
-                    return false;
-                }
-
-                var current_entity = that.entity;
-                while(current_entity.containing_entity){
-                    current_entity = current_entity.containing_entity;
-                }
-
-                IPA.nav.show_page(current_entity.name, 'search');
-                $('a', that.facet_tabs).removeClass('selected');
-                return false;
-            }
-        }).appendTo(search_bar);
-
-        that.back_link.append(IPA.back_icon);
-        that.back_link.append('  ');
-        that.back_link.append(IPA.messages.buttons.back_to_list);
-
-        that.facet_tabs = $('<div/>', {
-            'class': 'entity-tabs'
-        }).appendTo(container);
-
-        var facet_groups = that.entity.facet_groups.values;
-        for (var i=0; i<facet_groups.length; i++) {
-            var facet_group = facet_groups[i];
-            if (facet_group.facets.length) {
-                that.create_facet_group(that.facet_tabs, facet_group);
-            }
-        }
-    };
-
-    return that;
-};
-
 IPA.entity_builder = function(){
 
     var that = {};
diff --git a/install/ui/hbac.js b/install/ui/hbac.js
index 01370ec70..4c29abaab 100644
--- a/install/ui/hbac.js
+++ b/install/ui/hbac.js
@@ -761,6 +761,7 @@ IPA.hbacrule_accesstime_widget = function (spec) {
 
         var button = $('input[name=remove]', span);
         button.replaceWith(IPA.button({
+            name: 'remove',
             'label': button.val(),
             'icon': 'ui-icon-trash',
             'click': function() { that.remove(that.container); }
@@ -768,6 +769,7 @@ IPA.hbacrule_accesstime_widget = function (spec) {
 
         button = $('input[name=add]', span);
         button.replaceWith(IPA.button({
+            name: 'add',
             'label': button.val(),
             'icon': 'ui-icon-plus',
             'click': function() { that.add(that.container); }
diff --git a/install/ui/host.js b/install/ui/host.js
index d8a417ab7..4fdc32fe4 100644
--- a/install/ui/host.js
+++ b/install/ui/host.js
@@ -234,6 +234,7 @@ IPA.host_provisioning_status_widget = function (spec) {
 
         var button = $('input[name=unprovision]', that.container);
         that.unprovision_button = IPA.button({
+            name: 'unprovision',
             'label': IPA.messages.objects.host.delete_key_unprovision,
             'click': that.show_unprovision_dialog
         });
@@ -243,6 +244,7 @@ IPA.host_provisioning_status_widget = function (spec) {
 
         that.enroll_button = $('input[name=enroll]', that.container);
         button = IPA.button({
+            name: 'enroll',
             'label': IPA.messages.objects.host.set_otp,
             'click': that.set_otp
         });
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index af27ed5ca..47ee51332 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -392,33 +392,56 @@ div.tabs {
 /* ---- Entity ---- */
 
 .entity {
-    height: 100%;
-    position: relative;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
 }
 
-.entity h1{
+.entity h1 {
     margin: 0 0 10px;
-/*
-    margin-left: 0.5em;
-    margin-right: 0.5em;
+}
 
-    -moz-border-radius: 0.5em 0.5em 0 0;
-        -webkit-border-radius: 0.5em 0.5em 0 0;
-    background: -moz-linear-gradient(center top , #EEEEEE, #DFDFDF) repeat scroll 0 0 transparent;
-    background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
-*/
+.entity-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-size: 10px;
+    margin: 0 0 0;
 }
 
-.entity-header {
+.entity-content div.content-buttons {
+    float: right;
+    margin-right: 1.5em;
+}
+
+.entity-content div.content-buttons img {
+    border: 0;
+}
+
+/* ---- Facet ---- */
+
+.facet {
+    position: absolute;
+    top: 20px;
+    left: 10px;
+    right: 10px;
+    bottom: 0;
+}
+
+.facet-header {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    height: 70px;
-    margin: 20px 22px 0;
+    height: 130px;
+    margin: 0 12px 0;
 }
 
-.entity-title {
+.facet-title {
     position: absolute;
     top: 0;
     left: 0;
@@ -426,57 +449,49 @@ div.tabs {
     display: block;
 }
 
-.entity-title h3 {
+.facet-title h3 {
     margin: 0;
 }
 
-.entity-title span {
+.facet-title span {
     display: inline;
 }
 
-.entity-pkey {
+.facet-pkey {
     color:black;
 }
 
-.entity-search {
+.back-link {
+    cursor: pointer;
     position: absolute;
     top: 0;
     right: 0;
 }
 
-.back-link {
-    cursor: pointer;
-}
+/* ---- Facet Tabs ---- */
 
-.entity-tabs {
+.facet-tabs {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: 0;
+    bottom: 30px;
     z-index: 1; /* need to be above facet header */
-	margin-bottom: -25px;
-	padding-bottom: 11px;
 	border-bottom: 1px solid #C9C3BA;
 }
 
 .facet-group {
     float: left;
-/*    height: 3em; */
     margin-right: 1em;
     position: relative;
     height: 100%;
 }
 
 .facet-group-name {
-    height: 15px;
-}
-
-.facet-title {
-	display: none;
+    height: 20px;
 }
 
 .facet-tab {
-    height: 25px;
+    height: 31px;
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -485,7 +500,6 @@ div.tabs {
 
 .facet-tab li {
     display: inline-block;
-    height: 25px;
     position: relative;
 	padding-right: 5px;
 }
@@ -494,7 +508,7 @@ div.tabs {
     background-color: #dedbde;
     border-left: 1px solid #c9c3ba;
 	border-right: 1px solid #c9c3ba;
-    margin: 5px 0 0;
+    margin: 0 0 0;
     padding: 6px 16px;
     text-decoration: none;
     display: inline-block;
@@ -506,6 +520,7 @@ div.tabs {
 .facet-tab li a:hover {
     background-color: #f1f0ee;
 }
+
 .facet-tab li a.selected {
     color: #6C6F73;
     background-color: #f1f0ee;
@@ -518,58 +533,51 @@ div.tabs {
     margin-left:1em;  margin-right:1em;
 }
 
-.entity-content {
+/* ---- Facet Controls ---- */
+
+.facet-controls {
     position: absolute;
-    top: 100px;
     left: 0;
     right: 0;
     bottom: 0;
-    font-size: 10px;
-    margin: 0 10px 0;
-}
-
-.entity-content div.content-buttons {
-    float: right;
-    margin-right: 1.5em;
-}
-
-.entity-content div.content-buttons img {
-    border: 0;
-}
-
-/* ---- Facet ---- */
-
-.facet {
-    width: 100%;
-    height: 100%;
-    position: relative;
+    height: 30px;
+    line-height: 30px;
 }
 
-.facet-header {
+.right-aligned-facet-controls {
     position: absolute;
     top: 0;
-    left: 0;
     right: 0;
-    height: 30px;
-
-    padding: 5px;
+    bottom: 0;
 }
 
-.facet-controls {
-    position: relative;
-    min-height: 1.8em;
+.facet-controls > a {
+	font-size: 1.3em !important;
+	padding: 0 6px 0 0;
 }
 
+/* ---- Facet Content ---- */
+
 .facet-content {
     position: absolute;
-    top: 35px;
+    top: 130px;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 0;
 }
 
-/* ---- Search ---- */
+/* ---- Facet Customization ---- */
+
+.no-facet-tabs .facet-header {
+    height: 70px;
+}
+
+.no-facet-tabs .facet-content {
+    top: 70px;
+}
+
+/* ---- Search Facet ---- */
 
 .content-table {
     position: absolute;
@@ -587,7 +595,7 @@ div.tabs {
     bottom: 32px;
 }
 
-.search-container {
+.search-filter {
 	float: right;
 	width: 215px;
 	-moz-border-radius: 15px !important;
@@ -597,6 +605,7 @@ div.tabs {
 	background: url("search-bg.png");
 	height: 18px;
 	padding-left: 8px;
+    margin: 5px 0 5px;
 }
 
 .search-controls {
@@ -730,7 +739,7 @@ hr {
     margin-top: 1em;
 }
 
-/* ---- Details ---- */
+/* ---- Details Facet ---- */
 
 .details-content {
     position: absolute;
@@ -991,174 +1000,17 @@ span.ui-icon-search {
         margin-left: 0 !important;
 }
 
-[title="Find"] {
-        background: none !important;
-		border: none !important;
-		color: transparent !important;
-		float: right !important;
-		margin: 0 -25em 0 0 !important;
-		width: 8px !important;
+a[name=find] {
+    margin: 6px;
+    padding: 3px 3px 2px;
+    position: absolute;
+    right: 0;
 }
 
 [title=">>"] {
     margin-top: 1em !important;
 }
 
-[title="Delete"] {
-	font-size: 1.3em !important;
-	padding: 0 0 2px 6px;
-}
-
-[title="Enroll"] {
-	font-size: 1.3em !important;
-	padding: 0 0 2px 6px;
-}
-
-[title="Update"] {
-	font-size: 1.3em !important;
-	padding: 0 0 2px 6px;
-}
-
-[title="Reset"] {
-	font-size: 1.3em !important;
-	padding: 0 0 2px 6px;
-}
-
-[title="Add"] {
-	font-size: 1.3em !important;
-	padding: 0 0 2px 22px;
-}
-
-[name="search"] {
-	margin-top: -40px;
-}
-
-[name="details"] {
-	margin-top: 30px;
-	margin-left: 7px;
-	width: 910px;
-}
-
-[name="records"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="maps"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="keys"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="certificates"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="member_role"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="member_privilege"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberof_group"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberof_privilege"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberof_hbacrule"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberof_sudorule"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberof_permission"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberof_netgroup"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberof_hostgroup"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="managedby_host"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberof_role"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="member_group"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="member_host"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="member_hostgroup"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="member_netgroup"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberhost_host"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberhost_hostgroup"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberuser_user"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="memberuser_group"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
-[name="member_user"] {
-	margin-top: 30px;
-	margin-left: 7px;
-}
-
 span.sub-nav-off > a:link, span.sub-nav-off >  a:visited{
     color:white;
 }
@@ -1274,11 +1126,6 @@ dl.modal dd {
     margin-left: 0.8em;
 }
 /*
-#dns-record-resource-filter {
-        padding: 0 1em;
-        margin: 0 1em;
-}
-
 #dns-record-type-filter {
         margin: 0 1em 0 0.5em;
 }
@@ -1359,9 +1206,3 @@ table.scrollable tbody {
     width: 23em;
     height: 4em;
 }
-
-.right-aligned-controls {
-    position: absolute;
-    right: 0;
-    padding-right: 1.5em;
-}
diff --git a/install/ui/search.js b/install/ui/search.js
index 9d6e51369..96c72a858 100644
--- a/install/ui/search.js
+++ b/install/ui/search.js
@@ -29,9 +29,11 @@ IPA.search_facet = function(spec) {
     spec = spec || {};
 
     spec.name = spec.name || 'search';
-    spec.display_class = 'search-facet';
     spec.managed_entity_name = spec.managed_entity_name || spec.entity_name;
 
+    spec.disable_back_link = spec.disable_back_link === undefined ? true : spec.disable_back_link;
+    spec.disable_facet_tabs = spec.disable_facet_tabs === undefined ? true : spec.disable_facet_tabs;
+
     var that = IPA.table_facet(spec);
 
     that.search_all = spec.search_all || false;
@@ -52,7 +54,6 @@ IPA.search_facet = function(spec) {
     that.init_table = function(entity){
 
         that.table = IPA.table_widget({
-            id: entity.name+'-search',
             'class': 'content-table',
             name: 'search',
             label: IPA.metadata.objects[entity.name].label,
@@ -95,11 +96,15 @@ IPA.search_facet = function(spec) {
 
         that.facet_create_header(container);
 
+        var span = $('<span/>', {
+            'class': 'right-aligned-facet-controls'
+        }).appendTo(that.controls);
+
         that.filter = $('<input/>', {
             type: 'text',
-			'class': 'search-container',
+			'class': 'search-filter',
             name: 'filter'
-        }).appendTo(that.controls);
+        }).appendTo(span);
 
         that.filter.keypress(function(e) {
             /* if the key pressed is the enter key */
@@ -109,17 +114,18 @@ IPA.search_facet = function(spec) {
         });
 
         that.find_button = IPA.action_button({
-            label: IPA.messages.buttons.find,
+            name: 'find',
             icon: 'search-icon',
             click: function() {
                 that.find();
                 return false;
             }
-        }).appendTo(that.controls);
+        }).appendTo(span);
 
-        that.controls.append(IPA.create_network_spinner());
+        span.append(IPA.create_network_spinner());
 
         that.remove_button = IPA.action_button({
+            name: 'remove',
             label: IPA.messages.buttons.remove,
             icon: 'remove-icon',
             click: function() {
@@ -130,6 +136,7 @@ IPA.search_facet = function(spec) {
         }).appendTo(that.controls);
 
         that.add_button = IPA.action_button({
+            name: 'add',
             label: IPA.messages.buttons.add,
             icon: 'add-icon',
             click: function() {
@@ -148,10 +155,6 @@ IPA.search_facet = function(spec) {
     that.show = function() {
         that.facet_show();
 
-        that.entity.header.set_pkey(null);
-        that.entity.header.back_link.css('visibility', 'hidden');
-        that.entity.header.facet_tabs.css('visibility', 'hidden');
-
         if (that.filter) {
             var filter = $.bbq.getState(that.entity_name+'-filter');
             that.filter.val(filter);
@@ -330,18 +333,21 @@ IPA.search_facet = function(spec) {
 
 /*TODO.  this has much copied code from above.  Refactor the search_facet
 To either be nested or not nested. */
-IPA.nested_search_facet = function(spec){
+IPA.nested_search_facet = function(spec) {
+
+    spec = spec || {};
+
     spec.managed_entity_name = spec.nested_entity;
+
+    spec.disable_back_link = false;
+    spec.disable_facet_tabs = false;
+
     var that = IPA.search_facet(spec);
 
     that.show = function() {
         that.facet_show();
 
-        //that.entity.header.set_pkey(null);
-        that.entity.header.back_link.css('visibility', 'visible');
-        that.entity.header.facet_tabs.css('visibility', 'visible');
-
-        that.entity.header.set_pkey(
+        that.header.set_pkey(
             $.bbq.getState(IPA.current_entity.name+'-pkey'));
 
         if (that.filter) {
diff --git a/install/ui/service.js b/install/ui/service.js
index 0946aa500..6fcd43482 100644
--- a/install/ui/service.js
+++ b/install/ui/service.js
@@ -256,6 +256,7 @@ IPA.service_provisioning_status_widget = function (spec) {
 
         var button = $('input[name=unprovision]', that.container);
         that.unprovision_button = IPA.button({
+            name: 'unprovision',
             'label': IPA.messages.objects.service.delete_key_unprovision,
             'click': that.unprovision
         });