Skip to content

[Discover] EuiDataGrid Implementation#67259

Merged
kertal merged 272 commits intoelastic:masterfrom
kertal:kertal-pr-2020-04-25-discover-data-grid
Dec 23, 2020
Merged

[Discover] EuiDataGrid Implementation#67259
kertal merged 272 commits intoelastic:masterfrom
kertal:kertal-pr-2020-04-25-discover-data-grid

Conversation

@kertal
Copy link
Copy Markdown
Member

@kertal kertal commented May 25, 2020

Summary

Continuation of #51531 🔥 integrating EuiDataGrid implementation in Discover including the saved search embeddable.

You need to enable it in Stack Monitoring / Advanced Settings by setting Use legacy table to Off

Bildschirmfoto 2020-12-07 um 17 09 09

When you navigate to Discover you should see the EuiDataGrid in Action

Bildschirmfoto 2020-12-07 um 17 14 15

You can sort columns now with drag and drop

image

View the grid in full screen mode
image

Enjoy a much better way to change sorting

image

Expand documents in a flyout

image

You can resize one or multiple column, this is persisted in the saved search saved object and when you embed a saved search in a dashboard the width

Resolves #737
Resolves #38982
Resolves #8706
Resolved #4436

Known bugs and issues

  • EuiDataGrid - Wrong columns assigned to leadColumns (PR), so cell actions are displayed e.g. in the expand section of grid
  • EuiDataGrid Display sort arrow next in header column [EuiDataGrid] Add sorting icon if the column is sorted eui#4343 (comment)
  • EuiDataGrid - Cell actions spacing the Safari (issue)
  • EuiDataGrid - Resize handler overlapping header menu button at the rightmost column (issue)
  • EuiDataGrid - Cell actions need 2 clicks in Firefox and Safari on MacOS (issue)
  • EuiDataGrid - Cellpopover stays open even underlying data changes (issue)

Follow ups

Checklist

@kertal kertal self-assigned this May 25, 2020
@kertal kertal added the Feature:Discover Discover Application label May 25, 2020
@kertal
Copy link
Copy Markdown
Member Author

kertal commented May 27, 2020

FYI: @myasonik & @snide

@kertal
Copy link
Copy Markdown
Member Author

kertal commented Dec 18, 2020

@cchaos thanks a log for your adaptations!

Things I can't

Any unchecked items in @snide's list and:

  1. Similar to Dave's comments about the JSON blobs, I tried adding isCopyable to that EuiCodeBlock but it wasn't taking. It'd be a great improvement since select all doesn't scope to just the popover.

this seems like an bug with combining EuiPopover and the Codeblock? Since it seems to be rendered when the page is resized?

image

Maybe we should offer this functionality by an EuiDataGrid improvement?

  1. The empty message only mentions time, but you can get into a situation where the table is empty because of the filters you've applied. It'd be great to update this message to be more generic or include a mention of filters, or better yet, KNOW it's because of filter.
    https://share.getcloudapp.com/DOuombBx

I do agree that we should mention it, and later on we could make it intelligent.
Dear @gchaps could you have a look at the wording to prevent my "denglish"? thx

  1. If you have the details flyout open, and click Inspect in the menu bar, the inspect flyout is underneath the details.

I see! I this flyout needs to ownFocus, to prevent that, right?

  1. Why can you filter for values in some cells but not others, even though in the details flyout you can filter for them? https://share.getcloudapp.com/12uK0XdP

Thx, already fixed it, part of the next push

  1. The Toggle column button in the details flyout says "Toggle" but it doesn't ever remove it. https://share.getcloudapp.com/p9urX0Dm

Thx, yes. So this is tricky, didn't work in the legacy grid, but since every time one of this actions was executed, the legacy "flyout" closed. It's a bit complicated here, this doc viewer is module that can also contain angular, so it's rendered differently, and that seems to be the cause here. So we've got 3 choices here

1 ) open an issue for it, target in a separate PR
2) Also close the flyout when filter are added, rows are toggled
3) keep on debugging

  1. Why can the date column never be "hidden"?

Yes, this is legacy behavior, it's to stay compatible with the old grid, but yes, we could think of making it possible later on, I think we should. It has a bit improved though, you can move the date column now, and it can't be duplicated, small wins here, big win later

  1. Similar to Dave's question about the products field showing up as -. There are other fields that also show up as - like _score but then also show a popover with just -. https://share.getcloudapp.com/jkuYm9z7 Is it possible to know if that's the only content and remove the extra action of showing the content in a popover?

dear @chandlerprall, can I do this? don't make a cell expandable dependent on the content?

@kertal
Copy link
Copy Markdown
Member Author

kertal commented Dec 18, 2020

Some notes.

  • We need to fix the spacing in the blob view. Right now there are no margins to the left of the blocks.
  • Selected state of rows needs emphasis

you took care of that, right @cchaos

  • We should add a toast or something to signify the actions in the flyouts happened. Since they are hidden behind.

Or we make them function like the legacy one, close the flyout, would also prevent a problem with toggling of columns

  • Products field is rendering empty in the grid, but shows in the flyout.

Muchas gracias, fixed that

  • In general, I think we need a schema to recognize JSON blobs, and apply that schema from EUI (for syntax highlighting in the popout)
  • We can set the height for the chart header so that there's not a jump as you hide the chart. (this is because the select form has a larger height)

Dankeschön for taking care of it

  • I would increase the default pagination to more than 25 results. It should be as high as we feel comfortable.

Will be done when virtualization, I'm comfortable with 5000000 then

about the geo field schema, so it should be handled like a JSON or differently? thx

@snide
Copy link
Copy Markdown
Contributor

snide commented Dec 18, 2020

@kertal did some more styling. We have some Amsterdam specific changes that we'll need to make (that shouldn't hold up this PR) after the break.

I'd still like to highlight the row selected if possible. Think you can pass me a className on the cells for the selected row? That way I can give it some emphasis once it's been expanded.

Other small thing I noticed in here (and can wait) is that we really need to replace the doc viewer table that shows in the expanded flyout to use an EuiTable. Right now it's using Bootstrap, and we're looking to remove that next minor.

Copy link
Copy Markdown
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great. There are some small leftover issues from design, but they can all be handled by later PRs. All the big stuff is covered. When we get closer to a release, we should make a more prominent switch (maybe a one time toast?) to let people toggle the new view, that way they don't need to dig into adv. settings.

There's likely nearly ten people on this PR on the EUI or Kibana side. Really nice job by everyone. Good to merge!

@kertal kertal merged commit a417690 into elastic:master Dec 23, 2020
majagrubic pushed a commit that referenced this pull request Dec 23, 2020
Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co>
Co-authored-by: Marta Bondyra <marta.bondyra@elastic.co>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>
Co-authored-by: cchaos <caroline.horn@elastic.co>

Co-authored-by: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co>
Co-authored-by: Marta Bondyra <marta.bondyra@elastic.co>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>
Co-authored-by: cchaos <caroline.horn@elastic.co>
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Apr 20, 2021

💔 Build Failed

Failed CI Steps

Metrics [docs]

‼️ ERROR: no builds found for mergeBase sha [a98550b]

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature:Discover Discover Application release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v7.12.0 v8.0.0

Projects

None yet