From a4aba826a0e1327ba8df05da19d9ad0055d8269d Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Thu, 28 Apr 2011 19:17:58 -0500
Subject: Added facet container.

Facet container has been added to hold facet header (i.e. title,
search fields, buttons, links) and facet content. Each facet now
occupies separate container, so it can be shown/hidden without
having to redraw the content.
---
 install/ui/associate.js                 |  83 +++---
 install/ui/details.js                   | 396 ++++++++++++++-------------
 install/ui/dns.js                       | 124 +++++----
 install/ui/entitle.js                   |  66 ++---
 install/ui/entity.js                    | 471 +++++++++++++++++++-------------
 install/ui/ipa.css                      |  96 ++++---
 install/ui/ipa.js                       |  20 +-
 install/ui/navigation.js                |  33 ++-
 install/ui/search.js                    | 265 +++++-------------
 install/ui/test/data/i18n_messages.json |   2 +-
 install/ui/test/data/ipa_init.json      |   2 +-
 install/ui/test/details_tests.js        |  35 ++-
 install/ui/test/entity_tests.js         |  22 +-
 ipalib/plugins/internal.py              |   2 +-
 14 files changed, 789 insertions(+), 828 deletions(-)

diff --git a/install/ui/associate.js b/install/ui/associate.js
index 68009b571..15fdfbd72 100644
--- a/install/ui/associate.js
+++ b/install/ui/associate.js
@@ -799,7 +799,9 @@ IPA.association_facet = function (spec) {
         return pkey != that.pkey;
     };
 
