Search bar drop-down for managing filters

[lukasolson]

This PR is a work-in-progress. I'm putting this PR up early-ish to get feedback about the design/functionality of this feature before we really clean up the code and get it merged. Think of this as more of a prototype at this stage.

Relies on #10144.

This PR adds a drop-down to the side of the search bar which, when clicked, shows the list of filters you've created and allows you to manage them, including the ability to add new filters. The list of fields/values have suggestions which are pulled in from your actual data, making it simple to add filters without having to scour your data to find the right field/value.

Attempts to address #5249.

To do:

• Support for other "filter" types
  • Range (support for all combinations of lt, lte, gte, gt)
  • Geo bounding box
  • Script
  • Custom (JSON)
• Support for use on dashboard
• Refactor code (it's pretty hideous right now, since this was hacked together as a prototype)
• Tests
  • Unit
  • Functional

[lukasolson]

@tbragin @alexfrancoeur @cjcenizal @snide @alt74 I'd love to hear your feedback about what we should change/add to this. This could definitely be something we could add sooner than the larger ongoing search experience effort.

[snide]

@Bargs sounds good to me. 👍

[lukasolson]

@alexfrancoeur Right, the PR is just a prototype for now, not ready for testing as I'm sure it has lots of bugs :)

[snide]

Hotfix design as discussed with @Bargs, @cjcenizal, @alexfrancoeur and @lukasolson today. Moves all the weird, tiny hover states out of the pills and moves them to the dropdown so everything is accessible in one place and a lot more clear.

In the design below I'd apply the following.

1. Only show the individual filter controls (pin, invert, toggle, delete) on hover for the filter row.
2. Show any active controls on the filter in its none hover state ("Currently pinned across pages"...etc).
3. If more than a certain number of filters, or as space limits, the "Currently filtering your search against" text should just say "22 filters" rather than spell them each out. Clicking on this area should also just open the dropdown as well.

Longterm plan we agree to get filters into the actual query bar with proper autocomplete.

[alexfrancoeur]

@snide This looks like a great "hotfix" mockup based on our discussion yesterday. I have a few comments and questions.

• Is there any way to differentiate the rows a bit more? As you scroll through the filters it's hard to determine if the action text is associated with the filter above or below it.
• I see there is an "apply to all" action configuration at the bottom. What are your thoughts on adding checkboxes with a select all option? It'd be nice to say select 5 / 10 filters you just added and bulk pin them.
• @Bargs @lukasolson if we remove the pills, we'll need to add a way to add custom filters. This could be as easy as adding a "add custom" button to the top. There would just need to be the appropriate edit options.

• Is this dropdown a fixed height or does it grow?

[Akaren13]

Hi, can I use this in Kibana 5.4 version? It would be so useful!

[snide]

@alexfrancoeur Good points. I'll adjust.

[lukasolson]

@snide @cjcenizal @alexfrancoeur @Bargs Just had another thought and wanted to get opinions... What if we did something like this:

And when you clicked on the filter, it expanded like this:

And the cursor would be placed inside the value, so you could quickly type to filter the suggested values.

Thoughts?

[lukasolson]

@Akaren13 This won't make it into 5.4, but we're hoping to get it in 5.5.

[snide]

@lukasolson The reason I'd like to avoid the pills are...

1. They are heavy. It falls apart as soon as you have more than a couple.
2. I'd rather people don't create filters in one place, then edit them in another. Better to have all the actions contained in one area so they go to the same place for all their filter management.

[tbragin]

I worry about removing the pills in a minor version. Pills are used extensively on dashboards for quick enable / disable actions (almost like poor-man's input controls). Now user will have to go into a separate menu for that action. The whole goal of trying to get this into 5.x as opposed to 6.0 was to not change the UX considerably. If we are changing the UX, I'd suggest putting this into 6.0. I'd also like to have a live chat where I show the team how the current pills in the filter bar are typically used in the context of the dashboard.

cc: @alexfrancoeur @snide @cjcenizal @lukasolson

[cjcenizal]

@tbragin Thanks, that would be useful!

This is the most recent design:

We could always support a click action on the filters which will let the user enable and disable them without having to go through the dropdown. Would this address your concern?

[lukasolson]

@cjcenizal Would you still rather have it so that you don't have to actually "apply" the filters? (i.e. they automatically apply as you add/remove/modify/pin/etc. them?)

[xycloud]

how can we use and/or in the filter?

[lukasolson]

@xycloud That's not really something this PR attempts to address, although basic "OR" will be supported (when you want to search where the value in a specific field is something OR another thing).

[lukasolson]

Replaced by #11375.

[konglgu04]

@lukasolson it is nice，where i can find the fix for kibana5.6.3，thanks.

[lukasolson]

@konglgu04 See #11375 for what actually went into Kibana.