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

src/plugins/data/public/index.ts

@@ -20,7 +20,12 @@ export * from './deprecated';
 
 export { getEsQueryConfig, FilterStateStore } from '../common';
 export { FilterLabel, FilterItem } from './ui';
-export { getDisplayValueFromFilter, generateFilters, extractTimeRange } from './query';
+export {
+  getDisplayValueFromFilter,
+  generateFilters,
+  extractTimeRange,
+  getIndexPatternFromFilter,
+} from './query';
 
 /**
  * Exporters (CSV)

src/plugins/data/public/ui/filter_bar/_global_filter_item.scss

@@ -88,3 +88,8 @@
 .globalFilterItem__popoverAnchor {
   display: block;
 }
+
+.globalFilterItem__readonlyPanel {
+  min-width: auto;
+  padding: $euiSizeM;
+}

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 Props {
   filters: Filter[];
   onFiltersUpdated?: (filters: Filter[]) => void;
   className: string;

src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx

@@ -17,11 +17,17 @@ export interface FilterLabelProps {
   filter: Filter;
   valueLabel?: string;
   filterLabelStatus?: FilterLabelStatus;
+  hideAlias?: boolean;
 }
 
 // Needed for React.lazy
 // eslint-disable-next-line import/no-default-export
-export default function FilterLabel({ filter, valueLabel, filterLabelStatus }: FilterLabelProps) {
+export default function FilterLabel({
+  filter,
+  valueLabel,
+  filterLabelStatus,
+  hideAlias,
+}: FilterLabelProps) {
   const prefixText = filter.meta.negate
     ? ` ${i18n.translate('data.filter.filterBar.negatedFilterPrefix', {
         defaultMessage: 'NOT ',
@@ -38,7 +44,7 @@ export default function FilterLabel({ filter, valueLabel, filterLabelStatus }: F
     return <span className="globalFilterLabel__value">{text}</span>;
   };
 
-  if (filter.meta.alias !== null) {
+  if (!hideAlias && filter.meta.alias !== null) {
     return (
       <Fragment>
         {prefix}

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiContextMenu, EuiPopover } from '@elastic/eui';
+import { EuiContextMenu, EuiPopover, EuiPopoverProps } from '@elastic/eui';
 import { InjectedIntl } from '@kbn/i18n-react';
 import {
   Filter,
@@ -16,7 +16,7 @@ import {
   toggleFilterDisabled,
 } from '@kbn/es-query';
 import classNames from 'classnames';
-import React, { MouseEvent, useState, useEffect } from 'react';
+import React, { MouseEvent, useState, useEffect, HTMLAttributes } from 'react';
 import { IUiSettingsClient } from 'src/core/public';
 import { FilterEditor } from './filter_editor';
 import { FilterView } from './filter_view';
@@ -37,8 +37,11 @@ export interface FilterItemProps {
   uiSettings: IUiSettingsClient;
   hiddenPanelOptions?: PanelOptions[];
   timeRangeForSuggestionsOverride?: boolean;
+  readonly?: boolean;
 }
 
+type FilterPopoverProps = HTMLAttributes<HTMLDivElement> & EuiPopoverProps;
+
 interface LabelOptions {
   title: string;
   status: FilterLabelStatus;
@@ -349,32 +352,44 @@ export function FilterItem(props: FilterItemProps) {
     return null;
   }
 
-  const badge = (
-    <FilterView
-      filter={filter}
-      valueLabel={valueLabelConfig.title}
-      filterLabelStatus={valueLabelConfig.status}
-      errorMessage={valueLabelConfig.message}
-      className={getClasses(filter.meta.negate ?? false, valueLabelConfig)}
-      iconOnClick={() => props.onRemove()}
-      onClick={handleBadgeClick}
-      data-test-subj={getDataTestSubj(valueLabelConfig)}
-    />
-  );
+  const filterViewProps = {
+    filter,
+    valueLabel: valueLabelConfig.title,
+    filterLabelStatus: valueLabelConfig.status,
+    errorMessage: valueLabelConfig.message,
+    className: getClasses(!!filter.meta.negate, valueLabelConfig),
+    iconOnClick: props.onRemove,
+    onClick: handleBadgeClick,
+    'data-test-subj': getDataTestSubj(valueLabelConfig),
+    readonly: props.readonly,
+  };
+
+  const popoverProps: FilterPopoverProps = {
+    id: `popoverFor_filter${id}`,
+    className: `globalFilterItem__popover`,
+    anchorClassName: `globalFilterItem__popoverAnchor`,
+    isOpen: isPopoverOpen,
+    closePopover: () => {
+      setIsPopoverOpen(false);
+    },
+    button: <FilterView {...filterViewProps} />,
+    panelPaddingSize: 'none',
+  };
+
+  if (props.readonly) {
+    return (
+      <EuiPopover
+        panelClassName="globalFilterItem__readonlyPanel"
+        anchorPosition="upCenter"
+        {...popoverProps}
+      >
+        <FilterView {...filterViewProps} hideAlias />
+      </EuiPopover>
+    );
+  }
 
   return (
-    <EuiPopover
-      id={`popoverFor_filter${id}`}
-      className={`globalFilterItem__popover`}
-      anchorClassName={`globalFilterItem__popoverAnchor`}
-      isOpen={isPopoverOpen}
-      closePopover={() => {
-        setIsPopoverOpen(false);
-      }}
-      button={badge}
-      anchorPosition="downLeft"
-      panelPaddingSize="none"
-    >
+    <EuiPopover anchorPosition="downLeft" {...popoverProps}>
       <EuiContextMenu initialPanelId={0} panels={getPanels()} />
     </EuiPopover>
   );

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiBadge, useInnerText } from '@elastic/eui';
+import { EuiBadge, EuiBadgeProps, useInnerText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { FC } from 'react';
 import { Filter, isFilterPinned } from '@kbn/es-query';
@@ -18,6 +18,8 @@ interface Props {
   valueLabel: string;
   filterLabelStatus: FilterLabelStatus;
   errorMessage?: string;
+  readonly?: boolean;
+  hideAlias?: boolean;
   [propName: string]: any;
 }
 
@@ -28,6 +30,8 @@ export const FilterView: FC<Props> = ({
   valueLabel,
   errorMessage,
   filterLabelStatus,
+  readonly,
+  hideAlias,
   ...rest
 }: Props) => {
   const [ref, innerText] = useInnerText();
@@ -50,33 +54,45 @@ export const FilterView: FC<Props> = ({
     })} ${title}`;
   }
 
+  const badgeProps: EuiBadgeProps = readonly
+    ? {
+        title,
+        color: 'hollow',
+        onClick,
+        onClickAriaLabel: i18n.translate('data.filter.filterBar.filterItemReadOnlyBadgeAriaLabel', {
+          defaultMessage: 'Filter entry',
+        }),
+        iconOnClick,
+      }
+    : {
+        title,
+        color: 'hollow',
+        iconType: 'cross',
+        iconSide: 'right',
+        closeButtonProps: {
+          // Removing tab focus on close button because the same option can be obtained through the context menu
+          // Also, we may want to add a `DEL` keyboard press functionality
+          tabIndex: -1,
+        },
+        iconOnClick,
+        iconOnClickAriaLabel: i18n.translate('data.filter.filterBar.filterItemBadgeIconAriaLabel', {
+          defaultMessage: 'Delete {filter}',
+          values: { filter: innerText },
+        }),
+        onClick,
+        onClickAriaLabel: i18n.translate('data.filter.filterBar.filterItemBadgeAriaLabel', {
+          defaultMessage: 'Filter actions',
+        }),
+      };
+
   return (
-    <EuiBadge
-      title={title}
-      color="hollow"
-      iconType="cross"
-      iconSide="right"
-      closeButtonProps={{
-        // Removing tab focus on close button because the same option can be obtained through the context menu
-        // Also, we may want to add a `DEL` keyboard press functionality
-        tabIndex: -1,
-      }}
-      iconOnClick={iconOnClick}
-      iconOnClickAriaLabel={i18n.translate('data.filter.filterBar.filterItemBadgeIconAriaLabel', {
-        defaultMessage: 'Delete {filter}',
-        values: { filter: innerText },
-      })}
-      onClick={onClick}
-      onClickAriaLabel={i18n.translate('data.filter.filterBar.filterItemBadgeAriaLabel', {
-        defaultMessage: 'Filter actions',
-      })}
-      {...rest}
-    >
+    <EuiBadge {...badgeProps} {...rest}>
       <span ref={ref}>
         <FilterLabel
           filter={filter}
           valueLabel={valueLabel}
           filterLabelStatus={filterLabelStatus}
+          hideAlias={hideAlias}
         />
       </span>
     </EuiBadge>

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/discover_router.tsx

@@ -16,6 +16,7 @@ import { SingleDocRoute } from './doc';
 import { DiscoverMainRoute } from './main';
 import { NotFoundRoute } from './not_found';
 import { DiscoverServices } from '../build_services';
+import { ViewAlertRoute } from './view_alert';
 
 export const discoverRouter = (services: DiscoverServices, history: History) => (
   <KibanaContextProvider services={services}>
@@ -36,6 +37,9 @@ export const discoverRouter = (services: DiscoverServices, history: History) =>
           <Route path="/doc/:indexPatternId/:index">
             <SingleDocRoute />
           </Route>
+          <Route path="/viewAlert/:id">
+            <ViewAlertRoute />
+          </Route>
           <Route path="/view/:id">
             <DiscoverMainRoute />
           </Route>

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

@@ -18,6 +18,7 @@ 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';
 
 /**
  * Helper function to build the top nav links
@@ -59,6 +60,25 @@ 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) => {
+      openAlertsPopover({
+        I18nContext: services.core.i18n.Context,
+        anchorElement,
+        searchSource: savedSearch.searchSource,
+        services,
+      });
+    },
+    testId: 'discoverAlertsButton',
+  };
+
   const newSearch = {
     id: 'new',
     label: i18n.translate('discover.localMenu.localMenu.newSearchTitle', {
@@ -162,6 +182,7 @@ export const getTopNavLinks = ({
     ...(services.capabilities.advancedSettings.save ? [options] : []),
     newSearch,
     openSearch,
+    ...(services.triggersActionsUi ? [alerts] : []),
     shareSearch,
     inspectSearch,
     ...(services.capabilities.discover.save ? [saveSearch] : []),