[Metrics UI] Fixing race condition in Metric Threshold alerts

[simianhacker]

Summary

This PR fixes #97150 by refactoring useMetricsExplorerData to use useTrackedPromises and then rely on the cancelPreviousOn set to creation to cancel the previous request. Since the basic behavior should remain the same the original use_metrics_explorer_data.test.tsx tests should pass.

Setup for Testing

In order to test this, you need to put the Metrics Explorer code into a state where the some requests are delayed. To do this add the following code to x-pack/plugins/infra/server/routes/metrics_explorer/index.ts starting on line 57:

const sleep = (milliseconds: number) => {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
};

const hasHostName = /host\.name/.test(optionsWithInterval.filterQuery || '');
const hasEventDataset = /event\.dataset/.test(optionsWithInterval.filterQuery || '');
console.log('hasHostName', hasHostName, 'hasEventDataset', hasEventDataset);

if (hasHostName && !hasEventDataset) {
  await sleep(3000);
}

Steps for Testing

1. Open a browser with the network traffic tab open in the dev console
2. Create some hosts using the latest version of Slingshot via:
   ./bin/slingshot.ts load --config ./configs/hosts.json --purge --start now-5d/d --end now+1d/d
3. Create a Metric Threshold alert for Average of system.cpu.total.pct and filter by host.name: "host-0" and event.dataset: "system.memory"
4. Select and event.dataset: "system.memory", cut it then paste it immediately.

Before the fix, it should make a request for only host.name: "host-0", which should take ~3 seconds and then a request with host.name: "host-0" and event.dataset: "system.memory" should happen but return almost immediately. The screen will update with a blank chart (from the second request) and then update to a chart with data (from the first request).

After the fix the chart should display the results from the second request, even when the first request completes afterwards.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: ecd061d
• Storybooks Preview

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.9MB	1.9MB	+486.0B

History

• 💔 Build #122859 failed 085b536

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

[sgrodzicki]

Can we get this in for v7.13.0 too?

[elasticmachine]

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

[estermv]

LGTM 🚀