-    that.create_content = function(container) {
+    that.create_header = function(container) {
+
+        that.facet_create_header(container);
 
         that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
 
@@ -812,41 +814,44 @@ IPA.association_facet = function (spec) {
         var other_label = IPA.metadata.objects[that.other_entity].label;
 
         /* TODO: generic handling of different relationships */
-        var header_message = '';
+        var title = '';
         if (relationship[0] == 'Member') {
-            header_message = IPA.messages.association.member;
-            
-        } else if (relationship[0] == 'Parent') {
-            header_message = IPA.messages.association.parent;
+            title = IPA.messages.association.member;
+
+        } else if (relationship[0] == 'Member Of') {
+            title = IPA.messages.association.parent;
         }
 
-        header_message = header_message.replace('${entity}', that.entity_name);
-        header_message = header_message.replace('${primary_key}', that.pkey);
-        header_message = header_message.replace('${other_entity}', other_label);
+        title = title.replace('${entity}', that.entity_name);
+        title = title.replace('${primary_key}', that.pkey);
+        title = title.replace('${other_entity}', other_label);
 
-        $('<div/>', {
-            'id': that.entity_name+'-'+that.other_entity,
-            html: $('<h2/>',{ html:  header_message })
-        }).appendTo(container);
+        that.set_title(container, title);
 
-        var span = $('<span/>', { 'name': 'association' }).appendTo(container);
+        that.remove_button = IPA.action_button({
+            label: IPA.messages.buttons.remove,
+            icon: 'ui-icon-trash',
+            click: function() {
+                that.show_remove_dialog();
+                return false;
+            }
+        }).appendTo(that.controls);
 
-        that.table.create(span);
+        that.add_button = IPA.action_button({
+            label: IPA.messages.buttons.enroll,
+            icon: 'ui-icon-plus',
+            click: function() {
+                that.show_add_dialog();
+                return false;
+            }
+        }).appendTo(that.controls);
+    };
 
-        var li = that.entity_header.buttons;
+    that.create_content = function(container) {
 
-        // creating generic buttons for layout
-        $('<input/>', {
-            'type': 'button',
-            'name': 'remove',
-            'value': IPA.messages.buttons.remove
-        }).appendTo(li);
+        var span = $('<span/>', { 'name': 'association' }).appendTo(container);
 
-        $('<input/>', {
-            'type': 'button',
-            'name': 'add',
-            'value': IPA.messages.buttons.enroll
-        }).appendTo(li);
+        that.table.create(span);
     };
 
     that.setup = function(container) {
@@ -856,22 +861,16 @@ IPA.association_facet = function (spec) {
         var span = $('span[name=association]', that.container);
 
         that.table.setup(span);
+    };
 
-        // replacing generic buttons with IPA.button and setting click handler
+    that.show = function() {
+        that.facet_show();
 
-        var button = $('input[name=remove]', that.entity_header.buttons);
-        button.replaceWith(IPA.action_button({
-            'label': button.val(),
-            'icon': 'ui-icon-trash',
-            'click': function() { that.show_remove_dialog(); }
-        }));
+        that.pkey = $.bbq.getState(that.entity_name+'-pkey', true) || '';
+        that.entity.header.set_pkey(that.pkey);
 
-        button = $('input[name=add]', that.entity_header.buttons);
-        button.replaceWith(IPA.action_button({
-            'label': button.val(),
-            'icon': 'ui-icon-plus',
-            'click': function() { that.show_add_dialog(); }
-        }));
+        that.entity.header.back_link.css('visibility', 'visible');
+        that.entity.header.facet_tabs.css('visibility', 'visible');
     };
 
     that.show_add_dialog = function() {
@@ -1010,9 +1009,7 @@ IPA.association_facet = function (spec) {
     that.refresh = function() {
 
         function on_success(data, text_status, xhr) {
-            if (that.pkey){
-                that.entity_header.set_pkey(that.pkey);
-            }
+
             that.table.empty();
 
             var pkeys = data.result.result[that.name];
diff --git a/install/ui/details.js b/install/ui/details.js
index 433f682f0..a4b36db73 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -266,9 +266,6 @@ IPA.details_facet = function(spec) {
 
     that.label = (IPA.messages && IPA.messages.facets && IPA.messages.facets.details) || spec.label;
 
-    that.update = spec.update || IPA.details_update;
-    that.refresh = spec.refresh || IPA.details_refresh;
-
     that.sections = [];
 
     that.__defineGetter__("entity_name", function(){
@@ -319,38 +316,82 @@ IPA.details_facet = function(spec) {
         }
     };
 
-    that.create_content = function(container) {
+    that.create_header = function(container) {
+
+        that.facet_create_header(container);
 
+        that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
         var label = IPA.metadata.objects[that.entity_name].label;
 
         var title = IPA.messages.details.settings;
         title = title.replace('${entity}', label);
+        title = title.replace('${primary_key}', that.pkey);
 
-        $('<h1/>',{
-            html: "<span id='headerpkey' />"+title
-        }).append(IPA.create_network_spinner()).
-            appendTo(container);
+        that.set_title(container, title);
 
-        var details = $('<div/>', {
-            'name': 'details'
-        }).appendTo(container);
+        that.reset_button = IPA.action_button({
+            label: IPA.messages.buttons.reset,
+            icon: 'ui-icon-refresh',
+            'class': 'details-reset',
+            click: function() {
+                that.reset();
+                return false;
+            }
+        }).appendTo(that.controls);
+
+        that.update_button = IPA.action_button({
+            label: IPA.messages.buttons.update,
+            icon: 'ui-icon-check',
+            'class': 'details-update',
+            click: function() {
+                that.update();
+                return false;
+            }
+        }).appendTo(that.controls);
 
-        $('<a/>', {
+        that.expand_button = $('<a/>', {
             name: 'expand_all',
             href: 'expand_all',
             text: 'Expand All',
             'class': 'expand-collapse-all',
-            style: 'display: none;'
-        }).appendTo(details);
+            style: 'display: none;',
+            click: function() {
+                that.expand_button.css('display', 'none');
+                that.collapse_button.css('display', 'inline');
+
+                for (var i=0; i<that.sections.length; i++) {
+                    var section = that.sections[i];
+                    that.toggle(section, true);
+                }
+
+                return false;
+            }
+        }).appendTo(that.controls);
 
-        $('<a/>', {
+        that.collapse_button = $('<a/>', {
             name: 'collapse_all',
             href: 'collapse_all',
             text: 'Collapse All',
-            'class': 'expand-collapse-all'
-        }).appendTo(details);
+            'class': 'expand-collapse-all',
+            click: function() {
+                that.expand_button.css('display', 'inline');
+                that.collapse_button.css('display', 'none');
+
+                for (var i=0; i<that.sections.length; i++) {
+                    var section = that.sections[i];
+                    that.toggle(section, false);
+                }
+
+                return false;
+            }
+        }).appendTo(that.controls);
+    };
+
+    that.create_content = function(container) {
 
-        details.append('<br/>');
+        var details = $('<div/>', {
+            'name': 'details'
+        }).appendTo(container);
 
         for (var i = 0; i < that.sections.length; ++i) {
             var section = that.sections[i];
@@ -374,6 +415,13 @@ IPA.details_facet = function(spec) {
                 'class': 'details-section'
             }).appendTo(details);
 
+            header.click(function(section, div) {
+                return function() {
+                    var visible = div.is(":visible");
+                    that.toggle(section, !visible);
+                };
+            }(section, div));
+
             section.create(div);
 
             details.append('<hr/>');
@@ -384,72 +432,33 @@ IPA.details_facet = function(spec) {
 
         that.facet_setup(container);
 
-        that.reset_button = IPA.action_button({
-            'label': 'Reset',
-            'icon': 'ui-icon-refresh',
-            'class': 'details-reset',
-            'click': function() {
-                that.reset();
-                return false;
-            }
-        }).appendTo(that.entity_header.buttons);
-
-        that.update_button = IPA.action_button({
-            'label': 'Update',
-            'icon': 'ui-icon-check',
-            'class': 'details-update',
-            'click': function() {
-                that.update();
-                return false;
-            }
-        }).appendTo(that.entity_header.buttons);
-
         var details = $('div[name=details]', that.container);
 
-        var expand_all = $('a[name=expand_all]', details);
-        expand_all.click(function() {
-            expand_all.css('display', 'none');
-            collapse_all.css('display', 'inline');
-
-            for (var i=0; i<that.sections.length; i++) {
-                var section = that.sections[i];
-                toggle(section, true);
-            }
-
-            return false;
-        });
-
-        var collapse_all = $('a[name=collapse_all]', details);
-        collapse_all.click(function() {
-            expand_all.css('display', 'inline');
-            collapse_all.css('display', 'none');
-
-            for (var i=0; i<that.sections.length; i++) {
-                var section = that.sections[i];
-                toggle(section, false);
-            }
-
-            return false;
-        });
-
         for (var i = 0; i < that.sections.length; ++i) {
             var section = that.sections[i];
 
-            var header = $('h2[name='+section.name+']', that.container);
             var div = $('div.details-section[name='+section.name+']', that.container);
 
-            header.click(function(section, div) {
-                return function() {
-                    var visible = div.is(":visible");
-                    toggle(section, !visible);
-                };
-            }(section, div));
-
             section.setup(div);
         }
     };
 
-    function toggle(section, visible) {
+    that.show = function() {
+        that.facet_show();
+
+        that.pkey = $.bbq.getState(that.entity_name+'-pkey', true) || '';
+        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.toggle = function(section, visible) {
         var header = $('h2[name='+section.name+']', that.container);
 
         var icon = $('span[name=icon]', header);
@@ -461,7 +470,7 @@ IPA.details_facet = function(spec) {
         if (visible != div.is(":visible")) {
             div.slideToggle();
         }
-    }
+    };
 
     function new_key(){
         var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
@@ -488,9 +497,6 @@ IPA.details_facet = function(spec) {
             var section = that.sections[i];
             section.load(record);
         }
-        if (that.pkey){
-            that.entity_header.set_pkey(that.pkey);
-        }
     };
 
     that.reset = function() {
@@ -501,6 +507,123 @@ IPA.details_facet = function(spec) {
         }
     };
 
+    that.update = function(on_win, on_fail) {
+
+        var entity_name = that.entity_name;
+
+        function on_success(data, text_status, xhr) {
+            if (on_win)
+                on_win(data, text_status, xhr);
+            if (data.error)
+                return;
+
+            var result = data.result.result;
+            that.load(result);
+        }
+
+        function on_error(xhr, text_status, error_thrown) {
+            if (on_fail)
+                on_fail(xhr, text_status, error_thrown);
+        }
+
+        var values;
+        var modlist = {'all': true, 'setattr': [], 'addattr': [], 'rights': true};
+        var attrs_wo_option = {};
+
+        for (var i=0; i<that.sections.length; i++) {
+            var section = that.sections[i];
+
+            if (section.save){
+                section.save(modlist);
+                continue;
+            }
+
+            for (var j=0; j<section.fields.length; j++) {
+                var field = section.fields[j];
+
+                var span = $('span[name='+field.name+']', section.container).first();
+                values = field.save();
+                if (!values) continue;
+
+                var param_info = IPA.get_entity_param(entity_name, field.name);
+                if (param_info) {
+                    if (param_info['primary_key']) continue;
+                    if (values.length === 1) {
+                        modlist[field.name] = values[0];
+                    } else if (values.length > 1){
+                        if (field.join) {
+                            modlist[field.name] = values.join(',');
+                        } else {
+                            modlist[field.name] = values;
+                        }
+                    } else if (param_info['multivalue']){
+                        modlist[field.name] = [];
+                    }
+                } else {
+                    if (values.length) attrs_wo_option[field.name] = values;
+                }
+            }
+        }
+
+        for (var attr in attrs_wo_option) {
+            values = attrs_wo_option[attr];
+            modlist['setattr'].push(attr + '=' + values[0]);
+            for (var k = 1; k < values.length; ++k){
+                modlist['addattr'].push(attr + '=' + values[k]);
+            }
+        }
+
+        var pkey = that.get_primary_key();
+
+        var args = pkey ? [pkey] : [];
+
+        var command = IPA.command({
+            entity: entity_name,
+            method: 'mod',
+            args: args,
+            options: modlist,
+            on_success: on_success,
+            on_error: on_error
+        });
+
+        //alert(JSON.stringify(command.to_json()));
+
+        command.execute();
+    };
+
+    that.refresh = function() {
+
+        that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) ;
+
+        var command = IPA.command({
+            entity: that.entity_name,
+            method: 'show',
+            options: { all: true, rights: true }
+        });
+
+        if (IPA.details_refresh_devel_hook){
+            IPA.details_refresh_devel_hook(that.entity_name,command,that.pkey);
+        }
+
+
+        if (that.pkey){
+            command.args =  [that.pkey];
+        }
+
+        command.on_success = function(data, text_status, xhr) {
+            that.load(data.result.result);
+        };
+
+        command.on_error = function(xhr, text_status, error_thrown) {
+            var details = $('.details', that.container).empty();
+            details.append('<p>Error: '+error_thrown.name+'</p>');
+            details.append('<p>'+error_thrown.title+'</p>');
+            details.append('<p>'+error_thrown.message+'</p>');
+        };
+
+        command.execute();
+    };
+
     that.details_facet_init = that.init;
     that.details_facet_create_content = that.create_content;
     that.details_facet_load = that.load;
@@ -540,122 +663,3 @@ IPA.button = function(spec) {
 
     return button;
 };
-
-IPA.details_refresh = function() {
-
-    var that = this;
-
-    that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) ;
-
-    var command = IPA.command({
-        entity: that.entity_name,
-        method: 'show',
-        options: { all: true, rights: true }
-    });
-    
-    if (IPA.details_refresh_devel_hook){
-        IPA.details_refresh_devel_hook(that.entity_name,command,that.pkey);
-    }
-
-
-    if (that.pkey){
-        command.args =  [that.pkey];
-    }
-
-    command.on_success = function(data, text_status, xhr) {
-        that.load(data.result.result);
-    };
-
-    command.on_error = function(xhr, text_status, error_thrown) {
-        var details = $('.details', that.container).empty();
-        details.append('<p>Error: '+error_thrown.name+'</p>');
-        details.append('<p>'+error_thrown.title+'</p>');
-        details.append('<p>'+error_thrown.message+'</p>');
-    };
-
-    command.execute();
-};
-
-IPA.details_update = function(on_win, on_fail) {
-    var that = this;
-    var entity_name = that.entity_name;
-
-    function on_success(data, text_status, xhr) {
-        if (on_win)
-            on_win(data, text_status, xhr);
-        if (data.error)
-            return;
-
-        var result = data.result.result;
-        that.load(result);
-    }
-
-    function on_error(xhr, text_status, error_thrown) {
-        if (on_fail)
-            on_fail(xhr, text_status, error_thrown);
-    }
-
-    var values;
-    var modlist = {'all': true, 'setattr': [], 'addattr': [], 'rights': true};
-    var attrs_wo_option = {};
-
-    for (var i=0; i<that.sections.length; i++) {
-        var section = that.sections[i];
-
-        if (section.save){
-            section.save(modlist);
-            continue;
-        }
-
-        for (var j=0; j<section.fields.length; j++) {
-            var field = section.fields[j];
-
-            var span = $('span[name='+field.name+']', section.container).first();
-            values = field.save();
-            if (!values) continue;
-
-            var param_info = IPA.get_entity_param(entity_name, field.name);
-            if (param_info) {
-                if (param_info['primary_key']) continue;
-                if (values.length === 1) {
-                    modlist[field.name] = values[0];
-                } else if (values.length > 1){
-                    if (field.join) {
-                        modlist[field.name] = values.join(',');
-                    } else {
-                        modlist[field.name] = values;
-                    }
-                } else if (param_info['multivalue']){
-                    modlist[field.name] = [];
-                }
-            } else {
-                if (values.length) attrs_wo_option[field.name] = values;
-            }
-        }
-    }
-
-    for (var attr in attrs_wo_option) {
-        values = attrs_wo_option[attr];
-        modlist['setattr'].push(attr + '=' + values[0]);
-        for (var k = 1; k < values.length; ++k){
-            modlist['addattr'].push(attr + '=' + values[k]);
-        }
-    }
-
-    var pkey = that.get_primary_key();
-
-    var args = pkey ? [pkey] : [];
-
-    var command = IPA.command({
-        entity: entity_name,
-        method: 'mod',
-        args: args,
-        options: modlist,
-        on_success: on_success,
-        on_error: on_error
-    });
-
-    //alert(JSON.stringify(command.to_json()));
-
-    command.execute();
-};
diff --git a/install/ui/dns.js b/install/ui/dns.js
index 5af6e7a32..bd8d6e185 100644
--- a/install/ui/dns.js
+++ b/install/ui/dns.js
@@ -112,11 +112,7 @@ IPA.records_facet = function (spec){
         return type_select;
     }
 
-
-    var  entry_attrs = {};
-
-
-    function add_click(){
+    that.add = function() {
 
         var dialog = IPA.dialog({
             title: IPA.messages.objects.dnsrecord.add
@@ -194,17 +190,17 @@ IPA.records_facet = function (spec){
         dialog.init();
 
         dialog.open(that.container);
-    }
+    };
 
-    function delete_records(records_table){
+    that.remove = function() {
 
         var zone = $.bbq.getState('dnszone-pkey', true);
 
-        var thead = records_table.find('thead');
+        var thead = that.records_table.find('thead');
         thead.find("INPUT[type='checkbox']").
             attr('checked', false);
 
-        var tbody = records_table.find('tbody');
+        var tbody = that.records_table.find('tbody');
 
         var records = [];
 
@@ -296,7 +292,7 @@ IPA.records_facet = function (spec){
         dialog.init();
 
         dialog.open(that.container);
-    }
+    };
 
     that.is_dirty = function() {
         var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
@@ -304,73 +300,76 @@ IPA.records_facet = function (spec){
         return pkey != that.pkey || record != that.record;
     };
 
-    function create_content(container) {
+    that.create_header = function(container) {
 
-        $('<h1/>',{
-        }).append(IPA.create_network_spinner()).
-            appendTo(container);
+        that.facet_create_header(container);
 
-        var details = $('<div/>', {
-            'name': 'details'
-        }).appendTo(container);
-
-        var div = $('<div class="search-controls"></div>').
-            appendTo(details);
-
-        var control_span =$('<span class="record-filter"></span>').appendTo(div);
-        control_span.append(IPA.messages.objects.dnsrecord.resource);
-        control_span.append($('<input />',{
-            type: "text",
+        $('<input/>', {
+            type: 'text',
             id: 'dns-record-resource-filter',
-            name: 'search-' + that.entity_name + '-filter'
-        }));
+            name: 'filter'
+        }).appendTo(that.controls);
 
         /*
           THe OLD DNS plugin allowed for search based on record type.
           This one does not.  If the plugin gets modified to support
-          Record type searches, uncomment the followin lines and
+          Record type searches, uncomment the following lines and
           adjust the code that modifies the search parameters.
 
-          control_span.append('Type');
+          that.controls.append('Type');
           create_type_select('dns-record-type-filter',true).
-          appendTo(control_span);
+          appendTo(that.controls);
         */
 
-        IPA.button({
-            'label': IPA.messages.buttons.find,
-            'icon': 'ui-icon-search',
-            'click': function(){refresh();}
-        }).appendTo(control_span);
-
+        that.find_button = IPA.button({
+            label: IPA.messages.buttons.find,
+            icon: 'ui-icon-search',
+            click: function(){
+                that.refresh();
+                return false;
+            }
+        }).appendTo(that.controls);
 
-        var buttons =  that.entity_header.buttons;
+        that.controls.append(IPA.create_network_spinner());
 
-        var button = $('input[name=remove]', buttons);
         that.remove_button = IPA.action_button({
             label: IPA.messages.buttons.remove,
             icon: 'ui-icon-trash',
-            click: function(){ delete_records(records_table); }
-        }).appendTo(buttons);
+            click: function() {
+                that.remove();
+                return false;
+            }
+        }).appendTo(that.controls);
 
         that.add_button = IPA.action_button({
             label: IPA.messages.buttons.add,
             icon: 'ui-icon-plus',
-            click: add_click
-        }).appendTo(buttons);
+            click: function() {
+                that.add();
+                return false;
+            }
+        }).appendTo(that.controls);
+    };
+
+    that.create_content = function(container) {
 
-        div.append('<span class="records-buttons"></span>');
+        var details = $('<div/>', {
+            'name': 'details'
+        }).appendTo(container);
+
+        details.append('<span class="records-buttons"></span>');
 
         var records_results = $('<div/>', {
             'class': 'records-results'
         }).appendTo(details);
 
-        var records_table = $('<table/>', {
+        that.records_table = $('<table/>', {
             'class': 'search-table'
         }).appendTo(records_results);
 
-        var thead = $('<thead><tr></tr></thead>').appendTo(records_table);
-        var tbody = $('<tbody></tbody>').appendTo(records_table);
-        var tfoot = $('<tfoot></tfoot>').appendTo(records_table);
+        var thead = $('<thead><tr></tr></thead>').appendTo(that.records_table);
+        var tbody = $('<tbody></tbody>').appendTo(that.records_table);
+        var tfoot = $('<tfoot></tfoot>').appendTo(that.records_table);
 
         var tr = thead.find('tr');
         tr.append($('<th style="width: 15px" />').append(
@@ -386,20 +385,18 @@ IPA.records_facet = function (spec){
          tr.append($('<th>Record Type</th>'));
         tr.append($('<th>Data</th>'));
 
-    }
+    };
 
-    function setup(container){
+    that.setup = function(container) {
 
         that.facet_setup(container);
 
-        that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
         that.record = $.bbq.getState(that.entity_name + '-record', true) || '';
 
-
+        that.pkey = $.bbq.getState(that.entity_name+'-pkey', true) || '';
         $('h1',container).
             html("<span id='headerpkey' />"+IPA.messages.objects.dnsrecord.title+":" + that.pkey);
 
-
         //commented out until data is searchable
         //control_span.append('Data');
         //control_span.append($('<input />',{
@@ -407,12 +404,17 @@ IPA.records_facet = function (spec){
         //    id: 'dns-record-data-filter',
         //    name: 'search-' + obj_name + '-filter'
         //}));
+    };
 
+    that.show = function() {
+        that.facet_show();
 
+        that.pkey = $.bbq.getState(that.entity_name+'-pkey', true) || '';
+        that.entity.header.set_pkey(that.pkey);
 
-        refresh();
-    }
-
+        that.entity.header.back_link.css('visibility', 'visible');
+        that.entity.header.facet_tabs.css('visibility', 'visible');
+    };
 
     function load_on_win(data){
         display(that.entity_name,data);
@@ -423,11 +425,11 @@ IPA.records_facet = function (spec){
     }
 
     function  reload(){
-        refresh();
+        that.refresh();
     }
 
 
-    function  refresh(){
+    that.refresh = function() {
 
         var options = {};
 
@@ -460,7 +462,7 @@ IPA.records_facet = function (spec){
             on_success: load_on_win,
             on_error:load_on_fail
         }).execute();
-    }
+    };
 
 
     function generate_tr(thead, tbody, result){
@@ -518,7 +520,7 @@ IPA.records_facet = function (spec){
 
     //TODO this is cut and pasted from search, we need to unify
     function display(obj_name, data){
-        var selector = '.entity-container[name=' + obj_name + ']';
+        var selector = '.entity[name=' + obj_name + ']';
         var thead = $(selector + ' thead');
         var tbody = $(selector + ' tbody');
         var tfoot = $(selector + ' tfoot');
@@ -545,10 +547,6 @@ IPA.records_facet = function (spec){
 
     }
 
-    that.create_content = create_content;
-    that.setup = setup;
-    that.refresh = refresh;
-
     return that;
 };
 
diff --git a/install/ui/entitle.js b/install/ui/entitle.js
index 193468c2a..513cb6b41 100644
--- a/install/ui/entitle.js
+++ b/install/ui/entitle.js
@@ -260,47 +260,14 @@ IPA.entitle.search_facet = function(spec) {
 
     var that = IPA.search_facet(spec);
 
-    that.setup = function(container) {
+    that.create_header = function(container) {
 
-        that.search_facet_setup(container);
-
-        var buttons = that.entity_header.buttons;
-
-        $('a', buttons).remove();
+        that.facet_create_header(container);
 
         that.register_buttons = $('<span/>', {
             style: 'display: none;'
-        }).appendTo(buttons);
-
-        $('<input/>', {
-            type: 'button',
-            name: 'register_online',
-            value: 'Register'
-        }).appendTo(that.register_buttons);
-
-        $('<input/>', {
-            type: 'button',
-            name: 'register_offline',
-            value: 'Import'
-        }).appendTo(that.register_buttons);
-
-        that.consume_buttons = $('<span/>', {
-            style: 'display: none;'
-        }).appendTo(buttons);
-
-        $('<input/>', {
-            type: 'button',
-            name: 'consume',
-            value: 'Consume'
-        }).appendTo(that.consume_buttons);
-
-        $('<input/>', {
-            type: 'button',
-            name: 'import',
-            value: 'Import'
-        }).appendTo(that.consume_buttons);
+        }).appendTo(that.controls);
 
-        var button = $('input[name=register_online]', that.entity_header.buttons);
         that.register_online_button = IPA.action_button({
             label: 'Register',
             icon: 'ui-icon-plus',
@@ -308,10 +275,8 @@ IPA.entitle.search_facet = function(spec) {
                 var dialog = that.entity.get_dialog('online_registration');
                 dialog.open(that.container);
             }
-        });
-        button.replaceWith(that.register_online_button);
+        }).appendTo(that.register_buttons);
 
-        button = $('input[name=register_offline]', that.entity_header.buttons);
         that.register_offline_button = IPA.action_button({
             label: 'Import',
             icon: 'ui-icon-plus',
@@ -319,10 +284,12 @@ IPA.entitle.search_facet = function(spec) {
                 var dialog = that.entity.get_dialog('offline_registration');
                 dialog.open(that.container);
             }
-        });
-        button.replaceWith(that.register_offline_button);
+        }).appendTo(that.register_buttons);
+
+        that.consume_buttons = $('<span/>', {
+            style: 'display: none;'
+        }).appendTo(that.controls);
 
-        button = $('input[name=consume]', that.entity_header.buttons);
         that.consume_button = IPA.action_button({
             label: 'Consume',
             icon: 'ui-icon-plus',
@@ -331,10 +298,8 @@ IPA.entitle.search_facet = function(spec) {
                 var dialog = that.entity.get_dialog('consume');
                 dialog.open(that.container);
             }
-        });
-        button.replaceWith(that.consume_button);
+        }).appendTo(that.consume_buttons);
 
-        button = $('input[name=import]', that.entity_header.buttons);
         that.import_button = IPA.action_button({
             label: 'Import',
             icon: 'ui-icon-plus',
@@ -343,8 +308,15 @@ IPA.entitle.search_facet = function(spec) {
                 var dialog = that.entity.get_dialog('import');
                 dialog.open(that.container);
             }
-        });
-        button.replaceWith(that.import_button);
+        }).appendTo(that.consume_buttons);
+    };
+
+     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');
     };
 
     that.refresh = function() {
diff --git a/install/ui/entity.js b/install/ui/entity.js
index 161f34e6c..f649833e1 100644
--- a/install/ui/entity.js
+++ b/install/ui/entity.js
@@ -30,16 +30,12 @@ IPA.facet = function (spec) {
     spec = spec || {};
 
     var that = {};
+
     that.display_class = spec.display_class || 'entity-facet';
     that.name = spec.name;
     that.label = spec.label;
     that._entity_name = spec.entity_name;
 
-    that.init = spec.init || init;
-    that.create_content = spec.create_content || create_content;
-    that.setup = spec.setup || setup;
-    that.load = spec.load || load;
-
     that.dialogs = [];
     that.dialogs_by_name = {};
 
@@ -63,29 +59,67 @@ IPA.facet = function (spec) {
         return that;
     };
 
-    function init() {
-
-        that.entity = IPA.get_entity(that.entity_name);
+    that.init = function() {
 
         for (var i=0; i<that.dialogs.length; i++){
             var dialog = that.dialogs[i];
             dialog.entity_name = that._entity_name;
             dialog.init();
         }
-    }
+    };
 
-    function create_content(container) {
-    }
+    that.create = function(container) {
 
-    function setup(container) {
         that.container = container;
-        that.entity_header.facet_tabs.css('visibility','visible');
-        $('#back_to_search', that.entity_header.search_bar).
-            css('display','inline');
-    }
 
-    function load() {
-    }
+        that.header = $('<div/>', {
+            'class': 'facet-header'
+        }).appendTo(container);
+        that.create_header(that.header);
+
+        that.content = $('<div/>', {
+            'class': 'facet-content'
+        }).appendTo(container);
+        that.create_content(that.content);
+    };
+
+    that.create_header = function(container) {
+
+        that.title = $('<div/>', {
+            'class': 'facet-title'
+        }).appendTo(container);
+
+        $('<h1/>').append(IPA.create_network_spinner()).appendTo(that.title);
+
+        that.set_title(container, that.label);
+
+        that.controls = $('<div/>', {
+            'class': 'facet-controls'
+        }).appendTo(container);
+    };
+
+    that.create_content = function(container) {
+    };
+
+    that.set_title = function(container, title) {
+        var element = $('h1', that.title);
+        element.html(title);
+    };
+
+    that.setup = function(container) {
+        that.container = container;
+    };
+
+    that.show = function() {
+        that.container.css('display', 'inline');
+    };
+
+    that.hide = function() {
+        that.container.css('display', 'none');
+    };
+
+    that.load = function() {
+    };
 
     that.is_dirty = function (){
         return false;
@@ -97,12 +131,77 @@ IPA.facet = function (spec) {
 
     // methods that should be invoked by subclasses
     that.facet_init = that.init;
+    that.facet_create_header = that.create_header;
     that.facet_create_content = that.create_content;
     that.facet_setup = that.setup;
+    that.facet_show = that.show;
+    that.facet_hide = that.hide;
 
     return that;
 };
 
+IPA.table_facet = function(spec) {
+
+    spec = spec || {};
+
+    var that = IPA.facet(spec);
+
+    that.columns = [];
+    that.columns_by_name = {};
+
+    that.__defineGetter__('entity_name', function() {
+        return that._entity_name;
+    });
+
+    that.__defineSetter__('entity_name', function(entity_name) {
+        that._entity_name = entity_name;
+
+        for (var i=0; i<that.columns.length; i++) {
+            that.columns[i].entity_name = entity_name;
+        }
+    });
+
+    that.get_columns = function() {
+        return that.columns;
+    };
+
+    that.get_column = function(name) {
+        return that.columns_by_name[name];
+    };
+
+    that.add_column = function(column) {
+        column.entity_name = that.entity_name;
+        that.columns.push(column);
+        that.columns_by_name[column.name] = column;
+    };
+
+    that.create_column = function(spec) {
+        var column = IPA.column(spec);
+        that.add_column(column);
+        return column;
+    };
+
+    that.column = function(spec){
+        that.create_column(spec);
+        return that;
+    };
+
+    var columns = spec.columns || [];
+    for (var i=0; i<columns.length; i++) {
+        var column_spec = columns[i];
+        var column;
+
+        if (column_spec instanceof Object) {
+            var factory = column_spec.factory || IPA.column;
+            column = factory(column_spec);
+        } else {
+            column = IPA.column({ name: column_spec });
+        }
+        that.add_column(column);
+    }
+
+    return that;
+};
 
 IPA.fetch_facet_group = function (name,attribute_member){
     var relationships = IPA.metadata.objects[name].relationships;
@@ -124,7 +223,7 @@ IPA.entity = function (spec) {
     that.name = spec.name;
     that.label = spec.label || spec.metadata.label || spec.name;
 
-    that.setup = spec.setup || IPA.entity_setup;
+    that.header = spec.header || IPA.entity_header({entity: that});
 
     that.dialogs = [];
     that.dialogs_by_name = {};
@@ -199,10 +298,6 @@ IPA.entity = function (spec) {
         return that;
     };
 
-    that.facet = function(facet) {
-        return that.add_facet(facet);
-    };
-
     that.create_association_facet = function(attribute_member, other_entity, label, facet_group) {
 
         var association_name = attribute_member+'_'+other_entity;
@@ -263,55 +358,74 @@ IPA.entity = function (spec) {
 
         for (var i=0; i<that.facets.length; i++) {
             var facet = that.facets[i];
+            facet.entity = that;
             facet.init();
         }
         init_dialogs();
     };
 
-    that.entity_init = that.init;
+    that.create = function(container) {
+        var entity_header = $('<div/>', {
+            'class': 'entity-header'
+        }).appendTo(container);
+        that.header.create(entity_header);
 
-    return that;
-};
+        that.content = $('<div/>', {
+            'class': 'entity-content'
+        }).appendTo(container);
+    };
 
+    that.setup = function(container) {
 
-IPA.current_facet =  function (entity){
-    var facet_name = $.bbq.getState(entity.name + '-facet', true);
-    if (!facet_name && entity.facets.length) {
-        facet_name = entity.facets[0].name;
-    }
-    return facet_name;
-};
+        var prev_facet = that.facet;
+
+        IPA.current_entity = that;
+        var facet_name = IPA.current_facet(that);
 
-IPA.entity_setup = function(container) {
+        that.facet = that.get_facet(facet_name);
+        if (!that.facet) return;
 
-    var entity = this;
+        if (IPA.entity_name == that.name) {
+            if (that.facet_name == that.facet.name) {
+                if (that.facet.new_key && (!that.facet.new_key())) return;
+            } else {
+                that.facet_name = that.facet.name;
+            }
+        } else {
+            IPA.entity_name = that.name;
+        }
 
-    IPA.current_entity = this;
-    var facet_name = IPA.current_facet(entity);
+        if (prev_facet) {
+            prev_facet.hide();
+        }
 
-    var facet = entity.get_facet(facet_name);
-    if (!facet) return;
+        var facet_container = $('.facet[name="'+that.facet.name+'"]', that.content);
+        if (!facet_container.length) {
+            facet_container = $('<div/>', {
+                name: that.facet.name,
+                'class': 'facet'
+            }).appendTo(that.content);
 
-    if (IPA.entity_name == entity.name) {
-        if (entity.facet_name == facet.name) {
-            if (facet.new_key   && (!facet.new_key())) return;
-        } else {
-            entity.facet_name = facet.name;
+            that.facet.create(facet_container);
+            that.facet.setup(facet_container);
         }
-    } else {
-        IPA.entity_name = entity.name;
-    }
 
-    if (!entity.header){
-        entity.header = IPA.entity_header({entity:entity,container:container});
-    }
-    facet.entity_header = entity.header;
+        that.facet.show();
+        that.header.select_tab();
+        that.facet.refresh();
+    };
 
-    entity.header.reset();
-    facet.create_content(facet.entity_header.content);
-    facet.setup(facet.entity_header.content);
-    entity.header.select_tab();
-    facet.refresh();
+    that.entity_init = that.init;
+
+    return that;
+};
+
+IPA.current_facet =  function (entity){
+    var facet_name = $.bbq.getState(entity.name + '-facet', true);
+    if (!facet_name && entity.facets.length) {
+        facet_name = entity.facets[0].name;
+    }
+    return facet_name;
 };
 
 IPA.nested_tab_labels = {};
@@ -383,177 +497,140 @@ IPA.nested_tabs = function(entity_name) {
 IPA.selected_icon = '<span class="ipa-icon">&#x25B6;</span>';
 IPA.back_icon = '<span class="ipa-icon">&#x25C0;</span>';
 
+IPA.entity_header = function(spec) {
 
-IPA.entity_header = function(spec){
-    var entity = spec.entity;
-    var container = spec.container;
+    spec = spec || {};
 
     var that = {};
-    that.entity = entity;
-
-    function pkey(){
-        that.pkey_field = $("<input type='hidden' id='pkey' />");
-        return that.pkey_field;
-    }
+    that.entity = spec.entity;
 
-    function select_tab(){
+    that.select_tab = function() {
         $(that.facet_tabs).find('a').removeClass('selected');
-        var facet_name = $.bbq.getState(entity.name + '-facet', true);
+        var facet_name = $.bbq.getState(that.entity.name + '-facet', true);
 
-        if (!facet_name) return;
-
-        if (facet_name === 'default'){
+        if (!facet_name || facet_name === 'default') {
             that.facet_tabs.find('a:first').addClass('selected');
-        }else{
+        } else {
             that.facet_tabs.find('a#' + facet_name ).addClass('selected');
         }
+    };
 
-    }
-    that.select_tab = select_tab;
-
-    function set_pkey(val){
-        that.pkey_field.val(val);
-        that.title.empty();
-        var title = $('<h3/>',{ text: entity.metadata.label+": "});
-        title.append ($('<span/>',{text:val}));
-        that.title.append(title);
-    }
-    that.set_pkey = set_pkey;
+    that.set_pkey = function(value) {
 
-    function title(){
-        that.title =
-            $("<div/>",
-              {
-                  'class':'entity-title'
-              });
+        if (value) {
+            var span = $('.entity-pkey', that.pkey);
+            span.text(value);
+            that.pkey.css('display', 'inline');
 
-        var title = $('<h3/>',{ text: entity.metadata.label});
-        that.title.append(title);
+        } else {
+            that.pkey.css('display', 'none');
+        }
+    };
 
-        return that.title;
-    }
+    that.facet_link = function(container, other_facet) {
 
-    function buttons(){
-        that.buttons = $("<span class='action-controls' />");
-        return that.buttons;
+        var li = $('<li/>', {
+            title: other_facet.name,
+            click: function() {
+                if (li.hasClass('entity-facet-disabled')) {
+                    return false;
+                }
 
-    }
-    function search_bar(){
-        that.search_bar =
-            $("<span class='entity-search'/>");
-
-        if (entity.facets_by_name.search){
-            that.search_bar.prepend(
-                $('<span />',{
-                    id:'back_to_search',
-                    "class":"input_link",
-                    click: function(){
-                        if($(this).hasClass('entity-facet-disabled')){
-                            return false;
-                        }
+                var pkey = $.bbq.getState(that.entity.name+'-pkey', true);
 
-                        IPA.nav.show_page(entity.name, 'search');
-                        $(that.facet_tabs).find('a').removeClass('selected');
-                        return false;
+                IPA.nav.show_page(that.entity.name, other_facet.name, pkey);
+                $('a', that.facet_tabs).removeClass('selected');
+                $('a', li).addClass('selected');
 
-                    }
-                }).
-                    append(IPA.back_icon + '  ' +
-                           IPA.messages.buttons.back_to_list+' '));
+                return false;
+            }
+        }).appendTo(container);
+
+        $('<a/>', {
+            text: other_facet.label,
+            id: other_facet.name
+        }).appendTo(li);
+    };
+
+    that.facet_group = function(container, label) {
+        var facets = that.entity.facet_groups[label];
+        if (facets) {
+            that.tab_section(container, label, facets);
         }
+    };
 
-        return that.search_bar;
-    }
+    that.tab_section = function(container, label, facets) {
 
-    function facet_link(other_facet){
-        var entity_name = that.entity.name;
-        var other_facet_name = other_facet.name;
-        var li = $('<li/>', {
-            title: other_facet.name,
-            html: $('<a />',{
-                text: other_facet.label,
-                id: other_facet_name
-            }),
-            click: function(entity_name, other_facet_name) {
-                return function() {
-                    if($(this).hasClass('entity-facet-disabled')){
-                        return false;
-                    }
-                    var this_pkey = that.pkey_field.val();
-                    IPA.nav.show_page(
-                        entity_name, other_facet_name,
-                        this_pkey);
-                    $(that.facet_tabs).find('a').removeClass('selected');
-                    $(this).find('a').addClass('selected');
+        var section = $('<span/>', {
+            'class': 'facet-tab-group'
+        }).appendTo(container);
 
-                    return false;
-                };
-            }(entity_name, other_facet_name)
-        });
-        return li;
-    }
+        $('<label/>', {
+            text: label
+        }).appendTo(section);
 
+        var ul = $('<ul/>', {
+            'class': 'facet-tab'
+        }).appendTo(section);
 
-    function facet_group(label){
-        var facets= entity.facet_groups[label];
-        if (facets){
-            that.facet_tabs.append(tab_section(label,  facets));
+        for (var i=0; i<facets.length; i++) {
+            var other_facet = facets[i];
+            that.facet_link(ul, other_facet);
         }
-    }
+    };
 
-    function tab_section(label, facets){
-        var tab_section = $("<span class='entity-tabs-section'/>").
-            append("<label>"+label+"</label>");
+    that.create = function(container) {
 
-        var ul = $("<ul class='entity-tabs'/>").appendTo(tab_section);
+        that.title = $('<div/>', {
+            'class': 'entity-title'
+        }).appendTo(container);
 
-        var i;
-        for (i = 0; i < facets.length; i += 1){
-            var other_facet = facets[i];
-            ul.append(facet_link(other_facet));
-        }
-        return tab_section;
-    }
+        var title_text = $('<h3/>', {
+            text: that.entity.metadata.label
+        }).appendTo(that.title);
 
-    function facet_tabs(){
-        that.facet_tabs =   $("<div class='entity-tabs'/>");
+        that.pkey = $('<span/>').appendTo(title_text);
 
-        facet_group("Member");
+        that.pkey.append(': ');
+        that.pkey.append($('<span/>', {
+            'class': 'entity-pkey'
+        }));
 
-        if (entity.facets_by_name.details){
-            that.facet_tabs.append(
-                tab_section('Settings',[entity.facets_by_name.details]));
-        }
-        facet_group("Member Of");
-        facet_group("Managed by");
+        var search_bar = $('<span/>', {
+            'class': 'entity-search'
+        }).appendTo(container);
 
-        return that.facet_tabs;
-    }
-    function content(){
-        that.content = $("<div class='content'/>");        return that.content;
-    }
+        that.back_link = $('<span/>', {
+            'class': 'back-link',
+            click: function() {
+                if ($(this).hasClass('entity-facet-disabled')) {
+                    return false;
+                }
 
-    function entity_container() {
-        that.entity_container =
-            $('<div/>').
-            append(facet_tabs()).
-            append(content());
-        return that.entity_container;
-    }
+                IPA.nav.show_page(that.entity.name, 'search');
+                $('a', that.facet_tabs).removeClass('selected');
+                return false;
+            }
+        }).appendTo(search_bar);
 
-    function reset(){
-        that.buttons.empty();
-        that.content.empty();
-    }
-    that.reset = reset;
+        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);
+
+        that.facet_group(that.facet_tabs, "Member");
 
-    that.header = $("<div class='entity-header'/>").
-        append(title(entity)).
-        append(buttons()).
-        append(pkey()).
-        append(search_bar()).
-        append(entity_container());
-    container.append(that.header);
+        if (that.entity.facets_by_name.details) {
+            that.facet_tabs.append(
+                that.tab_section(that.facet_tabs, 'Settings', [that.entity.facets_by_name.details]));
+        }
+
+        that.facet_group(that.facet_tabs, "Member Of");
+        that.facet_group(that.facet_tabs, "Managed By");
+    };
 
     return that;
 };
@@ -642,7 +719,7 @@ IPA.entity_builder = function(){
         spec.sections = null;
         spec.entity_name = entity.name;
         facet =IPA.details_facet(spec);
-        entity.facet(facet);
+        entity.add_facet(facet);
 
         var i;
         for ( i =0; i < sections.length; i += 1){
@@ -655,7 +732,7 @@ IPA.entity_builder = function(){
     that.facet = function(spec) {
         spec.entity_name  = entity.name;
         facet = spec.factory(spec);
-        entity.facet(facet);
+        entity.add_facet(facet);
         return that;
     };
 
@@ -665,14 +742,14 @@ IPA.entity_builder = function(){
             search_all: spec.search_all || false,
             columns: spec.columns
         });
-        entity.facet(facet);
+        entity.add_facet(facet);
         return that;
     };
 
 
     that.association_facet = function(spec){
         spec.entity_name = entity.name;
-        entity.facet(IPA.association_facet(spec));
+        entity.add_facet(IPA.association_facet(spec));
         return that;
     };
 
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 9e5625488..002988ba6 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -22,8 +22,9 @@ body{
     margin: 0;
 }
 
-.network-activity-indicator{
-    display:none;
+.network-activity-indicator {
+    visibility: hidden;
+    padding: 5px;
 }
 
 .center-container {
@@ -453,8 +454,7 @@ span.ui-icon-search {
 
 
 [title=">>"] {
-        display: block;
-                margin-top: 1em !important;
+    margin-top: 1em !important;
 }
 
 
@@ -573,13 +573,17 @@ span.main-separator{
 /* Entity */
 
 
-.entity-container 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));
+*/
 }
 
 
@@ -595,13 +599,6 @@ a.action-button-disabled {
     cursor: default;
 }
 
-.content {
-    font-size: 10px;
-    margin-top: 1.4em;
-    float: left;
-    min-width: 70em;
-}
-
 
 /* Search */
 
@@ -728,17 +725,17 @@ dl.modal dd {
     padding-bottom: 0;
     margin-left: 0.8em;
 }
-
+/*
 #dns-record-resource-filter {
-        padding: 0em 1em;
+        padding: 0 1em;
         margin: 0 1em;
 }
 
 #dns-record-type-filter {
         margin: 0 1em 0 0.5em;
 }
-
-.ui-widget-content {
+*/
+.ui-widget-content, #content {
         border:0;
 }
 
@@ -786,8 +783,8 @@ table.scrollable tbody {
 .adder-dialog-buttons {
     position: absolute;
     top: 7.5em;
-    left: 24.4em;
-    right: 25;
+    left: 23em;
+    right: 23em;
     bottom: 0;
     text-align: center;
 }
@@ -818,18 +815,17 @@ table.scrollable tbody {
     padding-right: 1.5em;
 }
 
-div.entity-header {
-    padding: 0px 20px 10px;
+.entity-header {
+    padding: 0 20px 10px;
 }
 
-
-.entity-header h3{
+.entity-header .entity-title {
     text-transform: uppercase;
     color:gray;
     padding-right:5em;
 }
 
-.entity-header h3 span{
+.entity-header .entity-title .entity-pkey {
     color:black;
 }
 
@@ -838,15 +834,24 @@ div.entity-header {
 }
 
 .entity-tabs {
+}
+
+.back-link {
+    cursor: pointer;
+}
+
+.facet-tab {
     list-style-type: none;
-    #margin: 30px 0 0 0;
+    margin: 0;
     padding: 1em 0 0.3em 0;
-    height:  3em;
+    cursor: pointer;
 }
-.entity-tabs li {
+
+.facet-tab li {
     display: inline;
 }
-.entity-tabs li a {
+
+.facet-tab li a {
     color: #42454a;
     background-color: #dedbde;
     border: 1px solid #c9c3ba;
@@ -855,40 +860,55 @@ div.entity-header {
     text-decoration: none;
 }
 
-.entity-tabs li a:hover {
+.facet-tab li a:hover {
     background-color: #f1f0ee;
 }
-.entity-tabs li a.selected {
+.facet-tab li a.selected {
     color: #000;
     background-color: #f1f0ee;
     font-weight: bold;
     padding: 0.7em 0.3em 0.38em 0.3em;
 }
 
-.entity-tabs-section {
+.facet-tab-group {
     float: left;
-    height: 3em;
+/*    height: 3em; */
     display:inline;
     margin-right:1em;
 }
 
 
-ul.entity-tabs li.settings {
+.facet-tab li.settings {
     margin-left:1em;  margin-right:1em;
 }
 
-div.content {
-    padding-top: 1em;
-    margin-top: 1em;
-    width: 100%;
+.entity-content {
+    clear: both;
+    font-size: 10px;
+    padding: 0 20px 10px;
 }
 
-div.content div.content-buttons {
+.entity-content div.content-buttons {
     float: right;
     margin-right: 1.5em;
 
 }
 
-div.content div.content-buttons img {
+.entity-content div.content-buttons img {
     border: 0;
 }
+
+.facet-header {
+    padding: 10px 10px 10px;
+
+    border-color: #C9C3BA;
+    border-style: solid;
+    border-width: 1px;
+
+    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
+    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
+}
+
+.facet-content {
+    margin: 10px 0 0;
+}
\ No newline at end of file
diff --git a/install/ui/ipa.js b/install/ui/ipa.js
index 83b25e509..c21c16ec6 100644
--- a/install/ui/ipa.js
+++ b/install/ui/ipa.js
@@ -126,11 +126,11 @@ var IPA = ( function () {
         batch.execute();
     };
 
-    that.get_entities = function () {
+    that.get_entities = function() {
         return that.entities;
     };
 
-    that.get_entity = function (name) {
+    that.get_entity = function(name) {
         return that.entities_by_name[name];
     };
 
@@ -139,6 +139,17 @@ var IPA = ( function () {
         that.entities_by_name[entity.name] = entity;
     };
 
+    that.remove_entity = function(name) {
+        for (var i=0; i<that.entities.length; i++) {
+            var entity = that.entities[i];
+            if (name == entity.name) {
+                that.entities.splice(i, 1);
+                break;
+            }
+        }
+        delete that.entities_by_name[entity.name];
+    };
+
     that.start_entities = function() {
         var factory;
         var name;
@@ -187,14 +198,14 @@ var IPA = ( function () {
 
     that.display_activity_icon = function() {
         that.network_call_count++;
-        $('.network-activity-indicator').css('display','inline');
+        $('.network-activity-indicator').css('visibility', 'visible');
     };
 
     that.hide_activity_icon = function() {
         that.network_call_count--;
 
         if (0 === that.network_call_count) {
-            $('.network-activity-indicator').css('display','none');
+            $('.network-activity-indicator').css('visibility', 'hidden');
         }
     };
 
@@ -316,6 +327,7 @@ IPA.command = function(spec) {
             }
 
             if (xhr.status === 401) {
+                error_thrown = {}; // error_thrown is string
                 error_thrown.name = 'Kerberos ticket no longer valid.';
                 if (IPA.messages && IPA.messages.ajax) {
                     error_thrown.message = IPA.messages.ajax["401"];
diff --git a/install/ui/navigation.js b/install/ui/navigation.js
index de42ef2ab..2fd3e513f 100644
--- a/install/ui/navigation.js
+++ b/install/ui/navigation.js
@@ -136,7 +136,7 @@ IPA.navigation = function(spec) {
         for (var i=0; i<tabs.length; i++) {
             var tab = tabs[i];
             var tab_id = parent_id+'-'+i;
-            var label = tab.name;
+
             if (tab.entity) {
                 var entity = IPA.get_entity(tab.entity);
                 if (!entity){
@@ -144,17 +144,17 @@ IPA.navigation = function(spec) {
                     i--;
                     continue;
                 }
-                label = entity.label;
                 tab.entity = entity;
             }
-            if (tab.label){
-                label = tab.label;
+
+            if (!tab.label) {
+                tab.label = entity.label;
             }
 
             $('<li/>').append($('<a/>', {
                 href: '#'+tab_id,
-                title: label,
-                html: label
+                title: tab.label,
+                html: tab.label
             })).appendTo(ul);
 
             tab.container = $('<div/>', {
@@ -164,19 +164,12 @@ IPA.navigation = function(spec) {
 
             if (tab.children && tab.children.length) {
                 that._create(tab.children, tab.container, depth+1);
-
-            } else if (tab.entity) {
-                tab.content = $('<div/>', {
-                    name: tab.name,
-                    title: label,
-                    'class': 'entity-container'
-                }).appendTo(that.content);
             }
         }
     };
 
     that.update = function() {
-        $('.entity-container', that.content).css('display', 'none');
+        $('.entity', that.content).css('display', 'none');
         that._update(that.tabs, that.container, 1);
     };
 
@@ -197,7 +190,17 @@ IPA.navigation = function(spec) {
             that._update(tab.children, tab.container, depth+1);
 
         } else if (tab.entity) {
-            $('.entity-container[name="'+tab.entity.name+'"]', that.content).css('display', 'inline');
+            var entity_container = $('.entity[name="'+tab.entity.name+'"]', that.content);
+            if (!entity_container.length) {
+                tab.content = $('<div/>', {
+                    name: tab.name,
+                    title: tab.label,
+                    'class': 'entity'
+                }).appendTo(that.content);
+                tab.entity.create(tab.content);
+            }
+
+            entity_container.css('display', 'inline');
             tab.entity.setup(tab.content);
         }
     };
diff --git a/install/ui/search.js b/install/ui/search.js
index 2add6f4c2..c63bf3cdf 100644
--- a/install/ui/search.js
+++ b/install/ui/search.js
@@ -24,136 +24,19 @@
 
 /* REQUIRES: ipa.js */
 
-IPA.search_widget = function (spec) {
-
-    spec = spec || {};
-
-    var that = IPA.table_widget(spec);
-
-    that.entity_name = spec.entity_name;
-    that.search_all = spec.search_all || false;
-
-    that.create = function(container) {
-
-        var search_controls = $('<div/>', {
-            'class': 'search-controls'
-        }).appendTo(container);
-
-        var search_filter = $('<span/>', {
-            'class': 'search-filter',
-            'name': 'search-filter'
-        }).appendTo(search_controls);
-
-        search_controls.append(IPA.create_network_spinner());
-
-        that.filter = $('<input/>', {
-            'type': 'text',
-            'name': 'search-' + that.entity_name + '-filter'
-        }).appendTo(search_filter);
-
-        $('<input/>', {
-            'type': 'button',
-            'name': 'find',
-            'value': IPA.messages.buttons.find
-        }).appendTo(search_filter);
-
-        $('<div/>', {
-            'class': 'search-results'
-        }).appendTo(container);
-
-        that.table_create(container);
-    };
-
-    that.setup = function(container) {
-
-        that.table_setup(container);
-
-        var search_filter = $('span[name=search-filter]', that.container);
-
-        $('input[type=text]',search_filter).keypress(
-            function(e) {
-                /* if the key pressed is the enter key */
-                if (e.which == 13) {
-                    that.find();
-                }
-            });
-        var button = $('input[name=find]', search_filter);
-        that.find_button = IPA.button({
-            'label': IPA.messages.buttons.find,
-            'icon': 'ui-icon-search',
-            'click': function() {
-                that.find();
-            }
-        });
-        button.replaceWith(that.find_button);
-
-        var filter = $.bbq.getState(that.entity_name + '-filter', true) || '';
-        that.filter.val(filter);
-    };
-
-    that.find = function() {
-        var filter = that.filter.val();
-        var state = {};
-        state[that.entity_name + '-filter'] = filter;
-        IPA.nav.push_state(state);
-    };
-
-    return that;
-};
-
 IPA.search_facet = function(spec) {
 
     spec = spec || {};
 
     spec.name = spec.name || 'search';
-    spec.label = spec.label ||  IPA.messages.facets.search;
+    spec.label = spec.label || IPA.messages.facets.search;
 
     spec.display_class = 'search-facet';
 
-    var that = IPA.facet(spec);
+    var that = IPA.table_facet(spec);
 
-    that.entity_name = spec.entity_name;
-    that.columns = [];
-    that.columns_by_name = {};
     that.search_all = spec.search_all || false;
 
-    that.__defineGetter__('entity_name', function() {
-        return that._entity_name;
-    });
-
-    that.__defineSetter__('entity_name', function(entity_name) {
-        that._entity_name = entity_name;
-
-        for (var i=0; i<that.columns.length; i++) {
-            that.columns[i].entity_name = entity_name;
-        }
-    });
-
-    that.get_columns = function() {
-        return that.columns;
-    };
-
-    that.get_column = function(name) {
-        return that.columns_by_name[name];
-    };
-
-    that.add_column = function(column) {
-        column.entity_name = that.entity_name;
-        that.columns.push(column);
-        that.columns_by_name[column.name] = column;
-    };
-
-    that.create_column = function(spec) {
-        var column = IPA.column(spec);
-        that.add_column(column);
-        return column;
-    };
-
-    that.column = function(spec){
-        that.create_column(spec);
-        return that;
-    };
-
     that.setup_column = function(column) {
         column.setup = function(container, record) {
             container.empty();
@@ -178,7 +61,7 @@ IPA.search_facet = function(spec) {
 
         that.facet_init();
 
-        that.table = IPA.search_widget({
+        that.table = IPA.table_widget({
             id: that.entity_name+'-search',
             name: 'search',
             label: IPA.metadata.objects[that.entity_name].label,
@@ -211,85 +94,84 @@ IPA.search_facet = function(spec) {
 
     };
 
-    that.create_content = function(container) {
+    that.create_header = function(container) {
 
-        var span = $('<span/>', { 'name': 'search' }).appendTo(container);
+        that.facet_create_header(container);
 
-        that.table.create(span);
-    };
+        that.filter = $('<input/>', {
+            type: 'text',
+            name: 'filter'
+        }).appendTo(that.controls);
 
-    that.setup = function(container) {
+        that.filter.keypress(function(e) {
+            /* if the key pressed is the enter key */
+            if (e.which == 13) {
+                that.find();
+            }
+        });
 
-        that.facet_setup(container);
+        that.find_button = IPA.button({
+            label: IPA.messages.buttons.find,
+            icon: 'ui-icon-search',
+            click: function() {
+                that.find();
+                return false;
+            }
+        }).appendTo(that.controls);
 
-        that.entity_header.title.empty();
-        that.entity_header.title.append(
-            $('<h3/>',{
-                text:that.entity.metadata.label
-            }));
+        that.controls.append(IPA.create_network_spinner());
 
-        that.entity_header.facet_tabs.css('visibility','hidden');
-        $('#back_to_search', that.entity_header.search_bar).
-            css('display','none');
+        that.remove_button = IPA.action_button({
+            label: IPA.messages.buttons.remove,
+            icon: 'ui-icon-trash',
+            'class': 'input_link_disabled',
+            click: function() {
+                if (that.remove_button.hasClass('input_link_disabled')) return false;
+                that.remove();
+                return false;
+            }
+        }).appendTo(that.controls);
 
+        that.add_button = IPA.action_button({
+            label: IPA.messages.buttons.add,
+            icon: 'ui-icon-plus',
+            click: function() {
+                that.add();
+                return false;
+            }
+        }).appendTo(that.controls);
+    };
 
-        var buttons =  that.entity_header.buttons;
+    that.create_content = function(container) {
 
-        $('<input/>', {
-            'type': 'button',
-            'name': 'remove',
-            'value': IPA.messages.buttons.remove
-        }).appendTo(buttons);
+        var span = $('<span/>', { 'name': 'search' }).appendTo(container);
 
-        $('<input/>', {
-            'type': 'button',
-            'name': 'add',
-            'value': IPA.messages.buttons.add
-        }).appendTo(buttons);
+        that.table.create(span);
+        that.table.setup(span);
+    };
 
+    that.setup = function(container) {
 
-        var span = $('span[name=search]', that.container);
-        that.table.setup(span);
+        that.facet_setup(container);
+    };
 
-        var search_buttons =   that.entity_header.buttons;
+    that.show = function() {
+        that.facet_show();
 
-        var button = $('input[name=remove]', search_buttons);
-        that.remove_button = IPA.action_button({
-            'label': IPA.messages.buttons.remove,
-            'icon': 'ui-icon-trash',
-            'click': function() {
-                if (that.remove_button.hasClass('input_link_disabled')) return;
-                that.remove();
-            }
-        });
-        button.replaceWith(that.remove_button);
-        that.remove_button.addClass('input_link_disabled');
+        that.entity.header.set_pkey(null);
+        that.entity.header.back_link.css('visibility', 'hidden');
+        that.entity.header.facet_tabs.css('visibility', 'hidden');
 
-        button = $('input[name=add]', search_buttons);
-        that.add_button = IPA.action_button({
-            'label': IPA.messages.buttons.add,
-            'icon': 'ui-icon-plus',
-            'click': function() { that.add(); }
-        });
-        button.replaceWith(that.add_button);
+        if (that.filter) {
+            var filter = $.bbq.getState(that.entity_name + '-filter', true) || '';
+            that.filter.val(filter);
+        }
     };
 
     that.select_changed = function() {
 
         var values = that.table.get_selected_values();
 
-        var links = $('li', that.entity_header.tabs);
-        var input = $('input[id=pkey]', that.entity_header.buttons);
-
-        if (values.length == 1) {
-            links.removeClass('entity-facet-disabled');
-            input.val(values[0]);
-
-        } else {
-            links.addClass('entity-facet-disabled');
-            input.val(null);
-        }
-
         if (values.length === 0) {
             that.remove_button.addClass('input_link_disabled');
 
@@ -354,12 +236,17 @@ IPA.search_facet = function(spec) {
         dialog.open(that.container);
     };
 
+    that.find = function() {
+        var filter = that.filter.val();
+        var state = {};
+        state[that.entity_name + '-filter'] = filter;
+        IPA.nav.push_state(state);
+    };
+
     that.refresh = function() {
 
         function on_success(data, text_status, xhr) {
 
-            $("input id=[pkey]", that.entity_header.buttons).val(null);
-
             that.table.empty();
 
             var result = data.result.result;
@@ -387,12 +274,12 @@ IPA.search_facet = function(spec) {
             summary.append('<p>'+error_thrown.message+'</p>');
         }
 
-        that.filter = $.bbq.getState(that.entity_name + '-filter', true) || '';
+        var filter = $.bbq.getState(that.entity_name + '-filter', true) || '';
 
         var command = IPA.command({
             entity: that.entity_name,
             method: 'find',
-            args: [that.filter],
+            args: [filter],
             options: {
                 all: that.search_all
             },
@@ -408,19 +295,5 @@ IPA.search_facet = function(spec) {
     that.search_facet_create_content = that.create_content;
     that.search_facet_setup = that.setup;
 
-    var columns = spec.columns || [];
-    for (var i=0; i<columns.length; i++) {
-        var column_spec = columns[i];
-        var column;
-
-        if (column_spec instanceof Object) {
-            var factory = column_spec.factory || IPA.column;
-            column = factory(column_spec);
-        } else {
-            column = IPA.column({ name: column_spec });
-        }
-        that.add_column(column);
-    }
-
     return that;
 };
diff --git a/install/ui/test/data/i18n_messages.json b/install/ui/test/data/i18n_messages.json
index cca68b945..f40cba0ed 100644
--- a/install/ui/test/data/i18n_messages.json
+++ b/install/ui/test/data/i18n_messages.json
@@ -37,7 +37,7 @@
             "details": {
                 "general": "General",
                 "identity": "Identity Settings",
-                "settings": "${entity} Settings",
+                "settings": "${entity} ${primary_key} Settings",
                 "to_top": "Back to Top"
             },
             "dialogs": {
diff --git a/install/ui/test/data/ipa_init.json b/install/ui/test/data/ipa_init.json
index 5ce4d4c8e..a5c7d951f 100644
--- a/install/ui/test/data/ipa_init.json
+++ b/install/ui/test/data/ipa_init.json
@@ -9986,7 +9986,7 @@
                     "details": {
                         "general": "General",
                         "identity": "Identity Settings",
-                        "settings": "${entity} Settings",
+                        "settings": "${entity} ${primary_key} Settings",
                         "to_top": "Back to Top"
                     },
                     "dialogs": {
diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js
index a79a194e4..2715b4eac 100644
--- a/install/ui/test/details_tests.js
+++ b/install/ui/test/details_tests.js
@@ -150,10 +150,6 @@ test("Testing details lifecycle: create, setup, load.", function(){
         load_called = true;
     }
 
-    var container = details_container;
-
-    var obj_name = 'user';
-
     function test_widget(){
         var widget = IPA.widget({name: 'cn'});
 
@@ -195,35 +191,38 @@ test("Testing details lifecycle: create, setup, load.", function(){
                    {factory: IPA.multivalued_text_widget, name:'mobile'},
                    {factory: IPA.multivalued_text_widget,
                     name:'facsimiletelephonenumber'}]
-            },
+            }
         ]}).build();
     entity.init();
 
-    var facet = entity.get_facet('details');
-    facet.init();
+    var entity_container = $('<div/>', {
+        name: 'user',
+        title: 'User',
+        'class': 'entity'
+    }).appendTo(entities_container);
 
-    var container = $('<div/>', {
-        'class': 'content'
-    }).appendTo(container);
+    entity.create(entity_container);
 
+    var facet = entity.get_facet('details');
 
-    entity.header = IPA.entity_header({entity:entity,container:container});
-    facet.entity_header = entity.header;
-    entity.header.reset();
-    facet.create_content(facet.entity_header.content);
-    facet.setup(facet.entity_header.content);
+    var facet_container = $('<div/>', {
+        name: facet.name,
+        'class': 'facet'
+    });
 
+    facet.create(facet_container);
+    facet.setup(facet_container);
 
     facet.load(result);
 
-    var contact = container.find('dl#contact.entryattrs');
+    var contact = facet_container.find('dl#contact.entryattrs');
 
     ok(
         contact,
         'dl tag for contact is created'
     );
 
-    var identity = container.find('dl#identity.entryattrs');
+    var identity = facet_container.find('dl#identity.entryattrs');
 
     ok(
         identity,
@@ -237,7 +236,7 @@ test("Testing details lifecycle: create, setup, load.", function(){
         'Checking dt tags for identity'
     );
 
-    container.attr('id','user');
+    facet_container.attr('id','user');
 
     ok (
         setup_called,
diff --git a/install/ui/test/entity_tests.js b/install/ui/test/entity_tests.js
index 471658235..c258976f8 100644
--- a/install/ui/test/entity_tests.js
+++ b/install/ui/test/entity_tests.js
@@ -61,7 +61,6 @@ test('Testing IPA.entity_set_search_definition().', function() {
         return true;
     };
 
-
     var entity =   IPA.
         entity_builder().
         entity('user').
@@ -70,16 +69,23 @@ test('Testing IPA.entity_set_search_definition().', function() {
         build();
     entity.init();
 
-    var facet = entity.get_facet('search');
-    facet.init();
+    var entity_container = $('<div/>', {
+        name: 'user',
+        title: 'User',
+        'class': 'entity'
+    }).appendTo(entities_container);
 
-    var container = $("<div/>");
+    entity.create(entity_container);
+
+    var facet = entity.get_facet('search');
 
-    entity.header = IPA.entity_header({entity:entity,container:container});
-    facet.entity_header = entity.header;
-    facet.create_content(facet.entity_header.content);
-    facet.setup(facet.entity_header.content);
+    var facet_container = $('<div/>', {
+        name: facet.name,
+        'class': 'facet'
+    });
 
+    facet.create(facet_container);
+    facet.setup(facet_container);
 
     var column = facet.get_columns()[0];
     ok(
diff --git a/ipalib/plugins/internal.py b/ipalib/plugins/internal.py
index 30aa5eb0d..c15b104f4 100644
--- a/ipalib/plugins/internal.py
+++ b/ipalib/plugins/internal.py
@@ -354,8 +354,8 @@ class i18n_messages(Command):
             },
         "details":{
             "general":_("General"),
-            "settings":_("${entity} Settings"),
             "identity":_("Identity Settings"),
+            "settings":_("${entity} ${primary_key} Settings"),
             "to_top":_("Back to Top")
             },
         "tabs": {
-- 
cgit