Draft basic global alerts page

elastic · Jan 22, 2024 · 5ca182e · 5ca182e
1 parent 1ca128d
commit 5ca182e
Show file tree

Hide file tree

Showing 20 changed files with 1,099 additions and 46 deletions.
diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx
@@ -21,6 +21,7 @@ import { i18n } from '@kbn/i18n';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { SavedQueryService, SavedQuery } from '@kbn/data-plugin/public';
+import { QuickFiltersMenuItem } from './quick_filters';
 import { QueryBarMenuPanels, QueryBarMenuPanelsProps } from './query_bar_menu_panels';
 import { FilterEditorWrapper } from './filter_editor_wrapper';
 import { popoverDragAndDropCss } from './add_filter_popover.styles';
@@ -58,6 +59,7 @@ export interface QueryBarMenuProps extends WithCloseFilterEditorConfirmModalProp
   hiddenPanelOptions?: QueryBarMenuPanelsProps['hiddenPanelOptions'];
   onFiltersUpdated?: (filters: Filter[]) => void;
   filters?: Filter[];
+  quickFilters: QuickFiltersMenuItem[];
   query?: Query;
   savedQuery?: SavedQuery;
   onClearSavedQuery?: () => void;
@@ -89,6 +91,7 @@ function QueryBarMenuComponent({
   toggleFilterBarMenuPopover,
   onFiltersUpdated,
   filters,
+  quickFilters,
   query,
   savedQuery,
   onClearSavedQuery,
@@ -150,6 +153,7 @@ function QueryBarMenuComponent({
 
   const panels = QueryBarMenuPanels({
     filters,
+    quickFilters,
     savedQuery,
     language,
     dateRangeFrom,

diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_menu_panels.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_menu_panels.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { isEqual } from 'lodash';
 import {
   EuiContextMenuPanelDescriptor,
@@ -24,6 +24,7 @@ import {
   toggleFilterNegated,
   pinFilter,
   unpinFilter,
+  compareFilters,
 } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
@@ -34,6 +35,8 @@ import {
   UI_SETTINGS,
 } from '@kbn/data-plugin/common';
 import type { SavedQueryService, SavedQuery } from '@kbn/data-plugin/public';
+import { EuiContextMenuPanelItemDescriptor } from '@elastic/eui/src/components/context_menu/context_menu';
+import { isQuickFiltersGroup, QuickFiltersMenuItem } from './quick_filters';
 import type { IUnifiedSearchPluginServices } from '../types';
 import { fromUser } from './from_user';
 import { QueryLanguageSwitcher } from './language_switcher';
@@ -134,10 +137,21 @@ export const strings = {
     i18n.translate('unifiedSearch.filter.options.filterLanguageLabel', {
       defaultMessage: 'Filter language',
     }),
+  getQuickFiltersLabel: () =>
+    i18n.translate('unifiedSearch.filter.options.quickFiltersLabel', {
+      defaultMessage: 'Quick filters',
+    }),
 };
 
+type ContextMenuItem =
+  | EuiContextMenuPanelDescriptor
+  | (EuiContextMenuPanelItemDescriptor & {
+      width?: number;
+    });
+
 export interface QueryBarMenuPanelsProps {
   filters?: Filter[];
+  quickFilters: QuickFiltersMenuItem[];
   savedQuery?: SavedQuery;
   language: string;
   dateRangeFrom?: string;
@@ -162,6 +176,7 @@ export interface QueryBarMenuPanelsProps {
 
 export function QueryBarMenuPanels({
   filters,
+  quickFilters,
   savedQuery,
   language,
   dateRangeFrom,
@@ -192,6 +207,52 @@ export function QueryBarMenuPanels({
   const [hasFiltersOrQuery, setHasFiltersOrQuery] = useState(false);
   const [savedQueryHasChanged, setSavedQueryHasChanged] = useState(false);
 
+  const applyQuickFilter = useCallback(
+    (filter: Filter) => {
+      if (!filters?.some((f) => compareFilters(f, filter))) {
+        onFiltersUpdated?.([...(filters ?? []), filter]);
+      }
+      closePopover();
+    },
+    [closePopover, filters, onFiltersUpdated]
+  );
+
+  const quickFiltersContextMenuData = useMemo(() => {
+    let items = [] as EuiContextMenuPanelItemDescriptor[];
+    const panels = [] as EuiContextMenuPanelDescriptor[];
+    if (showFilterBar && quickFilters.length > 0) {
+      let panelsCount = 0;
+      const quickFiltersItemToContextMenuItem = (qf: QuickFiltersMenuItem) => {
+        if (isQuickFiltersGroup(qf)) {
+          const panelId = `quick_filter_group_${panelsCount++}`;
+          panels.push({
+            id: panelId,
+            title: qf.groupName,
+            items: qf.items.map(quickFiltersItemToContextMenuItem),
+          });
+          return {
+            name: qf.groupName,
+            icon: qf.icon ?? 'filterInCircle',
+            panel: panelId,
+          };
+        } else {
+          return {
+            ...qf,
+            icon: qf.icon ?? 'filterInCircle',
+            onClick: () => {
+              applyQuickFilter(qf.filter);
+            },
+          };
+        }
+      };
+      items = quickFilters.map(quickFiltersItemToContextMenuItem);
+    }
+    return {
+      items,
+      panels,
+    };
+  }, [applyQuickFilter, quickFilters, showFilterBar]);
+
   useEffect(() => {
     const fetchSavedQueries = async () => {
       cancelPendingListingRequest.current();
@@ -320,7 +381,7 @@ export function QueryBarMenuPanels({
   const luceneLabel = strings.getLuceneLanguageName();
   const kqlLabel = strings.getKqlLanguageName();
 
-  const filtersRelatedPanels = [
+  const filtersRelatedPanels: ContextMenuItem[] = [
     {
       name: strings.getOptionsAddFilterButtonLabel(),
       icon: 'plus',
@@ -337,7 +398,7 @@ export function QueryBarMenuPanels({
     },
   ];
 
-  const queryAndFiltersRelatedPanels = [
+  const queryAndFiltersRelatedPanels: ContextMenuItem[] = [
     {
       name: savedQuery
         ? strings.getLoadOtherFilterSetLabel()
@@ -359,7 +420,7 @@ export function QueryBarMenuPanels({
     { isSeparator: true },
   ];
 
-  const items = [];
+  const items: ContextMenuItem[] = [];
   // apply to all actions are only shown when there are filters
   if (showFilterBar) {
     items.push(...filtersRelatedPanels);
@@ -385,6 +446,11 @@ export function QueryBarMenuPanels({
       { isSeparator: true }
     );
   }
+
+  if (showFilterBar && quickFilters.length > 0) {
+    items.push(...[...quickFiltersContextMenuData.items, { isSeparator: true } as const]);
+  }
+
   // saved queries actions are only shown when the showQueryInput and showFilterBar is true
   if (showQueryInput && showFilterBar) {
     items.push(...queryAndFiltersRelatedPanels);
@@ -513,6 +579,7 @@ export function QueryBarMenuPanels({
       width: 400,
       content: <div>{manageFilterSetComponent}</div>,
     },
+    ...quickFiltersContextMenuData.panels,
   ] as EuiContextMenuPanelDescriptor[];
 
   if (hiddenPanelOptions && hiddenPanelOptions.length > 0) {

diff --git a/src/plugins/unified_search/public/query_string_input/quick_filters.ts b/src/plugins/unified_search/public/query_string_input/quick_filters.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { ComponentType } from 'react';
+import { Filter } from '@kbn/es-query';
+
+export interface QuickFilter {
+  name: string;
+  icon?: Exclude<EuiIconType, ComponentType>;
+  disabled?: boolean;
+  filter: Filter;
+}
+
+export interface QuickFiltersGroup {
+  groupName: string;
+  icon?: Exclude<EuiIconType, ComponentType>;
+  items: QuickFiltersMenuItem[];
+}
+
+export type QuickFiltersMenuItem = QuickFiltersGroup | QuickFilter;
+
+export const isQuickFiltersGroup = (
+  quickFiltersMenuItem: QuickFiltersMenuItem
+): quickFiltersMenuItem is QuickFiltersGroup => 'items' in quickFiltersMenuItem;
diff --git a/src/plugins/unified_search/public/search_bar/search_bar.tsx b/src/plugins/unified_search/public/search_bar/search_bar.tsx
@@ -33,6 +33,7 @@ import type {
   SuggestionsListSize,
 } from '../typeahead/suggestions_component';
 import { searchBarStyles } from './search_bar.styles';
+import { QuickFiltersMenuItem } from '../query_string_input/quick_filters';
 
 export interface SearchBarInjectedDeps {
   kibana: KibanaReactContextValue<IUnifiedSearchPluginServices>;
@@ -58,6 +59,7 @@ export interface SearchBarOwnProps<QT extends AggregateQuery | Query = Query> {
   showDatePicker?: boolean;
   showAutoRefreshOnly?: boolean;
   filters?: Filter[];
+  quickFilters?: QuickFiltersMenuItem[];
   filtersForSuggestions?: Filter[];
   hiddenFilterPanelOptions?: QueryBarMenuProps['hiddenPanelOptions'];
   prependFilterBar?: React.ReactNode;
@@ -146,6 +148,7 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
     showSubmitButton: true,
     showAutoRefreshOnly: false,
     filtersForSuggestions: [],
+    quickFilters: [],
   };
 
   private services = this.props.kibana.services;
@@ -502,6 +505,7 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
         openQueryBarMenu={this.state.openQueryBarMenu}
         onFiltersUpdated={this.props.onFiltersUpdated}
         filters={this.props.filters}
+        quickFilters={this.props.quickFilters ?? []}
         hiddenPanelOptions={this.props.hiddenFilterPanelOptions}
         query={this.state.query as Query}
         savedQuery={this.props.savedQuery}

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/alerts_app.tsx b/x-pack/plugins/triggers_actions_ui/public/application/alerts_app.tsx
@@ -36,7 +36,7 @@ import {
 import { setDataViewsService } from '../common/lib/data_apis';
 import { KibanaContextProvider } from '../common/lib/kibana';
 
-const Alerts = lazy(() => import('./sections/global_alerts'));
+const GlobalAlerts = lazy(() => import('./sections/global_alerts'));
 
 export interface TriggersAndActionsUiServices extends CoreStart {
   actions: ActionsPublicPluginSetup;
@@ -60,7 +60,7 @@ export interface TriggersAndActionsUiServices extends CoreStart {
   unifiedSearch: UnifiedSearchPublicPluginStart;
 }
 
-export const renderApp = (deps: TriggersAndActionsUiServices) => {
+export const renderApp = (deps: Partial<TriggersAndActionsUiServices>) => {
   const { element } = deps;
   render(<App deps={deps} />, element);
   return () => {
@@ -80,7 +80,7 @@ export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
           <KibanaContextProvider services={{ ...deps }}>
             <Router history={deps.history}>
               <Routes>
-                <Route path={`/`} component={suspendedComponentWithProps(Alerts, 'xl')} />
+                <Route path={`/`} component={suspendedComponentWithProps(GlobalAlerts, 'xl')} />
               </Routes>
             </Router>
           </KibanaContextProvider>

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.tsx
@@ -9,7 +9,7 @@ import { AlertConsumers } from '@kbn/rule-data-utils';
 import { createStartServicesMock } from '../../common/lib/kibana/kibana_react.mock';
 import type { ValidFeatureId } from '@kbn/rule-data-utils';
 import { act, renderHook } from '@testing-library/react-hooks';
-import { useAlertDataView } from './use_alert_data_view';
+import { useAlertDataViews } from './use_alert_data_view';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 
@@ -76,7 +76,7 @@ describe('useAlertDataView', () => {
       };
 
       const { result, waitForNextUpdate } = renderHook(
-        () => useAlertDataView(observabilityAlertFeatureIds),
+        () => useAlertDataViews(observabilityAlertFeatureIds),
         {
           wrapper,
         }
@@ -91,7 +91,7 @@ describe('useAlertDataView', () => {
   it('fetch index names + fields for the provided o11y featureIds', async () => {
     await act(async () => {
       const { waitForNextUpdate } = renderHook(
-        () => useAlertDataView(observabilityAlertFeatureIds),
+        () => useAlertDataViews(observabilityAlertFeatureIds),
         {
           wrapper,
         }
@@ -107,7 +107,7 @@ describe('useAlertDataView', () => {
 
   it('only fetch index names for security featureId', async () => {
     await act(async () => {
-      const { waitForNextUpdate } = renderHook(() => useAlertDataView([AlertConsumers.SIEM]), {
+      const { waitForNextUpdate } = renderHook(() => useAlertDataViews([AlertConsumers.SIEM]), {
         wrapper,
       });
 
@@ -122,7 +122,7 @@ describe('useAlertDataView', () => {
   it('Do not fetch anything if security and o11y featureIds are mix together', async () => {
     await act(async () => {
       const { result, waitForNextUpdate } = renderHook(
-        () => useAlertDataView([AlertConsumers.SIEM, AlertConsumers.LOGS]),
+        () => useAlertDataViews([AlertConsumers.SIEM, AlertConsumers.LOGS]),
         {
           wrapper,
         }
@@ -144,7 +144,7 @@ describe('useAlertDataView', () => {
 
     await act(async () => {
       const { result, waitForNextUpdate } = renderHook(
-        () => useAlertDataView(observabilityAlertFeatureIds),
+        () => useAlertDataViews(observabilityAlertFeatureIds),
         {
           wrapper,
         }