[Security Solution][Detections] - Fix remaining render and validation bug with query preview + tests (#80110)

## Summary

This PR is meant to address the remaining rule query preview bugs. It addresses the following:

- gives same loading experience for all rule query types (previously there were two different loading states)
- makes sure noise warnings are showing for all query types and disappear on timeframe or query change
- updates when to/from are set so it is set on preview click

Author: yctercero

x-pack/plugins/security_solution/common/detection_engine/get_query_filter.ts

@@ -16,6 +16,7 @@ import {
   ExceptionListItemSchema,
   CreateExceptionListItemSchema,
 } from '../../../lists/common/schemas';
+import { ESBoolQuery } from '../typed_json';
 import { buildExceptionListQueries } from './build_exceptions_query';
 import {
   Query as QueryString,
@@ -31,7 +32,7 @@ export const getQueryFilter = (
   index: Index,
   lists: Array<ExceptionListItemSchema | CreateExceptionListItemSchema>,
   excludeExceptions: boolean = true
-) => {
+): ESBoolQuery => {
   const indexPattern: IIndexPattern = {
     fields: [],
     title: index.join(),

x-pack/plugins/security_solution/common/typed_json.ts

@@ -3,9 +3,17 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { DslQuery, Filter } from 'src/plugins/data/common';
+
 import { JsonObject } from '../../../../src/plugins/kibana_utils/common';
 
-export type ESQuery = ESRangeQuery | ESQueryStringQuery | ESMatchQuery | ESTermQuery | JsonObject;
+export type ESQuery =
+  | ESRangeQuery
+  | ESQueryStringQuery
+  | ESMatchQuery
+  | ESTermQuery
+  | ESBoolQuery
+  | JsonObject;
 
 export interface ESRangeQuery {
   range: {
@@ -37,3 +45,12 @@ export interface ESQueryStringQuery {
 export interface ESTermQuery {
   term: Record<string, string>;
 }
+
+export interface ESBoolQuery {
+  bool: {
+    must: DslQuery[];
+    filter: Filter[];
+    should: never[];
+    must_not: Filter[];
+  };
+}

x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx

@@ -34,7 +34,6 @@ export type MatrixHistogramComponentProps = MatrixHistogramProps &
     defaultStackByOption: MatrixHistogramOption;
     errorMessage: string;
     headerChildren?: React.ReactNode;
-    footerChildren?: React.ReactNode;
     hideHistogramIfEmpty?: boolean;
     histogramType: MatrixHistogramType;
     id: string;
@@ -48,7 +47,6 @@ export type MatrixHistogramComponentProps = MatrixHistogramProps &
     subtitle?: string | GetSubTitle;
     timelineId?: string;
     title: string | GetTitle;
-    yTitle?: string | undefined;
   };
 
 const DEFAULT_PANEL_HEIGHT = 300;
@@ -70,7 +68,6 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
   errorMessage,
   filterQuery,
   headerChildren,
-  footerChildren,
   histogramType,
   hideHistogramIfEmpty = false,
   id,
@@ -89,7 +86,6 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
   title,
   titleSize,
   yTickFormatter,
-  yTitle,
 }) => {
   const dispatch = useDispatch();
   const handleBrushEnd = useCallback(
@@ -118,18 +114,8 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
         onBrushEnd: handleBrushEnd,
         yTickFormatter,
         showLegend,
-        yTitle,
       }),
-    [
-      chartHeight,
-      startDate,
-      legendPosition,
-      endDate,
-      handleBrushEnd,
-      yTickFormatter,
-      showLegend,
-      yTitle,
-    ]
+    [chartHeight, startDate, legendPosition, endDate, handleBrushEnd, yTickFormatter, showLegend]
   );
   const [isInitialLoading, setIsInitialLoading] = useState(true);
   const [selectedStackByOption, setSelectedStackByOption] = useState<MatrixHistogramOption>(
@@ -243,11 +229,6 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
               timelineId={timelineId}
             />
           )}
-          {footerChildren != null && (
-            <EuiFlexGroup gutterSize="none" direction="row">
-              {footerChildren}
-            </EuiFlexGroup>
-          )}
         </HistogramPanel>
       </InspectButtonContainer>
       {showSpacer && <EuiSpacer data-test-subj="spacer" size="l" />}

x-pack/plugins/security_solution/public/common/components/matrix_histogram/types.ts

@@ -71,6 +71,7 @@ export interface MatrixHistogramQueryProps {
   startDate: string;
   histogramType: MatrixHistogramType;
   threshold?: { field: string | undefined; value: number } | undefined;
+  skip?: boolean;
 }
 
 export interface MatrixHistogramProps extends MatrixHistogramBasicProps {
@@ -105,7 +106,6 @@ export interface BarchartConfigs {
     yTickFormatter: TickFormatter;
     tickSize: number;
   };
-  yAxisTitle: string | undefined;
   settings: {
     legendPosition: Position;
     onBrushEnd: UpdateDateRange;

x-pack/plugins/security_solution/public/common/components/matrix_histogram/utils.ts

@@ -19,7 +19,6 @@ interface GetBarchartConfigsProps {
   onBrushEnd: UpdateDateRange;
   yTickFormatter?: (value: number) => string;
   showLegend?: boolean;
-  yTitle?: string | undefined;
 }
 
 export const DEFAULT_CHART_HEIGHT = 174;
@@ -33,7 +32,6 @@ export const getBarchartConfigs = ({
   onBrushEnd,
   yTickFormatter,
   showLegend,
-  yTitle,
 }: GetBarchartConfigsProps): BarchartConfigs => ({
   series: {
     xScaleType: ScaleType.Time,
@@ -45,7 +43,6 @@ export const getBarchartConfigs = ({
     yTickFormatter: yTickFormatter != null ? yTickFormatter : DEFAULT_Y_TICK_FORMATTER,
     tickSize: 8,
   },
-  yAxisTitle: yTitle,
   settings: {
     legendPosition: legendPosition ?? Position.Right,
     onBrushEnd,

x-pack/plugins/security_solution/public/common/containers/matrix_histogram/index.ts

@@ -27,6 +27,13 @@ import { getInspectResponse } from '../../../helpers';
 import { InspectResponse } from '../../../types';
 import * as i18n from './translations';
 
+export type Buckets = Array<{
+  key: string;
+  doc_count: number;
+}>;
+
+const bucketEmpty: Buckets = [];
+
 export interface UseMatrixHistogramArgs {
   data: MatrixHistogramData[];
   inspect: InspectResponse;
@@ -49,7 +56,12 @@ export const useMatrixHistogram = ({
   stackByField,
   startDate,
   threshold,
-}: MatrixHistogramQueryProps): [boolean, UseMatrixHistogramArgs] => {
+  skip = false,
+}: MatrixHistogramQueryProps): [
+  boolean,
+  UseMatrixHistogramArgs,
+  (to: string, from: string) => void
+] => {
   const { data, notifications } = useKibana().services;
   const refetch = useRef<inputsModel.Refetch>(noop);
   const abortCtrl = useRef(new AbortController());
@@ -98,10 +110,11 @@ export const useMatrixHistogram = ({
             next: (response) => {
               if (isCompleteResponse(response)) {
                 if (!didCancel) {
-                  const histogramBuckets: Array<{
-                    key: string;
-                    doc_count: number;
-                  }> = getOr([], 'rawResponse.aggregations.eventActionGroup.buckets', response);
+                  const histogramBuckets: Buckets = getOr(
+                    bucketEmpty,
+                    'rawResponse.aggregations.eventActionGroup.buckets',
+                    response
+                  );
                   setLoading(false);
                   setMatrixHistogramResponse((prevResponse) => ({
                     ...prevResponse,
@@ -123,10 +136,12 @@ export const useMatrixHistogram = ({
               }
             },
             error: (msg) => {
+              if (!didCancel) {
+                setLoading(false);
+              }
               if (!(msg instanceof AbortError)) {
-                notifications.toasts.addDanger({
+                notifications.toasts.addError(msg, {
                   title: errorMessage ?? i18n.FAIL_MATRIX_HISTOGRAM,
-                  text: msg.message,
                 });
               }
             },
@@ -166,8 +181,24 @@ export const useMatrixHistogram = ({
   }, [indexNames, endDate, filterQuery, startDate, stackByField, histogramType, threshold]);
 
   useEffect(() => {
-    hostsSearch(matrixHistogramRequest);
-  }, [matrixHistogramRequest, hostsSearch]);
+    if (!skip) {
+      hostsSearch(matrixHistogramRequest);
+    }
+  }, [matrixHistogramRequest, hostsSearch, skip]);
+
+  const runMatrixHistogramSearch = useCallback(
+    (to: string, from: string) => {
+      hostsSearch({
+        ...matrixHistogramRequest,
+        timerange: {
+          interval: '12h',
+          from,
+          to,
+        },
+      });
+    },
+    [matrixHistogramRequest, hostsSearch]
+  );
 
-  return [loading, matrixHistogramResponse];
+  return [loading, matrixHistogramResponse, runMatrixHistogramSearch];
 };

x-pack/plugins/security_solution/public/common/hooks/eql/api.ts

@@ -3,7 +3,6 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { Unit } from '@elastic/datemath';
 
 import { DataPublicPluginStart } from '../../../../../../../src/plugins/data/public';
 import {
@@ -16,10 +15,6 @@ import {
   isErrorResponse,
   isValidationErrorResponse,
 } from '../../../../common/search_strategy/eql';
-import { getEqlAggsData, getSequenceAggs } from './helpers';
-import { EqlPreviewResponse, Source } from './types';
-import { hasEqlSequenceQuery } from '../../../../common/detection_engine/utils';
-import { EqlSearchResponse } from '../../../../common/detection_engine/types';
 
 interface Params {
   index: string[];
@@ -56,66 +51,3 @@ export const validateEql = async ({
     return { valid: true, errors: [] };
   }
 };
-
-interface AggsParams {
-  data: DataPublicPluginStart;
-  index: string[];
-  interval: Unit;
-  fromTime: string;
-  query: string;
-  toTime: string;
-  signal: AbortSignal;
-}
-
-export const getEqlPreview = async ({
-  data,
-  index,
-  interval,
-  query,
-  fromTime,
-  toTime,
-  signal,
-}: AggsParams): Promise<EqlPreviewResponse> => {
-  try {
-    const response = await data.search
-      .search<EqlSearchStrategyRequest, EqlSearchStrategyResponse<EqlSearchResponse<Source>>>(
-        {
-          params: {
-            // @ts-expect-error allow_no_indices is missing on EqlSearch
-            allow_no_indices: true,
-            index: index.join(),
-            body: {
-              filter: {
-                range: {
-                  '@timestamp': {
-                    gte: toTime,
-                    lte: fromTime,
-                    format: 'strict_date_optional_time',
-                  },
-                },
-              },
-              query,
-              // EQL requires a cap, otherwise it defaults to 10
-              // It also sorts on ascending order, capping it at
-              // something smaller like 20, made it so that some of
-              // the more recent events weren't returned
-              size: 100,
-            },
-          },
-        },
-        {
-          strategy: 'eql',
-          abortSignal: signal,
-        }
-      )
-      .toPromise();
-
-    if (hasEqlSequenceQuery(query)) {
-      return getSequenceAggs(response, interval, toTime, fromTime);
-    } else {
-      return getEqlAggsData(response, interval, toTime, fromTime);
-    }
-  } catch (err) {
-    throw new Error(JSON.stringify(err));
-  }
-};