Faceted Search for Asset Management

[r4zr32d3k1l]

Hi EUI Team,
I’m reaching out to discuss the faceted search feature for the asset management page.

Problem description
Users in Elastic Security need the ability to quickly filter assets across categories (e.g., Hosts, Software, Kubernetes, Databases) to identify critical resources. The goal is to streamline this process, making it both fast and intuitive. Additionally, we want to ensure this pattern is reusable on other pages, such as Alerts, Rules, and Findings, thereby improving the overall user experience. We’re also incorporating a "saved view" feature, allowing users to save their filtered views for future use.

What we need
We’ve reviewed the existing EUI components, but it seems none fully meet the requirements for faceted search. We need your input on:

• Are there any EUI components that we can repurpose for this feature?
• Some components, like EuiFacetGroup, may need to be adjusted to fit the requirements, such as supporting a top-level select or second-level navigation.
• If no existing components work and we can't adjust then, we may need to explore custom components that align with current EUI design patterns.

Next steps
Once we determine the appropriate components (or adjustments to existing ones), we can move forward with the design implementation and ensure it aligns with the overall experience.

You can check out the mockups here: Figma Mockups
Here’s the prototype to review the interaction: Figma Prototype

Looking forward to your feedback!

[ryankeairns]

At the top level, it does look like EuiFacet / EuiFacetGroup meet the design. What is not supported is having nested groups...

From design

From EUI

[ek-so]

I quickly tried current left nav layout right here, and it also seems like a quite close pattern 🤔 (although, we're getting rid of accordions now and moving towards "grouping patterns" (a la slack))

Which leads me to a thought that maybe we could really enhance our facet group to be that flexible, and be a sort of a middle ground between filtering and navigation (page-specific of course).

Also, smth to take a look at — Laura's work on discover resources

[r4zr32d3k1l]

Thanks for the helpful input.

I’ve explored both of the proposed approaches.
EuiFacetGroup seem to work best for our use case.
The other suggestion, while promising in some areas, doesn’t quite align with our needs. Specifically, it uses 12px and 11px font sizes, which feel too small by today's standards and don't provide the desired visual clarity.

I think we're leaning toward enhancing the existing facet components to support additional flexibility (e.g., top-level selects or grouped filters), as this approach aligns well with our intended interaction model and ensures consistency with the rest of the UI.