[SECURITY SOLUTION] Eql in timeline

src/plugins/data/public/index.ts

@@ -431,6 +431,7 @@ export {
   SearchBarProps,
   StatefulSearchBarProps,
   IndexPatternSelectProps,
+  QueryLanguageSwitcher,
   QueryStringInput,
   QueryStringInputProps,
 } from './ui';

src/plugins/data/public/ui/index.ts

@@ -8,6 +8,10 @@
 
 export { IndexPatternSelectProps } from './index_pattern_select';
 export { FilterLabel } from './filter_bar';
-export { QueryStringInput, QueryStringInputProps } from './query_string_input';
+export {
+  QueryLanguageSwitcher,
+  QueryStringInput,
+  QueryStringInputProps,
+} from './query_string_input';
 export { SearchBar, SearchBarProps, StatefulSearchBarProps } from './search_bar';
 export { SuggestionsComponent } from './typeahead';

src/plugins/data/public/ui/query_string_input/index.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { withKibana } from '../../../../kibana_react/public';
+import { QueryLanguageSwitcherProps } from './language_switcher';
 import type { QueryBarTopRowProps } from './query_bar_top_row';
 import type { QueryStringInputProps } from './query_string_input';
 
@@ -27,3 +28,10 @@ export const QueryStringInput = (props: QueryStringInputProps) => (
   </React.Suspense>
 );
 export type { QueryStringInputProps };
+
+const LazyQueryLanguageSwitcher = React.lazy(() => import('./language_switcher'));
+export const QueryLanguageSwitcher = (props: QueryLanguageSwitcherProps) => (
+  <React.Suspense fallback={<Fallback />}>
+    <LazyQueryLanguageSwitcher {...props} />
+  </React.Suspense>
+);

src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { QueryLanguageSwitcher } from './language_switcher';
+import QueryLanguageSwitcher from './language_switcher';
 import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
 import { coreMock } from '../../../../../core/public/mocks';
 import { mountWithIntl } from '@kbn/test/jest';
@@ -55,4 +55,32 @@ describe('LanguageSwitcher', () => {
     expect(component.find(EuiPopover).prop('isOpen')).toBe(true);
     expect(component.find('[data-test-subj="languageToggle"]').get(0).props.checked).toBeTruthy();
   });
+
+  describe('for eql', () => {
+    it('should show radio button for lucene, kql and eql', () => {
+      const component = mountWithIntl(
+        wrapInContext({
+          language: 'kuery',
+          onSelectLanguage: () => {
+            return;
+          },
+          includeEqlLanguage: true,
+        })
+      );
+      component.find(EuiButtonEmpty).simulate('click');
+      expect(component.find(EuiPopover).prop('isOpen')).toBe(true);
+      expect(
+        component.find('[data-test-subj="languageRadioToggle"] div.euiRadio').exists()
+      ).toBeTruthy();
+      expect(
+        component.find('[data-test-subj="languageRadioToggle"] div.euiRadio').at(0).text()
+      ).toEqual('Lucene');
+      expect(
+        component.find('[data-test-subj="languageRadioToggle"] div.euiRadio').at(1).text()
+      ).toEqual('KQL');
+      expect(
+        component.find('[data-test-subj="languageRadioToggle"] div.euiRadio').at(2).text()
+      ).toEqual('EQL');
+    });
+  });
 });

src/plugins/data/public/ui/query_string_input/language_switcher.tsx

@@ -10,9 +10,11 @@ import {
   EuiButtonEmpty,
   EuiForm,
   EuiFormRow,
+  EuiHorizontalRule,
   EuiLink,
   EuiPopover,
   EuiPopoverTitle,
+  EuiRadioGroup,
   EuiSpacer,
   EuiSwitch,
   EuiText,
@@ -22,28 +24,69 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useState } from 'react';
 import { useKibana } from '../../../../kibana_react/public';
 
