[Discover] Extend Elasticsearch query rule with search source based data fetching

src/plugins/data/public/index.ts

@@ -19,7 +19,7 @@ export * from './deprecated';
  */
 
 export { getEsQueryConfig } from '../common';
-export { FilterLabel, FilterItem } from './ui';
+export { FilterLabel, FilterItem, FilterBar } from './ui';
 export { getDisplayValueFromFilter, generateFilters, extractTimeRange } from './query';
 
 /**

src/plugins/data/public/ui/filter_bar/filter_bar.tsx

@@ -30,7 +30,7 @@ import { IDataPluginServices, IIndexPattern } from '../..';
 
 import { UI_SETTINGS } from '../../../common';
 
-interface Props {
+export interface FilterBarProps {
   filters: Filter[];
   onFiltersUpdated?: (filters: Filter[]) => void;
   className: string;
@@ -40,7 +40,7 @@ interface Props {
   timeRangeForSuggestionsOverride?: boolean;
 }
 
-const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
+const FilterBarUI = React.memo(function FilterBarUI(props: FilterBarProps) {
   const groupRef = useRef<HTMLDivElement>(null);
   const [isAddFilterPopoverOpen, setIsAddFilterPopoverOpen] = useState(false);
   const kibana = useKibana<IDataPluginServices>();
@@ -229,3 +229,6 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
 });
 
 export const FilterBar = injectI18n(FilterBarUI);
+
+// eslint-disable-next-line import/no-default-export
+export default FilterBar;

src/plugins/data/public/ui/filter_bar/index.tsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import type { FilterBarProps } from './filter_bar';
 
 const Fallback = () => <div />;
 
@@ -23,3 +24,10 @@ export const FilterItem = (props: React.ComponentProps<typeof LazyFilterItem>) =
     <LazyFilterItem {...props} />
   </React.Suspense>
 );
+
+const LazyFilterBar = React.lazy(() => import('./filter_bar'));
+export const FilterBar = (props: FilterBarProps) => (
+  <React.Suspense fallback={<Fallback />}>
+    <LazyFilterBar {...props} />
+  </React.Suspense>
+);

src/plugins/data/public/ui/index.ts

@@ -7,7 +7,7 @@
  */
 
 export type { IndexPatternSelectProps } from './index_pattern_select';
-export { FilterLabel, FilterItem } from './filter_bar';
+export { FilterLabel, FilterItem, FilterBar } from './filter_bar';
 export type { QueryStringInputProps } from './query_string_input';
 export { QueryStringInput } from './query_string_input';
 export type { SearchBarProps, StatefulSearchBarProps } from './search_bar';

src/plugins/discover/kibana.json

@@ -16,7 +16,7 @@
     "dataViewFieldEditor",
     "dataViewEditor"
   ],
