[Dashboard] Redesign add panel flow

[rayafratkina]

Relates to #75151 #64528 #64056

Current state

Regarding the top menu and primary call-to-action

We have also identified other opportunities for improvement with the current menu & primary call-to-action

• The current Create new button opens the Visualize modal thus excluding other solutions and their related embeddables.
• The label on the primary button is unclear. This has become more evident with the top menu now residing in the header where it seems to imply that clicking Create new will result in a new dashboard (as opposed to a panel).
• The coexistence of an 'Add' link in the top menu makes it more challenging for us to instill the new By value workflow. With the Dashboard-first approach, we're intentionally minimizing the proliferation of shared saved objects. Conversely, 'Add' promotes the use of the library and its shared objects.

More on embeddables

With the addition of embeddables, the add panel flow is getting complicated

• We want to give user a way to create multiple embedables that are grouped thematically, so we may have Embeddable groups -> embeddables -> visualization groups -> visualizations.
  • This potentially adds 2 or 3 clicks each time user wants to add a panel, so we should rethink both the flow and the design of the flyouts along the way.
• The Create new button in the top menu behave differently than the Create new button in the 'Add panels' flyout

Future state

Several concepts have been proposed and discussed on this topic, as seen below. These are not mutually exclusive and could be delivered in an iterative fashion.

• Provides a single way to add panels whether from the top menu or the flyout
• Lens is a single-click destination
• The split button promotes the ability to create and add embeddables
• Offers an alternative, reduced-click approach that also promotes new native objects (Markdown text, input controls, images, and links)
• Surfaces solutions and other content providers at the top level

Mockup for simplified, primary call-to-action

Mockup for quick-add toolbar

Remove 'Create new' from flyout

With a revamped Add panel experience that better promotes embeddables, we can simply remove the existing Create new button that currently displays an alternate UX.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[ryankeairns]

@stacey-gammon Any additional details you can share regarding the ML use case, or use cases in general, would be very helpful as an input to the design process. No rush, thank you!

[ryankeairns]

See the ML example here: #64056

[stacey-gammon]

@darnautov - can you list the ML embeddables you see being created in the future, and what information is needed to create them?

This has a list of the embeddable types: #43879. I pinged a few folks on that issue to hopefully collect any more use cases coming down the pipeline we should consider.

@oatkiller - any details you can give for your vision of the ideal create resolver embeddable flow? @andrew-goldstein - I know SIEM is planning to use existing embeddables, do you know if there is any discussion for adding new security specific embeddables?

[andrew-goldstein]

@oatkiller - any details you can give for your vision of the ideal create resolver embeddable flow? @andrew-goldstein - I know SIEM is planning to use existing embeddables, do you know if there is any discussion for adding new security specific embeddables?

Beyond using the existing embeddable types mentioned in this comment on issue 43879, I think there's a potential to create embeddables for Timeline, and perhaps some other common features like lists.

[darnautov]

@darnautov - can you list the ML embeddables you see being created in the future, and what information is needed to create them?

This has a list of the embeddable types: #43879. I pinged a few folks on that issue to hopefully collect any more use cases coming down the pipeline we should consider.

@oatkiller - any details you can give for your vision of the ideal create resolver embeddable flow? @andrew-goldstein - I know SIEM is planning to use existing embeddables, do you know if there is any discussion for adding new security specific embeddables?

@stacey-gammon At the moment we have in mind a single metric viewer visualization alongside a swimlane and they going to be bonded together. In the future, there are also going to be visualizations for data frame analytics.
The jobs objects are stored in ml indices, so it also could be "by ref" as you mentioned. Right now I provide the complete job object value, not the most effective way probably

[stacey-gammon]

and they going to be bonded together.

What do you mean by this @darnautov? Like the two panels will be side by side and can't be separated? Or rendered inside a single panel, together? Or just that they will be sharing information somehow?

Right now I provide the complete job object value, not the most effective way probably

Ah, interesting, thanks for clarifying. Is that a lot of data? In edit mode, everything that goes into an embeddable's input will end up in the URL. Something we should be aware of if it's going to blow out the max URL length. We probably need to start focusing on this problem of sharing of unsaved dashboard URLs sooner rather than later, as we get more and more embeddables, especially those that are "by value".

The reason to have "by ref" embeddables is if you want to be able to edit a setting and have the changes propagate across multiple dashboards. Unless you want to support that use case, "by value" is a fine option, and will be easier in terms of security when OLS is eventually implemented (what if the user has access to the dashboard saved object but not the reference linked to it). We just need to solve the URL issue, but we need to solve that regardless.

[peteharverson]

@stacey-gammon to clarify for ML, after the swimlane embeddable (#64056), I see the next candidates being the chart in the Single Metric Viewer, and the anomaly charts from the Anomaly Explorer. These would all be separate embeddables.

I can also see it being useful to have sets of components from the Anomaly Explorer and Single Metric Viewer being grouped inside a single embeddable - for example the anomaly swimlane, anomaly charts and anomalies table all grouped inside one panel. So if a user clicks on a swimlane cell, it then updates the chart(s) and table as happens inside the ML Anomaly Explorer. Although maybe this same interaction would be possible between 3 separate embeddables by triggering actions, or by just adding a filter to the dashboard.

Further down the line, I am sure there will be other candidates for ML embeddables, such as feature importance charts from ML data frame analytics jobs. So being able to group ML embeddables together off an 'ML' sub-menu in the add panel workflow would be very useful as soon as we have more than 2 or 3 ML embeddables.

As for the embeddable input, it obviously depends on the visualization, but the sort of properties that are needed to create them include - job ID, time range, view by field (for the swimlane, e.g. view by job. or view by uri), partitioning field(s) (for anomaly charts).

[stacey-gammon]

if a user clicks on a swimlane cell, it then updates the chart(s) and table as happens inside the ML Anomaly Explorer. Although maybe this same interaction would be possible between 3 separate embeddables by triggering actions, or by just adding a filter to the dashboard.

++ I think this could be solved by introducing new input called highlightedTimeRange so it doesn't actually change the global time range but instructs other embeddables to highlight that time range some how, like how it seems to work now in ML. We could also introduce an extra action so when the user brushes any time range on a dashboard, they are given the option to "change global time" or "highlight time".

[stacey-gammon]

Observability embeddable details: #64528 (with a mock for a more generic add panel) cc @ryankeairns

[ThomThomson]

Closing this in favour of #144418. We are re-thinking the add-panel experience again!