[Lens] Data panel styling#39589
Conversation
flash1293
changed the title
|
Jenkins, test this |
💔 Build Failed |
|
@ryankeairns Another one for you if you have time :) |
💔 Build Failed |
💚 Build Succeeded |
wylieconlon
left a comment
wylieconlon
left a comment
There was a problem hiding this comment.
I haven't done a thorough review yet but I'm finding that this basically crashes my browser when I switch to the metricbeat index pattern which has thousands of fields. Also, the field list is not scrollable when the list is too long.
| button={ | ||
| <EuiButtonIcon | ||
| aria-label="Switch to datasource" | ||
| title="Switch to datasource" |
| >; | ||
|
|
||
| function sortFields(fieldA: IndexPatternField, fieldB: IndexPatternField) { | ||
| return fieldA.name.toLowerCase() < fieldB.name.toLowerCase() ? -1 : 1; |
There was a problem hiding this comment.
I've been preferring String.localeCompare for this because lowercase is not the same in all languages: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
Good point @wylieconlon I didn't test with long field lists. We could probably use virtualized scrolling here, I will try to add this tomorrow. |
|
@wylieconlon I looked into this a bit further and it seems like there is not really a viable way around using a lib like react-virtualize. Even with the completely unstyled list switching to the metricbeat index pattern takes 1-2s on a macbook. The old visualize editor uses combo box everywhere which does the same thing under the hood. I will continue working on this, if you or @chrisdavies want to take this PR over that's also fine for me. |
💚 Build Succeeded |
|
Closing this as it's bundled into #40787 |
3 participants
Depends on #39587
This PR styles the data panel like in the POC and adds type filters and search bar.
The style of search/filter is consistent with dashboard add panel
If there are no index patterns, a warning is shown.
Long field names wrap on dots