[Infrastructure UI] Hosts View: Unified Search bar with auto-refresh …

…enabled (elastic#157011) Closes elastic#156690 ## Summary This PR adds a flag (`isAutoRefreshDisabled`) to disable the default auto-refresh option in the unified search. ## Background The auto refresh is added by default when using a unified search bar in [defaultOnRefreshChange](https://github.com/elastic/kibana/blob/main/src/plugins/unified_search/public/search_bar/create_search_bar.tsx/#L59) and it appeared on the host view page when currently the auto-refresh option is not supported. | with `isAutoRefreshDisabled` (true) | without `isAutoRefreshDisabled` (false/undefined) | | ------------------------------------ | -------------------------------------------------- | | <img width="200" alt="image" src="https://user-images.githubusercontent.com/14139027/236862888-63efdb13-6b07-41c2-abe8-88247c9c96e1.png"> | <img width="200" alt="image" src="https://user-images.githubusercontent.com/14139027/236862409-4f36ec6a-f274-4dae-960b-407ea30f330b.png"> | --------- Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
saarikabhasi · Jun 13, 2023 · 885e8bd · 885e8bd
1 parent c82179c
commit 885e8bd
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/src/plugins/unified_search/public/__stories__/search_bar.stories.tsx b/src/plugins/unified_search/public/__stories__/search_bar.stories.tsx
@@ -250,9 +250,16 @@ storiesOf('SearchBar', module)
       showDatePicker: false,
     } as SearchBarProps)
   )
-  .add('with date picker off', () =>
+  .add('with the default date picker auto refresh interval on', () =>
     wrapSearchBarInContext({
-      showDatePicker: false,
+      showDatePicker: true,
+      onRefreshChange: action('onRefreshChange'),
+    } as SearchBarProps)
+  )
+  .add('with the default date picker auto refresh interval off', () =>
+    wrapSearchBarInContext({
+      showDatePicker: true,
+      isAutoRefreshDisabled: true,
     } as SearchBarProps)
   )
   .add('with only the date picker on', () =>

diff --git a/src/plugins/unified_search/public/search_bar/create_search_bar.tsx b/src/plugins/unified_search/public/search_bar/create_search_bar.tsx
@@ -227,7 +227,11 @@ export function createSearchBar({
             filters={filters}
             query={query}
             onFiltersUpdated={defaultFiltersUpdated(data.query, props.onFiltersUpdated)}
-            onRefreshChange={defaultOnRefreshChange(data.query, props.onRefreshChange)}
+            onRefreshChange={
+              !props.isAutoRefreshDisabled
+                ? defaultOnRefreshChange(data.query, props.onRefreshChange)
+                : undefined
+            }
             savedQuery={savedQuery}
             onQuerySubmit={defaultOnQuerySubmit(props, data.query, query)}
             onRefresh={props.onRefresh}

diff --git a/src/plugins/unified_search/public/search_bar/search_bar.tsx b/src/plugins/unified_search/public/search_bar/search_bar.tsx
@@ -84,6 +84,8 @@ export interface SearchBarOwnProps<QT extends AggregateQuery | Query = Query> {
   // Autorefresh
   onRefreshChange?: (options: { isPaused: boolean; refreshInterval: number }) => void;
   indicateNoData?: boolean;
+  // Disables the default auto-refresh option inside the date picker
+  isAutoRefreshDisabled?: boolean;
 
   placeholder?: string;
   isClearable?: boolean;

diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/unified_search_bar.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/unified_search_bar.tsx
@@ -68,6 +68,7 @@ export const UnifiedSearchBar = () => {
             showQueryInput
             showQueryMenu
             useDefaultBehaviors
+            isAutoRefreshDisabled
           />
         </EuiFlexItem>
         <EuiFlexItem>