Filter editors #11375
Filter editors #11375
Conversation
|
Looks like a good start, I ran into some bugs though. I wasn't able to create a filter that matches a value, the console was spitting out the following error: It would be cool if the field input was focused as soon as you click "Add a filter" so that the entire filter creation process can be keyboard driven. In fact, that thought led me to another one. What if instead of three individual dropdowns the form was a single input, a mini version of dave's original mockup? It might not even require a modal, you could possibly edit the filter directly inline. It would begin to teach users how to use the query language we ultimately want to replace the lucene query syntax with. It would also give us a way to experiment with syntax for different filter types in a low risk way (because the saved searches would still contain the filter objects, not the query strings, a change to the syntax wouldn't break backwards compatibility). And last of all the parsing and autocomplete code would all be reusable in kuery. Maybe it's a silly idea and there are issues I'm not thinking of, but it just hit me and I got excited. |
|
@lukasolson and I chatted about the above idea some more yesterday afternoon and we're thinking it's not precluded by the current approach in this PR. If we eventually want to make the filter editor a single input, these drop downs are a less complicated step in that direction. Just to elaborate more on what I was talking about, I threw together the below mockup. Forgive the quality, I basically just hacked together pieces from this PR and Dave's mockup.
As I mentioned before, the modal might not be necessary at all in this scenario. Possibly the filter pill itself could be editable. On existing filters the field, operator, and value would be clickable, similar to http://documentcloud.github.io/visualsearch/ |
| </div> | ||
|
|
||
| <div | ||
| class="kuiFieldGroup kuiVerticalRhythm" |
There was a problem hiding this comment.
If we add kuiFieldGroup--alignTop here, then each field will align to the top even if one of them is taller than the others.
| ></filter-operator-select> | ||
| </div> | ||
|
|
||
| <div class="kuiFieldGroupSection kuiFieldGroupSection--wide kuiColumn kuiColumn--4"> |
There was a problem hiding this comment.
Can we remove the kuiColumn and kuiColumn--4 classes from all of these kuiFieldGroupSection elements? And then create a new class called filterEditor__wideField and apply it to this last section?
The visual result will be that this last section will get a little extra room, and the others won't take up more than they need to:
The new CSS would be:
.filterEditor__wideField {
overflow: hidden;
}There was a problem hiding this comment.
I tried this out but it looks like the suggestions don't get shown since the overflow is hidden... Did I do something wrong?
There was a problem hiding this comment.
Sorry, I missed that originally! Instead of overflow: hidden ,min-width: 0 will work.
.filterEditor__wideField {
min-width: 0;
}There was a problem hiding this comment.
Cool, looks good! What do you think?
|
@lukasolson I had a quick sync with @Bargs today on two items. Neither of which are blockers for this PR but I thought It'd be worth commenting on. The first, is that I find it a bit of an awkward experience presenting a hover of a hand for an input box if you cannot click into it for a list of fields. This is a minor styling thing but makes me feel as if I'm doing something wrong. If the field value is analyzed, it'd be good to remove the hand on hover and treat it as a text input.
When speaking with Matt I had also mentioned that I imagined users wanting a "contains" and "does not contain" capability soon after implementing this. He informed me that this is possible with using "is" or "is not" if the field has been analyzed. Matt had suggested that in a future PR, we do not separate the normal field values from the analyzed field values and add "contains" to the menu. If a user chooses "contains" we simply filter on the field value that has been analyzed. If they choose "is" we filter on the non-analyzed field value and provide a drop down. Again, not expected for this PR but I wanted to +1 the concept and maybe link to this comment in a future PR 😄 |
|
|
* Add terms filter * First stab at inline filter editors * Cleanup * Move endpoint to server * Add delete button to filter editor * Add sort prefix first utility * Sort ui-select items by prefix first * Add sortPrefixFirst tests * Use small text input instead of styles * More keyboard-driven filter creation * Add custom dsl edit support * Add more actions * Add alias support * Simplify label * Allow freeform entries * Fix visualize * Support for dashboard * Move styles to less and fix visual issues * Rename map_match to map_phrase * Detect scripted filters for filter editors * Simplify range map * Use match_phrase instead of terms * Fix scripted exists * Support scripted phrases * Don't show DSL editor for new filters * Disable save unless valid * Fix error when searching for numbers * Return correct error and dont suggest values for numbers * Only suggest filterable fields * Clear params on field change * Clear suggestions on field change * Cache response * Preserve selected params * Fix multiple selection * Don't overflow on multiselect * Show tooltip on long values * Use different input for different types * Show all actions again * Move dsl editor to directive * Update filter query dsl editor * Clean up code * Move filter field select into own directive * Move filter operator select into own directive * Move utils to separate file * Move field options to field directive * Move operator options to operator directive * Move params under operator type * Move params editor into own directive * Move param editors to own directives * Don't highlight values * Don't use unnecessary onChange * Use text input if no suggestions * Remove unused updateFilter * Enhance params editors Move params editors to separate file and present different editors based on field type * Update save filter api * Update save filter api * Fix a couple tests * Fix more tests * Fix map phrase test * test cleanup * Hide editor on esc key * Use first index pattern if none specified * FilterEditorUtils test and fix range error * fix date phrase * Date format should allow date math values * Only show add filter button if there are index patterns * Look up field from indexPatterns service rather than passed index patterns * Use basepath instead of relative path * Feedback from bargs * Don't show filter bar when ya shouldnt * don't reload panel saved objects * Show date math instead of formatted date * Focus on params even when not ui-select * Hide editor on delete * Update styles to BEM format * Update styles * Add more tests * Don't show pin/disable * Fix bug where saving a filter edit without making changes messed up pinning * Update styles to camelcase * Fix cutoff from top of screen for ui-select * Add accessibility * Align to top * Align inputs and add placeholders * Dynamic input sizing * Fix dashboard panel test
* Add terms filter * First stab at inline filter editors * Cleanup * Move endpoint to server * Add delete button to filter editor * Add sort prefix first utility * Sort ui-select items by prefix first * Add sortPrefixFirst tests * Use small text input instead of styles * More keyboard-driven filter creation * Add custom dsl edit support * Add more actions * Add alias support * Simplify label * Allow freeform entries * Fix visualize * Support for dashboard * Move styles to less and fix visual issues * Rename map_match to map_phrase * Detect scripted filters for filter editors * Simplify range map * Use match_phrase instead of terms * Fix scripted exists * Support scripted phrases * Don't show DSL editor for new filters * Disable save unless valid * Fix error when searching for numbers * Return correct error and dont suggest values for numbers * Only suggest filterable fields * Clear params on field change * Clear suggestions on field change * Cache response * Preserve selected params * Fix multiple selection * Don't overflow on multiselect * Show tooltip on long values * Use different input for different types * Show all actions again * Move dsl editor to directive * Update filter query dsl editor * Clean up code * Move filter field select into own directive * Move filter operator select into own directive * Move utils to separate file * Move field options to field directive * Move operator options to operator directive * Move params under operator type * Move params editor into own directive * Move param editors to own directives * Don't highlight values * Don't use unnecessary onChange * Use text input if no suggestions * Remove unused updateFilter * Enhance params editors Move params editors to separate file and present different editors based on field type * Update save filter api * Update save filter api * Fix a couple tests * Fix more tests * Fix map phrase test * test cleanup * Hide editor on esc key * Use first index pattern if none specified * FilterEditorUtils test and fix range error * fix date phrase * Date format should allow date math values * Only show add filter button if there are index patterns * Look up field from indexPatterns service rather than passed index patterns * Use basepath instead of relative path * Feedback from bargs * Don't show filter bar when ya shouldnt * don't reload panel saved objects * Show date math instead of formatted date * Focus on params even when not ui-select * Hide editor on delete * Update styles to BEM format * Update styles * Add more tests * Don't show pin/disable * Fix bug where saving a filter edit without making changes messed up pinning * Update styles to camelcase * Fix cutoff from top of screen for ui-select * Add accessibility * Align to top * Align inputs and add placeholders * Dynamic input sizing * Fix dashboard panel test
This PR adds more helpful editors to filters. Instead of a simple JSON editor, you get drop-downs with autocomplete based on your actual data.
Summary: We've added more helpful input controls for editing filters. When you edit a filter, you'll get drop-downs and text boxes with suggestions from your data instead of just a JSON editor. We've also added the ability to add custom filters without having to click on a visualization.
Closes #5249.