[ML] Convert anomalies controls to EUI / React (elastic#19856)

* [ML] Convert anomalies controls to EUI / React

* [ML] Edits to anomaly controls following review

x-pack/plugins/ml/public/components/controls/checkbox_showcharts/checkbox_showcharts.js

@@ -7,37 +7,49 @@
 
 
 /*
- * AngularJS directive+service for a checkbox element to toggle charts display.
+ * React component for a checkbox element to toggle charts display.
  */
+import React, { Component } from 'react';
 
-import { stateFactoryProvider } from 'plugins/ml/factories/state_factory';
+import {
+  EuiCheckbox
+} from '@elastic/eui';
 
-import template from './checkbox_showcharts.html';
-import 'plugins/ml/components/controls/controls_select';
+import makeId from '@elastic/eui/lib/components/form/form_row/make_id';
 
-import { uiModules } from 'ui/modules';
-const module = uiModules.get('apps/ml');
+class CheckboxShowCharts extends Component {
+  constructor(props) {
+    super(props);
 
-module
-  .service('mlCheckboxShowChartsService', function (Private) {
-    const stateFactory = Private(stateFactoryProvider);
-    this.state = stateFactory('mlCheckboxShowCharts', {
-      showCharts: true
-    });
-  })
-  .directive('mlCheckboxShowCharts', function (mlCheckboxShowChartsService) {
-    return {
-      restrict: 'E',
-      template,
-      scope: {
-        visible: '='
-      },
-      link: function (scope) {
-        scope.showCharts = mlCheckboxShowChartsService.state.get('showCharts');
-        scope.toggleChartsVisibility = function () {
-          mlCheckboxShowChartsService.state.set('showCharts', scope.showCharts);
-          mlCheckboxShowChartsService.state.changed();
-        };
-      }
+    // Restore the checked setting from the state.
+    this.mlCheckboxShowChartsService = this.props.mlCheckboxShowChartsService;
+    const showCharts = this.mlCheckboxShowChartsService.state.get('showCharts');
+
+    this.state = {
+      checked: showCharts
     };
-  });
+  }
+
+  onChange = (e) => {
+    const showCharts = e.target.checked;
+    this.mlCheckboxShowChartsService.state.set('showCharts', showCharts);
+    this.mlCheckboxShowChartsService.state.changed();
+
+    this.setState({
+      checked: showCharts,
+    });
+  };
+
+  render() {
+    return (
+      <EuiCheckbox
+        id={makeId()}
+        label="Show charts"
+        checked={this.state.checked}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+export { CheckboxShowCharts };

x-pack/plugins/ml/public/components/controls/checkbox_showcharts/checkbox_showcharts_directive.js

@@ -0,0 +1,33 @@
+/*
+ * 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 'ngreact';
+
+import { stateFactoryProvider } from 'plugins/ml/factories/state_factory';
+
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml', ['react']);
+
+import { CheckboxShowCharts } from './checkbox_showcharts';
+
+module.service('mlCheckboxShowChartsService', function (Private) {
+  const stateFactory = Private(stateFactoryProvider);
+  this.state = stateFactory('mlCheckboxShowCharts', {
+    showCharts: true
+  });
+})
+  .directive('mlCheckboxShowCharts', function ($injector) {
+    const reactDirective = $injector.get('reactDirective');
+    const mlCheckboxShowChartsService = $injector.get('mlCheckboxShowChartsService');
+
+    return reactDirective(
+      CheckboxShowCharts,
+      undefined,
+      { restrict: 'E' },
+      { mlCheckboxShowChartsService }
+    );
+  });

x-pack/plugins/ml/public/components/controls/checkbox_showcharts/index.js

@@ -5,5 +5,4 @@
  */
 
 
-
-import './checkbox_showcharts';
+import './checkbox_showcharts_directive';

x-pack/plugins/ml/public/components/controls/select_interval/index.js

@@ -5,5 +5,4 @@
  */
 
 
-
-import './select_interval.js';
+import './select_interval_directive';

x-pack/plugins/ml/public/components/controls/select_interval/select_interval.js

@@ -7,65 +7,72 @@
 
 
 /*
- * AngularJS directive for rendering a select element with various interval levels.
+ * React component for rendering a select element with various aggregation interval levels.
  */
-
 import _ from 'lodash';
+import React, { Component } from 'react';
 
-import { stateFactoryProvider } from 'plugins/ml/factories/state_factory';
+import {
+  EuiSelect
+} from '@elastic/eui';
 
-import template from './select_interval.html';
-import 'plugins/ml/components/controls/controls_select';
 
-import { uiModules } from 'ui/modules';
-const module = uiModules.get('apps/ml');
+const OPTIONS = [
+  { value: 'auto', text: 'Auto' },
+  { value: 'hour', text: '1 hour' },
+  { value: 'day', text: '1 day' },
+  { value: 'second', text: 'Show all' }
+];
 
-module
-  .service('mlSelectIntervalService', function (Private) {
-    const stateFactory = Private(stateFactoryProvider);
-    this.state = stateFactory('mlSelectInterval', {
-      interval: { display: 'Auto', val: 'auto' }
-    });
-  })
-  .directive('mlSelectInterval', function (mlSelectIntervalService) {
-    return {
-      restrict: 'E',
-      template,
-      link: function (scope, element) {
-        scope.intervalOptions = [
-          { display: 'Auto', val: 'auto' },
-          { display: '1 hour', val: 'hour' },
-          { display: '1 day', val: 'day' },
-          { display: 'Show all', val: 'second' }
-        ];
-
-        const intervalState = mlSelectIntervalService.state.get('interval');
-        const intervalValue = _.get(intervalState, 'val', 'auto');
-        let intervalOption = scope.intervalOptions.find(d => d.val === intervalValue);
-        if (intervalOption === undefined) {
-          // Attempt to set value in URL which doesn't map to one of the options.
-          intervalOption = scope.intervalOptions.find(d => d.val === 'auto');
-        }
-        scope.interval = intervalOption;
-        mlSelectIntervalService.state.set('interval', scope.interval);
-
-        scope.setInterval = function (interval) {
-          if (!_.isEqual(scope.interval, interval)) {
-            scope.interval = interval;
-            mlSelectIntervalService.state.set('interval', scope.interval).changed();
-          }
-        };
-
-        function setScopeInterval() {
-          scope.setInterval(mlSelectIntervalService.state.get('interval'));
-        }
-
-        mlSelectIntervalService.state.watch(setScopeInterval);
-
-        element.on('$destroy', () => {
-          mlSelectIntervalService.state.unwatch(setScopeInterval);
-          scope.$destroy();
-        });
-      }
+function optionValueToInterval(value) {
+  // Builds the corresponding interval object with the required display and val properties
+  // from the specified value.
+  const option = OPTIONS.find(opt => (opt.value === value));
+
+  // Default to auto if supplied value doesn't map to one of the options.
+  let interval = OPTIONS[0];
+  if (option !== undefined) {
+    interval = { display: option.text, val: option.value };
+  }
+
+  return interval;
+}
+
+class SelectInterval extends Component {
+  constructor(props) {
+    super(props);
+
+    // Restore the interval from the state, or default to auto.
+    this.mlSelectIntervalService = this.props.mlSelectIntervalService;
+    const intervalState = this.mlSelectIntervalService.state.get('interval');
+    const intervalValue = _.get(intervalState, 'val', 'auto');
+    const interval = optionValueToInterval(intervalValue);
+    this.mlSelectIntervalService.state.set('interval', interval);
+
+    this.state = {
+      value: interval.val
     };
-  });
+  }
+
+  onChange = (e) => {
+    this.setState({
+      value: e.target.value,
+    });
+
+    const interval = optionValueToInterval(e.target.value);
+    this.mlSelectIntervalService.state.set('interval', interval).changed();
+  };
+
+  render() {
+    return (
+      <EuiSelect
+        options={OPTIONS}
+        className="ml-select-interval"
+        value={this.state.value}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+export { SelectInterval };

x-pack/plugins/ml/public/components/controls/select_interval/select_interval_directive.js

@@ -0,0 +1,33 @@
+/*
+ * 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 'ngreact';
+
+import { stateFactoryProvider } from 'plugins/ml/factories/state_factory';
+
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml', ['react']);
+
+import { SelectInterval } from './select_interval';
+
+module.service('mlSelectIntervalService', function (Private) {
+  const stateFactory = Private(stateFactoryProvider);
+  this.state = stateFactory('mlSelectInterval', {
+    interval: { display: 'Auto', val: 'auto' }
+  });
+})
+  .directive('mlSelectInterval', function ($injector) {
+    const reactDirective = $injector.get('reactDirective');
+    const mlSelectIntervalService = $injector.get('mlSelectIntervalService');
+
+    return reactDirective(
+      SelectInterval,
+      undefined,
+      { restrict: 'E' },
+      { mlSelectIntervalService }
+    );
+  });

x-pack/plugins/ml/public/components/controls/select_severity/index.js

@@ -5,5 +5,5 @@
  */
 
 
-
-import './select_severity.js';
+import './select_severity_directive';
+import './styles/main.less';