-interface Props {
+export interface QueryLanguageSwitcherProps {
   language: string;
   onSelectLanguage: (newLanguage: string) => void;
   anchorPosition?: PopoverAnchorPosition;
+  includeEqlLanguage?: boolean;
 }
 
-export function QueryLanguageSwitcher(props: Props) {
+const QueryLanguageSwitcher = React.memo((props: QueryLanguageSwitcherProps) => {
   const kibana = useKibana();
   const kueryQuerySyntaxDocs = kibana.services.docLinks!.links.query.kueryQuerySyntax;
+  const eqlQuerySyntaxDocs = kibana.services.docLinks!.links.query.eql;
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const luceneLabel = (
     <FormattedMessage id="data.query.queryBar.luceneLanguageName" defaultMessage="Lucene" />
   );
   const kqlLabel = (
     <FormattedMessage id="data.query.queryBar.kqlLanguageName" defaultMessage="KQL" />
   );
+  const eqlLabel = (
+    <FormattedMessage id="data.query.queryBar.eqlLanguageName" defaultMessage="EQL" />
+  );
   const kqlFullName = (
     <FormattedMessage
       id="data.query.queryBar.kqlFullLanguageName"
       defaultMessage="Kibana Query Language"
     />
   );
+  const eqlFullName = (
+    <FormattedMessage
+      id="data.query.queryBar.eqlFullLanguageName"
+      defaultMessage="Event Query Language"
+    />
+  );
+
+  const kqlDescription = (
+    <FormattedMessage
+      id="data.query.queryBar.syntaxKqlOptionsDescription"
+      defaultMessage="The {docsLink} (KQL) offers a simplified query
+              syntax and support for scripted fields. KQL also provides autocomplete if you have
+              a Basic license or above. If you turn off KQL, Kibana uses Lucene."
+      values={{
+        docsLink: (
+          <EuiLink href={kueryQuerySyntaxDocs} target="_blank">
+            {kqlFullName}
+          </EuiLink>
+        ),
+      }}
+    />
+  );
+
+  const eqlDescription = (
+    <FormattedMessage
+      id="data.query.queryBar.syntaxEqlOptionsDescription"
+      defaultMessage="The {docsLink} (EQL) is a query language for event-based time series data, such as logs, metrics, and traces."
+      values={{
+        docsLink: (
+          <EuiLink href={eqlQuerySyntaxDocs} target="_blank">
+            {eqlFullName}
+          </EuiLink>
+        ),
+      }}
+    />
+  );
 
   const button = (
     <EuiButtonEmpty
@@ -52,10 +95,25 @@ export function QueryLanguageSwitcher(props: Props) {
       className="euiFormControlLayout__append kqlQueryBar__languageSwitcherButton"
       data-test-subj={'switchQueryLanguageButton'}
     >
-      {props.language === 'lucene' ? luceneLabel : kqlLabel}
+      {props.language === 'lucene' ? luceneLabel : props.language === 'kuery' ? kqlLabel : eqlLabel}
     </EuiButtonEmpty>
   );
 
+  const languageOptions = [
+    {
+      id: 'lucene',
+      label: luceneLabel,
+    },
+    {
+      id: 'kuery',
+      label: kqlLabel,
+    },
+    {
+      id: 'eql',
+      label: eqlLabel,
+    },
+  ];
+
   return (
     <EuiPopover
       id="queryLanguageSwitcherPopover"
@@ -73,48 +131,60 @@ export function QueryLanguageSwitcher(props: Props) {
         />
       </EuiPopoverTitle>
       <div style={{ width: '350px' }}>
-        <EuiText>
-          <p>
-            <FormattedMessage
-              id="data.query.queryBar.syntaxOptionsDescription"
-              defaultMessage="The {docsLink} (KQL) offers a simplified query
-              syntax and support for scripted fields. KQL also provides autocomplete if you have
-              a Basic license or above. If you turn off KQL, Kibana uses Lucene."
-              values={{
-                docsLink: (
-                  <EuiLink href={kueryQuerySyntaxDocs} target="_blank">
-                    {kqlFullName}
-                  </EuiLink>
-                ),
-              }}
-            />
-          </p>
-        </EuiText>
+        {props.includeEqlLanguage ? (
+          <>
+            <EuiForm>
+              <EuiRadioGroup
+                options={languageOptions}
+                idSelected={props.language}
+                onChange={props.onSelectLanguage}
+                data-test-subj="languageRadioToggle"
+                name="Syntax options"
+              />
+            </EuiForm>
+            <EuiHorizontalRule margin="m" />
+            <EuiText>
+              <p>{kqlDescription}</p>
+            </EuiText>
+            <EuiText>
+              <p>{eqlDescription}</p>
+            </EuiText>
+          </>
+        ) : (
+          <>
+            <EuiText>
+              <p>{kqlDescription}</p>
+            </EuiText>
 
-        <EuiSpacer size="m" />
+            <EuiSpacer size="m" />
 
-        <EuiForm>
-          <EuiFormRow label={kqlFullName}>
-            <EuiSwitch
-              id="queryEnhancementOptIn"
-              name="popswitch"
-              label={
-                props.language === 'kuery' ? (
-                  <FormattedMessage id="data.query.queryBar.kqlOnLabel" defaultMessage="On" />
-                ) : (
-                  <FormattedMessage id="data.query.queryBar.kqlOffLabel" defaultMessage="Off" />
-                )
-              }
-              checked={props.language === 'kuery'}
-              onChange={() => {
-                const newLanguage = props.language === 'lucene' ? 'kuery' : 'lucene';
-                props.onSelectLanguage(newLanguage);
-              }}
-              data-test-subj="languageToggle"
-            />
-          </EuiFormRow>
-        </EuiForm>
+            <EuiForm>
+              <EuiFormRow label={kqlFullName}>
+                <EuiSwitch
+                  id="queryEnhancementOptIn"
+                  name="popswitch"
+                  label={
+                    props.language === 'kuery' ? (
+                      <FormattedMessage id="data.query.queryBar.kqlOnLabel" defaultMessage="On" />
+                    ) : (
+                      <FormattedMessage id="data.query.queryBar.kqlOffLabel" defaultMessage="Off" />
+                    )
+                  }
+                  checked={props.language === 'kuery'}
+                  onChange={() => {
+                    const newLanguage = props.language === 'lucene' ? 'kuery' : 'lucene';
+                    props.onSelectLanguage(newLanguage);
+                  }}
+                  data-test-subj="languageToggle"
+                />
+              </EuiFormRow>
+            </EuiForm>
+          </>
+        )}
       </div>
     </EuiPopover>
   );
-}
+});
+
+// eslint-disable-next-line import/no-default-export
+export default QueryLanguageSwitcher;

src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx

@@ -42,6 +42,7 @@ export interface QueryBarTopRowProps {
   dataTestSubj?: string;
   disableAutoFocus?: boolean;
   screenTitle?: string;
+  includeEqlLanguage?: boolean;
   indexPatterns?: Array<IIndexPattern | string>;
   isLoading?: boolean;
   prepend?: React.ComponentProps<typeof EuiFieldText>['prepend'];
@@ -176,6 +177,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
       <EuiFlexItem>
         <QueryStringInput
           disableAutoFocus={props.disableAutoFocus}
+          includeEqlLanguage={props.includeEqlLanguage}
           indexPatterns={props.indexPatterns!}
           prepend={props.prepend}
           query={props.query!}

src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx

@@ -20,7 +20,7 @@ import { render } from '@testing-library/react';
 
 import { EuiTextArea, EuiIcon } from '@elastic/eui';
 
-import { QueryLanguageSwitcher } from './language_switcher';
+import QueryLanguageSwitcher from './language_switcher';
 import { QueryStringInput } from './';
 import type QueryStringInputUI from './query_string_input';
 

src/plugins/data/public/ui/query_string_input/query_string_input.tsx

@@ -31,7 +31,7 @@ import { QuerySuggestion, QuerySuggestionTypes } from '../../autocomplete';
 
 import { KibanaReactContextValue, toMountPoint } from '../../../../kibana_react/public';
 import { fetchIndexPatterns } from './fetch_index_patterns';
-import { QueryLanguageSwitcher } from './language_switcher';
+import QueryLanguageSwitcher from './language_switcher';
 import { PersistedLog, getQueryLog, matchPairs, toUser, fromUser } from '../../query';
 import { SuggestionsListSize } from '../typeahead/suggestions_component';
 import { SuggestionsComponent } from '..';
@@ -56,6 +56,7 @@ export interface QueryStringInputProps {
   className?: string;
   isInvalid?: boolean;
   iconType?: string;
+  includeEqlLanguage?: boolean;
 }
 
 interface Props extends QueryStringInputProps {
@@ -702,6 +703,7 @@ export default class QueryStringInputUI extends Component<Props, State> {
             language={this.props.query.language}
             anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
             onSelectLanguage={this.onSelectLanguage}
+            includeEqlLanguage={this.props.includeEqlLanguage}
           />
         )}
       </div>

src/plugins/data/public/ui/search_bar/search_bar.tsx

@@ -54,6 +54,7 @@ export interface SearchBarOwnProps {
   dateRangeTo?: string;
   // Query bar - should be in SearchBarInjectedDeps
   query?: Query;
+  includeEqlLanguage?: boolean;
   // Show when user has privileges to save
   showSaveQuery?: boolean;
   savedQuery?: SavedQuery;
@@ -380,6 +381,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           query={this.state.query}
           screenTitle={this.props.screenTitle}
           onSubmit={this.onQueryBarSubmit}
+          includeEqlLanguage={this.props.includeEqlLanguage}
           indexPatterns={this.props.indexPatterns}
           isLoading={this.props.isLoading}
           prepend={this.props.showFilterBar ? savedQueryManagement : undefined}

x-pack/plugins/security_solution/common/ecs/index.ts

@@ -55,4 +55,6 @@ export interface Ecs {
   process?: ProcessEcs;
   file?: FileEcs;
   system?: SystemEcs;
+  // This should be temporary
+  eql?: { parentId: string; sequenceNumber: string };
 }