diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/create_watch_view.js b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/create_watch_view.js
index 0a823726a2d680..7a855301885a92 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/create_watch_view.js
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/create_watch_view.js
@@ -21,7 +21,7 @@ import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
import { parseInterval } from '../../../../../../common/util/parse_interval';
import { ml } from '../../../../services/ml_api_service';
-import { SelectSeverity } from '../../../../components/controls/select_severity/select_severity';
+import { SelectSeverity } from './select_severity';
import { mlCreateWatchService } from './create_watch_service';
const STATUS = mlCreateWatchService.STATUS;
@@ -111,19 +111,6 @@ export const CreateWatch = injectI18n(
render() {
const { intl } = this.props;
- 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) {
@@ -164,10 +151,7 @@ export const CreateWatch = injectI18n(
-
+
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/select_severity.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/select_severity.tsx
new file mode 100644
index 00000000000000..8b0e7da2a5637d
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/select_severity.tsx
@@ -0,0 +1,133 @@
+/*
+ * 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.
+ */
+
+/*
+ * React component for rendering a select element with threshold levels.
+ * This is basically a copy of SelectSeverity in public/application/components/controls/select_severity
+ * but which stores its state internally rather than in the appState
+ */
+import React, { Fragment, FC, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { EuiHealth, EuiSpacer, EuiSuperSelect, EuiText } from '@elastic/eui';
+
+import { getSeverityColor } from '../../../../../../common/util/anomaly_utils';
+
+const warningLabel = i18n.translate('xpack.ml.controls.selectSeverity.warningLabel', {
+ defaultMessage: 'warning',
+});
+const minorLabel = i18n.translate('xpack.ml.controls.selectSeverity.minorLabel', {
+ defaultMessage: 'minor',
+});
+const majorLabel = i18n.translate('xpack.ml.controls.selectSeverity.majorLabel', {
+ defaultMessage: 'major',
+});
+const criticalLabel = i18n.translate('xpack.ml.controls.selectSeverity.criticalLabel', {
+ defaultMessage: 'critical',
+});
+
+const optionsMap = {
+ [warningLabel]: 0,
+ [minorLabel]: 25,
+ [majorLabel]: 50,
+ [criticalLabel]: 75,
+};
+
+interface TableSeverity {
+ val: number;
+ display: string;
+ color: string;
+}
+
+export const SEVERITY_OPTIONS: TableSeverity[] = [
+ {
+ val: 0,
+ display: warningLabel,
+ color: getSeverityColor(0),
+ },
+ {
+ val: 25,
+ display: minorLabel,
+ color: getSeverityColor(25),
+ },
+ {
+ val: 50,
+ display: majorLabel,
+ color: getSeverityColor(50),
+ },
+ {
+ val: 75,
+ display: criticalLabel,
+ color: getSeverityColor(75),
+ },
+];
+
+function optionValueToThreshold(value: number) {
+ // Get corresponding threshold object with required display and val properties from the specified value.
+ let threshold = SEVERITY_OPTIONS.find(opt => opt.val === value);
+
+ // Default to warning if supplied value doesn't map to one of the options.
+ if (threshold === undefined) {
+ threshold = SEVERITY_OPTIONS[0];
+ }
+
+ return threshold;
+}
+
+const TABLE_SEVERITY_DEFAULT = SEVERITY_OPTIONS[0];
+
+const getSeverityOptions = () =>
+ SEVERITY_OPTIONS.map(({ color, display, val }) => ({
+ value: display,
+ inputDisplay: (
+
+
+ {display}
+
+
+ ),
+ dropdownDisplay: (
+
+
+ {display}
+
+
+
+
+
+
+
+
+ ),
+ }));
+
+interface Props {
+ onChange: (sev: TableSeverity) => void;
+}
+
+export const SelectSeverity: FC = ({ onChange }) => {
+ const [severity, setSeverity] = useState(TABLE_SEVERITY_DEFAULT);
+
+ const onSeverityChange = (valueDisplay: string) => {
+ const option = optionValueToThreshold(optionsMap[valueDisplay]);
+ setSeverity(option);
+ onChange(option);
+ };
+
+ return (
+
+ );
+};
diff --git a/x-pack/legacy/plugins/ml/public/application/services/http_service.ts b/x-pack/legacy/plugins/ml/public/application/services/http_service.ts
index 1d68ec5b886eb0..41200759b7c8a1 100644
--- a/x-pack/legacy/plugins/ml/public/application/services/http_service.ts
+++ b/x-pack/legacy/plugins/ml/public/application/services/http_service.ts
@@ -53,7 +53,10 @@ export function http(options: any) {
fetch(url, payload)
.then(resp => {
- resp.json().then(resp.ok === true ? resolve : reject);
+ resp
+ .json()
+ .then(resp.ok === true ? resolve : reject)
+ .catch(resp.ok === true ? resolve : reject);
})
.catch(resp => {
reject(resp);