mirror of
https://github.com/elastic/kibana.git
synced 2025-04-21 16:29:04 -04:00
ee77e0387b
# Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] [Collapsable Panels] Add panel management API (#195513)](https://github.com/elastic/kibana/pull/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":"Heenawter@users.noreply.github.com"},"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/elastic/kibana/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/elastic/kibana/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🙇\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 <42973632+kibanamachine@users.noreply.github.com>","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/elastic/kibana/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/elastic/kibana/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🙇\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 <42973632+kibanamachine@users.noreply.github.com>","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/elastic/kibana/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/elastic/kibana/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🙇\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 <42973632+kibanamachine@users.noreply.github.com>","sha":"a91427d71bfab9d6a47c3dcdfd5e1a08b8e3ee6f"}}]}] BACKPORT--> Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| public | ||
| kibana.jsonc | ||
| README.md | ||
| tsconfig.json | ||
Grid Example
This plugin is a playground and learning tool that demonstrates the Dashboard layout engine.