- Warning, watch ml-{{jobId}} already exists, clicking apply with overwrite the original.
+ Warning, watch ml-{{jobId}} already exists, clicking apply will overwrite the original.
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_service.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_service.js
index 93152964d81cc..33149d05d33dc 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_service.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_service.js
@@ -124,7 +124,10 @@ class CreateWatchService {
this.status.watch = this.STATUS.SAVED;
this.config.watcherEditURL =
`${chrome.getBasePath()}/app/kibana#/management/elasticsearch/watcher/watches/watch/${id}/edit?_g=()`;
- resolve();
+ resolve({
+ id,
+ url: this.config.watcherEditURL,
+ });
})
.catch((resp) => {
this.status.watch = this.STATUS.SAVE_FAILED;
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_view.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_view.js
new file mode 100644
index 0000000000000..c2c1b887f99c8
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_view.js
@@ -0,0 +1,209 @@
+/*
+ * 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.
+ */
+
+
+/*
+ * 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 {
+ EuiCheckbox,
+ EuiFieldText,
+ EuiCallOut,
+} from '@elastic/eui';
+
+import { has } from 'lodash';
+
+import { parseInterval } from 'ui/utils/parse_interval';
+
+import { ml } from '../../../../../services/ml_api_service';
+import { SelectSeverity } from '../../../../../components/controls/select_severity/select_severity';
+import { mlCreateWatchService } from './create_watch_service';
+const STATUS = mlCreateWatchService.STATUS;
+
+export class CreateWatch extends Component {
+ constructor(props) {
+ super(props);
+ mlCreateWatchService.reset();
+ this.config = mlCreateWatchService.config;
+
+ this.state = {
+ jobId: this.props.jobId,
+ bucketSpan: this.props.bucketSpan,
+ interval: this.config.interval,
+ threshold: this.config.threshold,
+ includeEmail: this.config.emailIncluded,
+ email: this.config.email,
+ emailEnabled: false,
+ status: null,
+ watchAlreadyExists: false,
+ };
+
+ }
+
+ componentDidMount() {
+ // make the interval 2 times the bucket span
+ if (this.state.bucketSpan) {
+ const intervalObject = parseInterval(this.state.bucketSpan);
+ let bs = intervalObject.asMinutes() * 2;
+ if (bs < 1) {
+ bs = 1;
+ }
+
+ const interval = `${bs}m`;
+ this.setState({ interval }, () => {
+ this.config.interval = interval;
+ });
+ }
+
+ // load elasticsearch settings to see if email has been configured
+ ml.getNotificationSettings().then((resp) => {
+ if (has(resp, 'defaults.xpack.notification.email')) {
+ this.setState({ emailEnabled: true });
+ }
+ });
+
+ mlCreateWatchService.loadWatch(this.state.jobId)
+ .then(() => {
+ this.setState({ watchAlreadyExists: true });
+ })
+ .catch(() => {
+ this.setState({ watchAlreadyExists: false });
+ });
+ }
+
+ onThresholdChange = (threshold) => {
+ this.setState({ threshold }, () => {
+ this.config.threshold = threshold;
+ });
+ }
+
+ onIntervalChange = (e) => {
+ const interval = e.target.value;
+ this.setState({ interval }, () => {
+ this.config.interval = interval;
+ });
+ }
+
+ onIncludeEmailChanged = (e) => {
+ const includeEmail = e.target.checked;
+ this.setState({ includeEmail }, () => {
+ this.config.includeEmail = includeEmail;
+ });
+ }
+
+ onEmailChange = (e) => {
+ const email = e.target.value;
+ this.setState({ email }, () => {
+ this.config.email = email;
+ });
+ }
+
+ render() {
+ const mlSelectSeverityService = {
+ state: {
+ set: (name, threshold) => {
+ this.onThresholdChange(threshold);
+ return {
+ changed: () => {}
+ };
+ },
+ get: () => {
+ return this.config.threshold;
+ },
+ }
+ };
+ const { status } = this.state;
+
+ if (status === null || status === STATUS.SAVING || status === STATUS.SAVE_FAILED) {
+ return (
+
+
+
+
+
+
+ Now -
+
+
+
+
+
+
+
+
+
+
+
+ {
+ this.state.emailEnabled &&
+
+
+
+ {
+ this.state.includeEmail &&
+
+
+
+ }
+
+ }
+ {
+ this.state.watchAlreadyExists &&
+
+ }
+