[Infrastructure UI] Use same no data messaging on hosts view

[jennypavlova]

Closes #141273

Summary

This PR adds a No Data message similar to the Infrastructure page

Testing locally

• Check if the component renders ( I put a date in the future in order to see the no data message)

• Verify that onRefetch works

[jennypavlova]

@elasticmachine merge upstream

[neptunian]

Testing this with metricbeat this didn't work. No actual request is sent when clicking "Check for new data" because the LensComponent is no longer mounted the first time there no data so the Lens callback onLoad never runs and never sets the state again. This also causes the Unified Search "refresh" button to stop working. So I think we will need to do this differently. Perhaps everytime they clicked on either of these two buttons we'd load the Lens component and keep track of that state and then we could get access to the onLoad to do something? It might cause a "flash" of the empty table. Just an idea.

To test with metricbeat try https://www.elastic.co/guide/en/beats/metricbeat/master/metricbeat-installation-configuration.html or happy to pair on that.

[jennypavlova]

@neptunian Thank you for checking that! I saw the issue you mentioned. You are right that we should render the lens table in order to set the state so what I tried is to keep the component and visually hide it when there is no data. Probably it is not the best approach here, I just tried to make sure that the request is sent after click.
Of course, I am open to other ideas and to pair on that later today 🙂

[neptunian]

Nice! This works. Instead of rendering the components and hiding them, though, I think it'd be better if we did not render them at all because there is going to be a lot of components on this page.

Using local state or a custom hook, we could track the loading state of the table instead and render something like this:

  if (noData && !isLoading) {
    return (
      <NoData
        titleText={i18n.translate('xpack.infra.metrics.emptyViewTitle', {
          defaultMessage: 'There is no data to display.',
        })}
        bodyText={i18n.translate('xpack.infra.metrics.emptyViewDescription', {
          defaultMessage: 'Try adjusting your time or filter.',
        })}
        refetchText={i18n.translate('xpack.infra.metrics.refetchButtonLabel', {
          defaultMessage: 'Check for new data',
        })}
        onRefetch={onRefetch}
        testString="metricsEmptyViewState"
      />
    );
  }

  return (
    <LensComponent
      id="hostsView"
      timeRange={timeRange}
      attributes={getLensHostsTable(dataView, query)}
      searchSessionId={searchSessionId}
      onLoad={(isLoading, adapters) => {
        if (!isLoading && adapters?.tables) {
          setNoData(adapters?.tables.tables.default?.rows.length === 0);
          onIsLoading(false)
        }
      }}
    />)

The loading would be set to false in the LensComponent and true when the query is initiated such as in onQuerySubmit. Since I think the table could drive whether we want to load other components (if there's no host data why load other components?) it could be useful to track/share the loading/no data state of the table. What do you think?

[jennypavlova]

Instead of rendering the components and hiding them, though, I think it'd be better if we did not render them at all because there is going to be a lot of components on this page.

Good point, thanks! I added the change and now it works for me. Please let me know if it works for you.

Another thing I noticed is that on the infrastructure page when I change the search term/filter the result changes from no data to existing result and here I need to click on refresh (I think it was like that before those changes, not 100% sure) So that's still a difference between the buttons now that the refresh button will also apply the filters and if there is no filter change it will refresh. The no data page button won't apply the filters it will behave more like the light blue refresh (which I think is correct in this case)

[neptunian]

@elasticmachine merge upstream

[neptunian]

This works! 🚀

That seems like correct behaviour to me if I understand you correctly. The teal button state is unapplied changes so the "check for new data" would not apply the time range selected if you haven't applied them yet by clicking "refresh". I think that's fine.

[elasticmachine]

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

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 9640b1c

Metrics [docs]

Async chunks

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

id	before	after	diff
infra	1.0MB	1.0MB	+836.0B

History

• 💔 Build #77817 failed 4c58137
• 💔 Build #77798 failed 12c00e4
• 💚 Build #77467 succeeded 068bd89
• 💛 Build #77207 was flaky 163f8ee
• 💚 Build #77110 succeeded 1c2452b

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

cc @jennypavlova