chore(slo): improve index selection

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 }]