[ML] Create watch from new jobs list (#21112) (#21132)

* [ML] [WIP] Create watch from new jobs list

* removing comments

* adding interval calculation

* adding checkbox to start datafeed modal

* adding proptypes check to SelectSeverity

* fixing typo

* changes based on review

* correcting input labels

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

@@ -6,4 +6,3 @@
 
 
 import './select_severity_directive';
-import './styles/main.less';

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

@@ -9,6 +9,7 @@
 /*
  * React component for rendering a select element with threshold levels.
  */
+import PropTypes from 'prop-types';
 import _ from 'lodash';
 import React, { Component } from 'react';
 
@@ -18,6 +19,8 @@ import {
   EuiHealth,
 } from '@elastic/eui';
 
+import './styles/main.less';
+
 import { getSeverityColor } from 'plugins/ml/../common/util/anomaly_utils';
 
 const OPTIONS = [
@@ -103,5 +106,8 @@ class SelectSeverity extends Component {
     );
   }
 }
+SelectSeverity.propTypes = {
+  mlSelectSeverityService: PropTypes.object.isRequired,
+};
 
 export { SelectSeverity };

x-pack/plugins/ml/public/jobs/jobs_list_new/components/create_watch_flyout/create_watch_flyout.js

@@ -0,0 +1,176 @@
+/*
+ * 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, {
+  Component,
+} from 'react';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+
+import { toastNotifications } from 'ui/notify';
+import { loadFullJob } from '../utils';
+import { mlCreateWatchService } from '../../../../jobs/new_job/simple/components/watcher/create_watch_service';
+import { CreateWatch } from '../../../../jobs/new_job/simple/components/watcher/create_watch_view';
+
+
+function getSuccessToast(id, url) {
+  return {
+    title: `Watch ${id} created successfully`,
+    text: (
+      <React.Fragment>
+        <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              size="s"
+              href={url}
+              target="_blank"
+              iconType="link"
+            >
+              Edit watch
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </React.Fragment>
+    )
+  };
+}
+
+export class CreateWatchFlyout extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      jobId: null,
+      bucketSpan: null,
+    };
+  }
+
+  componentDidMount() {
+    if (typeof this.props.setShowFunction === 'function') {
+      this.props.setShowFunction(this.showFlyout);
+    }
+  }
+
+  componentWillUnmount() {
+    if (typeof this.props.unsetShowFunction === 'function') {
+      this.props.unsetShowFunction();
+    }
+  }
+
+  closeFlyout = () => {
+    this.setState({ isFlyoutVisible: false });
+  }
+
+  showFlyout = (jobId) => {
+    loadFullJob(jobId)
+    	.then((job) => {
+        const bucketSpan = job.analysis_config.bucket_span;
+        mlCreateWatchService.config.includeInfluencers = (job.analysis_config.influencers.length > 0);
+
+        this.setState({
+          job,
+          jobId,
+          bucketSpan,
+          isFlyoutVisible: true,
+        });
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  save = () => {
+    mlCreateWatchService.createNewWatch(this.state.jobId)
+    	.then((resp) => {
+        toastNotifications.addSuccess(getSuccessToast(resp.id, resp.url));
+        this.closeFlyout();
+      })
+      .catch((error) => {
+        toastNotifications.addDanger(`Could not save watch`);
+        console.error(error);
+      });
+  }
+
+
+  render() {
+    const {
+      jobId,
+      bucketSpan
+    } = this.state;
+
+    let flyout;
+
+    if (this.state.isFlyoutVisible) {
+      flyout = (
+        <EuiFlyout
+          // ownFocus
+          onClose={this.closeFlyout}
+          size="s"
+        >
+          <EuiFlyoutHeader>
+            <EuiTitle>
+              <h2>
+                Create watch for {jobId}
+              </h2>
+            </EuiTitle>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+
+            <CreateWatch
+              jobId={jobId}
+              bucketSpan={bucketSpan}
+            />
+
+          </EuiFlyoutBody>
+          <EuiFlyoutFooter>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  iconType="cross"
+                  onClick={this.closeFlyout}
+                  flush="left"
+                >
+                  Close
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  onClick={this.save}
+                  fill
+                >
+                  Save
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlyoutFooter>
+        </EuiFlyout>
+      );
+    }
+    return (
+      <div>
+        {flyout}
+      </div>
+    );
+
+  }
+}
+CreateWatchFlyout.propTypes = {
+  setShowFunction: PropTypes.func.isRequired,
+  unsetShowFunction: PropTypes.func.isRequired,
+};
+

x-pack/plugins/ml/public/jobs/jobs_list_new/components/create_watch_flyout/index.js

@@ -0,0 +1,8 @@
+/*
+ * 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 { CreateWatchFlyout } from './create_watch_flyout';

x-pack/plugins/ml/public/jobs/jobs_list_new/components/edit_job_flyout/edit_job_flyout.js

@@ -36,7 +36,7 @@ export class EditJobFlyout extends Component {
     this.state = {
       job: {},
       hasDatafeed: false,
-      isModalVisible: false,
+      isFlyoutVisible: false,
       jobDescription: '',
       jobGroups: [],
       jobModelMemoryLimit: '',
@@ -68,7 +68,7 @@ export class EditJobFlyout extends Component {
   }
 
   closeFlyout = () => {
-    this.setState({ isModalVisible: false });
+    this.setState({ isFlyoutVisible: false });
   }
 
   showFlyout = (jobLite) => {
@@ -78,7 +78,7 @@ export class EditJobFlyout extends Component {
         this.extractJob(job, hasDatafeed);
         this.setState({
           job,
-          isModalVisible: true,
+          isFlyoutVisible: true,
         });
       })
       .catch((error) => {
@@ -185,7 +185,7 @@ export class EditJobFlyout extends Component {
   render() {
     let flyout;
 
-    if (this.state.isModalVisible) {
+    if (this.state.isFlyoutVisible) {
       const {
         job,
         jobDescription,

x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_list_view/jobs_list_view.js

@@ -16,6 +16,7 @@ import { JobFilterBar } from '../job_filter_bar';
 import { EditJobFlyout } from '../edit_job_flyout';
 import { DeleteJobModal } from '../delete_job_modal';
 import { StartDatafeedModal } from '../start_datafeed_modal';
+import { CreateWatchFlyout } from '../create_watch_flyout';
 import { MultiJobActions } from '../multi_job_actions';
 
 import PropTypes from 'prop-types';
@@ -45,6 +46,7 @@ export class JobsListView extends Component {
     this.showEditJobFlyout = () => {};
     this.showDeleteJobModal = () => {};
     this.showStartDatafeedModal = () => {};
+    this.showCreateWatchFlyout = () => {};
 
     this.blockRefresh = false;
   }
@@ -191,6 +193,17 @@ export class JobsListView extends Component {
     this.showStartDatafeedModal = () => {};
   }
 
+  setShowCreateWatchFlyoutFunction = (func) => {
+    this.showCreateWatchFlyout = func;
+  }
+  unsetShowCreateWatchFlyoutFunction = () => {
+    this.showCreateWatchFlyout = () => {};
+  }
+  getShowCreateWatchFlyoutFunction = () => {
+    return this.showCreateWatchFlyout;
+  }
+
+
   selectJobChange = (selectedJobs) => {
     this.setState({ selectedJobs });
   }
@@ -281,8 +294,14 @@ export class JobsListView extends Component {
         <StartDatafeedModal
           setShowFunction={this.setShowStartDatafeedModalFunction}
           unsetShowFunction={this.unsetShowDeleteJobModalFunction}
+          getShowCreateWatchFlyoutFunction={this.getShowCreateWatchFlyoutFunction}
           refreshJobs={() => this.refreshJobSummaryList(true)}
         />
+        <CreateWatchFlyout
+          setShowFunction={this.setShowCreateWatchFlyoutFunction}
+          unsetShowFunction={this.unsetShowCreateWatchFlyoutFunction}
+          compile={this.props.compile}
+        />
       </div>
     );
   }