[8.x] [Security Solution] Add ES|QL Query editable component (#199887) (

#202224) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Add ES|QL Query editable component (#199887)](#199887)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Nov 29, 2024 · 7d03ee6 · 7d03ee6
1 parent fd2e0ea
commit 7d03ee6
Show file tree

Hide file tree

Showing 59 changed files with 1,375 additions and 906 deletions.
diff --git a/packages/kbn-securitysolution-utils/src/esql/compute_if_esql_query_aggregating.ts b/packages/kbn-securitysolution-utils/src/esql/compute_if_esql_query_aggregating.ts
@@ -7,18 +7,17 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ESQLAst, getAstAndSyntaxErrors } from '@kbn/esql-ast';
+import { type ESQLAstQueryExpression, parse } from '@kbn/esql-ast';
 
-export const isAggregatingQuery = (ast: ESQLAst): boolean => {
-  return ast.some((astItem) => astItem.type === 'command' && astItem.name === 'stats');
-};
+export const isAggregatingQuery = (astExpression: ESQLAstQueryExpression): boolean =>
+  astExpression.commands.some((command) => command.name === 'stats');
 
 /**
  * compute if esqlQuery is aggregating/grouping, i.e. using STATS...BY command
  * @param esqlQuery
  * @returns boolean
  */
 export const computeIsESQLQueryAggregating = (esqlQuery: string): boolean => {
-  const { ast } = getAstAndSyntaxErrors(esqlQuery);
-  return isAggregatingQuery(ast);
+  const { root } = parse(esqlQuery);
+  return isAggregatingQuery(root);
 };
diff --git a/x-pack/plugins/security_solution/public/common/utils/use_set_field_value_cb.test.ts b/x-pack/plugins/security_solution/public/common/utils/use_set_field_value_cb.test.ts
diff --git a/x-pack/plugins/security_solution/public/common/utils/use_set_field_value_cb.ts b/x-pack/plugins/security_solution/public/common/utils/use_set_field_value_cb.ts
diff --git a/...olution/public/detection_engine/rule_creation/components/eql_query_edit/eql_query_bar.tsx b/...olution/public/detection_engine/rule_creation/components/eql_query_edit/eql_query_bar.tsx
@@ -18,8 +18,8 @@ import type { FieldHook } from '../../../../shared_imports';
 import { FilterBar } from '../../../../common/components/filter_bar';
 import { useAppToasts } from '../../../../common/hooks/use_app_toasts';
 import type { EqlOptions } from '../../../../../common/search_strategy';
+import type { FieldValueQueryBar } from '../../../rule_creation_ui/components/query_bar_field';
 import { useKibana } from '../../../../common/lib/kibana';
-import type { FieldValueQueryBar } from '../../../rule_creation_ui/components/query_bar';
 import type { EqlQueryBarFooterProps } from './footer';
 import { EqlQueryBarFooter } from './footer';
 import { getValidationResults } from './validators';

diff --git a/...lution/public/detection_engine/rule_creation/components/eql_query_edit/eql_query_edit.tsx b/...lution/public/detection_engine/rule_creation/components/eql_query_edit/eql_query_edit.tsx
@@ -11,11 +11,11 @@ import { debounceAsync } from '@kbn/securitysolution-utils';
 import type { FormData, FieldConfig, ValidationFuncArg } from '../../../../shared_imports';
 import { UseMultiFields } from '../../../../shared_imports';
 import type { EqlFieldsComboBoxOptions, EqlOptions } from '../../../../../common/search_strategy';
+import type { FieldValueQueryBar } from '../../../rule_creation_ui/components/query_bar_field';
 import { queryRequiredValidatorFactory } from '../../../rule_creation_ui/validators/query_required_validator_factory';
 import { eqlQueryValidatorFactory } from './eql_query_validator_factory';
 import { EqlQueryBar } from './eql_query_bar';
 import * as i18n from './translations';
