Use ui-select for index pattern selector by lukasolson · Pull Request #10144 · elastic/kibana

lukasolson · 2017-02-01T23:21:08Z

Closes #7091.

This PR uses the ui-select component for the index pattern selector. This addresses the problem when there is a long list of index patterns that pushes the field list all the way down and makes it simpler to select a new index pattern by allowing the user to quickly filter to the desired pattern.

tbragin · 2017-02-21T04:28:58Z

@lukasolson I like this. Is there any work remaining on this? It's marked as "in progress".
@Bargs @weltenwort Thoughts?

@cjcenizal Any reason we couldn't use the same control for selecting metrics in Visualize, which is another big pain point for users with 1000s of fields in an index? #2130

weltenwort · 2017-02-21T15:10:53Z

I'm all in favor of auto-completion. There might be some additional aspects to consider though:

Does it decrease accessibility compared to a normal drop-down?
Can the design be adapted to match the previous style or the kui framework style?

cjcenizal

This is BOMB! Much better UI and UX. How many index patterns can be displayed at one time?

Re @weltenwort's questions, this probably does decrease accessibility somewhat, but we already don't have a solid accessibility baseline to work from. So I think we can address this as part of our accessibility initiative. In terms of style, I'm OK with the way the looks for now.

Before

After

cjcenizal · 2017-02-22T22:24:05Z

src/core_plugins/kibana/public/discover/index.html

      <div class="col-md-2 sidebar-container collapsible-sidebar">
        <disc-field-chooser
          columns="state.columns"
-          refresh="refreshFieldList"


Out of curiosity, why was this removed?

It wasn't being used anywhere.

alexfrancoeur · 2017-03-21T15:24:43Z

@lukasolson can we expect this to be merged for 5.4? also, how re-usable is this component? Is it something @thomasneirynck or @ppisljar could possibly use for #2130?

xycloud · 2017-03-22T01:59:32Z

did this feature will be integrated in 5.3?

ppisljar · 2017-03-22T12:12:10Z

@alexfrancoeur should be an low hanging fruit once this is merged

thomasneirynck · 2017-03-22T14:06:46Z

@ppisljar I actually experimented with this ui-select a little earlier yesterday. Tap me for details.

alexfrancoeur · 2017-03-23T13:11:14Z

@xycloud this feature will unfortunately not make 5.3, but we are trying to get it in as soon as possible!

alexfrancoeur · 2017-03-27T14:23:49Z

@lukasolson I'm not sure how much control we have over the UI at the moment but the recommended UI/UX from design can be found here. Let's sync when you're back to discuss our options

cjcenizal · 2017-03-27T17:48:09Z

@lukasolson @alexfrancoeur Please feel free to involve me in this conversation, so I can help answer questions around implementation.

alexfrancoeur · 2017-03-28T12:46:15Z

@cjcenizal makes sense. I believe @lukasolson has a component in mind already for re-use. Please sync with him on the current component and see if we can make any modifications in the short term that are closer to @snide's design.

lukasolson · 2017-03-29T15:48:48Z

I just need to get a corresponding PR to remove some code duplication from X-Pack as a result of moving this component into core Kibana, then get the build passing, then this should be good to go. Hoping to get it done early today.

lukasolson · 2017-03-29T23:03:09Z

jenkins test it

lukasolson · 2017-03-29T23:55:54Z

@Bargs and @ppisljar could you take a quick look? Thanks!

alexfrancoeur · 2017-03-30T17:34:16Z

@lukasolson LGTM. I'd be interested in seeing how this behaves with a large number of index patterns. I don't have any environment where that's the case though.

Bargs

❤️❤️❤️ This is fantastic

Left one idea inline, and I have one other minor nit: can we increase the max height of the select box? While the search is perfect when you know what you're looking for, the small size of the box will hurt the scan-ability of the list when browsing.

Bargs · 2017-03-30T22:09:36Z

src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html

+        {{$select.selected}}
+      </ui-select-match>
+      <ui-select-choices repeat="id in indexPatternList | filter:$select.search | orderBy">
+        <div ng-bind-html="id"></div>


I tried enabling the highlighting feature and I kinda dig it, what do you think?

I just changed this line to: <div ng-bind-html="id | highlight: $select.search"></div>

yesss @Bargs I dig it!

@Bargs I'm not quite sure I understand your comment about increasing the max-height. Do you mean of the select input, or the options list, or what? Also, I've added the highlighting, good call. :)

