Refactor wizard condition components using EUI react components.

Update agg field on type change.

Fix 'month' unit.

Fix typo, pass correctly the 1st numAggField.

Delete unused lib imports.

Create a UiCodeEditor component and apply it to several places. To-do: substitude all ace editors by this component.
It is done to stop this error in the browser dev console ajaxorg/ace#1460

Put directive arguments inside double quotes.

Remove unused lib imports.

Upgrade elastic/eui version.

Improve UiCodeEditor code style.

Lift state up for the wizard condition panel expression component.

Improve code style.

package.json

@@ -24,6 +24,8 @@
   },
   "dependencies": {
     "@elastic/datemath": "2.3.0",
+    "@elastic/eui": "4.3.0",
+    "@slack/client": "4.4.0",
     "angular": "1.4.8",
     "angular-chart.js": "1.1.1",
     "angular-touch": "1.4.8",
@@ -42,16 +44,17 @@
     "moment": "2.22.1",
     "moment-timezone": "0.5.16",
     "mustache": "2.3.0",
+    "ngreact": "0.5.1",
     "node-horseman": "3.3.0",
-    "@slack/client": "4.4.0",
     "phantom": "6.0.3",
     "puppeteer": "1.5.0",
+    "react": "16.5.2",
+    "react-dom": "^16.5.2",
     "rison": "0.1.1",
-    "sanitize-html": "^1.18.2",
+    "sanitize-html": "1.18.2",
     "sum-time": "1.0.0",
     "url-join": "4.0.0",
-    "uuid": "3.1.0",
-    "kibiutils": "sirensolutions/kibiutils#1.8.0"
+    "uuid": "3.1.0"
   },
   "devDependencies": {
     "babel-eslint": "6.1.2",

public/app.module.js

@@ -2,6 +2,7 @@
 import { uiModules } from 'ui/modules';
 import 'bootstrap/dist/js/bootstrap';
 import 'bootstrap/dist/css/bootstrap.css';
+import '@elastic/eui/dist/eui_theme_light.css';
 import 'angular-touch';
 import 'angular-ui-bootstrap';
 import 'chart.js';
@@ -13,6 +14,7 @@ import Directives from './directives';
 import Components from './components';
 
 import './constants';
+import './components/ui_code_editor';
 
 const app = uiModules.get('apps/sentinl', [
   'ui.bootstrap',

public/components/ui_code_editor/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { uiModules } from 'ui/modules';
+import UiCodeEditor from './ui_code_editor';
+
+const module = uiModules.get('apps/sentinl');
+module.directive('uiCodeEditor', function () {
+  return {
+    restrict: 'E',
+    scope: {
+      value: '=',
+      mode: '@',
+      maxLines: '=',
+      minLines: '=',
+      isReadOnly: '=',
+      debounce: '=',
+      onValueChange: '&'
+    },
+    controller: function ($scope, $element, $timeout) {
+      function renderComponent() {
+        render(
+          <UiCodeEditor
+            value={$scope.value}
+            mode={$scope.mode}
+            maxLines={$scope.maxLines}
+            minLines={$scope.minLines}
+            isReadOnly={$scope.isReadOnly}
+            debounce={$scope.debounce}
+            onValueChange={(value) => {
+              $scope.onValueChange({ value });
+            }}
+          ></UiCodeEditor>,
+          $element[0]
+        );
+      };
+
+      renderComponent();
+
+      $scope.$watch('value', () => {
+        renderComponent();
+      });
+
+      $scope.$on('$destroy', () => unmountComponentAtNode($element[0]));
+    }
+  };
+});

public/components/ui_code_editor/ui_code_editor.js

@@ -0,0 +1,66 @@
+import React, {
+  PureComponent,
+} from 'react';
+
+import { render } from 'react-dom';
+
+import 'brace/theme/github';
+import 'brace/mode/javascript';
+import 'brace/mode/json';
+import 'brace/snippets/javascript';
+import 'brace/snippets/json';
+import 'brace/ext/language_tools';
+
+import {
+  EuiCodeEditor,
+} from '@elastic/eui';
+
+export default class UiCodeEditor extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.editor = {
+      debounce: this.props.debounce || 1, // ms
+    };
+
+    this.state = {
+      value: this.props.value,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.props.value) {
+      this.setState({ value: nextProps.value });
+    }
+  }
+
+  onChange = (value) => {
+    this.setState({ value });
+    setTimeout(() => {
+      this.props.onValueChange(value);
+    }, this.editor.debounce);
+  };
+
+  render() {
+    return (
+      <EuiCodeEditor
+        mode={this.props.mode}
+        theme="github"
+        width="100%"
+        value={this.state.value}
+        onChange={this.onChange}
+        isReadOnly={this.props.isReadOnly}
+        setOptions = {{
+          rendererOptions: {
+            maxLines: this.props.maxLines,
+            minLines: this.props.minLines,
+          },
+          fontSize: '14px',
+          enableBasicAutocompletion: true,
+          enableSnippets: true,
+          enableLiveAutocompletion: true,
+        }}
+      />
+    );
+  }
+}

public/pages/watcher_advanced/watcher_advanced.html

@@ -2,12 +2,13 @@
   <top-nav menu="watcherAdvanced.topNavMenu" tabs="watcherAdvanced.tabsMenu"></top-nav>
   <div class="container">
     <div class="col-md-12">
-      <div id="watcherAdvanced"
-        ui-ace="watcherAdvanced.aceConfig()"  
-        ng-model="watcherAdvanced.watcherSourceText"
-      >
-        {{watcherAdvanced.watcherSourceText}}
-      </div>
+      <ui-code-editor
+        value="watcherAdvanced.watcherSourceText"
+        mode="json"
+        max-lines="50"
+        min-lines="50"
+        on-value-change="watcherAdvanced.updateWatcherDoc({ value: value })"
+      ></ui-code-editor>
     </div>
   </div>
 </div>

public/pages/watcher_advanced/watcher_advanced.js

@@ -88,19 +88,8 @@ class WatcherAdvanced {
     this.notify.error(err);
   }
 
-  aceConfig(mode = 'json', maxLines = 50, minLines = 30) {
-    return {
-      mode,
-      useWrapMode: true,
-      showGutter: true,
-      rendererOptions: {
-        maxLines,
-        minLines,
-      },
-      editorOptions: {
-        autoScrollEditorIntoView: false,
-      },
-    };
+  updateWatcherDoc({ value }) {
+    this.watcherSourceText = value;
   }
 }
 

public/pages/watcher_wizard/components/condition_panel_watcher_wizard/classes/watcher_wizard_query_builder.js

@@ -13,7 +13,7 @@ class WatcherWizardQueryBuilder {
       'minutes': 'm',
       'hours': 'h',
       'days': 'd',
-      'months': 'M',
+      'month': 'M',
       'years': 'y',
     };
   }
@@ -706,7 +706,7 @@ class WatcherWizardQueryBuilder {
   }
 
   _dateAgg({field, interval, timeField}) {
-    interval = interval.n + interval.unit.substring(0, 1);
+    interval = interval.n + this.dateMathUnit[interval.unit];
     return {
       dateAgg: {
         date_histogram: {