[Dashboard][Research] Refactor Grid and Layout Systems

[clintandrewhall]

Summary of Exploration or Proposed Change

In the 8.x timeframe, the dashboard app should move away from react grid layout as its layout engine, and towards a custom system which allows for greater flexibility and customizability for users while retaining the ease of use and structured 'website-like' layouts dashboard is currently known for.

Problems with React Grid Layout

• minimal support for responsiveness: e.g. each device size needs to be configured separately. Currently there is only one 'mobile view' configured which just stacks all panels. vertically.
• Unable to drag panels between two grid instances. This makes collapsable sections far less intuitive than it should be
• Dated UI

Findings

From my research, it seems like creating a custom layout engine based on CSS flexbox, and utilizing existing EUI components to handle the styling and some functionality is the correct way forward.

Inspiration
These following links could be put together to form a robust, simple, and flexible layout system for dashboard.

• Flexbox With Drag and Drop
• EUI Drag & Drop
• EUI Resizable Container

This new layout engine would make it possible to create and customize better looking dashboards which properly respond to changing widths. It would also allow for more interesting container types, like a collapsable container, multiple tabs, containers with headers and icons etc.

Considerations

• Proposed Priority: Medium
• Level of Effort: High
• Dependencies:
  • Collapsable Panels: Collapsable panel groups on dashboards #85824
• Proposed development timeframe: 8.x

[elasticmachine]

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

[ThomThomson]

Related to #1547 - as this grid layout system replacement is required for that feature.

[IanLee1521]

@ThomThomson - do you happen to know if there is a planned horizon / timeline towards this refactor? I came here from issues like #1547 and #29749 which are blocked by this refactor and would be massive quality of life improvements for us. Particularly #29749 which was something that we made heavy use of in Splunk before.

[ThomThomson]

@IanLee1521, thanks for the +1 on this. The issues you've linked are some of our highest priority items at the moment. Unfortunately, we have a lot of work to do before we can get to those. A breakdown of that work is:

1. We need to finish our Embedding Refactor, which addresses important tech-debt items. This will make subsequent feature work quicker and more stable, and the work is currently underway. You can follow along in the linked meta issue to see our progress.
2. We need to build and implement a new layout solution for Kibana Dashboards - that's this issue.

Only then can we start on features like collapsable panels, and filtering a subset of panels. I can't give a concrete timeline at the moment, but we are actively working on this and our priorities are unlikely to change until they're built. 

[IanLee1521]

You bet. Awesome to hear this is getting some good attention.

If there is anything that I could do to help it along (early testing, feedback, etc) please add me to your contact list. Would be happy to help.

[ThomThomson]

We're getting much closer to this system, with research and POCs nearing completion. Because of this, I am closing this in favour of #190372, which is more integrated with the project meta.

The research is complete and resulted in a new layout system which will support all of the requirements listed above and unblock some of our most important projects.

You can follow along with the project to bring Collapsable Panels to Kibana Dashboards here. Thank you for your patience!