Primary-detail view with responsive table

Author: Jenn Giardino | Last edit: May 06, 2023 | Design type: Side drawer, Tables | Product area: Kafka

Overview

The PatternFly demo for a primary-detail view shows how to combine a list of items with a drawer that displays details for the selected item. But this demo does not illustrate how to implement this pattern with a table view. 

The examples below illustrate how the managed Kafka service created a responsive table view that could be used with an inline drawer for providing details for the selected Kafka instance. 

Note that these examples are not possible without some customization.  

Background

There were a few factors that led to the creation of a responsive table:

• After the initial implementation of UI for the managed Kafka service, there was a UX assessment where the recommendation from designers, including PatternFly designers, was to use an inline drawer (vs overlay) for the primary-detail view
• The PatternFly table component is responsive but only relative to the browser window. This means that if the content area containing the table view becomes smaller, such as by opening an inline drawer, then the table is not responsive resulting in layout issues.
• In addition to displaying a drawer as part of primary-detail layout pattern, the service also included a getting started quick start that resulted in an additional resizable, inline drawer to display.

The most effective way to solve this layout problem was to implement a custom table view that was aware of the available content area, and show or hide columns depending on the space available. This responsive behavior is similar to how the PatternFly table is responsive to the browser window, but instead this responsive behavior was being triggered by the content area.  

Layout overview

The next examples show both the main page with the table view but also the resource-level view, because the drawer that displays as part of the main page is also available in the resource-level page. 

Main page

The main page is the page that list all resources provisioned in the service. The layout implemented for the main page included the following components:

• Page header - Displays the service name along with a service description (the example below also shows a set of tabs)
• Responsive table view with filtering - Displays a list of resources. 
  • Clicking on a table row opens the drawer
  • Clicking on a link in the name column navigates to the Resource page  
• Resource details drawer - Displays additional details for the selected resource in the table. This drawer is accessible by either clicking the row or selecting the Details option in the actions menu.

Resource page

The resource page is the page that displays when the user clicks the name of a resource in the table view. The layout implemented for the resource page includes the following sections:

• Page header - Displays the name of the resource, an actions menu for the selected resource, and tabs if needed. 
• Content area - Displays contents for the selected resource.
• Resource details drawer - Displays additional details for the selected resource. This is the same drawer that displays in the main page.

Depending on the service, it's possible that there could be a hierarchical relationship among resources, where the main page lists the primary resources provisioned in the service, but each primary resource could have children resources that also have a resource page. This means that the content area could also include a primary-detail view, as shown for the Consumer groups tab. 

Responsive table view

The responsive table view is designed to show or hide columns depending on the available width for displaying the table.

Given the possibility that not all columns are visible with this responsive behavior, this type of table view requires the following:

• Column sequence should be determined by relative priority - The most important columns should display first, followed by the least important columns. 
  • There is one exception to this rule. Given that contents on both the left and right edges are more visually prominent than the contents in the middle, the last column is reserved for the Status column, and it is always visible.
  • The column that includes the “More options” actions menu is also always visible.
• All properties still need to be accessible - A details drawer displays all properties for the selected resource. For example, if only the name and status are visible for a resource, the user can see all other properties in the drawer.

When the content area is wider, more columns display in the table view.

But as the content area becomes more narrow, columns will start to disappear.

Resource details drawer

The purpose of the drawer is to provide a way to see all properties for a given resource.

There are 2 pages where the drawer is available:

• The main page with the table view
  • Clicking a row in the table view opens the drawer
  • Selecting an option—Details or Connection—in the kebab dropdown menu in the table row
• The resource page that provides additional contents for the selected resource
  • Selecting an option—Details or Connection—in the Actions dropdown menu in the page header

Given that the same drawer displays on both the main page and the resource page, the drawer height is always the height of the page component. This is only the case for the parent resource, where the parent resource details drawer could display in both the main page and the resource page, and having consistent presentation is important. For children resources that use the primary-detail view, the drawer is the height of the table as shown for Consumer groups.

Depending on the resource, the drawer can include other contents besides properties. Refer to the following links for more details and examples:

• suggested guidelines for general information architecture and layout  [this document is WIP]
• Connection panel for Kafka instances
• Sample code for Kafka instances

Resource actions menu

The following actions display in the resource action menu and open the drawer. 

• Details - Opens the drawer with the Details tab automatically selected. 
• Connection - Opens the drawer with the Connection tab automatically selected. 

Even though there is also a tab for Sample code, there isn't an option to automatically open the drawer with that tab selected. The Details option displays as a way to access all properties available for a resource. The Connections tab displays because this provides information that is necessary for using the resource. The Sample code contents however are more informational/helpful. 

Columns and resource properties

The following are properties that can display in the table view or details drawer. 

• Sequence - The order that properties are listed below are the recommended order that they should display in the table and details drawer.
• Inconsistent labels - Some of the labels provided below are not shown in the examples above. These are labels that are recommended following discussions with content team members, and had not been updated in the examples above yet.
• Missing properties - The Kafka details drawer also includes a section of properties that displays in the drawer and precedes the properties listed below. These properties provide details about the operating capacity of the resource, and display first as they are considered more important than the other properties.