-import type { FieldValueQueryBar } from '../../../rule_creation_ui/components/query_bar';
 
 interface EqlQueryEditProps {
   path: string;

diff --git a/...c/detection_engine/rule_creation/components/eql_query_edit/eql_query_validator_factory.ts b/...c/detection_engine/rule_creation/components/eql_query_edit/eql_query_validator_factory.ts
@@ -8,8 +8,8 @@
 import { isEmpty } from 'lodash';
 import type { FormData, ValidationError, ValidationFunc } from '../../../../shared_imports';
 import { KibanaServices } from '../../../../common/lib/kibana';
+import type { FieldValueQueryBar } from '../../../rule_creation_ui/components/query_bar_field';
 import type { EqlOptions } from '../../../../../common/search_strategy';
-import type { FieldValueQueryBar } from '../../../rule_creation_ui/components/query_bar';
 import type { EqlResponseError } from '../../../../common/hooks/eql/api';
 import { EQL_ERROR_CODES, validateEql } from '../../../../common/hooks/eql/api';
 import { EQL_VALIDATION_REQUEST_ERROR } from './translations';

diff --git a/...ation/components/esql_info_icon/index.tsx → ...onents/esql_query_edit/esql_info_icon.tsx b/...ation/components/esql_info_icon/index.tsx → ...onents/esql_query_edit/esql_info_icon.tsx
@@ -5,21 +5,19 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 import { EuiPopover, EuiText, EuiButtonIcon, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import * as i18n from './translations';
-
-import { useBoolState } from '../../../../common/hooks/use_bool_state';
+import { useBoolean } from '@kbn/react-hooks';
 import { useKibana } from '../../../../common/lib/kibana';
+import * as i18n from './translations';
 
 /**
  * Icon and popover that gives hint to users how to get started with ES|QL rules
  */
-const EsqlInfoIconComponent = () => {
+export const EsqlInfoIcon = memo(function EsqlInfoIcon(): JSX.Element {
   const { docLinks } = useKibana().services;
-
-  const [isPopoverOpen, , closePopover, togglePopover] = useBoolState();
+  const [isPopoverOpen, { off: closePopover, on: togglePopover }] = useBoolean(false);
 
   const button = (
     <EuiButtonIcon iconType="iInCircle" onClick={togglePopover} aria-label={i18n.ARIA_LABEL} />
@@ -29,13 +27,13 @@ const EsqlInfoIconComponent = () => {
     <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
       <EuiText size="s">
         <FormattedMessage
-          id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.esqlInfoTooltipContent"
+          id="xpack.securitySolution.ruleManagement.esqlQuery.esqlInfoTooltipContent"
           defaultMessage="Check out our {createEsqlRuleTypeLink} to get started using ES|QL rules."
           values={{
             createEsqlRuleTypeLink: (
               <EuiLink href={docLinks.links.securitySolution.createEsqlRuleType} target="_blank">
                 <FormattedMessage
-                  id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.esqlInfoTooltipLink"
+                  id="xpack.securitySolution.ruleManagement.esqlQuery.esqlInfoTooltipLink"
                   defaultMessage="documentation"
                 />
               </EuiLink>
@@ -45,8 +43,4 @@ const EsqlInfoIconComponent = () => {
       </EuiText>
     </EuiPopover>
   );
-};
-
-export const EsqlInfoIcon = React.memo(EsqlInfoIconComponent);
-
-EsqlInfoIcon.displayName = 'EsqlInfoIcon';
+});
diff --git a/...tion/public/detection_engine/rule_creation/components/esql_query_edit/esql_query_edit.tsx b/...tion/public/detection_engine/rule_creation/components/esql_query_edit/esql_query_edit.tsx
@@ -0,0 +1,88 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import type { DataViewBase } from '@kbn/es-query';
+import { debounceAsync } from '@kbn/securitysolution-utils';
+import type { FieldConfig } from '../../../../shared_imports';
+import { UseField } from '../../../../shared_imports';
+import type { FieldValueQueryBar } from '../../../rule_creation_ui/components/query_bar_field';
+import { QueryBarField } from '../../../rule_creation_ui/components/query_bar_field';
+import { esqlQueryRequiredValidator } from './validators/esql_query_required_validator';
+import { esqlQueryValidatorFactory } from './validators/esql_query_validator_factory';
+import { EsqlInfoIcon } from './esql_info_icon';
+import * as i18n from './translations';
+
+interface EsqlQueryEditProps {
+  path: string;
+  fieldsToValidateOnChange?: string | string[];
+  dataView: DataViewBase;
+  required?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  skipIdColumnCheck?: boolean;
+  onValidityChange?: (arg: boolean) => void;
+}
+
+export const EsqlQueryEdit = memo(function EsqlQueryEdit({
+  path,
+  fieldsToValidateOnChange,
+  dataView,
+  required = false,
+  loading = false,
+  disabled = false,
+  skipIdColumnCheck,
+  onValidityChange,
+}: EsqlQueryEditProps): JSX.Element {
+  const queryClient = useQueryClient();
+  const componentProps = useMemo(
+    () => ({
+      isDisabled: disabled,
+      isLoading: loading,
+      indexPattern: dataView,
+      idAria: 'ruleEsqlQueryBar',
+      dataTestSubj: 'ruleEsqlQueryBar',
+      onValidityChange,
+    }),
+    [dataView, loading, disabled, onValidityChange]
+  );
+  const fieldConfig: FieldConfig<FieldValueQueryBar> = useMemo(
+    () => ({
+      label: i18n.ESQL_QUERY,
+      labelAppend: <EsqlInfoIcon />,
+      fieldsToValidateOnChange: fieldsToValidateOnChange
+        ? [path, fieldsToValidateOnChange].flat()
+        : undefined,
+      validations: [
+        ...(required
+          ? [
+              {
+                validator: esqlQueryRequiredValidator,
+              },
+            ]
+          : []),
+        {
+          validator: debounceAsync(
+            esqlQueryValidatorFactory({ queryClient, skipIdColumnCheck }),
+            300
+          ),
+        },
+      ],
+    }),
+    [required, path, fieldsToValidateOnChange, queryClient, skipIdColumnCheck]
+  );
+
+  return (
+    <UseField
+      path={path}
+      component={QueryBarField}
+      componentProps={componentProps}
+      config={fieldConfig}
+    />
+  );
+});
diff --git a/...curity_solution/public/detection_engine/rule_creation/components/esql_query_edit/index.ts b/...curity_solution/public/detection_engine/rule_creation/components/esql_query_edit/index.ts
@@ -0,0 +1,9 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './esql_query_edit';
+export * from './validators/error_codes';
diff --git a/...components/esql_info_icon/translations.ts → ...omponents/esql_query_edit/translations.ts b/...components/esql_info_icon/translations.ts → ...omponents/esql_query_edit/translations.ts
@@ -7,8 +7,15 @@
 
 import { i18n } from '@kbn/i18n';
 
+export const ESQL_QUERY = i18n.translate(
+  'xpack.securitySolution.ruleManagement.fields.esqlQuery.label',
+  {
+    defaultMessage: 'ES|QL query',
+  }
+);
+
 export const ARIA_LABEL = i18n.translate(
-  'xpack.securitySolution.detectionEngine.createRule.stepDefineRule.esqlInfoAriaLabel',
+  'xpack.securitySolution.ruleManagement.fields.esqlQuery.ariaLabel',
   {
     defaultMessage: `Open help popover`,
   }

diff --git a/...ublic/detection_engine/rule_creation/components/esql_query_edit/validators/error_codes.ts b/...ublic/detection_engine/rule_creation/components/esql_query_edit/validators/error_codes.ts
@@ -0,0 +1,12 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export enum ESQL_ERROR_CODES {
+  INVALID_ESQL = 'ERR_INVALID_ESQL',
+  INVALID_SYNTAX = 'ERR_INVALID_SYNTAX',
+  ERR_MISSING_ID_FIELD_FROM_RESULT = 'ERR_MISSING_ID_FIELD_FROM_RESULT',
+}
diff --git a/...gine/rule_creation/components/esql_query_edit/validators/esql_query_required_validator.ts b/...gine/rule_creation/components/esql_query_edit/validators/esql_query_required_validator.ts
@@ -0,0 +1,22 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { fieldValidators, type FormData, type ValidationFunc } from '../../../../../shared_imports';
+import type { FieldValueQueryBar } from '../../../../rule_creation_ui/components/query_bar_field';
+import * as i18n from './translations';
+
+export const esqlQueryRequiredValidator: ValidationFunc<FormData, string, FieldValueQueryBar> = (
+  data
+) => {
+  const { value } = data;
+  const esqlQuery = value.query.query as string;
+
+  return fieldValidators.emptyField(i18n.ESQL_QUERY_VALIDATION_REQUIRED)({
+    ...data,
+    value: esqlQuery,
+  });
+};