search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.71k stars 8.13k forks source link

Lens Table - Add Option To use Remaining Space #133586

Closed aqua-nerd closed 7 months ago

aqua-nerd commented 2 years ago

Kibana version: 8.2.2 Elasticsearch version: 8.2.2 Browser version: any Browser OS version: any Original install method (e.g. download page, yum, from source, etc.): docker Describe the bug:

Creating a table in lens and adding it as a panel on a dashboard, there is a large empty area underneath the table which makes the panel look like it has a black box underneath it.

Resizing the panel is not clean, panel sizing controls are not fine enough, switching between edit and view mode the panels change in size slightly, the black box will be slightly bigger when in edit mode and will shrink a little bit when going back to view. Constant battle to try and get the panels to look good for the users. Steps to reproduce:

  1. Create Lens table
  2. Put on dashboard and play with sizing of panel
  3. Black box underneath that wont go away

Expected behavior: Cleaner looking panels, better panel sizing controls Screenshots (if relevant): Capture

Errors in browser console (if relevant):

Provide logs and/or server output (if relevant):

Any additional context:

elasticmachine commented 2 years ago

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

elasticmachine commented 2 years ago

Pinging @elastic/kibana-presentation (Team:Presentation)

stratoula commented 2 years ago

I don't feel that this is a bug, it is how the dashboard panels work. @ThomThomson wdyt?

ThomThomson commented 2 years ago

Yeah I wouldn't consider this a bug, it's also just a bit of a particularity with tables in that each row is a set size instead of expanding to fill available space like a chart would.

aqua-nerd commented 2 years ago

But it makes the dashboards look horrible!

ThomThomson commented 2 years ago

I agree that it can really change the dashboard's look in an unflattering way! This isn't fixable on the dashboard side, as all panels are sized the same way and we can't really add an exception just for Lens tables.

I will send this back to the visEditors team with an enhancement label, and the knowledge that what we usually suggest in this case is that the visualization should take up 100% of the view height of its container.

If that doesn't make sense to do with a table visualization type, they can close this issue, but I can imagine an option stretch rows to fill height which would make each row a flex child that expands to take up the remaining space in the panel. Again, this might not be feasible on their side either!

flash1293 commented 2 years ago

At some point the Kibana datatable was filling the available space with empty rows like this:

Screenshot 2022-06-17 at 09 05 58

@chandlerprall I vaguely remember we discussed something like this for datagrid as well - having a repeating background which looks like the cell borders. This would also help to keep the display stable during fast scrolling. What do you think>?

chandlerprall commented 2 years ago

@flash1293 we've explored this quite a bit on the design side and ultimately decided on using a light grey background for the empty space https://github.com/elastic/eui/pull/5562

I don't think we'd want to change this presentation globally on behalf of the lens app, but you could render additional rows yourself with custom css to turn off their vertical borders or override the background css with a repeating line. Though as a user this might be confusing if it looks too much like there should be data present that isn't rendered.