[Dashboard] Fast Navigation Between Dashboards #157437

ThomThomson · 2023-05-11T20:37:02Z

Summary

This PR makes all navigation from one Dashboard to another feel snappier. Instead of destroying the Dashboard container entirely and rebuilding it from scratch, this PR loads the new Dashboard saved object in the background, then reinitializes subscriptions and replaces the last Dashboard state with the new state.

This results in the following changes:

On save, when the new state matches the old state exactly but the ID has changed, the Dashboard container is not destroyed and rebuilt so the screen no longer flashes white. This can be seen when:
- Saving a new Dashboard. When the URL changes from create to /view/{id}
- Saving a dashboard as a copy or cloning. When the URL changes from /view/{oldid} to /view/{newid}
On navigation between one dashboard and another the panels and Controls of the last dashboard stay visible until the new Dashboard is ready, then they are replaced in one render with the contents of the new Dashboard. This is visible when:
- Navigating between Dashboards on drilldown.
- Navigating between Dashboards with any navigation system - i.e. markdown and the future Navigation Embeddable.

Navigation Embeddable

This will allow our new Navigation Embeddable to move between Dashboards in a more native tab-like way, because the Navigation Embeddable itself will not disappear as the navigation happens.

A complication with this is on navigation click, the page won't immediately go white, so we may need a loading state to provide feedback to the user when they click on a nav link while the new Dashboard loads in the background. Otherwise, the delay while loading the next Dashboard could make the Navigation Embeddable seem unresponsive. This loading state could show specifically inside the Navigation Embeddable to make it impossible for a user to immediately try to click another link.

Flaky Test runner

I ran a broad Flaky test runner to ensure that this PR didn't introduce any extra flakiness. Note that it ran into 2 failures out of 400 test runs, and that these two failures seem unrelated. I added a commit: 0276c77 that should resolve them by making the presence of the toast optional when adding panels from the library - as requiring toasts to be present can be quite flaky.

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios

…dashboardNavigation

…d router

…dashboardNavigation

ThomThomson · 2023-05-17T16:38:49Z

@elasticmachine merge upstream

ThomThomson · 2023-05-17T22:38:26Z

@elasticmachine merge upstream

elasticmachine · 2023-05-18T13:34:23Z

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

angorayc

Thanks for the enhancement!

cqliu1 · 2023-05-23T17:03:46Z

src/plugins/dashboard/public/dashboard_container/embeddable/create/create_dashboard.ts

-    untilDashboardReady().then(async (container) => {
-      container.setScrollToPanelId(incomingEmbeddable.embeddableId);
-      container.setHighlightPanelId(incomingEmbeddable.embeddableId);
-    });


Why was the scrolling behavior removed here for incoming embeddables? Maybe got lost in a merge conflict?

Ah true, good catch! While fixing this, I also noticed that the code didn't scroll to a newly added panel, only one that was edited, so I added some extra logic to make it scroll to newly added panels.

Fixed in 6120d3f

ThomThomson · 2023-05-23T20:16:02Z

@elasticmachine merge upstream

cqliu1

LGTM! I pulled it down and navigated between the sample dashboards in various different states, and things like view mode, filters, and unsaved changes are preserved between reloads.

The only thing I noticed was some of the panels flying around with the CSS transforms on while navigating between dashboards looked a little odd, but it's not a blocker.

May-23-2023.16-13-21.mp4

Besides that, the navigation between dashboard is so seamless with this change. Huge performance win and great prep for the navigation embeddable. Great work!

…homson/kibana into onWeek/dashboardNavigation

ThomThomson · 2023-05-24T13:37:33Z

@cqliu1 thanks for the review! Can you test out 5e2b47e and let me know if this solves the problem of panels animating while Navigating?

In a followup, we'll also need to figure out how to indicate that the next Dashboard is loading up in the background.

kibana-ci · 2023-05-24T15:20:36Z

💚 Build Succeeded

