[Portable Dashboards] Implementation Feature Branch #144332
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…eDashboards/implementation
…e. Used Redux tools in Dashboard components. Built system for passing incoming embeddable to portable dashboard
…plement URL state sync on Dashboard app side.
…n' into portableDashboards/implementation
…Remove time range from session.
…see if it helps the test failures
…ctions. Make dashboard diffing start synchronous. Ensure default data view on dashboard start. assign incoming embeddable type.
…implementation' into portableDashboards/implementation
|
Thanks for the review @nickpeihl! I've addressed the comments - mostly by creating follow-up tech debt issues! Tomorrow I will look into why the time slider has stopped working properly. |
💚 Build Succeeded
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Public APIs missing exports
Page load bundle
Unknown metric groupsAPI count
async chunk count
ESLint disabled in files
ESLint disabled line counts
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: |
nickpeihl
approved these changes
Dec 15, 2022
kibanamachine
added
v8.7.0
backport:skip
nreese
added a commit
that referenced
this pull request
Jan 30, 2023
Fixes #126000 Unskip tests in /Users/nreese/projects/kibana/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.test.tsx viewport/dashboard_viewport.test.tsx removed in #144332. --------- Co-authored-by: kibanamachine <[email protected]>
kqualters-elastic
pushed a commit
to kqualters-elastic/kibana
that referenced
this pull request
Feb 6, 2023
Fixes elastic#126000 Unskip tests in /Users/nreese/projects/kibana/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.test.tsx viewport/dashboard_viewport.test.tsx removed in elastic#144332. --------- Co-authored-by: kibanamachine <[email protected]>
1 task
1 task
3 tasks
Heenawter
added a commit
that referenced
this pull request
Nov 16, 2023
Closes #162800 ## Summary This PR re-adds dashboard titles to the browser tab title, which was accidentally removed as part of the [portable dashboards](#144332) work. For example, if I'm on the sample Logs dashboard, the title of that dashboard will now be reflected in the tab title like it was prior to `v8.7.0`: | Before | After | |--------|--------| |  |  | The tab title should stay up-to-date with Dashboard title changes, as demonstrated in this video: https://github.com/elastic/kibana/assets/8698078/651fff50-70f7-46ff-af47-b274fe6b0a19 Note that this will **only apply** to dashboards in the dashboard app - dashboards outside of the dashboard app should not change the browser tab title, unless the consumer does this on their own. ### [Flaky Test Runner](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3987)  ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Nov 16, 2023
Closes elastic#162800 ## Summary This PR re-adds dashboard titles to the browser tab title, which was accidentally removed as part of the [portable dashboards](elastic#144332) work. For example, if I'm on the sample Logs dashboard, the title of that dashboard will now be reflected in the tab title like it was prior to `v8.7.0`: | Before | After | |--------|--------| |  |  | The tab title should stay up-to-date with Dashboard title changes, as demonstrated in this video: https://github.com/elastic/kibana/assets/8698078/651fff50-70f7-46ff-af47-b274fe6b0a19 Note that this will **only apply** to dashboards in the dashboard app - dashboards outside of the dashboard app should not change the browser tab title, unless the consumer does this on their own. ### [Flaky Test Runner](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3987)  ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) (cherry picked from commit 6150f76)
kibanamachine
added a commit
that referenced
this pull request
Nov 17, 2023
…#171454) # Backport This will backport the following commits from `main` to `8.11`: - [[Dashboard] Add Dashboard title to browser tab title (#171255)](#171255) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Hannah Mudge","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-11-16T23:23:22Z","message":"[Dashboard] Add Dashboard title to browser tab title (#171255)\n\nCloses https://github.com/elastic/kibana/issues/162800\r\n\r\n## Summary\r\n\r\nThis PR re-adds dashboard titles to the browser tab title, which was\r\naccidentally removed as part of the [portable\r\ndashboards](#144332) work. For\r\nexample, if I'm on the sample Logs dashboard, the title of that\r\ndashboard will now be reflected in the tab title like it was prior to\r\n`v8.7.0`:\r\n\r\n\r\n| Before | After |\r\n|--------|--------|\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n\r\nThe tab title should stay up-to-date with Dashboard title changes, as\r\ndemonstrated in this video:\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/8698078/651fff50-70f7-46ff-af47-b274fe6b0a19\r\n\r\n\r\n\r\n\r\nNote that this will **only apply** to dashboards in the dashboard app -\r\ndashboards outside of the dashboard app should not change the browser\r\ntab title, unless the consumer does this on their own.\r\n\r\n### [Flaky Test\r\nRunner](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3987)\r\n\r\n\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6150f76abae664856a976bc230b9e90dbd844621","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Feature:Dashboard","release_note:fix","Team:Presentation","loe:small","impact:high","backport:prev-minor","ci:cloud-deploy","v8.12.0"],"number":171255,"url":"https://github.com/elastic/kibana/pull/171255","mergeCommit":{"message":"[Dashboard] Add Dashboard title to browser tab title (#171255)\n\nCloses https://github.com/elastic/kibana/issues/162800\r\n\r\n## Summary\r\n\r\nThis PR re-adds dashboard titles to the browser tab title, which was\r\naccidentally removed as part of the [portable\r\ndashboards](#144332) work. For\r\nexample, if I'm on the sample Logs dashboard, the title of that\r\ndashboard will now be reflected in the tab title like it was prior to\r\n`v8.7.0`:\r\n\r\n\r\n| Before | After |\r\n|--------|--------|\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n\r\nThe tab title should stay up-to-date with Dashboard title changes, as\r\ndemonstrated in this video:\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/8698078/651fff50-70f7-46ff-af47-b274fe6b0a19\r\n\r\n\r\n\r\n\r\nNote that this will **only apply** to dashboards in the dashboard app -\r\ndashboards outside of the dashboard app should not change the browser\r\ntab title, unless the consumer does this on their own.\r\n\r\n### [Flaky Test\r\nRunner](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3987)\r\n\r\n\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6150f76abae664856a976bc230b9e90dbd844621"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/171255","number":171255,"mergeCommit":{"message":"[Dashboard] Add Dashboard title to browser tab title (#171255)\n\nCloses https://github.com/elastic/kibana/issues/162800\r\n\r\n## Summary\r\n\r\nThis PR re-adds dashboard titles to the browser tab title, which was\r\naccidentally removed as part of the [portable\r\ndashboards](#144332) work. For\r\nexample, if I'm on the sample Logs dashboard, the title of that\r\ndashboard will now be reflected in the tab title like it was prior to\r\n`v8.7.0`:\r\n\r\n\r\n| Before | After |\r\n|--------|--------|\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n\r\nThe tab title should stay up-to-date with Dashboard title changes, as\r\ndemonstrated in this video:\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/8698078/651fff50-70f7-46ff-af47-b274fe6b0a19\r\n\r\n\r\n\r\n\r\nNote that this will **only apply** to dashboards in the dashboard app -\r\ndashboards outside of the dashboard app should not change the browser\r\ntab title, unless the consumer does this on their own.\r\n\r\n### [Flaky Test\r\nRunner](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3987)\r\n\r\n\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6150f76abae664856a976bc230b9e90dbd844621"}}]}] BACKPORT--> Co-authored-by: Hannah Mudge <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #136771
Closes #136770
Fixes #140243
For reviewers
This isn't a mistake, just a very large PR. @elastic/security-solution and @elastic/ml-ui reviews are only required due to import / naming changes.
Summary
This PR makes Dashboards Portable. Instead of being tightly coupled to the Dashboard App, the Dashboard Container can now be used in any plugin via the Dashboard Container Renderer component in
src/plugins/dashboard/public/dashboard_container/dashboard_container_renderer.tsx. The Dashboard Container renderer is one of the first examples of Experience Building Blocks in Kibana.What is an Experience Building Block
An Experience building block is fundamentally a React Component that consumers interact with
imperativelyrather thandeclaratively. In practice this means that rather than passing in props and callbacks, consumers interact with an API instance created and returned by the renderer.This is better for large components because it allows for proper encapsulation. When interacting with a component declaratively, the consumer must manage all state required for the component to work. They must use their own state management system, and they must provide their own data fetching capabilities.
Instead, the goal of this PR and others like it is to provide fundamental, stateful, data-fetching, pieces of UI that can be used in concert with one another.
How is this experience building block consumed?
Dashboards are likely the most complicated experience building block we will expose. That said, thanks to the internal state management, consuming a portable Dashboard is not terribly difficult. The consumer will interact with the dashboard with one string, and two callbacks:
Saved Object Id
A saved object ID string can optionally be passed into the dashboard. If one is supplied, this dashboard will be created by reference by loading that saved object ID as a dashboard saved object. This prop is declarative, meaning that if it changes, the dashboard will reload itself to reflect the new saved object ID.
Get creation Options
This callback answers the question "what does the initial state of my dashboard look like". The implementor will need to return a
DashboardCreationOptionsobject which provides an initial state, and settings for anyintegrationsthey would like to set up.**On dashboard container loaded **
This callback returns the implementor the fully loaded and initialized Dashboard Container. The Implementor can then use the dashboard API in response to user input to affect the state of the Dashboard Additionally, the implementor has access to a selector that can be used to re-render react components in response to changes in the Dashboard's state.
Examples
While we will be providing usage examples (definitions of possible examples can be found here), the first consumer of this building block is the dashboard app itself. The dashboard app is also the most feature-complete implementation, as it makes use of each integration offered by the portable dashboard container.