chore(slo): improve index selection (elastic#159849)

## 📝  Summary

This PR changes the index selection component behaviours. We are
fetching the Data Views (limit to 10 at a time). The user can select one
of them, or search for other Data Views and index pattern that matches
at least on index.

Therefore the user can choose any Data Views matching a search, or the
index pattern derived from the search, if it matches at least one index.

| Screenshot |
| -- |
|
![image](https://github.com/elastic/kibana/assets/1376800/ae0b1304-d701-4b17-823d-f0a727df65d6)
|
|
![image](https://github.com/elastic/kibana/assets/1376800/187814bd-849e-4164-bb52-517d144507ad)
|
|
![image](https://github.com/elastic/kibana/assets/1376800/3f1a2d3c-e9f2-4490-81ba-5d76e8d1cbb8)
|

## 🧪 Testing

1. **Create 11 data views or more**
Easiest method is to use curl with a POST on `/api/data_views/data_view`
with a random payload:
```
{
  "data_view": {
     "title": "{% uuid 'v4' %}-log*",
     "name": "{% uuid 'v4' %} "
  }
}
```

2. **Go to the SLO form and select custom KQL, then search for a data
view or another index pattern**

x-pack/plugins/observability/public/hooks/__storybook_mocks__/use_fetch_indices.ts

@@ -12,18 +12,13 @@ export const useFetchIndices = (): UseFetchIndicesResponse => {
     isLoading: false,
     isError: false,
     isSuccess: true,
-    indices: [
+    data: [
       ...Array(10)
         .fill(0)
-        .map((_, i) => ({
-          name: `.index-${i}`,
-        })),
+        .map((_, i) => `.index-${i}`),
       ...Array(10)
         .fill(0)
-        .map((_, i) => ({
-          name: `.some-other-index-${i}`,
-        })),
+        .map((_, i) => `.some-other-index-${i}`),
     ] as Index[],
-    refetch: function () {} as UseFetchIndicesResponse['refetch'],
   };
 };

x-pack/plugins/observability/public/hooks/use_fetch_data_views.ts

@@ -18,34 +18,31 @@ export interface UseFetchDataViewsResponse {
   isLoading: boolean;
   isSuccess: boolean;
   isError: boolean;
-  dataViews: DataView[] | undefined;
+  data: DataView[] | undefined;
   refetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
   ) => Promise<QueryObserverResult<DataView[], unknown>>;
 }
 
-interface FetchDataViewParams {
+interface Params {
   name?: string;
   size?: number;
 }
 
-export function useFetchDataViews({
-  name = '',
-  size = 10,
-}: FetchDataViewParams): UseFetchDataViewsResponse {
+export function useFetchDataViews({ name = '', size = 10 }: Params): UseFetchDataViewsResponse {
   const { dataViews } = useKibana().services;
+  const search = name.endsWith('*') ? name : `${name}*`;
 
   const { isLoading, isError, isSuccess, data, refetch } = useQuery({
-    queryKey: ['fetchDataViews', name],
+    queryKey: ['fetchDataViews', search],
     queryFn: async () => {
       try {
-        const response = await dataViews.find(`${name}*`, size);
-        return response;
+        return await dataViews.find(search, size);
       } catch (error) {
         throw new Error(`Something went wrong. Error: ${error}`);
       }
     },
   });
 
-  return { isLoading, isError, isSuccess, dataViews: data, refetch };
+  return { isLoading, isError, isSuccess, data, refetch };
 }

x-pack/plugins/observability/public/hooks/use_fetch_indices.ts

@@ -5,41 +5,46 @@
  * 2.0.
  */
 
-import {
-  QueryObserverResult,
-  RefetchOptions,
-  RefetchQueryFilters,
-  useQuery,
-} from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useKibana } from '../utils/kibana_react';
 
+export type Index = string;
+
 export interface UseFetchIndicesResponse {
   isLoading: boolean;
   isSuccess: boolean;
   isError: boolean;
-  indices: Index[] | undefined;
-  refetch: <TPageData>(
-    options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
-  ) => Promise<QueryObserverResult<Index[], unknown>>;
+  data: Index[] | undefined;
+}
+
+interface Params {
+  search?: string;
 }
-export interface Index {
-  name: string;
+
+interface ResolveIndexReponse {
+  indices: Array<{ name: string }>;
 }
 
-export function useFetchIndices(): UseFetchIndicesResponse {
+export function useFetchIndices({ search }: Params): UseFetchIndicesResponse {
   const { http } = useKibana().services;
 
-  const { isLoading, isError, isSuccess, data, refetch } = useQuery({
-    queryKey: ['fetchIndices'],
-    queryFn: async ({ signal }) => {
+  const { isLoading, isError, isSuccess, data } = useQuery({
+    queryKey: ['fetchIndices', search],
+    queryFn: async () => {
+      const searchPattern = search?.endsWith('*') ? search : `${search}*`;
       try {
-        const response = await http.get<Index[]>(`/api/index_management/indices`, { signal });
-        return response;
+        const response = await http.get<ResolveIndexReponse>(
+          `/internal/index-pattern-management/resolve_index/${searchPattern}`
+        );
+        return response.indices.map((index) => index.name);
       } catch (error) {
         throw new Error(`Something went wrong. Error: ${error}`);
       }
     },
+    retry: false,
+    enabled: Boolean(search),
+    refetchOnWindowFocus: false,
   });
 
-  return { isLoading, isError, isSuccess, indices: data, refetch };
+  return { isLoading, isError, isSuccess, data };
 }

x-pack/plugins/observability/public/pages/slo_edit/components/custom_common/index_selection.tsx

@@ -5,16 +5,15 @@
  * 2.0.
  */
 
-import React, { useEffect, useMemo, useState } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
 import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
+import { DataView } from '@kbn/data-views-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { CreateSLOInput } from '@kbn/slo-schema';
-import { DataView } from '@kbn/data-views-plugin/public';
 import { debounce } from 'lodash';
-
+import React, { useEffect, useMemo, useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useFetchDataViews } from '../../../../hooks/use_fetch_data_views';
-import { useFetchIndices, Index } from '../../../../hooks/use_fetch_indices';
+import { useFetchIndices } from '../../../../hooks/use_fetch_indices';
 
 interface Option {
   label: string;
@@ -23,55 +22,62 @@ interface Option {
 
 export function IndexSelection() {
   const { control, getFieldState } = useFormContext<CreateSLOInput>();
-  const { isLoading: isIndicesLoading, indices = [] } = useFetchIndices();
+
   const [searchValue, setSearchValue] = useState<string>('');
-  const { isLoading: isDataViewsLoading, dataViews = [] } = useFetchDataViews({
+  const [dataViewOptions, setDataViewOptions] = useState<Option[]>([]);
+  const [indexPatternOption, setIndexPatternOption] = useState<Option | undefined>();
+
+  const { isLoading: isIndicesLoading, data: indices = [] } = useFetchIndices({
+    search: searchValue,
+  });
+  const { isLoading: isDataViewsLoading, data: dataViews = [] } = useFetchDataViews({
     name: searchValue,
   });
-  const [indexOptions, setIndexOptions] = useState<Option[]>([]);
 
   useEffect(() => {
-    setIndexOptions(createIndexOptions(indices, dataViews));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [indices.length, dataViews.length]);
+    setDataViewOptions(createDataViewOptions(dataViews));
+  }, [dataViews, dataViews.length]);
+
+  useEffect(() => {
+    if (indices.length === 0) {
+      setIndexPatternOption(undefined);
+    } else if (!!searchValue) {
+      const searchPattern = searchValue.endsWith('*') ? searchValue : `${searchValue}*`;
+
+      setIndexPatternOption({
+        label: i18n.translate(
+          'xpack.observability.slo.sloEdit.customKql.indexSelection.indexPatternLabel',
+          { defaultMessage: 'Use the index pattern' }
+        ),
+        options: [
+          {
+            value: searchPattern,
+            label: i18n.translate(
+              'xpack.observability.slo.sloEdit.customKql.indexSelection.indexPatternFoundLabel',
+              {
+                defaultMessage:
+                  '{searchPattern} (match {num, plural, one {# index} other {# indices}})',
+                values: {
+                  searchPattern,
+                  num: indices.length,
+                },
+              }
+            ),
+          },
+        ],
+      });
+    }
+  }, [searchValue, indices, indices.length]);
 
   const onDataViewSearchChange = useMemo(
     () => debounce((value: string) => setSearchValue(value), 300),
     []
   );
 
-  const onSearchChange = (search: string) => {
-    onDataViewSearchChange(search);
-    const options: Option[] = [];
-    if (!search) {
-      return setIndexOptions(createIndexOptions(indices, dataViews));
-    }
-
-    const searchPattern = search.endsWith('*') ? search.substring(0, search.length - 1) : search;
-    const matchingIndices = indices.filter(({ name }) => name.startsWith(searchPattern));
-
-    if (matchingIndices.length === 0 && dataViews.length === 0) {
-      return setIndexOptions([]);
-    }
-
-    createIndexOptions(matchingIndices, dataViews).map((option) => options.push(option));
-
-    const searchWithStarSuffix = search.endsWith('*') ? search : `${search}*`;
-    options.push({
-      label: i18n.translate(
-        'xpack.observability.slo.sloEdit.customKql.indexSelection.indexPatternLabel',
-        { defaultMessage: 'Use an index pattern' }
-      ),
-      options: [{ value: searchWithStarSuffix, label: searchWithStarSuffix }],
-    });
-
-    setIndexOptions(options);
-  };
-
   const placeholder = i18n.translate(
     'xpack.observability.slo.sloEdit.customKql.indexSelection.placeholder',
     {
-      defaultMessage: 'Select an index or index pattern',
+      defaultMessage: 'Select a Data View or use an index pattern',
     }
   );
 
@@ -110,8 +116,10 @@ export function IndexSelection() {
 
               field.onChange('');
             }}
-            onSearchChange={onSearchChange}
-            options={indexOptions}
+            onSearchChange={onDataViewSearchChange}
+            options={
+              indexPatternOption ? [...dataViewOptions, indexPatternOption] : dataViewOptions
+            }
             placeholder={placeholder}
             selectedOptions={
               !!field.value ? [findSelectedIndexPattern(dataViews, field.value)] : []
@@ -145,21 +153,10 @@ function createDataViewLabel(dataView: DataView) {
   return `${dataView.getName()} (${dataView.getIndexPattern()})`;
 }
 
-function createIndexOptions(indices: Index[], dataViews: DataView[]): Option[] {
-  const options = [
-    {
-      label: i18n.translate(
-        'xpack.observability.slo.sloEdit.customKql.indexSelection.indexOptionsLabel',
-        { defaultMessage: 'Select an existing index' }
-      ),
-      options: indices
-        .filter(({ name }) => !name.startsWith('.'))
-        .map(({ name }) => ({ label: name, value: name }))
-        .sort((a, b) => String(a.label).localeCompare(b.label)),
-    },
-  ];
+function createDataViewOptions(dataViews: DataView[]): Option[] {
+  const options = [];
   if (dataViews.length > 0) {
-    options.unshift({
+    options.push({
       label: i18n.translate(
         'xpack.observability.slo.sloEdit.customKql.indexSelection.dataViewOptionsLabel',
         { defaultMessage: 'Select an existing Data View' }
@@ -172,5 +169,6 @@ function createIndexOptions(indices: Index[], dataViews: DataView[]): Option[] {
         .sort((a, b) => String(a.label).localeCompare(b.label)),
     });
   }
+
   return options;
 }

x-pack/plugins/observability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx

@@ -32,9 +32,9 @@ interface Option {
 
 export function CustomKqlIndicatorTypeForm() {
   const { control, watch, getFieldState } = useFormContext<CreateSLOInput>();
-  const { isLoading, data: indexFields } = useFetchIndexPatternFields(
-    watch('indicator.params.index')
-  );
+  const index = watch('indicator.params.index');
+
+  const { isLoading, data: indexFields } = useFetchIndexPatternFields(index);
   const timestampFields = (indexFields ?? []).filter((field) => field.type === 'date');
 
   return (
@@ -71,9 +71,9 @@ export function CustomKqlIndicatorTypeForm() {
                   )}
                   data-test-subj="customKqlIndicatorFormTimestampFieldSelect"
                   isClearable
-                  isDisabled={!watch('indicator.params.index')}
+                  isDisabled={!index}
                   isInvalid={fieldState.invalid}
-                  isLoading={!!watch('indicator.params.index') && isLoading}
+                  isLoading={!!index && isLoading}
                   onChange={(selected: EuiComboBoxOptionOption[]) => {
                     if (selected.length) {
                       return field.onChange(selected[0].value);
@@ -83,7 +83,7 @@ export function CustomKqlIndicatorTypeForm() {
                   }}
                   options={createOptions(timestampFields)}
                   selectedOptions={
-                    !!watch('indicator.params.index') &&
+                    !!index &&
                     !!field.value &&
                     timestampFields.some((timestampField) => timestampField.name === field.value)
                       ? [{ value: field.value, label: field.value }]