Convert button group to toggle. Refactor code structure for scalability.

[phillipb]

Summary

This PR restructures the inventory page's UI, and the app's structure to support more types of inventory.

For the UI:

• Change the view type switcher from a ButtonGroup to a PopOver menu.

For the Code

• Move each type of toolbar (host, container, pod) to a separate file.

Fixes: #45924.

Before

After

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

Pinging @elastic/infra-logs-ui (Team:infra-logs-ui)

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[sgrodzicki]

@phillipb would you mind adding some screenshots (before/after), so it's easier to understand the scope of this? :)

[Kerry350]

Looks good, really like the change visually 👍 I've left some comments r.e. possibly cutting out some duplication.

[Titch990]

I'm slightly concerned that Docker, Kubernetes etc are now rather well hidden below what looks like a "Hosts" dropdown. Users may think that clicking that dropdown allows them to select a single host, rather than allow them to select a different view of their inventory.

I wonder if it would be better to adopt the approach used by other the dropdowns here, and prefix the text with the kind of thing the dropdown relates to (for example, "Metrics: CPU Usage"), so the dropdown tells you both the kind of thing you are selecting, and the selection you have made.

So perhaps something like "View: Hosts"? Although perhaps there may be a better word than "View" as we also use "View" below in "Table view" and "Map view"? But I think some kind of informational prefix on the dropdown is needed to avoid confusion. Is there a general term we use elsewhere to refer to the collection of things like "Hosts", "Docker", "Kubernetes" etc . . . . ?

PS, typo in Kubernetes too, in your screenshot.

[simianhacker]

I made some commments inline about reducing some of the boiler plate in the toolbars. I think we should also take this opportunity to change the styles so they look more consistent. Here is what they should look like

This is a screen shot from 8721a2d based on design provided by @hbharding. The "view" drop down should be positioned like you have in this PR but the "Metric" and "Group By" drop downs should look like the image above.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: 254e27c

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 75e552f

[simianhacker]

LGTM