[Infrastructure UI] Convert enhanced host details to EuiFlyout

[katefarrar]

Summary

On the Metrics Inventory view, we are going to convert the Enhanced Node Details to a flyout.

This will allow us to have continuity for future shareable components that include this feature and it will avoid any issues with users interacting with the Inventory view and how those will affect the Enhanced Node Details data being displayed.

Another example would be to provide users with an option to inspect each individual host directly from the Hosts experience. Additionally, we could leverage the pagination option to let users cycle through the list of hosts from within the flyout.

Solution

EuiTabs will use the expand prop.

Investigate button will be a context menu that contains three links:

• Open as page
• Open in APM
• Open in Uptime

Additionally, the Metrics tab time range dropdown will be converted to a button group to make it easier to click through the different time ranges as well as making it the feature more prominent.

Figma Prototype

(We previously discussed making this a pushed flyout, but decided against it. More context here: #118224)

[elasticmachine]

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

[katefarrar]

@jasonrhodes @phillipb curious if you have any feedback based on these updates. thanks!

[katefarrar]

@jasonrhodes @phillipb if y'all are good with these updates, then we can move to this out of "Refining" into "Ready". Thanks!

[phillipb]

@katefarrar sounds good to me. Let's put it in ready and I can probably tackle next cycle.

[roshan-elastic]

@smith @neptunian @formgeist it looks like this was already delivered as far as I can see? Can I close this one off?

[formgeist]

@smith @neptunian @formgeist it looks like this was already delivered as far as I can see? Can I close this one off?

Where do you see that it's completed?

[roshan-elastic]

Oh hang on @formgeist, sorry - I thought it was what was already delivered:

This is a different component right?

I guess I'm trying to understand the value of this (particularly if we decide to do something more ambitious than the 'inventory' view instead of continuing to iterate it)?

[formgeist]

@roshan-elastic It does appear like a flyout, but it's not and it's inconsistent with the rest of the Kibana to use an inner popover like this. The main reason for converting this into a proper flyout was that it would be reusable in the use-cases for APM hosts, but also now for the Infrastructure Hosts view, so instead of linking to the legacy host detail page, we'd actually present this more updated content about each host.

The minimal scope of converting this into a reusable component as a flyout can benefit us in the short term until we have a better alternative. I imagine the usability of this flyout across our Obs solution as the host detail information can easily be referenced and previewed by the user. There are a few further enhancements we might want to make to improve it even more for the use cases mentioned, but we can dive into that if that sounds interesting. WDYT?

[roshan-elastic]

Thanks for the context @formgeist. Totally onboard with the suggestion here - just a case of prioritising based on the benefits.

I've set up a backlog review for the Hosts feature later this week to walk through everything we have on hosts to take a stab at prioritising - if you have time to attend I think that'd be a good time to discuss if that works?

[roshan-elastic]

@smith @kkurstak @formgeist @neptunian @jennypavlova @crespocarlos
I can see an epic for us to think about evolving the 'host' screen (and fly-out) into something more portable and flexible to be used for things which aren't just 'hosts' (e.g. screens for other types of infra - like cloud-native services like DynamoDB - potentially clusters etc)...

Ear-marking this as something to consider as part of a potential epic on this...

[smith]

I can see an epic for us to think about evolving the 'host' screen (and fly-out) into something more portable and flexible to be used for things which aren't just 'hosts' (e.g. screens for other types of infra - like cloud-native services like DynamoDB - potentially clusters etc)...

@roshan-elastic that's fine but it would probably be good to do this as a smaller incremental improvement. I don't expect the effort to be all that much, since we're changing the container and not its contents. (famous last words)

[roshan-elastic]

Makes sense @smith .

@kkurstak @formgeist - what do you think about repurposing (or splitting) this issue into a new issue/set of issues to ensure the fly-out used for hosts and inventory is consistent (with an eye to trying to make it a widget that can be used anywhere in the UI)?

e.g. imagine if you were to open an alert about a particular host, wouldn't it be cool to have a consistent view of a 'host' (and that engineers could easily choose what tabs they'd like to show)?

[roshan-elastic]

Closing this - superseded by this issue:

• https://github.com/elastic/obs-infraobs-team/issues/1059