-  "optionalPlugins": ["home", "share", "usageCollection", "spaces"],
+  "optionalPlugins": ["home", "share", "usageCollection", "spaces", "triggersActionsUi"],
   "requiredBundles": ["kibanaUtils", "home", "kibanaReact", "dataViews"],
   "extraPublicDirs": ["common"],
   "owner": {

src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.ts → src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import type { DataView, ISearchSource } from 'src/plugins/data/common';
 import { showOpenSearchPanel } from './show_open_search_panel';
@@ -17,6 +18,8 @@ import { onSaveSearch } from './on_save_search';
 import { GetStateReturn } from '../../services/discover_state';
 import { openOptionsPopover } from './open_options_popover';
 import type { TopNavMenuData } from '../../../../../../navigation/public';
+import { openAlertsPopover } from './open_alerts_popover';
+import { toMountPoint, wrapWithTheme, MarkdownSimple } from '../../../../../../kibana_react/public';
 
 /**
  * Helper function to build the top nav links
@@ -58,6 +61,43 @@ export const getTopNavLinks = ({
     testId: 'discoverOptionsButton',
   };
 
+  const alerts = {
+    id: 'alerts',
+    label: i18n.translate('discover.localMenu.localMenu.alertsTitle', {
+      defaultMessage: 'Alerts',
+    }),
+    description: i18n.translate('discover.localMenu.alertsDescription', {
+      defaultMessage: 'Alerts',
+    }),
+    run: (anchorElement: HTMLElement) => {
+      if (savedSearch.searchSource.getField('index')?.timeFieldName) {
+        openAlertsPopover({
+          I18nContext: services.core.i18n.Context,
+          anchorElement,
+          searchSource: savedSearch.searchSource,
+          services,
+        });
+      } else {
+        services.toastNotifications.addDanger({
+          title: i18n.translate('discover.alert.errorHeader', {
+            defaultMessage: "Cant't create alert",
+          }),
+          text: toMountPoint(
+            wrapWithTheme(
+              <MarkdownSimple>
+                {i18n.translate('discover.alert.dataViewDoesNotHaveTimeFieldErrorMessage', {
+                  defaultMessage: 'Data view does not have time field.',
+                })}
+              </MarkdownSimple>,
+              services.core.theme.theme$
+            )
+          ),
+        });
+      }
+    },
+    testId: 'discoverAlertsButton',
+  };
+
   const newSearch = {
     id: 'new',
     label: i18n.translate('discover.localMenu.localMenu.newSearchTitle', {
@@ -161,6 +201,7 @@ export const getTopNavLinks = ({
     ...(services.capabilities.advancedSettings.save ? [options] : []),
     newSearch,
     openSearch,
+    ...(services.triggersActionsUi ? [alerts] : []),
     shareSearch,
     inspectSearch,
     ...(services.capabilities.discover.save ? [saveSearch] : []),

src/plugins/discover/public/application/main/components/top_nav/open_alerts_popover.tsx

@@ -0,0 +1,173 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useCallback, useState, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import { I18nStart } from 'kibana/public';
+import { EuiWrappingPopover, EuiLink, EuiContextMenu } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { ISearchSource } from '../../../../../../data/common';
+import { KibanaContextProvider } from '../../../../../../kibana_react/public';
+import { DiscoverServices } from '../../../../build_services';
+import { updateSearchSource } from '../../utils/update_search_source';
+import { useDiscoverServices } from '../../../../utils/use_discover_services';
+
+const container = document.createElement('div');
+let isOpen = false;
+
+const ALERT_TYPE_ID = '.es-query';
+
+interface AlertsPopoverProps {
+  onClose: () => void;
+  anchorElement: HTMLElement;
+  searchSource: ISearchSource;
+}
+
+export function AlertsPopover(props: AlertsPopoverProps) {
+  const dataView = props.searchSource.getField('index')!;
+  const searchSource = props.searchSource;
+  const services = useDiscoverServices();
+  const { triggersActionsUi } = services;
+  const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState<boolean>(false);
+
+  const onCloseAlertFlyout = useCallback(
+    () => setAlertFlyoutVisibility(false),
+    [setAlertFlyoutVisibility]
+  );
+  /**
+   * Provides the default parameters used to initialize the new rule
+   */
+  const getParams = useCallback(() => {
+    const nextSearchSource = searchSource.createCopy();
+    updateSearchSource(nextSearchSource, true, {
+      indexPattern: searchSource.getField('index')!,
+      services,
+      sort: [],
+      useNewFieldsApi: true,
+    });
+
+    return {
+      index: [dataView?.id],
+      timeField: dataView?.timeFieldName,
+      searchType: 'searchSource',
+      searchConfiguration: nextSearchSource.getSerializedFields(),
+    };
+  }, [searchSource, services, dataView]);
+
+  const SearchThresholdAlertFlyout = useMemo(() => {
+    if (!alertFlyoutVisible) {
+      return;
+    }
+    return triggersActionsUi?.getAddAlertFlyout({
+      consumer: 'discover',
+      onClose: onCloseAlertFlyout,
+      canChangeTrigger: false,
+      alertTypeId: ALERT_TYPE_ID,
+      initialValues: {
+        params: getParams(),
+      },
+    });
+  }, [getParams, onCloseAlertFlyout, triggersActionsUi, alertFlyoutVisible]);
+
+  const panels = [
+    {
+      id: 'mainPanel',
+      name: 'Alerting',
+      items: [
+        {
+          name: (
+            <>
+              {SearchThresholdAlertFlyout}
+              <EuiLink
+                onClick={() => {
+                  setAlertFlyoutVisibility(true);
+                }}
+              >
+                <FormattedMessage
+                  id="discover.alerts.createSearchThreshold"
+                  defaultMessage="Create search threshold rule"
+                />
+              </EuiLink>
+            </>
+          ),
+          icon: 'bell',
+          disabled: !dataView.timeFieldName,
+        },
+        {
+          name: (
+            <EuiLink
+              color="text"
+              href={services?.application?.getUrlForApp(
+                'management/insightsAndAlerting/triggersActions/alerts'
+              )}
+            >
+              <FormattedMessage
+                id="discover.alerts.manageRulesAndConnectors"
+                defaultMessage="Manage rules and connectors"
+              />
+            </EuiLink>
+          ),
+          icon: 'tableOfContents',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      {SearchThresholdAlertFlyout}
+      <EuiWrappingPopover
+        ownFocus
+        button={props.anchorElement}
+        closePopover={props.onClose}
+        isOpen={!alertFlyoutVisible}
+      >
+        <EuiContextMenu initialPanelId="mainPanel" panels={panels} />
+      </EuiWrappingPopover>
+    </>
+  );
+}
+
+function onClose() {
+  ReactDOM.unmountComponentAtNode(container);
+  document.body.removeChild(container);
+  isOpen = false;
+}
+
+export function openAlertsPopover({
+  I18nContext,
+  anchorElement,
+  searchSource,
+  services,
+}: {
+  I18nContext: I18nStart['Context'];
+  anchorElement: HTMLElement;
+  searchSource: ISearchSource;
+  services: DiscoverServices;
+}) {
+  if (isOpen) {
+    onClose();
+    return;
+  }
+
+  isOpen = true;
+  document.body.appendChild(container);
+
+  const element = (
+    <I18nContext>
+      <KibanaContextProvider services={services}>
+        <AlertsPopover
+          onClose={onClose}
+          anchorElement={anchorElement}
+          searchSource={searchSource}
+        />
+      </KibanaContextProvider>
+    </I18nContext>
+  );
+  ReactDOM.render(element, container);
+}

src/plugins/discover/public/build_services.ts

@@ -18,6 +18,8 @@ import {
   IUiSettingsClient,
   PluginInitializerContext,
   HttpStart,
+  NotificationsStart,
+  ApplicationStart,
 } from 'kibana/public';
 import {
   FilterManager,
@@ -41,12 +43,14 @@ import { EmbeddableStart } from '../../embeddable/public';
 
 import type { SpacesApi } from '../../../../x-pack/plugins/spaces/public';
 import { DataViewEditorStart } from '../../../plugins/data_view_editor/public';
+import type { TriggersAndActionsUIPublicPluginStart } from '../../../../x-pack/plugins/triggers_actions_ui/public';
 
 export interface HistoryLocationState {
   referrer: string;
 }
 
 export interface DiscoverServices {
+  application: ApplicationStart;
   addBasePath: (path: string) => string;
   capabilities: Capabilities;
   chrome: ChromeStart;
@@ -66,13 +70,15 @@ export interface DiscoverServices {
   urlForwarding: UrlForwardingStart;
   timefilter: TimefilterContract;
   toastNotifications: ToastsStart;
+  notifications: NotificationsStart;
   uiSettings: IUiSettingsClient;
   trackUiMetric?: (metricType: UiCounterMetricType, eventName: string | string[]) => void;
   dataViewFieldEditor: IndexPatternFieldEditorStart;
   dataViewEditor: DataViewEditorStart;
   http: HttpStart;
   storage: Storage;
   spaces?: SpacesApi;
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
 }
 
 export const buildServices = memoize(function (
@@ -84,6 +90,7 @@ export const buildServices = memoize(function (
   const storage = new Storage(localStorage);
 
   return {
+    application: core.application,
     addBasePath: core.http.basePath.prepend,
     capabilities: core.application.capabilities,
     chrome: core.chrome,
@@ -105,12 +112,14 @@ export const buildServices = memoize(function (
     urlForwarding: plugins.urlForwarding,
     timefilter: plugins.data.query.timefilter.timefilter,
     toastNotifications: core.notifications.toasts,
+    notifications: core.notifications,
     uiSettings: core.uiSettings,
     storage,
     trackUiMetric: usageCollection?.reportUiCounter.bind(usageCollection, 'discover'),
     dataViewFieldEditor: plugins.dataViewFieldEditor,
     http: core.http,
     spaces: plugins.spaces,
     dataViewEditor: plugins.dataViewEditor,
+    triggersActionsUi: plugins.triggersActionsUi,
   };
 });

src/plugins/discover/public/plugin.tsx

@@ -64,6 +64,7 @@ import { injectTruncateStyles } from './utils/truncate_styles';
 import { DOC_TABLE_LEGACY, TRUNCATE_MAX_HEIGHT } from '../common';
 import { DataViewEditorStart } from '../../../plugins/data_view_editor/public';
 import { useDiscoverServices } from './utils/use_discover_services';
+import type { TriggersAndActionsUIPublicPluginStart } from '../../../../x-pack/plugins/triggers_actions_ui/public';
 
 declare module '../../share/public' {
   export interface UrlGeneratorStateMapping {
@@ -191,6 +192,7 @@ export interface DiscoverStartPlugins {
   usageCollection?: UsageCollectionSetup;
   dataViewFieldEditor: IndexPatternFieldEditorStart;
   spaces?: SpacesPluginStart;
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
 }
 
 /**