[SIEM] [DETECTION ENGINE] Add creation rule (#51376) (#51513)

* Add creation rule on Detection Engine

* review + bug fixes

* review II + clean up

* fix persistence saved query

* fix eui prop + add type security to add rule

* fix more bug from review III

* review IV

src/plugins/es_ui_shared/static/forms/components/field.tsx

@@ -29,20 +29,26 @@ interface Props {
 
 import {
   TextField,
+  TextAreaField,
   NumericField,
   CheckBoxField,
   ComboBoxField,
   MultiSelectField,
+  RadioGroupField,
+  RangeField,
   SelectField,
   ToggleField,
 } from './fields';
 
 const mapTypeToFieldComponent = {
   [FIELD_TYPES.TEXT]: TextField,
+  [FIELD_TYPES.TEXTAREA]: TextAreaField,
   [FIELD_TYPES.NUMBER]: NumericField,
   [FIELD_TYPES.CHECKBOX]: CheckBoxField,
   [FIELD_TYPES.COMBO_BOX]: ComboBoxField,
   [FIELD_TYPES.MULTI_SELECT]: MultiSelectField,
+  [FIELD_TYPES.RADIO_GROUP]: RadioGroupField,
+  [FIELD_TYPES.RANGE]: RangeField,
   [FIELD_TYPES.SELECT]: SelectField,
   [FIELD_TYPES.TOGGLE]: ToggleField,
 };

src/plugins/es_ui_shared/static/forms/components/fields/checkbox_field.tsx

@@ -21,8 +21,7 @@ import React from 'react';
 import { EuiFormRow, EuiCheckbox } from '@elastic/eui';
 import uuid from 'uuid';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx

@@ -82,6 +82,7 @@ export const ComboBoxField = ({ field, euiFieldProps = {}, ...rest }: Props) =>
   return (
     <EuiFormRow
       label={field.label}
+      labelAppend={field.labelAppend}
       helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}

src/plugins/es_ui_shared/static/forms/components/fields/index.ts

@@ -22,6 +22,8 @@ export * from './numeric_field';
 export * from './checkbox_field';
 export * from './combobox_field';
 export * from './multi_select_field';
+export * from './radio_group_field';
+export * from './range_field';
 export * from './select_field';
 export * from './toggle_field';
 export * from './text_area_field';

src/plugins/es_ui_shared/static/forms/components/fields/multi_select_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiSelectable, EuiPanel } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/numeric_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/radio_group_field.tsx

@@ -0,0 +1,54 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { EuiFormRow, EuiRadioGroup } from '@elastic/eui';
+
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
+
+interface Props {
+  field: FieldHook;
+  euiFieldProps?: Record<string, any>;
+  idAria?: string;
+  [key: string]: any;
+}
+
+export const RadioGroupField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      helpText={field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={rest['data-test-subj']}
+      describedByIds={rest.idAria ? [rest.idAria] : undefined}
+    >
+      <EuiRadioGroup
+        idSelected={field.value as string}
+        options={[]}
+        onChange={field.setValue}
+        data-test-subj="input"
+        {...euiFieldProps}
+      />
+    </EuiFormRow>
+  );
+};

src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx

@@ -0,0 +1,68 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useCallback } from 'react';
+import { EuiFormRow, EuiRange } from '@elastic/eui';
+
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
+
+interface Props {
+  field: FieldHook;
+  euiFieldProps?: Record<string, any>;
+  idAria?: string;
+  [key: string]: any;
+}
+
+export const RangeField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  const onChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => {
+      const event = ({ ...e, value: `${e.currentTarget.value}` } as unknown) as React.ChangeEvent<{
+        value: string;
+      }>;
+      field.onChange(event);
+    },
+    [field.onChange]
+  );
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      helpText={field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={rest['data-test-subj']}
+      describedByIds={rest.idAria ? [rest.idAria] : undefined}
+    >
+      <EuiRange
+        value={field.value as number}
+        onChange={onChange}
+        max={10}
+        min={0}
+        showRange
+        showInput
+        fullWidth
+        data-test-subj="range"
+        {...euiFieldProps}
+      />
+    </EuiFormRow>
+  );
+};

src/plugins/es_ui_shared/static/forms/components/fields/select_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiSelect } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;
@@ -49,10 +48,11 @@ export const SelectField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
         onChange={e => {
           field.setValue(e.target.value);
         }}
+        options={[]}
         hasNoInitialSelection={true}
         isInvalid={isInvalid}
         data-test-subj="select"
-        {...(euiFieldProps as { options: any; [key: string]: any })}
+        {...euiFieldProps}
       />
     </EuiFormRow>
   );

src/plugins/es_ui_shared/static/forms/components/fields/text_area_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiTextArea } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/text_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/hook_form_lib/constants.ts

