[APM] Local filters: Add sidebar navigation containing local filters

[formgeist]

Summary

Original APM UI Dedicated filters Google Doc

We're introduced a dedicated global filter for service.environment in APM UI in a previous release. A global filter (like time and search) is considered to persist through all the views. Local filters are related to specific sections and/or views (like services, transactions and metrics). These filters can be considered as common ways to narrow down the results the user is looking at.

Motivation

• The user wants to be able to get a clear overview of the commonly used and available filters to quickly narrow down their data in view.
• Additionally we introduced a transaction type filter in 6.6 and we want to replace and expand on this type of local filter and add its own dedicated space and one that will be used for all views in the UI.

Solution

Add sidebar component that holds the local filters for all involved views. Each filter can invoke a popover filter which enables the user to search and select/deselect the options they choose for each filter. Some filters only contain single selection options (i.e. transaction type). The design document describes the filters and their selection options for Phase 1.

Technical implications

• Local filters will not persist between pages. This is contrary to global filters which will be persisted.
• Selecting a local filter will affect other local filters, and thus filter the values they suggest
• Applying different filters, eg. host and pod will act as AND so only results containing both will be displayed
• Selecting multiple values from the same filter will act as OR so will show results that match any of the selected values

Tasks

• Add sidebar component to the general layout of each views.
• Populate sidebar filters as per the design document for phase 1.
• Clicking on a filter, invokes a filter popover with the available filter options for each filter per the dataset displayed.
• The user can optionally search the available options within the popover.
• Display the selected options below each filter section as EuiBadge with the option to remove.
• If any filter option is selected in each of the filters, a global clear filters button will appear at the bottom of the filters block.

Design

Links

👉 Marvel prototype
👉 Codesandbox: Filter component style

---

Responsive layout

[elasticmachine]

Pinging @elastic/apm-ui

[formgeist]

@elastic/apm-ui I've updated the description to contain the latest updated design proposal with the popover filter and description of its functionality.

[formgeist]

Due to engineering bandwidth, we're postponing this to the next release. I estimate a fairly large amount of implementation and testing needs to happen for this be feature-ready.

[formgeist]

@elastic/apm-ui I've updated the description with updated screens, after we've gone through some design revisiting this week. Here's a short list of changes;

• We've decided to move the sidebar to the right of the content. This was preferred especially on tall screens like the transaction detail view, where we'd otherwise see the content oddly centered because of the reserved space on the left.
• Minor changes like not showing the already selected values in the popover, since having 4+ selected values would otherwise hide the unselected values.
• Minor style changes

[formgeist]

@dgieselaar I attempted to recreate the component in a Codesandbox, as I wasn't sure it was entirely clear which EUI components that it was made up of. Hopefully that can help at least in the styling.

[dgieselaar]

Thanks Casper, super helpful 🙌

[formgeist]

Also updated the description with the responsive layouts for smaller screens that I prepared. These are not must-haves, but at least shows the intent with how the filters should work on the smallest breakpoint.