fix(slo): search bar (#166945)

elastic · Sep 21, 2023 · 45c9cd0 · 45c9cd0
1 parent 12d1938
commit 45c9cd0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx
@@ -21,7 +21,7 @@ export function SloList({ autoRefresh }: Props) {
   const [query, setQuery] = useState('');
   const [sort, setSort] = useState<SortField | undefined>('status');
 
-  const { isInitialLoading, isLoading, isRefetching, isError, sloList, refetch } = useFetchSloList({
+  const { isLoading, isRefetching, isError, sloList } = useFetchSloList({
     page: activePage + 1,
     kqlQuery: query,
     sortBy: sort,
@@ -38,34 +38,23 @@ export function SloList({ autoRefresh }: Props) {
 
   const handlePageClick = (pageNumber: number) => {
     setActivePage(pageNumber);
-    refetch();
   };
 
   const handleChangeQuery = (newQuery: string) => {
     setActivePage(0);
     setQuery(newQuery);
-    refetch();
   };
 
   const handleChangeSort = (newSort: SortField | undefined) => {
     setActivePage(0);
     setSort(newSort);
-    refetch();
   };
 
   return (
     <EuiFlexGroup direction="column" gutterSize="m" data-test-subj="sloList">
       <EuiFlexItem grow>
         <SloListSearchFilterSortBar
-          loading={
-            isInitialLoading ||
-            isLoading ||
-            isRefetching ||
-            isCreatingSlo ||
-            isCloningSlo ||
-            isUpdatingSlo ||
-            isDeletingSlo
-          }
+          loading={isLoading || isCreatingSlo || isCloningSlo || isUpdatingSlo || isDeletingSlo}
           onChangeQuery={handleChangeQuery}
           onChangeSort={handleChangeSort}
         />

diff --git a/...ck/plugins/observability/public/pages/slos/components/slo_list_search_filter_sort_bar.tsx b/...ck/plugins/observability/public/pages/slos/components/slo_list_search_filter_sort_bar.tsx
@@ -16,6 +16,7 @@ import {
   EuiSelectableOption,
 } from '@elastic/eui';
 import { EuiSelectableOptionCheckedType } from '@elastic/eui/src/components/selectable/selectable_option';
+import { Query } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { QueryStringInput } from '@kbn/unified-search-plugin/public';
 import React, { useState } from 'react';
@@ -103,9 +104,13 @@ export function SloListSearchFilterSortBar({
             unifiedSearch,
           }}
           disableAutoFocus
-          onSubmit={() => onChangeQuery(query)}
+          onSubmit={(value: Query) => {
+            setQuery(String(value.query));
+            onChangeQuery(String(value.query));
+          }}
           disableLanguageSwitcher
           isDisabled={loading}
+          autoSubmit
           indexPatterns={dataView ? [dataView] : []}
           placeholder={i18n.translate('xpack.observability.slo.list.search', {
             defaultMessage: 'Search your SLOs...',