[Infrastructure UI] Add unified search to hosts table

[crespocarlos]

Summary

Closes #139594

This PR integrates the unified search component with the hosts table.

How to test this PR

• Start a local ES instance
• Start a local metricbeat with system module and add_host_metadata processor enabled
• Enable Infrastructure Hosts view in Advanced Settings
• Go to Infrastructure > Hosts

It should be possible to:

• Save and Load queries
  • Saved queries should be usable on other pages that use the unified search (Discover, Lens...)
• Add/Remove Filters
• Filter by date
• Query using KQL or Lucene

Screenshots

[crespocarlos]

We can remove it once this PR is merged

[elasticmachine]

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

[jennypavlova]

Well done! Everything works fine. I left some minor comments.
Also, I have one question regarding the no data case - I compare it with inventory and metrics explorer and on the hosts page, there is a bigger gap between the search bar and the no data message:

Do you remember if it was like that before? If it was like that we can just fix that in a separate issue.

[jennypavlova]

nit: Here we can use ??

Suggested change

	const savedQueryFilters = newSavedQuery.attributes.filters || [];
	const savedQueryFilters = newSavedQuery.attributes.filters ?? [];

[crespocarlos]

Good catch! Absolutely! ?? is the right way.

[jennypavlova]

nit: I think here we can do an early return if isDataViewLoading is true so it's easier to follow the conditions, something like this:

 if (isDataViewLoading) {
    return (
      <InfraLoadingPanel
        height="100%"
        width="auto"
        text={i18n.translate('xpack.infra.waffle.loadingDataText', {
          defaultMessage: 'Loading data',
        })}
      />
    );
  }

  return hasFailedLoadingDataView || !metricsDataView ? null : (
    <>
      <UnifiedSearchBar dataView={metricsDataView} />
      <EuiSpacer />
      <HostsTable />
    </>
  );

What do you think?

[crespocarlos]

Sure! It's easier to read

[jennypavlova]

Here I think we can simplify it to const [, forceUpdate] = useState({}); and use forceUpdate({}) ( I saw a similar pattern in other places in the code but probably I am missing something here 🤔) What do you think?

[crespocarlos]

This is what react recommends https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate. But this is temporary. I think the URL state ticket will force the component to update instead of this.

[jennypavlova]

Thanks for the explanation! We can keep it, you are right that when we update the url state and set the query/filters/time range it should be fine without it but we will probably still need to force the update when saving the query for example.

[crespocarlos]

Perhaps we don't even need that forceUpdate in the saveQuery function. It's not supposed to trigger a new search. Let me double check that.

Not really, we currently need to call the forceUpdate. Let's see what we can do if we still need this hack after we implement the URL state management. We might want to look at alternatives for this hack.

[crespocarlos]

Well done! Everything works fine. I left some minor comments. Also, I have one question regarding the no data case - I compare it with inventory and metrics explorer and on the hosts page, there is a bigger gap between the search bar and the no data message:

Do you remember if it was like that before? If it was like that we can just fix that in a separate issue.

Nice! I didn't pay attention to that, thanks. I've fixed it.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: a13c020

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
infra	1012	1014	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
infra	1009.6KB	1011.3KB	+1.7KB

Unknown metric groups

References to deprecated APIs

id	before	after	diff
infra	65	70	+5

History

• 💚 Build #82881 succeeded 76bd54f
• 💔 Build #82831 failed 31d9d16
• 💔 Build #82536 failed 9023bf16b2e15131a56908392a398f3e2ca27243
• 💚 Build #82212 succeeded 670d3a685a310f20eece7c7b74fb32cea43c77c5
• 💚 Build #82108 succeeded 8be80717839fcc57942a3a493d298524e3822c00

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[jennypavlova]

LGTM! 🚀 Thank you for the changes/fixes! 🙇

[neptunian]

thanks for improving this hook!