[Actionable observability] Refactor alert search bar

x-pack/plugins/observability/public/application/types.ts

@@ -25,6 +25,7 @@ import { LensPublicStart } from '@kbn/lens-plugin/public';
 import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
 import { CasesUiStart } from '@kbn/cases-plugin/public';
 import { TimelinesUIStart } from '@kbn/timelines-plugin/public';
+import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 
 export interface ObservabilityAppServices {
   application: ApplicationStart;
@@ -44,6 +45,7 @@ export interface ObservabilityAppServices {
   theme: ThemeServiceStart;
   timelines: TimelinesUIStart;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+  unifiedSearch: UnifiedSearchPublicPluginStart;
   uiSettings: IUiSettingsClient;
   isDev?: boolean;
 }

x-pack/plugins/observability/public/pages/alerts/components/alerts_search_bar.tsx

@@ -5,11 +5,14 @@
  * 2.0.
  */
 
-import React, { useMemo, useState } from 'react';
-import { TimeHistory } from '@kbn/data-plugin/public';
-import { SearchBar } from '@kbn/unified-search-plugin/public';
-import { Storage } from '@kbn/kibana-utils-plugin/public';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+// import { createSearchBar } from '@kbn/unified-search-plugin/public/search_bar';
+import React, { useState } from 'react';
+// import { TimeHistory } from '@kbn/data-plugin/public';
+// import { SearchBar } from '@kbn/unified-search-plugin/public';
+// import { Storage } from '@kbn/kibana-utils-plugin/public';
 import type { ValidFeatureId } from '@kbn/rule-data-utils';
+import { ObservabilityAppServices } from '../../../application/types';
 import { translations } from '../../../config';
 import { useAlertDataView } from '../../../hooks/use_alert_data_view';
 
@@ -29,30 +32,58 @@ export function AlertsSearchBar({
   onQueryChange: ({}: {
     dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' };
     query?: string;
+    // filter?: Filter;
   }) => void;
 }) {
-  const timeHistory = useMemo(() => {
-    return new TimeHistory(new Storage(localStorage));
-  }, []);
+  const {
+    unifiedSearch: {
+      ui: { SearchBar },
+    },
+  } = useKibana<ObservabilityAppServices>().services;
+  // const timeHistory = useMemo(() => {
+  //   return new TimeHistory(new Storage(localStorage));
+  // }, []);
   const [queryLanguage, setQueryLanguage] = useState<QueryLanguageType>('kuery');
   const { value: dataView, loading, error } = useAlertDataView(featureIds);
 
+  // const SearchBar = createSearchBar({
+  //   core,
+  //   data: dataServices,
+  //   storage: this.storage,
+  //   usageCollection: this.usageCollection,
+  // });
   return (
     <SearchBar
+      appName={'observability-alerts'}
       indexPatterns={loading || error ? [] : [dataView!]}
       placeholder={translations.alertsSearchBar.placeholder}
       query={{ query: query ?? '', language: queryLanguage }}
-      timeHistory={timeHistory}
+      // timeHistory={timeHistory}
       dateRangeFrom={rangeFrom}
       dateRangeTo={rangeTo}
-      onQuerySubmit={({ dateRange, query: nextQuery }) => {
+      onQueryChange={(props) => {
+        console.log('onQueryChange:', props);
+        const { dateRange, query: nextQuery } = props;
         onQueryChange({
           dateRange,
           query: typeof nextQuery?.query === 'string' ? nextQuery.query : '',
         });
         setQueryLanguage((nextQuery?.language ?? 'kuery') as QueryLanguageType);
       }}
+      onQuerySubmit={(props) => {
+        console.log('onQuerySubmit:', props);
+        const { dateRange, query: nextQuery } = props;
+        onQueryChange({
+          dateRange,
+          query: typeof nextQuery?.query === 'string' ? nextQuery.query : '',
+        });
+        setQueryLanguage((nextQuery?.language ?? 'kuery') as QueryLanguageType);
+      }}
+      // onFiltersUpdated={(filter) => {
+      //   console.log('filter:', filter);
+      // }}
       displayStyle="inPage"
+      showFilterBar={true}
     />
   );
 }

x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/alerts_page.tsx

@@ -56,8 +56,13 @@ function AlertsPage() {
     data: {
       query: {
         timefilter: { timefilter: timeFilterService },
+        // queryString,
+        // filterManager,
       },
     },
+    // unifiedSearch: {
+    //   ui: { SearchBar },
+    // },
   } = useKibana<ObservabilityAppServices>().services;
 
   const [ruleStatsLoading, setRuleStatsLoading] = useState<boolean>(false);
@@ -128,7 +133,8 @@ function AlertsPage() {
   };
 
   const onQueryChange = useCallback(
-    ({ dateRange, query }) => {
+    ({ dateRange, query, filters }) => {
+      console.log('Query changed:', dateRange, query, filters);
       if (rangeFrom === dateRange.from && rangeTo === dateRange.to && kuery === (query ?? '')) {
         return onRefresh();
       }
@@ -204,6 +210,7 @@ function AlertsPage() {
     >
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem>
+          {/* <SearchBar appName={'observability_alerts'} onQueryChange={onQueryChange} />*/}
           <AlertsSearchBar
             featureIds={observabilityAlertFeatureIds}
             rangeFrom={rangeFrom}

x-pack/plugins/observability/public/plugin.ts

@@ -6,6 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import { BehaviorSubject, from } from 'rxjs';
 import { map } from 'rxjs/operators';
 import {
@@ -67,6 +68,7 @@ export interface ObservabilityPublicPluginsSetup {
 }
 
 export interface ObservabilityPublicPluginsStart {
+  unifiedSearch: UnifiedSearchPublicPluginStart;
   usageCollection: UsageCollectionSetup;
   cases: CasesUiStart;
   embeddable: EmbeddableStart;