@@ -20,10 +20,13 @@
 // Field types
 export const FIELD_TYPES = {
   TEXT: 'text',
+  TEXTAREA: 'textarea',
   NUMBER: 'number',
   TOGGLE: 'toggle',
   CHECKBOX: 'checkbox',
   COMBO_BOX: 'comboBox',
+  RADIO_GROUP: 'radioGroup',
+  RANGE: 'range',
   SELECT: 'select',
   MULTI_SELECT: 'multiSelect',
 };

src/plugins/es_ui_shared/static/forms/components/helpers.ts → src/plugins/es_ui_shared/static/forms/hook_form_lib/helpers.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { FieldHook } from '../hook_form_lib';
+import { FieldHook } from './types';
 
 export const getFieldValidityAndErrorMessage = (
   field: FieldHook

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts

@@ -27,6 +27,7 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
     type = FIELD_TYPES.TEXT,
     defaultValue = '',
     label = '',
+    labelAppend = '',
     helpText = '',
     validations = [],
     formatters = [],
@@ -382,6 +383,7 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
     path,
     type,
     label,
+    labelAppend,
     helpText,
     value,
     errors,

src/plugins/es_ui_shared/static/forms/hook_form_lib/index.ts

@@ -20,6 +20,7 @@
 // Only export the useForm hook. The "useField" hook is for internal use
 // as the consumer of the library must use the <UseField /> component
 export { useForm } from './hooks';
+export { getFieldValidityAndErrorMessage } from './helpers';
 
 export * from './form_context';
 export * from './components';

src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts

@@ -71,6 +71,7 @@ export interface FormOptions {
 export interface FieldHook {
   readonly path: string;
   readonly label?: string;
+  readonly labelAppend?: string | ReactNode;
   readonly helpText?: string | ReactNode;
   readonly type: string;
   readonly value: unknown;
@@ -98,6 +99,7 @@ export interface FieldHook {
 export interface FieldConfig<T extends object = any> {
   readonly path?: string;
   readonly label?: string;
+  readonly labelAppend?: string | ReactNode;
   readonly helpText?: string | ReactNode;
   readonly type?: HTMLInputElement['type'];
   readonly defaultValue?: unknown;

x-pack/legacy/plugins/siem/public/components/header_global/index.tsx

@@ -35,7 +35,7 @@ FlexItem.displayName = 'FlexItem';
 interface HeaderGlobalProps {
   hideDetectionEngine?: boolean;
 }
-export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine = true }) => (
+export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine = false }) => (
   <Wrapper className="siemHeaderGlobal">
     <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" wrap>
       <FlexItem>

x-pack/legacy/plugins/siem/public/components/header_page/index.tsx

@@ -4,7 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiBetaBadge, EuiBadge, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import {
+  EuiBetaBadge,
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiProgress,
+  EuiTitle,
+} from '@elastic/eui';
 import React from 'react';
 import styled, { css } from 'styled-components';
 
@@ -14,6 +21,7 @@ import { Subtitle, SubtitleProps } from '../subtitle';
 
 interface HeaderProps {
   border?: boolean;
+  isLoading?: boolean;
 }
 
 const Header = styled.header.attrs({
@@ -26,6 +34,9 @@ const Header = styled.header.attrs({
       css`
         border-bottom: ${theme.eui.euiBorderThin};
         padding-bottom: ${theme.eui.paddingSizes.l};
+        .euiProgress {
+          top: ${theme.eui.paddingSizes.l};
+        }
       `}
   `}
 `;
@@ -85,6 +96,7 @@ export const HeaderPage = React.memo<HeaderPageProps>(
     border,
     children,
     draggableArguments,
+    isLoading,
     subtitle,
     subtitle2,
     title,
@@ -132,6 +144,7 @@ export const HeaderPage = React.memo<HeaderPageProps>(
 
           {subtitle && <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />}
           {subtitle2 && <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />}
+          {border && isLoading && <EuiProgress size="xs" color="accent" />}
         </FlexItem>
 
         {children && (

x-pack/legacy/plugins/siem/public/components/query_bar/index.test.tsx

@@ -84,6 +84,7 @@ describe('QueryBar ', () => {
     } = wrapper.find(SearchBar).props();
 
     expect(searchBarProps).toEqual({
+      dataTestSubj: undefined,
       dateRangeFrom: 'now-24h',
       dateRangeTo: 'now',
       filters: [],
@@ -178,6 +179,7 @@ describe('QueryBar ', () => {
           title: 'filebeat-*,auditbeat-*,packetbeat-*',
         },
       ],
+      isLoading: false,
       isRefreshPaused: true,
       query: {
         language: 'kuery',