[Observability RAC] add filter for value action

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

@@ -16,6 +16,7 @@ export function AlertsSearchBar({
   rangeTo,
   onQueryChange,
   query,
+  addToQuery,
 }: {
   dynamicIndexPattern: IIndexPattern[];
   rangeFrom?: string;
@@ -25,6 +26,7 @@ export function AlertsSearchBar({
     dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' };
     query?: string;
   }) => void;
+  addToQuery: (value: string) => void;
 }) {
   const timeHistory = useMemo(() => {
     return new TimeHistory(new Storage(localStorage));

x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx

@@ -15,13 +15,13 @@ import type {
   ALERT_DURATION as ALERT_DURATION_TYPED,
   ALERT_SEVERITY_LEVEL as ALERT_SEVERITY_LEVEL_TYPED,
   ALERT_STATUS as ALERT_STATUS_TYPED,
-  ALERT_RULE_NAME as ALERT_RULE_NAME_TYPED,
+  ALERT_REASON as ALERT_REASON_TYPED,
 } from '@kbn/rule-data-utils';
 import {
   ALERT_DURATION as ALERT_DURATION_NON_TYPED,
   ALERT_SEVERITY_LEVEL as ALERT_SEVERITY_LEVEL_NON_TYPED,
   ALERT_STATUS as ALERT_STATUS_NON_TYPED,
-  ALERT_RULE_NAME as ALERT_RULE_NAME_NON_TYPED,
+  ALERT_REASON as ALERT_REASON_NON_TYPED,
   TIMESTAMP,
   // @ts-expect-error importing from a place other than root because we want to limit what we import from this package
 } from '@kbn/rule-data-utils/target_node/technical_field_names';
@@ -40,7 +40,6 @@ import {
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import React, { Suspense, useMemo, useState, useCallback } from 'react';
-
 import type { TimelinesUIStart, TGridType, SortDirection } from '../../../../timelines/public';
 import type { TopAlert } from './';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
@@ -63,7 +62,7 @@ const AlertConsumers: typeof AlertConsumersTyped = AlertConsumersNonTyped;
 const ALERT_DURATION: typeof ALERT_DURATION_TYPED = ALERT_DURATION_NON_TYPED;
 const ALERT_SEVERITY_LEVEL: typeof ALERT_SEVERITY_LEVEL_TYPED = ALERT_SEVERITY_LEVEL_NON_TYPED;
 const ALERT_STATUS: typeof ALERT_STATUS_TYPED = ALERT_STATUS_NON_TYPED;
-const ALERT_RULE_NAME: typeof ALERT_RULE_NAME_TYPED = ALERT_RULE_NAME_NON_TYPED;
+const ALERT_REASON: typeof ALERT_REASON_TYPED = ALERT_REASON_NON_TYPED;
 
 interface AlertsTableTGridProps {
   indexName: string;
@@ -72,6 +71,7 @@ interface AlertsTableTGridProps {
   kuery: string;
   status: string;
   setRefetch: (ref: () => void) => void;
+  addToQuery: (value: string) => void;
 }
 
 interface ObservabilityActionsProps extends ActionProps {
@@ -141,8 +141,8 @@ export const columns: Array<
     displayAsText: i18n.translate('xpack.observability.alertsTGrid.reasonColumnDescription', {
       defaultMessage: 'Reason',
     }),
+    id: ALERT_REASON,
     linkField: '*',
-    id: ALERT_RULE_NAME,
   },
 ];
 
@@ -264,7 +264,7 @@ function ObservabilityActions({
 }
 
 export function AlertsTableTGrid(props: AlertsTableTGridProps) {
-  const { indexName, rangeFrom, rangeTo, kuery, status, setRefetch } = props;
+  const { indexName, rangeFrom, rangeTo, kuery, status, setRefetch, addToQuery } = props;
   const { timelines } = useKibana<{ timelines: TimelinesUIStart }>().services;
 
   const [flyoutAlert, setFlyoutAlert] = useState<TopAlert | undefined>(undefined);
@@ -302,7 +302,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
       type,
       columns,
       deletedEventIds: [],
-      defaultCellActions: getDefaultCellActions({ enableFilterActions: false }),
+      defaultCellActions: getDefaultCellActions({ enableFilterActions: true, addToQuery }),
       end: rangeTo,
       filters: [],
       indexNames: [indexName],
@@ -347,6 +347,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     rangeTo,
     setRefetch,
     status,
+    addToQuery,
   ]);
   const handleFlyoutClose = () => setFlyoutAlert(undefined);
   const { observabilityRuleTypeRegistry } = usePluginContext();

x-pack/plugins/observability/public/pages/alerts/default_cell_actions.tsx

@@ -5,17 +5,20 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
 
+import { EuiButtonIcon } from '@elastic/eui';
 import { ObservabilityPublicPluginsStart } from '../..';
 import { getMappedNonEcsValue } from './render_cell_value';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { TimelineNonEcsData } from '../../../../timelines/common/search_strategy';
 import { TGridCellAction } from '../../../../timelines/common/types/timeline';
 import { TimelinesUIStart } from '../../../../timelines/public';
 
-/** a noop required by the filter in / out buttons */
-const onFilterAdded = () => {};
+export const FILTER_FOR_VALUE = i18n.translate('xpack.observability.hoverActions.filterForValue', {
+  defaultMessage: 'Filter for value',
+});
 
 /** a hook to eliminate the verbose boilerplate required to use common services */
 const useKibanaServices = () => {
@@ -31,32 +34,10 @@ const useKibanaServices = () => {
   return { timelines, filterManager };
 };
 
-/** actions for adding filters to the search bar */
-const filterCellActions: TGridCellAction[] = [
-  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
-    const { timelines, filterManager } = useKibanaServices();
-
-    const value = getMappedNonEcsValue({
-      data: data[rowIndex],
-      fieldName: columnId,
-    });
-
-    return (
-      <>
-        {timelines.getHoverActions().getFilterForValueButton({
-          Component,
-          field: columnId,
-          filterManager,
-          onFilterAdded,
-          ownFocus: false,
-          showTooltip: false,
-          value,
-        })}
-      </>
-    );
-  },
+/** actions common to all cells (e.g. copy to clipboard) */
+const commonCellActions: TGridCellAction[] = [
   ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
-    const { timelines, filterManager } = useKibanaServices();
+    const { timelines } = useKibanaServices();
 
     const value = getMappedNonEcsValue({
       data: data[rowIndex],
@@ -65,11 +46,10 @@ const filterCellActions: TGridCellAction[] = [
 
     return (
       <>
-        {timelines.getHoverActions().getFilterOutValueButton({
+        {timelines.getHoverActions().getCopyButton({
           Component,
           field: columnId,
-          filterManager,
-          onFilterAdded,
+          isHoverAction: false,
           ownFocus: false,
           showTooltip: false,
           value,
@@ -79,31 +59,54 @@ const filterCellActions: TGridCellAction[] = [
   },
 ];
 
-/** actions common to all cells (e.g. copy to clipboard) */
-const commonCellActions: TGridCellAction[] = [
+/** actions for adding filters to the search bar */
+const buildFilterCellActions = (addToQuery: (value: string) => void): TGridCellAction[] => [
   ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
-    const { timelines } = useKibanaServices();
-
     const value = getMappedNonEcsValue({
       data: data[rowIndex],
       fieldName: columnId,
     });
+    const text = useMemo(() => `${columnId}${value != null ? `: "${value}"` : ''}`, [
+      columnId,
+      value,
+    ]);
+    const onClick = useCallback(() => {
+      addToQuery(text);
+    }, [text]);
 
-    return (
-      <>
-        {timelines.getHoverActions().getCopyButton({
-          Component,
-          field: columnId,
-          isHoverAction: false,
-          ownFocus: false,
-          showTooltip: false,
-          value,
-        })}
-      </>
+    return Component ? (
+      <Component
+        aria-label={FILTER_FOR_VALUE}
+        data-test-subj="filter-for-value"
+        iconType="plusInCircle"
+        onClick={onClick}
+        title={FILTER_FOR_VALUE}
+      >
+        {FILTER_FOR_VALUE}
+      </Component>
+    ) : (
+      <EuiButtonIcon
+        aria-label={FILTER_FOR_VALUE}
+        className="timelines__hoverActionButton"
+        data-test-subj="filter-for-value"
+        iconSize="s"
+        iconType="plusInCircle"
+        onClick={onClick}
+      />
     );
   },
 ];
 
 /** returns the default actions shown in `EuiDataGrid` cells */
-export const getDefaultCellActions = ({ enableFilterActions }: { enableFilterActions: boolean }) =>
-  enableFilterActions ? [...filterCellActions, ...commonCellActions] : [...commonCellActions];
+export const getDefaultCellActions = ({
+  enableFilterActions,
+  addToQuery,
+}: {
+  enableFilterActions: boolean;
+  addToQuery: (value: string) => void;
+}) => {
+  const cellActions = enableFilterActions
+    ? [...buildFilterCellActions(addToQuery), ...commonCellActions]
+    : [...commonCellActions];
+  return cellActions;
+};

x-pack/plugins/observability/public/pages/alerts/index.tsx

@@ -14,7 +14,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { ParsedTechnicalFields } from '../../../../rule_registry/common/parse_technical_fields';
 import type { AlertStatus } from '../../../common/typings';
@@ -27,6 +27,14 @@ import { AlertsTableTGrid } from './alerts_table_t_grid';
 import { StatusFilter } from './status_filter';
 import { useFetcher } from '../../hooks/use_fetcher';
 import { callObservabilityApi } from '../../services/call_observability_api';
+import type {
+  ALERT_STATUS as ALERT_STATUS_TYPED,
+} from '@kbn/rule-data-utils';
+import {
+  ALERT_STATUS as ALERT_STATUS_NON_TYPED,
+} from '@kbn/rule-data-utils/target_node/technical_field_names';
+
+const ALERT_STATUS: typeof ALERT_STATUS_TYPED = ALERT_STATUS_NON_TYPED;
 
 export interface TopAlert {
   fields: ParsedTechnicalFields;
@@ -61,7 +69,7 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
   // observability. For now link to the settings page.
   const manageRulesHref = prepend('/app/management/insightsAndAlerting/triggersActions/alerts');
 
-  const { data: dynamicIndexPatternResp } = useFetcher(({ signal }) => {
+  const { data: dynamicIndexPatternResp, status: fetcherStatus } = useFetcher(({ signal }) => {
     return callObservabilityApi({
       signal,
       endpoint: 'GET /api/observability/rules/alerts/dynamic_index_pattern',
@@ -104,10 +112,36 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
     [history, rangeFrom, rangeTo, kuery]
   );
 
+  const addToQuery = useCallback(
+    (value: string) => {
+      let output = value;
+      if (kuery !== '') {
+        output = `${kuery} and ${value}`;
+      }
+      onQueryChange({
+        dateRange: { from: rangeFrom, to: rangeTo },
+        query: output,
+      });
+    },
+    [kuery, onQueryChange, rangeFrom, rangeTo]
+  );
+
   const setRefetch = useCallback((ref) => {
     refetch.current = ref;
   }, []);
 
+  useEffect(() => {
+    if (fetcherStatus === 'success') {
+      const nextSearchParams = new URLSearchParams(history.location.search);
+
+      nextSearchParams.set('kuery', `${ALERT_STATUS}: "open"`); // TODO this needs to be changed, this should be part of another dependent PR that updates the Status column values to Active and recovered
+      history.push({
+        ...history.location,
+        search: nextSearchParams.toString(),
+      });
+    }
+  }, [fetcherStatus, history]);
+
   return (
     <ObservabilityPageTemplate
       pageHeader={{
@@ -157,6 +191,7 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
             rangeTo={rangeTo}
             query={kuery}
             onQueryChange={onQueryChange}
+            addToQuery={addToQuery}
           />
         </EuiFlexItem>
         <EuiSpacer size="s" />
@@ -176,6 +211,7 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
               kuery={kuery}
               status={status}
               setRefetch={setRefetch}
+              addToQuery={addToQuery}
             />
           </EuiFlexItem>
         </EuiFlexGroup>

x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx

@@ -16,13 +16,13 @@ import type {
   ALERT_DURATION as ALERT_DURATION_TYPED,
   ALERT_SEVERITY_LEVEL as ALERT_SEVERITY_LEVEL_TYPED,
   ALERT_STATUS as ALERT_STATUS_TYPED,
-  ALERT_RULE_NAME as ALERT_RULE_NAME_TYPED,
+  ALERT_REASON as ALERT_REASON_TYPED,
 } from '@kbn/rule-data-utils';
 import {
   ALERT_DURATION as ALERT_DURATION_NON_TYPED,
   ALERT_SEVERITY_LEVEL as ALERT_SEVERITY_LEVEL_NON_TYPED,
   ALERT_STATUS as ALERT_STATUS_NON_TYPED,
-  ALERT_RULE_NAME as ALERT_RULE_NAME_NON_TYPED,
+  ALERT_REASON as ALERT_REASON_NON_TYPED,
   TIMESTAMP,
   // @ts-expect-error importing from a place other than root because we want to limit what we import from this package
 } from '@kbn/rule-data-utils/target_node/technical_field_names';
@@ -38,7 +38,7 @@ import { usePluginContext } from '../../hooks/use_plugin_context';
 const ALERT_DURATION: typeof ALERT_DURATION_TYPED = ALERT_DURATION_NON_TYPED;
 const ALERT_SEVERITY_LEVEL: typeof ALERT_SEVERITY_LEVEL_TYPED = ALERT_SEVERITY_LEVEL_NON_TYPED;
 const ALERT_STATUS: typeof ALERT_STATUS_TYPED = ALERT_STATUS_NON_TYPED;
-const ALERT_RULE_NAME: typeof ALERT_RULE_NAME_TYPED = ALERT_RULE_NAME_NON_TYPED;
+const ALERT_REASON: typeof ALERT_REASON_TYPED = ALERT_REASON_NON_TYPED;
 
 export const getMappedNonEcsValue = ({
   data,
@@ -110,7 +110,7 @@ export const getRenderCellValue = ({
         return asDuration(Number(value));
       case ALERT_SEVERITY_LEVEL:
         return <SeverityBadge severityLevel={value ?? undefined} />;
-      case ALERT_RULE_NAME:
+      case ALERT_REASON:
         const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
         const alert = parseAlert(observabilityRuleTypeRegistry)(dataFieldEs);