[ML] Add query bar to Anomaly Explorer for filtering of anomaly resul…

…ts for one or more influencers (elastic#31763)

* wip: add autocomplete kueryFilterBar.update endpoints with query.

* Create indexPattern on job change. Value is autocompleted

* Mask unrelated swimlanes on filter apply

* Only show relevant viewBy swimlane

* reload viewBy swimlane when view By change is relevant to filter

* handle various query types when building filteredFields list

* remove deprecated code from old filter bar

* Show error callout when invalid filter syntax

* remove dependency on deprecated import var

* remove all left over apm dependencies

* persist filter on refresh

* Create initial filter bar placeholder dynamically

* add description text when filter active

* switch to relevant viewBy fieldname on filter

* recalculate placeholder on job change

* Create tests for all components

* View by dropdown only contains relevant fields for filter

* fix localization message noInfluencers component

* Move indexPattern to state and viewBy option filtering to utils

* remove unnecessary setState when setting viewBy for filter

* Use preloaded jobs from mlJobService to get influencers

* Only filter viewByOptions if valid field

* use kql and move to components dir

* move filter bar to public/components/

x-pack/plugins/ml/public/app.js

@@ -30,6 +30,7 @@ import 'plugins/ml/components/nav_menu';
 import 'plugins/ml/components/loading_indicator';
 import 'plugins/ml/settings';
 import 'plugins/ml/file_datavisualizer';
+import 'uiExports/autocompleteProviders';
 
 import uiRoutes from 'ui/routes';
 

x-pack/plugins/ml/public/components/kql_filter_bar/__snapshots__/kql_filter_bar.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KqlFilterBar snapshot 1`] = `
+<Fragment>
+  <FilterBar
+    disabled={false}
+    initialValue=""
+    isLoading={false}
+    onChange={[Function]}
+    onSubmit={[Function]}
+    placeholder="tag : engineering OR tag : marketing"
+    suggestions={Array []}
+  />
+</Fragment>
+`;

x-pack/plugins/ml/public/components/kql_filter_bar/click_outside/__snapshots__/click_outside.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClickOutside snapshot 1`] = `
+<div
+  onClickOutside={[Function]}
+/>
+`;

x-pack/plugins/ml/public/components/kql_filter_bar/click_outside/click_outside.js

@@ -0,0 +1,41 @@
+/*
+ * 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 React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export class ClickOutside extends Component {
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onClick);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.onClick);
+  }
+
+  setNodeRef = node => {
+    this.nodeRef = node;
+  };
+
+  onClick = event => {
+    if (this.nodeRef && !this.nodeRef.contains(event.target)) {
+      this.props.onClickOutside();
+    }
+  };
+
+  render() {
+    const { ...restProps } = this.props;
+    return (
+      <div ref={this.setNodeRef} {...restProps}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+ClickOutside.propTypes = {
+  onClickOutside: PropTypes.func.isRequired
+};

x-pack/plugins/ml/public/components/kql_filter_bar/click_outside/click_outside.test.js

@@ -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 React from 'react';
+import { shallow } from 'enzyme';
+import { ClickOutside } from './click_outside';
+
+
+describe('ClickOutside', () => {
+
+  test('snapshot', () => {
+    const wrapper = shallow(<ClickOutside onClickOutside={() => {}} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+});

x-pack/plugins/ml/public/components/kql_filter_bar/click_outside/index.js

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { ClickOutside } from './click_outside';

x-pack/plugins/ml/public/components/kql_filter_bar/filter_bar/__snapshots__/filter_bar.test.js.snap

@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterBar snapshot suggestions not shown 1`] = `
+<ClickOutside
+  onClickOutside={[Function]}
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    <EuiFieldSearch
+      autoComplete="off"
+      compressed={false}
+      disabled={false}
+      fullWidth={true}
+      incremental={false}
+      inputRef={[Function]}
+      isLoading={false}
+      onChange={[Function]}
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      placeholder="Filter by influencer fields… (E.g. Test placeholder)"
+      spellCheck={false}
+      style={
+        Object {
+          "backgroundImage": "none",
+        }
+      }
+      value=""
+    />
+  </div>
+  <Suggestions
+    index={null}
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+    show={false}
+    suggestions={
+      Array [
+        Object {
+          "description": "<p>Test description for fieldValueOne</p>",
+          "end": 1,
+          "start": 0,
+          "text": "fieldValueOne",
+          "type": "field",
+        },
+        Object {
+          "description": "<p>Test description for fieldValueTwo</p>",
+          "end": 1,
+          "start": 0,
+          "text": "fieldValueTwo",
+          "type": "field",
+        },
+      ]
+    }
+  />
+</ClickOutside>
+`;
+
+exports[`FilterBar snapshot suggestions shown 1`] = `
+<ClickOutside
+  onClickOutside={[Function]}
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    <EuiFieldSearch
+      autoComplete="off"
+      compressed={false}
+      disabled={false}
+      fullWidth={true}
+      incremental={false}
+      inputRef={[Function]}
+      isLoading={false}
+      onChange={[Function]}
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      placeholder="Filter by influencer fields… (E.g. Test placeholder)"
+      spellCheck={false}
+      style={
+        Object {
+          "backgroundImage": "none",
+        }
+      }
+      value=""
+    />
+  </div>
+  <Suggestions
+    index={null}
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+    show={true}
+    suggestions={
+      Array [
+        Object {
+          "description": "<p>Test description for fieldValueOne</p>",
+          "end": 1,
+          "start": 0,
+          "text": "fieldValueOne",
+          "type": "field",
+        },
+        Object {
+          "description": "<p>Test description for fieldValueTwo</p>",
+          "end": 1,
+          "start": 0,
+          "text": "fieldValueTwo",
+          "type": "field",
+        },
+      ]
+    }
+  />
+</ClickOutside>
+`;