[Dashboard] [Collapsable Panels] Add panel management API #195513
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
Heenawter
added
Feature:Dashboard
Heenawter
changed the title
Heenawter
added
the
release_note:skip
Heenawter
force-pushed
the
kbn-grid-layout-api_2024-10-08
branch
2 times, most recently
from
6b118d6 to
a6ef370
Compare
Heenawter
force-pushed
the
kbn-grid-layout-api_2024-10-08
branch
from
d292436 to
ec8f1de
Compare
…/kibana into kbn-grid-layout-api_2024-10-08
…/kibana into kbn-grid-layout-api_2024-10-08
Heenawter
commented
Nov 1, 2024
| @@ -190,6 +190,7 @@ export const GridPanel = forwardRef< | |||
| border-bottom: 2px solid ${euiThemeVars.euiColorSuccess}; | |||
| border-right: 2px solid ${euiThemeVars.euiColorSuccess}; | |||
| :hover { | |||
| opacity: 1; | |||
There was a problem hiding this comment.
This was accidentally deleted in a previous PR 🤦 The resize handler should now be visible on hover
Heenawter
commented
Nov 1, 2024
| @@ -74,7 +77,7 @@ export interface PanelInteractionEvent { | |||
| /** | |||
| * The type of interaction being performed. | |||
| */ | |||
| type: 'drag' | 'resize' | 'drop'; | |||
| type: 'drag' | 'resize'; | |||
There was a problem hiding this comment.
I was able to get an onLayoutChange callback to work without the drop event - so, I removed it
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
Heenawter
commented
Nov 4, 2024
|
|
||
| isEqual = | ||
| rowA.title === rowB.title && | ||
| rowA.isCollapsed === rowB.isCollapsed && |
There was a problem hiding this comment.
I assume we want the collapsed state to be saveable into the dashboard (i.e. it should trigger unsaved changes) - so that is why this check is included.
Screen.Recording.2024-11-04.at.9.37.19.AM.mov
💚 Build Succeeded
Metrics [docs]Public APIs missing comments
Public APIs missing exports
Unknown metric groupsAPI count
ESLint disabled line counts
Total ESLint disabled count
History
cc @Heenawter |
nickpeihl
approved these changes
Nov 5, 2024
|
Starting backport for target branches: 8.x |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Nov 5, 2024
…5513) Closes elastic#190445 ## Summary This PR adds the first steps of a panel management API to the `GridLayout` component: - A method to delete a panel - A method to replace a panel - A method to add a panel with a given size and placement technique (`'placeAtTop' | 'findTopLeftMostOpenSpace'`) - Currently, we only support adding a panel to the first row, since this is all that is necessary for parity with the current Dashboard layout engine - we can revisit this decision as part of the [row API](elastic#195807). - A method to get panel count - This might not be necessary for the dashboard (we'll see), but I needed it for the example plugin to be able to generate suggested panel IDs. It's possible this will get removed 🤷 - The ability to serialize the grid layout state I only included the bare minimum here that I know will be necessary for a dashboard integration, but it's possible I missed some things and so this API will most likely expand in the future. https://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20 ### Serialization With respect to serialization, there are still some open questions about how we want to handle it from the Dashboard side - therefore, in this PR, I opted to keep the serialization as simple as possible (i.e. both the input and serialized output take identical forms for the `GridLayout` component). Our goal is to keep `kbn-grid-layout` as **generic** as possible so, while I considered making the serialize method return the form that the Dashboard expects, I ultimately decided against that; instead, I think Dashboard should be responsible for taking the grid layout's serialized form and turning it into a dashboard-specific serialization of a grid layout and vice-versa for deserializing and sending the initial layout to the `GridLayout` component. The dashboard grid layout serialization will be tackled as part of elastic#190446, where it's possible my opinion might change :) This is just a first draft of the `kbn-grid-layout` API, after all. ### Example Grid Layout In the grid layout example plugin, I integrated the API by adding some pretty bare-bones buttons to each panel in order to ensure the API works as expected - that being said, I didn't worry too much about the design of these things and so it looks pretty ugly 😆 My next step is elastic#190379, where I will have to integrate the grid layout API with the embeddable actions, at which point the design will be improved - so this is a very temporary state :bow: ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [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) --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit a91427d)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Nov 5, 2024
) (#199040) # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] [Collapsable Panels] Add panel management API (#195513)](#195513) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Hannah Mudge","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-05T18:11:11Z","message":"[Dashboard] [Collapsable Panels] Add panel management API (#195513)\n\nCloses https://github.com/elastic/kibana/issues/190445\r\n\r\n## Summary\r\n\r\nThis PR adds the first steps of a panel management API to the\r\n`GridLayout` component:\r\n- A method to delete a panel\r\n- A method to replace a panel\r\n- A method to add a panel with a given size and placement technique\r\n(`'placeAtTop' | 'findTopLeftMostOpenSpace'`)\r\n- Currently, we only support adding a panel to the first row, since this\r\nis all that is necessary for parity with the current Dashboard layout\r\nengine - we can revisit this decision as part of the [row\r\nAPI](https://github.com/elastic/kibana/issues/195807).\r\n- A method to get panel count\r\n- This might not be necessary for the dashboard (we'll see), but I\r\nneeded it for the example plugin to be able to generate suggested panel\r\nIDs. It's possible this will get removed 🤷\r\n- The ability to serialize the grid layout state\r\n\r\nI only included the bare minimum here that I know will be necessary for\r\na dashboard integration, but it's possible I missed some things and so\r\nthis API will most likely expand in the future.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20\r\n\r\n\r\n\r\n\r\n\r\n### Serialization\r\n\r\nWith respect to serialization, there are still some open questions about\r\nhow we want to handle it from the Dashboard side - therefore, in this\r\nPR, I opted to keep the serialization as simple as possible (i.e. both\r\nthe input and serialized output take identical forms for the\r\n`GridLayout` component).\r\n\r\nOur goal is to keep `kbn-grid-layout` as **generic** as possible so,\r\nwhile I considered making the serialize method return the form that the\r\nDashboard expects, I ultimately decided against that; instead, I think\r\nDashboard should be responsible for taking the grid layout's serialized\r\nform and turning it into a dashboard-specific serialization of a grid\r\nlayout and vice-versa for deserializing and sending the initial layout\r\nto the `GridLayout` component.\r\n\r\nThe dashboard grid layout serialization will be tackled as part of\r\nhttps://github.com//issues/190446, where it's possible my\r\nopinion might change :) This is just a first draft of the\r\n`kbn-grid-layout` API, after all.\r\n\r\n### Example Grid Layout\r\n\r\nIn the grid layout example plugin, I integrated the API by adding some\r\npretty bare-bones buttons to each panel in order to ensure the API works\r\nas expected - that being said, I didn't worry too much about the design\r\nof these things and so it looks pretty ugly 😆 My next step is\r\nhttps://github.com//issues/190379, where I will have to\r\nintegrate the grid layout API with the embeddable actions, at which\r\npoint the design will be improved - so this is a very temporary state\r\n:bow:\r\n\r\n### Checklist\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\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)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"a91427d71bfab9d6a47c3dcdfd5e1a08b8e3ee6f","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","Team:Presentation","loe:medium","release_note:skip","impact:high","v9.0.0","backport:prev-minor","Project:Collapsable Panels"],"title":"[Dashboard] [Collapsable Panels] Add panel management API","number":195513,"url":"https://github.com/elastic/kibana/pull/195513","mergeCommit":{"message":"[Dashboard] [Collapsable Panels] Add panel management API (#195513)\n\nCloses https://github.com/elastic/kibana/issues/190445\r\n\r\n## Summary\r\n\r\nThis PR adds the first steps of a panel management API to the\r\n`GridLayout` component:\r\n- A method to delete a panel\r\n- A method to replace a panel\r\n- A method to add a panel with a given size and placement technique\r\n(`'placeAtTop' | 'findTopLeftMostOpenSpace'`)\r\n- Currently, we only support adding a panel to the first row, since this\r\nis all that is necessary for parity with the current Dashboard layout\r\nengine - we can revisit this decision as part of the [row\r\nAPI](https://github.com/elastic/kibana/issues/195807).\r\n- A method to get panel count\r\n- This might not be necessary for the dashboard (we'll see), but I\r\nneeded it for the example plugin to be able to generate suggested panel\r\nIDs. It's possible this will get removed 🤷\r\n- The ability to serialize the grid layout state\r\n\r\nI only included the bare minimum here that I know will be necessary for\r\na dashboard integration, but it's possible I missed some things and so\r\nthis API will most likely expand in the future.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20\r\n\r\n\r\n\r\n\r\n\r\n### Serialization\r\n\r\nWith respect to serialization, there are still some open questions about\r\nhow we want to handle it from the Dashboard side - therefore, in this\r\nPR, I opted to keep the serialization as simple as possible (i.e. both\r\nthe input and serialized output take identical forms for the\r\n`GridLayout` component).\r\n\r\nOur goal is to keep `kbn-grid-layout` as **generic** as possible so,\r\nwhile I considered making the serialize method return the form that the\r\nDashboard expects, I ultimately decided against that; instead, I think\r\nDashboard should be responsible for taking the grid layout's serialized\r\nform and turning it into a dashboard-specific serialization of a grid\r\nlayout and vice-versa for deserializing and sending the initial layout\r\nto the `GridLayout` component.\r\n\r\nThe dashboard grid layout serialization will be tackled as part of\r\nhttps://github.com//issues/190446, where it's possible my\r\nopinion might change :) This is just a first draft of the\r\n`kbn-grid-layout` API, after all.\r\n\r\n### Example Grid Layout\r\n\r\nIn the grid layout example plugin, I integrated the API by adding some\r\npretty bare-bones buttons to each panel in order to ensure the API works\r\nas expected - that being said, I didn't worry too much about the design\r\nof these things and so it looks pretty ugly 😆 My next step is\r\nhttps://github.com//issues/190379, where I will have to\r\nintegrate the grid layout API with the embeddable actions, at which\r\npoint the design will be improved - so this is a very temporary state\r\n:bow:\r\n\r\n### Checklist\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\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)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"a91427d71bfab9d6a47c3dcdfd5e1a08b8e3ee6f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195513","number":195513,"mergeCommit":{"message":"[Dashboard] [Collapsable Panels] Add panel management API (#195513)\n\nCloses https://github.com/elastic/kibana/issues/190445\r\n\r\n## Summary\r\n\r\nThis PR adds the first steps of a panel management API to the\r\n`GridLayout` component:\r\n- A method to delete a panel\r\n- A method to replace a panel\r\n- A method to add a panel with a given size and placement technique\r\n(`'placeAtTop' | 'findTopLeftMostOpenSpace'`)\r\n- Currently, we only support adding a panel to the first row, since this\r\nis all that is necessary for parity with the current Dashboard layout\r\nengine - we can revisit this decision as part of the [row\r\nAPI](https://github.com/elastic/kibana/issues/195807).\r\n- A method to get panel count\r\n- This might not be necessary for the dashboard (we'll see), but I\r\nneeded it for the example plugin to be able to generate suggested panel\r\nIDs. It's possible this will get removed 🤷\r\n- The ability to serialize the grid layout state\r\n\r\nI only included the bare minimum here that I know will be necessary for\r\na dashboard integration, but it's possible I missed some things and so\r\nthis API will most likely expand in the future.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20\r\n\r\n\r\n\r\n\r\n\r\n### Serialization\r\n\r\nWith respect to serialization, there are still some open questions about\r\nhow we want to handle it from the Dashboard side - therefore, in this\r\nPR, I opted to keep the serialization as simple as possible (i.e. both\r\nthe input and serialized output take identical forms for the\r\n`GridLayout` component).\r\n\r\nOur goal is to keep `kbn-grid-layout` as **generic** as possible so,\r\nwhile I considered making the serialize method return the form that the\r\nDashboard expects, I ultimately decided against that; instead, I think\r\nDashboard should be responsible for taking the grid layout's serialized\r\nform and turning it into a dashboard-specific serialization of a grid\r\nlayout and vice-versa for deserializing and sending the initial layout\r\nto the `GridLayout` component.\r\n\r\nThe dashboard grid layout serialization will be tackled as part of\r\nhttps://github.com//issues/190446, where it's possible my\r\nopinion might change :) This is just a first draft of the\r\n`kbn-grid-layout` API, after all.\r\n\r\n### Example Grid Layout\r\n\r\nIn the grid layout example plugin, I integrated the API by adding some\r\npretty bare-bones buttons to each panel in order to ensure the API works\r\nas expected - that being said, I didn't worry too much about the design\r\nof these things and so it looks pretty ugly 😆 My next step is\r\nhttps://github.com//issues/190379, where I will have to\r\nintegrate the grid layout API with the embeddable actions, at which\r\npoint the design will be improved - so this is a very temporary state\r\n:bow:\r\n\r\n### Checklist\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\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)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"a91427d71bfab9d6a47c3dcdfd5e1a08b8e3ee6f"}}]}] BACKPORT--> Co-authored-by: Hannah Mudge <[email protected]>
mgadewoll
pushed a commit
to mgadewoll/kibana
that referenced
this pull request
Nov 7, 2024
…5513) Closes elastic#190445 ## Summary This PR adds the first steps of a panel management API to the `GridLayout` component: - A method to delete a panel - A method to replace a panel - A method to add a panel with a given size and placement technique (`'placeAtTop' | 'findTopLeftMostOpenSpace'`) - Currently, we only support adding a panel to the first row, since this is all that is necessary for parity with the current Dashboard layout engine - we can revisit this decision as part of the [row API](elastic#195807). - A method to get panel count - This might not be necessary for the dashboard (we'll see), but I needed it for the example plugin to be able to generate suggested panel IDs. It's possible this will get removed 🤷 - The ability to serialize the grid layout state I only included the bare minimum here that I know will be necessary for a dashboard integration, but it's possible I missed some things and so this API will most likely expand in the future. https://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20 ### Serialization With respect to serialization, there are still some open questions about how we want to handle it from the Dashboard side - therefore, in this PR, I opted to keep the serialization as simple as possible (i.e. both the input and serialized output take identical forms for the `GridLayout` component). Our goal is to keep `kbn-grid-layout` as **generic** as possible so, while I considered making the serialize method return the form that the Dashboard expects, I ultimately decided against that; instead, I think Dashboard should be responsible for taking the grid layout's serialized form and turning it into a dashboard-specific serialization of a grid layout and vice-versa for deserializing and sending the initial layout to the `GridLayout` component. The dashboard grid layout serialization will be tackled as part of elastic#190446, where it's possible my opinion might change :) This is just a first draft of the `kbn-grid-layout` API, after all. ### Example Grid Layout In the grid layout example plugin, I integrated the API by adding some pretty bare-bones buttons to each panel in order to ensure the API works as expected - that being said, I didn't worry too much about the design of these things and so it looks pretty ugly 😆 My next step is elastic#190379, where I will have to integrate the grid layout API with the embeddable actions, at which point the design will be improved - so this is a very temporary state :bow: ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [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) --------- Co-authored-by: kibanamachine <[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 #190445
Summary
This PR adds the first steps of a panel management API to the
GridLayoutcomponent:'placeAtTop' | 'findTopLeftMostOpenSpace')I only included the bare minimum here that I know will be necessary for a dashboard integration, but it's possible I missed some things and so this API will most likely expand in the future.
Screen.Recording.2024-11-01.at.1.31.36.PM.mov
Serialization
With respect to serialization, there are still some open questions about how we want to handle it from the Dashboard side - therefore, in this PR, I opted to keep the serialization as simple as possible (i.e. both the input and serialized output take identical forms for the
GridLayoutcomponent).Our goal is to keep
kbn-grid-layoutas generic as possible so, while I considered making the serialize method return the form that the Dashboard expects, I ultimately decided against that; instead, I think Dashboard should be responsible for taking the grid layout's serialized form and turning it into a dashboard-specific serialization of a grid layout and vice-versa for deserializing and sending the initial layout to theGridLayoutcomponent.The dashboard grid layout serialization will be tackled as part of #190446, where it's possible my opinion might change :) This is just a first draft of the
kbn-grid-layoutAPI, after all.Example Grid Layout
In the grid layout example plugin, I integrated the API by adding some pretty bare-bones buttons to each panel in order to ensure the API works as expected - that being said, I didn't worry too much about the design of these things and so it looks pretty ugly 😆 My next step is #190379, where I will have to integrate the grid layout API with the embeddable actions, at which point the design will be improved - so this is a very temporary state 🙇
Checklist
For maintainers