From dashboard to Canvas: allow users to transition existing dashboard to Canvas in a few steps

[AlonaNadler]

Often users ask to customize their dashboard with their company colors or optimize to display better on a large monitor for all of these requests and more we have Canvas.
However, users are often already invested in a dashboard and don't have the time to recreate it as a canvas workpad. Thanks to recent work done by @cqliu1 @crob611 which allows adding existing visualizations to Canvas workpad this is achievable in an easier way

While dashboards are phenomenal for analyzing, investigating and troubleshooting using its quick interactivity and advanced visualizations. Canvas is great to present on large screens, customize and brand and show/share insights to a broader audience.

Main goal:

• Provide users who are using dashboards an easy path to use Canvas. For example, I'm done with my analysis now I need to share my findings with others it would be good to do it using Canvas in a more custom and visual way.
• Provide users with a way to get Canvas results without the need to learn Canvas or recreate what they already have in Dashboards
• Allow dashboard users to transition their dashboard to a Canvas workpad in a few simple steps. Users will still have their dashboard, the feature will transition them in addition to a canvas workpad with all their dashboards' visualizations
• Help users be proud of their outcome making their dashboard more branded and customize

Outcome:

• From a dashboard ability to quickly transition to a Canvas workpad
• Allow users to customize using basic loveable features which dashboard is missing such as selecting a background and easily adding their company logo
• Wizard-like experience that will allow users in a few simple space transition and slightly customize their Canvas
• Ability to start further along with Canvas workpad instead of starting something from scratch
• The transition doesn’t need to be perfect: users still can to tweak, organize and style the workpad but are not starting from scratch
• There are already millions of dashboards out there which can be also transitioned to Canvas

MVP:

• A button on dashboard edit mode in an existing dashboard, on click it starts a transition, which opens Canvas and adds all the visualizations from the dashboard to the workpad (we can max the number of visualizations to some number)
• One page of a canvas workpad with all visualizations from the dashboard
• During the transition, the users choose the background color and add an image as their logo - this step will immediately give their workpad a different look

cc: @shaunmcgough @timductive

[elasticmachine]

Pinging @elastic/kibana-canvas (Team:Canvas)

[stacey-gammon]

adds all the visualizations from the dashboard to the workpad (we can max the number of visualizations to some number)

To clarify, do you mean all panels on a dashboard, or all panels that are of the visualization type?

Assuming you mean all panels, I see three ways to implement this:

1. Similar to how it works now, use a manual mapping of every embeddable type to expression function. An author of an embeddable would need to register a new expression function and presumably link the embeddable to the expression fn somehow.

2. Create a generic embeddable expression function, that takes type and inputJSON as a serialized string. BWC/Migration needs to be thought through to ensure embeddable migrations are propagated through (probably will be dictated by solution to Persistable state migrations #63358). Cons are that this string will not be user friendly at all.

3. Create a cohesive architecture between canvas and dashboard. My argument is that not everything that can be rendered makes a good representation as an expression string. Move from this today:

to

I prefer 3 but it's the most work. 2 I think is the second best option as it doesn't require manual effort to support all embeddables and we don't have to figure out the automatic mapping.

Please keep me in the loop if/when an implementation plan is formed for this project.

[timductive]

@stacey-gammon for option 3, I agree that this could make the most sense long term but I think we should think about filters, editing, native Canvas elements, and the expression editor before we commit to a solution. Mostly noting this here so we remember to have this discussion when we get to implementation details.

[stacey-gammon]

cc @clintandrewhall for awareness

[clintandrewhall]

I've started some thought-exploration on this, as well as talks with Expressions, EUI, Lens, etc. I'll have some architecture proposals in the coming week.

In terms of user experience, I'm wondering if direct conversion from dashboard to workpad can be best served not by placing every viz/panel in a workpad, but rather create a library of saved elements from which the user can pull into various pages. If they have a dashboard with two dozen graphs/charts/controls, and we just drop the entire grid into one page, we're not really helping the user go from data-driven display to presentation-driven display. Having them all-- or the ones they've specifically selected-- available in the Canvas Element dialog feels like a good workflow.

At any rate, I feel it's still premature to commit to any one workflow or architecture. I also feel like reducing Canvas to a "layout" tool for embeddables would require a lot of infra in embeddables we may not have today, (off the top of my head, how Canvas supports CSS styling).

I'll have more thoughts in the next few days. This discussion is incredibly helpful.