I mean the options list is too small on my giant screen. I wanna see more options at once! For instance I probably shouldn't need to scroll in the screenshot below:

Premature merge?? :(

@Bargs Ahh, I see what you're saying. Do you think we should increase the max height for all ui-select components or just this one for now?

Also, sorry about the premature merge, I forgot about this last item and got a couple of other LGTMs so I got trigger happy.

Haha no worries. I think maybe just this one should be taller, since it might be dependent on where the select box shows up on the page? I'm not sure, I guess I'd have to see how it looks in other areas where it might be used.

ppisljar

LGTM

lukasolson · 2017-03-31T16:56:35Z

jenkins test it

* Replace index pattern selector with ui-select * Show index patterns in alphabetical order * Add highlighting to select

lukasolson · 2017-03-31T18:38:54Z

Backported to 5.x (5.4) in 5620116.

Replace index pattern selector with ui-select

b46d1c3

lukasolson added the WIP Work in progress label Feb 1, 2017

lukasolson self-assigned this Feb 1, 2017

tbragin added the :Discovery label Feb 2, 2017

tbragin added the Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. label Feb 21, 2017

cjcenizal approved these changes Feb 22, 2017

View reviewed changes

lukasolson added 3 commits March 1, 2017 09:24

Merge branch 'master' into index-pattern-selector

2aefbe5

Merge branch 'master' into index-pattern-selector

d4289df

Merge branch 'master' into index-pattern-selector

6998765

Bargs mentioned this pull request Mar 21, 2017

add typeahead for select-index in discover page #10781

Closed

alexfrancoeur mentioned this pull request Mar 27, 2017

Better select box #2130

Closed

Merge branch 'master' into index-pattern-selector

090677f

lukasolson added v5.4.0 v6.0.0 labels Mar 29, 2017

Show index patterns in alphabetical order

b0f8268

lukasolson added review and removed WIP Work in progress labels Mar 29, 2017

lukasolson requested a review from Bargs March 29, 2017 23:55

lukasolson requested a review from ppisljar March 29, 2017 23:55

Bargs reviewed Mar 30, 2017

View reviewed changes

lukasolson added 2 commits March 30, 2017 16:18

Add highlighting to select

9584db1

Merge branch 'master' into index-pattern-selector

bfdb902

lukasolson mentioned this pull request Mar 31, 2017

Search bar drop-down for managing filters #10976

Closed

10 tasks

ppisljar approved these changes Mar 31, 2017

View reviewed changes

lukasolson merged commit d15f52c into elastic:master Mar 31, 2017

lukasolson added a commit that referenced this pull request Mar 31, 2017

Use ui-select for index pattern selector (#10144)

5620116

* Replace index pattern selector with ui-select * Show index patterns in alphabetical order * Add highlighting to select

alexfrancoeur mentioned this pull request Apr 3, 2017

using ui-select for field selection in visualize #10998

Merged

marius-dr mentioned this pull request May 1, 2017

TSVB error in Kibana logs when setting invalid pattern #11544

Closed

lukasolson deleted the index-pattern-selector branch March 27, 2018 21:08

Conversation

lukasolson commented Feb 1, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tbragin commented Feb 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

weltenwort commented Feb 21, 2017

Uh oh!

cjcenizal left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexfrancoeur commented Mar 21, 2017

Uh oh!

xycloud commented Mar 22, 2017

Uh oh!

ppisljar commented Mar 22, 2017

Uh oh!

thomasneirynck commented Mar 22, 2017

Uh oh!

alexfrancoeur commented Mar 23, 2017

Uh oh!

alexfrancoeur commented Mar 27, 2017

Uh oh!

cjcenizal commented Mar 27, 2017

Uh oh!

alexfrancoeur commented Mar 28, 2017

Uh oh!

lukasolson commented Mar 29, 2017

Uh oh!

lukasolson commented Mar 29, 2017

Uh oh!

lukasolson commented Mar 29, 2017

Uh oh!

alexfrancoeur commented Mar 30, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Bargs left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ppisljar left a comment

Choose a reason for hiding this comment

Uh oh!

lukasolson commented Mar 31, 2017

Uh oh!

lukasolson commented Mar 31, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

lukasolson commented Feb 1, 2017 •

edited

Loading

tbragin commented Feb 21, 2017 •

edited

Loading

cjcenizal left a comment •

edited

Loading

alexfrancoeur commented Mar 30, 2017 •

edited

Loading