Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Infra UI] Hosts view flyout tab should be persisted when the full page is opened #164300

Closed
jennypavlova opened this issue Aug 21, 2023 · 1 comment · Fixed by #165956
Closed
Assignees
Labels
enhancement New value added to drive a business result 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

@jennypavlova
Copy link
Member

jennypavlova commented Aug 21, 2023

Summary

As discussed in this PR we want to persist the tab opened inside the hosts view flyout when the user clicks on open as page and see the asset details page.

Currently, the overview tab on the asset details page is always shown when navigating from hosts view flyout.
For example, if the metadata tab is opened and the open as page button is clicked, the overview tab will be shown on the asset details page (when metadata is expected):

nav_from_hosts_view.mov

Implementation hints

Currently, the new Host Details page is reusing the existing Metrics Details query params to get the time and load the page

_a=(autoReload:!f,refreshInterval:5000,time:(from:now-15m,interval:>%3D1m,to:now))

With the introduction of the new Host Details page, a new parameter was added assetName

_a=(autoReload:!f,refreshInterval:5000,time:(from:now-15m,interval:>%3D1m,to:now))&assetName=Carloss-MacBook-Pro.local

The new Host Details doesn't need the autoReload nor refreshInterval parameter, and in order to carry over the state from the flyout to the full page view, we'll have to create a new query string object. e.g:

{
  _a: { 
      dateRange: string,
      assetName?: string
      activeTabId?: string
      metadataTab?: { query: string }
      processesTab?: { query: string }
      logsTab?: { query: string }
  }
}

Some files we'll have to change:

https://github.com/elastic/kibana/blob/main/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_detail.tsx

https://github.com/elastic/kibana/blob/main/x-pack/plugins/infra/public/pages/metrics/hosts/components/table/entry_title.tsx#L27

https://github.com/elastic/kibana/blob/main/x-pack/plugins/infra/public/pages/metrics/metric_detail/asset_detail_page.tsx#L73

https://github.com/elastic/kibana/blob/main/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx#L21 (Asset Details won't need to be wrapped in the MetricsTimeProvider)

@jennypavlova jennypavlova added 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 labels Aug 21, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

@jennypavlova jennypavlova added the enhancement New value added to drive a business result label Aug 21, 2023
@crespocarlos crespocarlos self-assigned this Sep 4, 2023
crespocarlos added a commit that referenced this issue Sep 8, 2023
…#165956)

closes [#164300](#164300)

## Summary

This PR enables state propagation between asset details flyout and full
page view.


https://github.com/elastic/kibana/assets/2767137/7e05a3c9-afa1-447c-98fd-91c40ee6cefb

There are other places in Kibana that redirect to node details outside
the infra plugin such as APM and Observability/Overview. They use the
`link-to/${assetType}-detail` path, so It's best, for now, to keep
retro-compatibility with this route and propagate the state via query
string.

I've also refactored how we were persisting state via route navigation,
to use native the `state` attribute found in the `location` object from
`react-router`

### How to tests
- Start a Kibana instance
- Navigate to `Infrastructure` > `Host`
- Open the flyout, click in one of the tabs, and click on "Open as
Page". The page should open in the same state as the flyout.

---------

Co-authored-by: Kibana Machine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New value added to drive a business result 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
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants