Feature: Query builder component

[marshmalien]

Query builder / Advanced search tool

Feature request to add a component that builds advanced filter queries. Queries could be made of groupings, joins, conditions, and different operators. There is an area in our application that allows advanced users to create a custom filter string. A contrived example would be if the user wanted to search for users in a specific group, they could write create a filter: (name=foo and group=bar) or (name=baz and group=foobar). Our workaround is to provide the user with a text input and allow them manually type out the query, but a query builder component would provide a higher level of discoverability and better overall user experience.

List of features:

• Add, edit, and delete query rules and groups
• Select operators (AND, OR)
• Filterable list of keys (name, id, type, etc)
• Support the creation of new keys if they don't exist
• Support for different types of field values (string, number, dates, etc)
• Ability to select from a list of filter conditions (contains, exact, istartswith)
• Provide a "preview" or "summary" view of the query

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? Feature

What is your product and what release version are you targeting? Tower

cc @trahman73

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[mcarrano]

@marshmalien @trahman73 Looks like this request had gotten lost in the pile. Sorry about that. Is this still something you need for Tower?

There is a similar issue that I am working on now (https://github.com/patternfly/patternfly-design/issues/771). Here are some proposed designs: https://marvelapp.com/prototype/276i4086/screen/75508504 This does not have all of the features that you list, but might serve as a starting point. Let me know your thoughts.

[mcarrano]

I will be revisiting this issue as we have recently received multiple requests for this type of functionality. My research has uncovered some fairly common patterns for a visual query builder that relies on form-based input. Here are some links:

https://www.lightningdesignsystem.com/components/expression/ https://dribbble.com/tags/query_builder http://ui-patterns.com/patterns/rule-builder

@marshmalien @trahman73 is this the type of thing you had in mind when you opened this issue? We are currently working on a composable Search input that I think could lay the groundwork for building something like this.

[trahman73]

@mcarrano Yes, the examples are pretty much what we had in mind with the requested functionality. The composable search input sounds like a nice approach to achieve this.

[nicolethoen]

I agree! :)

[mcarrano]

Here is a preliminary design for a PatternFly visual query-builder: https://marvelapp.com/prototype/68j18e3. This is largely modeled after the Lightening Design expression builder component here: https://www.lightningdesignsystem.com/components/expression/

Comments and feedback are welcome.

[kuklas]

Hi, I was working on putting together a condition builder for Policies in Insights: https://marvelapp.com/prototype/74h9j8g/screen/80778309. Just an observation that I came across a case where the condition starts with an operator "NOT" (for example: not facts.yum_repos = "Red Hat Satellite Tools 6.5 (for RHEL 6 Server) (RPMs).enabled") So I was trying to fit an optionable operator in front of the condition, and also between groups of conditions. @mcarrano

[nicolethoen]

This should be possible - and would be an doosy of a form to build, even as a demo. But I like it! I believe the intricacies of turning the form into a valid query string to be displayed in the input would be the hardest part.

[lboehling]

Here is a link to the latest designs: https://marvelapp.com/prototype/6c42d7d

[lboehling]

Here is the latest round of designs for query builder: https://marvelapp.com/prototype/6c42d7d. I've focused on the actual component here and will provide more in-context/usage examples once we've agreed on these designs.

Please review and let me know what you think!

FYI @mcarrano @mturley

[mcarrano]

@lboehling In general, I think this is looking great. I did have a bit of a hard time differentiating between adding a criteria, a nested group, and a new condition. I think I see the difference but might be difficult for users to grasp. It might make sense to work through some actual queries and see how one would construct them.

The only thing that is potentially missing for me is any mention of how I could apply a previously saved set of rules to my new query. Maybe that's an option when you are adding a new criteria?

[srambach]

@lboehling Logic wise, I think your options are solid. I don't think you need "or any" because you could do that by putting each into a separate "or all" condition. a OR ANY(b, c, d) would be like a OR ALL b OR ALL c OR ALL d Saying "and none" is a little different from the example we looked at, which was "and not," but I think you can still create the same queries using separate criteria: a AND NONE of these are true (b,c,d) would be like a AND NONE of these are true (b OR c OR d) which equals a AND NONE OF b AND NONE OF c AND NONE OF d which you could make with multiple conditions. Nice job!

[lboehling]

Updated UI designs can be found here: https://marvelapp.com/prototype/6c42d7d

Based on reviews, we have decided to go with a progressive disclosure approach to the query builder. Here is a clickable prototype to better show the progressive disclosure interaction.

I'll add another comment to this issue once I add the in-context examples and flows.

[lboehling]

I updated the specs based on feedback from the last design share: https://marvelapp.com/prototype/6c42d7d. I also added in the in-context examples, and linked the flows that Margot has been working on :)