Hosts flyout storybook #156685
Assignees
Labels
Feature:Metrics UI
Metrics UI feature
Feature:ObsHosts
Hosts feature within Observability
Team:Infra Monitoring UI - DEPRECATED
DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services
Comments
smith
added
Feature:Metrics UI
|
Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI) |
jennypavlova
added a commit
that referenced
this issue
May 15, 2023
Closes #156685 ## Summary This PR adds stories for the flyout components. It includes storybooks for the separate components inside the flyout. The components will be moved to an embeddable and I decided to keep the stories separate to ensure that they will still work in another context (different than a flyout). _Update_ After some discussions I also added a storybook for the Flyout inside the host view (it will stay there after the content is moved to an embeddable) It will include 2 stories showing 2 tabs (metadata and processes). I couldn't find a good way to display the flyout always on the page (if it's always open it will hide the docs section after switching). I tried to search for a storybook implementation of a flyout but couldn't find a "great" example. At the end, I added an extra button on the page inside the story template to "open" it: <img width="2221" alt="image" src="https://github.com/elastic/kibana/assets/14139027/7ddc5c32-50d3-4e34-8c79-ace1c8c6ee1d"> ## Additional changes - Added a wrapper around the flyout component - Why do we need it?: So the flyout is a complex component and the logic there is depending on URL data and has child components depending on the data provided there. So having the wrapper will help us "mock" the props easier in the storybook. ## Known issues 🐞 - As we are moving those components to embeddable (in this issue) and we are going to use lens charts currently I didn't invest time to make the charts work as we are probably changing them soon anyway (this can still be changed once it's already moved to embeddable) <img width="2523" alt="image" src="https://github.com/elastic/kibana/assets/14139027/1c604766-9481-47be-9c11-2debfabe35af"> - The storybook addons warning [here](https://github.com/elastic/kibana/pull/157200/files#diff-93476b1ed21e5574f018cb4ebd6f774723725ef74880c5736e83332e399d2ffcR10-R12) won't be an issue once it's moved to embeddable - Closing the flyout: In general, having a complex component like the host details flyout in a single story is a bit tricky to implement (which I realized after trying many options to do that and there are always some issues) As it's not a straightforward flag like we have for the loading for example ( it depends on the data provided). I found [actionArgs](https://storybook.js.org/docs/react/essentials/actions#action-args) examples but they are used to display data received by the event handler and not to execute extra logic from what I understood. Overall most of the storybook examples are pretty 'static' which is fine keeping in mind that the idea of the storybook is not to implement functionality. My idea to add an option to close the flyout is to avoid "hiding" the page content behind it in case of checking the docs. The workaround with an open button helps with the situation where the documentation and the actual page are still not hidden behind the flyout before the button is clicked, but closing it still has issues (showing a blank docs screen after closing, needs a page refresh or switching to a different story to fix it) ## Testing - Run `yarn storybook infra` in the main project folder - Open the url shown in the terminal (probably http://localhost:9001/ or http://localhost:9002/) - Expand the Host Details View and check the stories there: https://github.com/elastic/kibana/assets/14139027/9dda88ec-642b-4a94-a8d4-4b31081e9d5a Loading toggle: https://github.com/elastic/kibana/assets/14139027/9d3803a8-a160-47f0-9f29-9604d42ac9be https://github.com/elastic/kibana/assets/14139027/77536075-a821-40dd-a659-40a6477ddf2e - Other option: Storybook Build link: https://ci-artifacts.kibana.dev/storybooks/pr-157200/0ec8068c5ed3cb0bb7cd8822b7c606f48ec8d4bf/infra/index.html?path=/docs/infra-host-details-view-components-processes--default-processes-and-summary
jasonrhodes
pushed a commit
that referenced
this issue
May 17, 2023
Closes #156685 ## Summary This PR adds stories for the flyout components. It includes storybooks for the separate components inside the flyout. The components will be moved to an embeddable and I decided to keep the stories separate to ensure that they will still work in another context (different than a flyout). _Update_ After some discussions I also added a storybook for the Flyout inside the host view (it will stay there after the content is moved to an embeddable) It will include 2 stories showing 2 tabs (metadata and processes). I couldn't find a good way to display the flyout always on the page (if it's always open it will hide the docs section after switching). I tried to search for a storybook implementation of a flyout but couldn't find a "great" example. At the end, I added an extra button on the page inside the story template to "open" it: <img width="2221" alt="image" src="https://github.com/elastic/kibana/assets/14139027/7ddc5c32-50d3-4e34-8c79-ace1c8c6ee1d"> ## Additional changes - Added a wrapper around the flyout component - Why do we need it?: So the flyout is a complex component and the logic there is depending on URL data and has child components depending on the data provided there. So having the wrapper will help us "mock" the props easier in the storybook. ## Known issues 🐞 - As we are moving those components to embeddable (in this issue) and we are going to use lens charts currently I didn't invest time to make the charts work as we are probably changing them soon anyway (this can still be changed once it's already moved to embeddable) <img width="2523" alt="image" src="https://github.com/elastic/kibana/assets/14139027/1c604766-9481-47be-9c11-2debfabe35af"> - The storybook addons warning [here](https://github.com/elastic/kibana/pull/157200/files#diff-93476b1ed21e5574f018cb4ebd6f774723725ef74880c5736e83332e399d2ffcR10-R12) won't be an issue once it's moved to embeddable - Closing the flyout: In general, having a complex component like the host details flyout in a single story is a bit tricky to implement (which I realized after trying many options to do that and there are always some issues) As it's not a straightforward flag like we have for the loading for example ( it depends on the data provided). I found [actionArgs](https://storybook.js.org/docs/react/essentials/actions#action-args) examples but they are used to display data received by the event handler and not to execute extra logic from what I understood. Overall most of the storybook examples are pretty 'static' which is fine keeping in mind that the idea of the storybook is not to implement functionality. My idea to add an option to close the flyout is to avoid "hiding" the page content behind it in case of checking the docs. The workaround with an open button helps with the situation where the documentation and the actual page are still not hidden behind the flyout before the button is clicked, but closing it still has issues (showing a blank docs screen after closing, needs a page refresh or switching to a different story to fix it) ## Testing - Run `yarn storybook infra` in the main project folder - Open the url shown in the terminal (probably http://localhost:9001/ or http://localhost:9002/) - Expand the Host Details View and check the stories there: https://github.com/elastic/kibana/assets/14139027/9dda88ec-642b-4a94-a8d4-4b31081e9d5a Loading toggle: https://github.com/elastic/kibana/assets/14139027/9d3803a8-a160-47f0-9f29-9604d42ac9be https://github.com/elastic/kibana/assets/14139027/77536075-a821-40dd-a659-40a6477ddf2e - Other option: Storybook Build link: https://ci-artifacts.kibana.dev/storybooks/pr-157200/0ec8068c5ed3cb0bb7cd8822b7c606f48ec8d4bf/infra/index.html?path=/docs/infra-host-details-view-components-processes--default-processes-and-summary
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To aid in development and sharing of the asset detail view, we can put it in our Storybook.
The flyout is here: https://github.com/elastic/kibana/blob/8b6c6e94a426d7d3a0756c36fc8bf30774a4301f/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout.tsx
Put it into a Storybook similar to https://ci-artifacts.kibana.dev/storybooks/main/5207e5289589e9f7fb99f1f4b0d73bfc724ffb0a/infra/index.html?path=/story/infra-logstream-overview--page
When we convert it into an embeddable we can use this storybook for examples and docs.
✔️ AC
Add stories for:
⏭️ Next steps
When the components are moved to embedable we can add documentation on how to use the embedable.
The text was updated successfully, but these errors were encountered: