[Infra UI] Inventory - convert enhanced host details to pushed flyout

[katefarrar]

In order to allow users to be able to see the waffle map and history while they are looking at Enhanced Host Details, we are going
to convert it to a pushed flyout.

Rough example:

Things to be decided / discussed:

• Styling / placement for create rule, open in page, apm, uptime links in flyout header
• Flyout width
• Can we automatically collapse Solution Navigation when a user opens the flyout?
• How will the two time pickers work together? (Metrics & Anomalies tabs. This is a current issue, but I imagine will be more prevalent with the pushed flyout.)

cc: @mukeshelastic @jasonrhodes

[elasticmachine]

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

[jasonrhodes]

The main question I have about this change is: what do we do when the tabs take up too much room for the horizontal flyout? @katefarrar would it make more sense to list these in some kind of vertically stacked "accordion" component instead of the tabs, once we are in the flyout? Or do we want horizontal scrolling for those tabs?

As for the other open questions in the ticket:

Styling / placement for create rule, open in page in flyout header

I think we need some ideas on this but I imagine it will be related to our decision of how to handle the above horizontal space question. Maybe just under the title instead of to the right of it as they are now?

Styling / placement for apm, uptime tabs (they are just outbound links)

Can we leave them as they are for now if we figure out the horizontal space question?

Flyout width

I have no opinion on this, whatever @katefarrar thinks :)

Can we automatically collapse Solution Navigation when a user opens the flyout?

Is it possible to collapse the Solution Navigation? If it is, we should be able to figure out if there's a hook of some type to collapse it without user interaction, but we may want to bounce this to a separate follow up ticket.

How will the two time pickers work together? (Metrics & Anomalies tabs. This is a current issue, but I imagine will be more prevalent with the pushed flyout.)

Let's leave this alone for now and solve it separately since the problem already exists.

[phillipb]

For a while we had talked about adding the ability to open multiple overlays and adding the ability to minimize an overlay window. We could also allow dragging the overlay too around the screen. I wonder if that could be another solution.

[jasonrhodes]

I remember those conversations. One thing to remember is that we are trending toward making this kind of component shareable and embeddable in other parts of Kibana. Do you think we can continue to use a pop up overlay pattern in those scenarios? Flyout might be an easier solution there, I'm not sure.

[phillipb]

There might be two different use cases. I like the overlay pattern for the waffle map because it could be useful to be able to compare multiple host details to each other. I also like the idea of being able to snap a host to the right of the screen and be able to search and interact with the waffle map.

If there are two different use cases, we can from a technical perspective still reuse a lot of the components. If the goal is for the host detail to look exactly the same wherever it shows up then maybe it's just a flyout and we ignore the waffle map use case.

[katefarrar]

After discussing with Phillip yesterday, I don't think the pushed flyout is the best solution at this point. Putting together some other options and plans and will post here shortly. Thanks!

[phillipb]

@katefarrar / @jasonrhodes I see the title changed. Are we going to just convert it to a flyout?

[katefarrar]

After discussing with @jasonrhodes & @mukeshelastic we've decided in the short term to convert the Enhanced Node Details to a regular flyout (not a pushed flyout as previously planned). This will still 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. @phillipb I'm assuming you can get started on converting the current modal to a flyout and I will post a mock with some improvements to the header and interaction buttons in the next few days.

In the long term, we would like to revisit the Enhanced Node Details and potentially do a Phase 2 where we can conduct user research and testing on how the feature is being used and asses what new features could be added. @phillipb and I have some ideas about being able to minimize the node details flyout, compare with another node, dock to the left or right, etc. I'm capturing some history, notes, and future ideas in this document. Please feel free free to add to it.

[katefarrar]

Decided to create a new issue so we didn't lose the context from the original description. Closing in favor of this issue: #120425