[SLO Form] Refactor to use kibana data view component

[shahzad31]

Summary

Fixes #171687

Refactor to use kibana data view component !!

user can also save a new data or use ad-hoc data view

This also avoid so many unnecessary requests being loaded, notice the difference almost avoid 15 extra requests

After

Before

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[shahzad31]

/ci

[elasticmachine]

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

[simianhacker]

It looks like there's an issue when you go to clone an SLO which was created using an AdHoc DataView, the page hangs. Here of the steps I used:

1. Index some fake_host data using the High Cardinality Indexer
2. Create a "Timeslice Metric"
3. Create an adhoc DataView (name: Fake Hosts, indexPattern: high-cardinality-data-fake_hosts.fake_hosts-*, timestamp: @timestamp)
4. Save the SLO
5. Clone the SLO (this is where the browser hangs)

Also since we are using DataViews, do you think we could set the Timestamp field to default to what's set for the DataView? Then they can change it if they want a different field.

[simianhacker]

❤️

[simianhacker]

Good News: Not sure why it the clone action was hanging... I did a yarn kbn reset and restarted everything and now it's working.

Bad News: Looks like there is a blank temporary DataView selected when you click on "Create SLO" from the overview page:

Then when I create an SLO and edit it, I get this:

The blank temporary DataView is in the list along with a temporary DataView with the configured index pattern. The selected DataView is the DataView I use to create the SLO. I would expect to just see the "Admin Console" DataView selected.

[simianhacker]

Thanks for removing the "empty" temporary DataView. For the "extra" data view, I added a comment with an example that would remove that as well. So the only time we'd show an "adhoc" DataView would be if there wasn't a suitable DataView to use.

[simianhacker]

If you changed this useEffect this:

  useEffect(() => {
    if (!isDataViewsLoading) {
      const missingAdHocDataView =
        dataViews.find((dataView) => dataView.title === currentIndexPattern) ||
        adHocDataViews.find((dataView) => dataView.getIndexPattern() === currentIndexPattern);

      if (!missingAdHocDataView && currentIndexPattern) {
        async function loadMissingDataView() {
          const dataView = await dataViewsService.create(
            {
              title: currentIndexPattern,
              allowNoIndex: true,
            },
            true
          );
          if (dataView) {
            setAdHocDataViews((prev) => [...prev, dataView]);
          }
        }
        loadMissingDataView();
      }
    }
  }, [adHocDataViews, currentIndexPattern, dataViewsService, isDataViewsLoading, dataViews]);

Then it wouldn't list the index pattern as an adhoc index pattern when a suitable DataView exists.

[simianhacker]

LGTM

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 4d2f84b
• Storybooks Preview

Failed CI Steps

• Jest Tests #20

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
observability	574	573	-1

Async chunks

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

id	before	after	diff
observability	588.3KB	587.6KB	-727.0B

History

• 💔 Build #185156 failed ade9c5c
• 💛 Build #184830 was flaky 9aabe03
• 💔 Build #184800 failed 3d1fd7e
• 💔 Build #184638 failed bfac9fc

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