[ML] Migrate bucket span estimator button to EUI/React.

x-pack/plugins/ml/public/components/validate_job/validate_job_view.test.js

@@ -9,8 +9,6 @@ import React from 'react';
 
 import { ValidateJob } from './validate_job_view';
 
-jest.mock('ui/chrome', () => { }, { virtual: true });
-
 const job = {
   job_id: 'test-id'
 };

x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/__snapshots__/bucket_span_estimator_view.test.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BucketSpanEstimator renders the button 1`] = `
+<div
+  className="bucket-span-estimator"
+>
+  <EuiToolTip
+    content="Experimental feature for estimating bucket span."
+    position="bottom"
+  >
+    <EuiButton
+      color="primary"
+      disabled={true}
+      fill={true}
+      iconSide="right"
+      isLoading={true}
+      onClick={[Function]}
+      size="s"
+      type="button"
+    >
+      Estimating bucket span
+    </EuiButton>
+  </EuiToolTip>
+</div>
+`;
+
+exports[`BucketSpanEstimator renders the loading button 1`] = `
+<div
+  className="bucket-span-estimator"
+>
+  <EuiToolTip
+    content="Experimental feature for estimating bucket span."
+    position="bottom"
+  >
+    <EuiButton
+      color="primary"
+      disabled={true}
+      fill={true}
+      iconSide="right"
+      isLoading={true}
+      onClick={[Function]}
+      size="s"
+      type="button"
+    >
+      Estimating bucket span
+    </EuiButton>
+  </EuiToolTip>
+</div>
+`;

x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/bucket_span_estimator_directive.js

@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-
-import template from './bucket_span_estimator.html';
+import { BucketSpanEstimator } from './bucket_span_estimator_view';
 import { getQueryFromSavedSearch } from 'plugins/ml/jobs/new_job/utils/new_job_utils';
 import { EVENT_RATE_COUNT_FIELD } from 'plugins/ml/jobs/new_job/simple/components/constants/general';
 import { ml } from 'plugins/ml/services/ml_api_service';
@@ -26,15 +27,13 @@ module.directive('mlBucketSpanEstimator', function () {
       ui: '=ui',
       exportedFunctions: '='
     },
-    template,
-    link: function ($scope) {
+    link: function ($scope, $element) {
       const STATUS = {
         FAILED: -1,
         NOT_RUNNING: 0,
         RUNNING: 1,
         FINISHED: 2
       };
-      $scope.STATUS = STATUS;
 
       const errorHandler = (error) => {
         console.log('Bucket span could not be estimated', error);
@@ -101,6 +100,38 @@ module.directive('mlBucketSpanEstimator', function () {
         $scope.exportedFunctions.guessBucketSpan = $scope.guessBucketSpan;
       }
 
+      // watch for these changes
+      $scope.$watch('formConfig.agg.type', updateButton, true);
+      $scope.$watch('jobStateWrapper.jobState', updateButton, true);
+      $scope.$watch('[ui.showJobInput,ui.formValid,ui.bucketSpanEstimator.status]', updateButton, true);
+
+      function updateButton() {
+        const buttonDisabled = (
+          $scope.ui.showJobInput === false ||
+          $scope.ui.formValid === false ||
+          $scope.formConfig.agg.type === undefined ||
+          $scope.jobStateWrapper.jobState === $scope.JOB_STATE.RUNNING ||
+          $scope.jobStateWrapper.jobState === $scope.JOB_STATE.STOPPING ||
+          $scope.jobStateWrapper.jobState === $scope.JOB_STATE.FINISHED ||
+          $scope.ui.bucketSpanEstimator.status === STATUS.RUNNING
+        );
+        const estimatorRunning = ($scope.ui.bucketSpanEstimator.status === STATUS.RUNNING);
+        const buttonText = (estimatorRunning) ? 'Estimating bucket span' : 'Estimate bucket span';
+
+        const props = {
+          buttonDisabled,
+          estimatorRunning,
+          guessBucketSpan: $scope.guessBucketSpan,
+          buttonText
+        };
+
+        ReactDOM.render(
+          React.createElement(BucketSpanEstimator, props),
+          $element[0]
+        );
+      }
+
+      updateButton();
     }
   };
 });

x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/bucket_span_estimator_view.js

@@ -0,0 +1,42 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  EuiButton,
+  EuiToolTip
+} from '@elastic/eui';
+
+export function BucketSpanEstimator({ buttonDisabled, buttonText, estimatorRunning, guessBucketSpan }) {
+  return (
+    <div className="bucket-span-estimator">
+      <EuiToolTip
+        content="Experimental feature for estimating bucket span."
+        position="bottom"
+      >
+        <EuiButton
+          disabled={buttonDisabled}
+          fill
+          iconSide="right"
+          isLoading={estimatorRunning}
+          onClick={guessBucketSpan}
+          size="s"
+        >
+          {buttonText}
+        </EuiButton>
+      </EuiToolTip>
+    </div>
+  );
+}
+BucketSpanEstimator.propTypes = {
+  buttonDisabled: PropTypes.bool.isRequired,
+  buttonText: PropTypes.string.isRequired,
+  estimatorRunning: PropTypes.bool.isRequired,
+  guessBucketSpan: PropTypes.func.isRequired
+};
+

x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/bucket_span_estimator_view.test.js

@@ -0,0 +1,38 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { BucketSpanEstimator } from './bucket_span_estimator_view';
+
+describe('BucketSpanEstimator', () => {
+  const props = {
+    buttonDisabled: false,
+    estimatorRunning: false,
+    guessBucketSpan: () => {},
+    buttonText: 'Estimate bucket span'
+  };
+
+  const component = (
+    <BucketSpanEstimator {...props} />
+  );
+
+  const wrapper = shallow(component);
+
+  test('renders the button', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  props.buttonDisabled = true;
+  props.estimatorRunning = true;
+  props.buttonText = 'Estimating bucket span';
+  wrapper.setProps(props);
+
+  test('renders the loading button', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/styles/main.less

@@ -1,15 +1,14 @@
 .bucket-span-estimator {
   float: right;
+  margin-right: 5px;
+  margin-top: -27px;
 
-  button {
-    float: right;
-    margin-right: 5px;
-    margin-top: -27px;
-  }
-  button:disabled {
-    background-color: #D9D9D9;
-  }
-  button.running {
-    color: #2D2D2D;
+  button.euiButton.euiButton--small {
+    font-size: 12px;
+    height: 22px;
+
+    .euiButton__content {
+      padding: 2px 8px 3px;
+    }
   }
 }

x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/styles/main.less

@@ -19,10 +19,9 @@
   .form-controls {
     .bucket-span-container {
       white-space: nowrap;
+      width: calc(~"100% - 40px");
 
       .bucket-span-input {
-        width: calc(~"100% - 40px");
-        display: inline-block;
         background-color: transparent;
         float: left;
       }
@@ -31,12 +30,6 @@
         background-color: #D9D9D9;
       }
 
-      .bucket-span-estimator {
-        button {
-          margin-right: 45px;
-        }
-      }
-
       .validation-error  {
         margin-bottom: -25px;
       }