[Security Solution][Detections] EQL Validation

x-pack/plugins/security_solution/public/detections/components/rules/eql_query_bar/eql_query_bar.test.tsx

@@ -8,25 +8,17 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 
 import { TestProviders, useFormFieldMock } from '../../../../common/mock';
-import { useEqlValidation } from '../../../../common/hooks/eql/use_eql_validation';
-import {
-  getEqlValidationResponseMock,
-  getValidEqlValidationResponseMock,
-} from '../../../../../common/detection_engine/schemas/response/eql_validation_schema.mock';
 import { mockQueryBar } from '../../../pages/detection_engine/rules/all/__mocks__/mock';
 import { EqlQueryBar, EqlQueryBarProps } from './eql_query_bar';
+import { getEqlValidationError } from './validators.mock';
 
 jest.mock('../../../../common/lib/kibana');
-jest.mock('../../../../common/hooks/eql/use_eql_validation');
 
 describe('EqlQueryBar', () => {
   let mockField: EqlQueryBarProps['field'];
   let mockIndex: string[];
 
   beforeEach(() => {
-    (useEqlValidation as jest.Mock).mockReturnValue({
-      result: getValidEqlValidationResponseMock(),
-    });
     mockIndex = ['index-123*'];
     mockField = useFormFieldMock({
       value: mockQueryBar,
@@ -77,13 +69,13 @@ describe('EqlQueryBar', () => {
   });
 
   it('renders errors for an invalid query', () => {
-    (useEqlValidation as jest.Mock).mockReturnValue({
-      result: getEqlValidationResponseMock(),
+    const invalidMockField = useFormFieldMock({
+      value: mockQueryBar,
+      errors: [getEqlValidationError()],
     });
-
     const wrapper = mount(
       <TestProviders>
-        <EqlQueryBar index={mockIndex} dataTestSubj="myQueryBar" field={mockField} />
+        <EqlQueryBar index={mockIndex} dataTestSubj="myQueryBar" field={invalidMockField} />
       </TestProviders>
     );
 

x-pack/plugins/security_solution/public/detections/components/rules/eql_query_bar/eql_query_bar.tsx

@@ -8,13 +8,12 @@ import React, { FC, useCallback, ChangeEvent, useEffect, useState } from 'react'
 import styled from 'styled-components';
 import { EuiFormRow, EuiTextArea } from '@elastic/eui';
 
-import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../shared_imports';
-import { useEqlValidation } from '../../../../common/hooks/eql/use_eql_validation';
+import { FieldHook } from '../../../../shared_imports';
 import { useAppToasts } from '../../../../common/hooks/use_app_toasts';
 import { DefineStepRule } from '../../../pages/detection_engine/rules/types';
 import * as i18n from './translations';
-import { useKibana } from '../../../../common/lib/kibana';
 import { EqlQueryBarFooter } from './footer';
+import { getValidationResults } from './validators';
 
 const TextArea = styled(EuiTextArea)`
   display: block;
@@ -31,32 +30,23 @@ export interface EqlQueryBarProps {
 }
 
 export const EqlQueryBar: FC<EqlQueryBarProps> = ({ dataTestSubj, field, idAria, index }) => {
-  const { http } = useKibana().services;
   const { addError } = useAppToasts();
   const [errorMessages, setErrorMessages] = useState<string[]>([]);
-  const { error, start, result } = useEqlValidation();
-  const { setErrors, setValue } = field;
-  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+  const { setValue } = field;
+  const { isValid, message, messages, error } = getValidationResults(field);
   const fieldValue = field.value.query.query as string;
 
   useEffect(() => {
-    if (error) {
-      addError(error, { title: i18n.EQL_VALIDATION_REQUEST_ERROR });
+    if (messages && messages.length > 0) {
+      setErrorMessages(messages);
     }
-  }, [error, addError]);
+  }, [messages]);
 
   useEffect(() => {
-    if (result != null && result.valid === false && result.errors.length > 0) {
-      setErrors([{ message: '' }]);
-      setErrorMessages(result.errors);
-    }
-  }, [result, setErrors]);
-
-  const handleValidation = useCallback(() => {
-    if (fieldValue) {
-      start({ http, index, query: fieldValue });
+    if (error) {
+      addError(error, { title: i18n.EQL_VALIDATION_REQUEST_ERROR });
     }
-  }, [fieldValue, http, index, start]);
+  }, [error, addError]);
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
@@ -79,8 +69,8 @@ export const EqlQueryBar: FC<EqlQueryBarProps> = ({ dataTestSubj, field, idAria,
       label={field.label}
       labelAppend={field.labelAppend}
       helpText={field.helpText}
-      error={errorMessage}
-      isInvalid={isInvalid}
+      error={message}
+      isInvalid={!isValid}
       fullWidth
       data-test-subj={dataTestSubj}
       describedByIds={idAria ? [idAria] : undefined}
@@ -89,9 +79,8 @@ export const EqlQueryBar: FC<EqlQueryBarProps> = ({ dataTestSubj, field, idAria,
         <TextArea
           data-test-subj="eqlQueryBarTextInput"
           fullWidth
-          isInvalid={isInvalid}
+          isInvalid={!isValid}
           value={fieldValue}
-          onBlur={handleValidation}
           onChange={handleChange}
         />
         <EqlQueryBarFooter errors={errorMessages} />

x-pack/plugins/security_solution/public/detections/components/rules/eql_query_bar/validators.mock.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ValidationError } from '../../../../shared_imports';
+import { ERROR_CODES } from './validators';
+
+export const getEqlResponseError = (): ValidationError => ({
+  code: ERROR_CODES.FAILED_REQUEST,
+  message: 'something went wrong',
+});
+
+export const getEqlValidationError = (): ValidationError => ({
+  code: ERROR_CODES.INVALID_EQL,
+  messages: ['line 1: WRONG\nline 2: ALSO WRONG'],
+  message: '',
+});

x-pack/plugins/security_solution/public/detections/components/rules/eql_query_bar/validators.test.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { debounceAsync } from './validators';
+
+jest.useFakeTimers();
+
+describe('debounceAsync', () => {
+  let fn: jest.Mock;
+
+  beforeEach(() => {
+    fn = jest.fn().mockResolvedValueOnce('first');
+  });
+
+  it('resolves with the underlying invocation result', async () => {
+    const debounced = debounceAsync(fn, 0);
+    const promise = debounced();
+    jest.runOnlyPendingTimers();
+
+    expect(await promise).toEqual('first');
+  });
+
+  it('resolves intermediate calls when the next invocation resolves', async () => {
+    const debounced = debounceAsync(fn, 200);
+    fn.mockResolvedValueOnce('second');
+
+    const promise = debounced();
+    jest.runOnlyPendingTimers();
+    expect(await promise).toEqual('first');
+
+    const promises = [debounced(), debounced()];
+    jest.runOnlyPendingTimers();
+
+    expect(await Promise.all(promises)).toEqual(['second', 'second']);
+  });
+
+  it('debounces the function', async () => {
+    const debounced = debounceAsync(fn, 200);
+
+    debounced();
+    jest.runOnlyPendingTimers();
+
+    debounced();
+    debounced();
+    jest.runOnlyPendingTimers();
+
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+});

x-pack/plugins/security_solution/public/detections/components/rules/eql_query_bar/validators.ts

@@ -0,0 +1,105 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { isEmpty } from 'lodash';
+
+import { FieldHook, ValidationError, ValidationFunc } from '../../../../shared_imports';
+import { isEqlRule } from '../../../../../common/detection_engine/utils';
+import { KibanaServices } from '../../../../common/lib/kibana';
+import { DefineStepRule } from '../../../pages/detection_engine/rules/types';
+import { validateEql } from '../../../../common/hooks/eql/api';
+import { FieldValueQueryBar } from '../query_bar';
+import * as i18n from './translations';
+
+export enum ERROR_CODES {
+  FAILED_REQUEST = 'ERR_FAILED_REQUEST',
+  INVALID_EQL = 'ERR_INVALID_EQL',
+}
+
+/**
+ * Unlike lodash's debounce, which resolves intermediate calls with the most
+ * recent value, this implementation waits to resolve intermediate calls until
+ * the next invocation resolves.
+ *
+ * @param fn an async function
+ *
+ * @returns A debounced async function that resolves on the next invocation
+ */
+export const debounceAsync = <Args extends unknown[], Result extends Promise<unknown>>(
+  fn: (...args: Args) => Result,
+  interval: number
+): ((...args: Args) => Result) => {
+  let handle: ReturnType<typeof setTimeout> | undefined;
+  let resolves: Array<(value?: Result) => void> = [];
+
+  return (...args: Args): Result => {
+    if (handle) {
+      clearTimeout(handle);
+    }
+
+    handle = setTimeout(() => {
+      const result = fn(...args);
+      resolves.forEach((resolve) => resolve(result));
+      resolves = [];
+    }, interval);
+
+    return new Promise((resolve) => resolves.push(resolve)) as Result;
+  };
+};
+
+export const eqlValidator = async (
+  ...args: Parameters<ValidationFunc>
+): Promise<ValidationError<ERROR_CODES> | void | undefined> => {
+  const [{ value, formData }] = args;
+  const { query: queryValue } = value as FieldValueQueryBar;
+  const query = queryValue.query as string;
+  const { index, ruleType } = formData as DefineStepRule;
+
+  const needsValidation = isEqlRule(ruleType) && !isEmpty(query);
+  if (!needsValidation) {
+    return;
+  }
+
+  try {
+    const { http } = KibanaServices.get();
+    const signal = new AbortController().signal;
+    const response = await validateEql({ query, http, signal, index });
+
+    if (response?.valid === false) {
+      return {
+        code: ERROR_CODES.INVALID_EQL,
+        message: '',
+        messages: response.errors,
+      };
+    }
+  } catch (error) {
+    return {
+      code: ERROR_CODES.FAILED_REQUEST,
+      message: i18n.EQL_VALIDATION_REQUEST_ERROR,
+      error,
+    };
+  }
+};
+
+export const getValidationResults = <T = unknown>(
+  field: FieldHook<T>
+): { isValid: boolean; message: string; messages?: string[]; error?: Error } => {
+  const hasErrors = field.errors.length > 0;
+  const isValid = !field.isChangingValue && !hasErrors;
+
+  if (hasErrors) {
+    const [error] = field.errors;
+    const message = error.message;
+
+    if (error.code === ERROR_CODES.INVALID_EQL) {
+      return { isValid, message, messages: error.messages };
+    } else {
+      return { isValid, message, error: error.error };
+    }
+  } else {
+    return { isValid, message: '' };
+  }
+};

x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/schema.tsx

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { isEmpty } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { EuiText } from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
 import React from 'react';
 
 import { isMlRule } from '../../../../../common/machine_learning/helpers';
@@ -21,6 +21,7 @@ import {
 } from '../../../../shared_imports';
 import { DefineStepRule } from '../../../pages/detection_engine/rules/types';
 import { CUSTOM_QUERY_REQUIRED, INVALID_CUSTOM_QUERY, INDEX_HELPER_TEXT } from './translations';
+import { debounceAsync, eqlValidator } from '../eql_query_bar/validators';
 
 export const schema: FormSchema<DefineStepRule> = {
   index: {
@@ -102,6 +103,9 @@ export const schema: FormSchema<DefineStepRule> = {
           }
         },
       },
+      {
+        validator: debounceAsync(eqlValidator, 300),
+      },
     ],
   },
   ruleType: {

x-pack/plugins/security_solution/public/shared_imports.ts

@@ -22,6 +22,7 @@ export {
   useForm,
   useFormContext,
   useFormData,
+  ValidationError,
   ValidationFunc,
   VALIDATION_TYPES,
 } from '../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';