Buildkite Build
Commit: 893321e

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dashboard`	498	372	-126

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`controls`	297	299	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`controls`	188.1KB	188.4KB	+314.0B
`dashboard`	436.4KB	355.5KB	-80.9KB
`securitySolution`	9.2MB	9.2MB	+9.0B
total			-80.6KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`dashboard`	39.8KB	39.7KB	-41.0B

Unknown metric groups

API count

id	before	after	diff
`controls`	304	306	+2

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	19	21	+2
`securitySolution`	399	403	+4
total			+6

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	20	22	+2
`securitySolution`	479	483	+4
total			+6

History

💚 Build #129716 succeeded 2f4732f
💚 Build #129687 succeeded 6120d3f
💛 Build #128795 was flaky f27cbd2
💔 Build #128682 failed 55dd8e2
💛 Build #128609 was flaky 0276c77
💛 Build #128025 was flaky af824a6

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

ThomThomson · 2023-06-15T16:17:23Z

Backporting this into 8.8 to support this fix also being backported.

ThomThomson · 2023-06-15T16:19:41Z

💚 All backports created successfully

Status	Branch	Result
✅	8.8

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

## Summary Makes all navigation from one Dashboard to another feel snappier. (cherry picked from commit 5342563)

# Backport This will backport the following commits from `main` to `8.8`: - [[Dashboard] Fast Navigation Between Dashboards (#157437)](#157437)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Patryk Kopyciński <[email protected]>

ThomThomson added 9 commits May 11, 2023 16:36

Navigate between dashboards without destroying dashboard container

d16d3b8

Update types and unit tests

0e167f6

Merge branch 'main' of https://github.com/elastic/kibana into onWeek/…

44a0abc

…dashboardNavigation

fix redirect after save. Change to application navigation in dashboar…

14c96e5

…d router

fix some types

6bf050c

Merge branch 'main' of https://github.com/elastic/kibana into onWeek/…

5ece07d

…dashboardNavigation

fix last type

a344cd1

Merge branch 'main' of https://github.com/elastic/kibana into onWeek/…

cbecc63

…dashboardNavigation

Fix some functional tests.

af824a6

ThomThomson changed the title ~~Navigate between dashboards without destroying dashboard container~~ [Dashboard] Fast Navigation Between Dashboards May 16, 2023

make functional test toast check optional when adding panels

0276c77

Merge branch 'main' into onWeek/dashboardNavigation

55dd8e2

Merge branch 'main' into onWeek/dashboardNavigation

f27cbd2

ThomThomson marked this pull request as ready for review May 18, 2023 13:34

ThomThomson requested review from a team as code owners May 18, 2023 13:34

angorayc approved these changes May 22, 2023

View reviewed changes

cqliu1 self-requested a review May 22, 2023 19:22

cqliu1 reviewed May 23, 2023

View reviewed changes

restore scroll to incoming embeddable behaviour"

6120d3f

Merge branch 'main' into onWeek/dashboardNavigation

2f4732f

cqliu1 approved these changes May 23, 2023

View reviewed changes

ThomThomson added 2 commits May 24, 2023 09:35

Prevent panels from animating on navigate

5e2b47e

Merge branch 'onWeek/dashboardNavigation' of https://github.com/ThomT…

893321e

…homson/kibana into onWeek/dashboardNavigation

ThomThomson merged commit 5342563 into elastic:main May 25, 2023

kibanamachine added v8.9.0 backport:skip This commit does not require backporting labels May 25, 2023

ThomThomson mentioned this pull request Jun 14, 2023

[Dashboard] Fix alias redirect & update error handling #159742

Merged

1 task

ThomThomson added the v8.8.0 label Jun 15, 2023

ThomThomson mentioned this pull request Jun 15, 2023

[8.8] [Dashboard] Fast Navigation Between Dashboards (#157437) #159827

Merged

ThomThomson added a commit to ThomThomson/kibana that referenced this pull request Jun 15, 2023

[Dashboard] Fast Navigation Between Dashboards (elastic#157437)

4ffc5e8

## Summary Makes all navigation from one Dashboard to another feel snappier. (cherry picked from commit 5342563)

kibanamachine added the v8.8.2 label Jun 16, 2023

ThomThomson mentioned this pull request Jun 20, 2023

[Dashboard][UX] Add a message explaining that SO was not found by this ID #160019

Closed

ThomThomson mentioned this pull request Sep 7, 2023

[Dashboard] [Tech Debt] Avoid Unnecessary Rebuilds #147491

Closed

ThomThomson mentioned this pull request Oct 13, 2023

Visualizations not updating when navigating through dashboards with links. #168045

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard] Fast Navigation Between Dashboards #157437

[Dashboard] Fast Navigation Between Dashboards #157437

ThomThomson commented May 11, 2023 •

edited

Loading

ThomThomson commented May 17, 2023

ThomThomson commented May 17, 2023

elasticmachine commented May 18, 2023

angorayc left a comment

cqliu1 May 23, 2023

ThomThomson May 23, 2023

ThomThomson May 23, 2023

ThomThomson commented May 23, 2023

cqliu1 left a comment

ThomThomson commented May 24, 2023

kibana-ci commented May 24, 2023

API count

ESLint disabled line counts

Total ESLint disabled count

ThomThomson commented Jun 15, 2023

ThomThomson commented Jun 15, 2023

[Dashboard] Fast Navigation Between Dashboards #157437

[Dashboard] Fast Navigation Between Dashboards #157437

Conversation

ThomThomson commented May 11, 2023 • edited Loading

Summary

Navigation Embeddable

Flaky Test runner

Checklist

ThomThomson commented May 17, 2023

ThomThomson commented May 17, 2023

elasticmachine commented May 18, 2023

angorayc left a comment

Choose a reason for hiding this comment

cqliu1 May 23, 2023

Choose a reason for hiding this comment

ThomThomson May 23, 2023

Choose a reason for hiding this comment

ThomThomson May 23, 2023

Choose a reason for hiding this comment

ThomThomson commented May 23, 2023

cqliu1 left a comment

Choose a reason for hiding this comment

ThomThomson commented May 24, 2023

kibana-ci commented May 24, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

ESLint disabled line counts

Total ESLint disabled count

History

ThomThomson commented Jun 15, 2023

ThomThomson commented Jun 15, 2023

💚 All backports created successfully

Questions ?

ThomThomson commented May 11, 2023 •

edited

Loading