diff --git a/client/app/components/proptypes.js b/client/app/components/proptypes.js
index d2b1b66e69..bb5703d9c8 100644
--- a/client/app/components/proptypes.js
+++ b/client/app/components/proptypes.js
@@ -112,7 +112,7 @@ export const Query = PropTypes.shape({
export const AlertOptions = PropTypes.shape({
column: PropTypes.string,
- op: PropTypes.oneOf(['greater than', 'less than', 'equals']),
+ op: PropTypes.oneOf(['>', '>=', '<', '<=', '==', '!=']),
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
custom_subject: PropTypes.string,
custom_body: PropTypes.string,
diff --git a/client/app/pages/alert/Alert.jsx b/client/app/pages/alert/Alert.jsx
index 69721990d1..efe8f810b1 100644
--- a/client/app/pages/alert/Alert.jsx
+++ b/client/app/pages/alert/Alert.jsx
@@ -43,7 +43,7 @@ class AlertPage extends React.Component {
pendingRearm: null,
canEdit: false,
mode: null,
- }
+ };
componentDidMount() {
this._isMounted = true;
@@ -54,7 +54,7 @@ class AlertPage extends React.Component {
this.setState({
alert: new AlertService({
options: {
- op: 'greater than',
+ op: '>',
value: 1,
},
}),
@@ -129,18 +129,18 @@ class AlertPage extends React.Component {
}
});
}
- }
+ };
onNameChange = (name) => {
const { alert } = this.state;
this.setState({
alert: Object.assign(alert, { name }),
});
- }
+ };
onRearmChange = (pendingRearm) => {
this.setState({ pendingRearm });
- }
+ };
setAlertOptions = (obj) => {
const { alert } = this.state;
@@ -148,7 +148,7 @@ class AlertPage extends React.Component {
this.setState({
alert: Object.assign(alert, { options }),
});
- }
+ };
delete = () => {
const { alert } = this.state;
@@ -171,19 +171,19 @@ class AlertPage extends React.Component {
maskClosable: true,
autoFocusButton: null,
});
- }
+ };
edit = () => {
const { id } = this.state.alert;
navigateTo(`/alerts/${id}/edit`, true, false);
this.setState({ mode: MODES.EDIT });
- }
+ };
cancel = () => {
const { id } = this.state.alert;
navigateTo(`/alerts/${id}`, true, false);
this.setState({ mode: MODES.VIEW });
- }
+ };
render() {
const { alert } = this.state;
diff --git a/client/app/pages/alert/components/Criteria.jsx b/client/app/pages/alert/components/Criteria.jsx
index ac1348156d..3971499a77 100644
--- a/client/app/pages/alert/components/Criteria.jsx
+++ b/client/app/pages/alert/components/Criteria.jsx
@@ -1,22 +1,26 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { head, includes, toString, map } from 'lodash';
+import { head, includes, toString } from 'lodash';
import Input from 'antd/lib/input';
import Icon from 'antd/lib/icon';
import Select from 'antd/lib/select';
+import Divider from 'antd/lib/divider';
import { AlertOptions as AlertOptionsType } from '@/components/proptypes';
import './Criteria.less';
const CONDITIONS = {
- 'greater than': '>',
- 'less than': '<',
- equals: '=',
+ '>': '\u003e',
+ '>=': '\u2265',
+ '<': '\u003c',
+ '<=': '\u2264',
+ '==': '\u003d',
+ '!=': '\u2260',
};
-const VALID_STRING_CONDITIONS = ['equals'];
+const VALID_STRING_CONDITIONS = ['==', '!='];
function DisabledInput({ children, minWidth }) {
return (
@@ -83,11 +87,30 @@ export default function Criteria({ columnNames, resultValues, alertOptions, onCh
dropdownMatchSelectWidth={false}
style={{ width: 55 }}
>
- {map(CONDITIONS, (v, k) => (
-
- {v} {k}
-
- ))}
+ ']}>
+ {CONDITIONS['>']} greater than
+
+ =']}>
+ {CONDITIONS['>=']} greater than or equals
+
+
+
+
+
+ {CONDITIONS['<']} less than
+
+
+ {CONDITIONS['<=']} less than or equals
+
+
+
+
+
+ {CONDITIONS['==']} equals
+
+
+ {CONDITIONS['!=']} not equal to
+
) : (
{CONDITIONS[alertOptions.op]}
diff --git a/client/app/services/alert.js b/client/app/services/alert.js
index cdd34865fa..7913d29c5c 100644
--- a/client/app/services/alert.js
+++ b/client/app/services/alert.js
@@ -1,7 +1,26 @@
+import { merge } from 'lodash';
+
export let Alert = null; // eslint-disable-line import/no-mutable-exports
+// backwards compatibility
+const normalizeCondition = {
+ 'greater than': '>',
+ 'less than': '<',
+ equals: '=',
+};
+
function AlertService($resource, $http) {
const actions = {
+ get: {
+ method: 'GET',
+ transformResponse: $http.defaults.transformResponse.concat([
+ data => merge({}, data, {
+ options: {
+ op: normalizeCondition[data.options.op] || data.options.op,
+ },
+ }),
+ ]),
+ },
save: {
method: 'POST',
transformRequest: [(data) => {
diff --git a/client/cypress/integration/alert/edit_alert_spec.js b/client/cypress/integration/alert/edit_alert_spec.js
index 31c8062011..503c0d508c 100644
--- a/client/cypress/integration/alert/edit_alert_spec.js
+++ b/client/cypress/integration/alert/edit_alert_spec.js
@@ -28,7 +28,7 @@ describe('Edit Alert', () => {
it('previews rendered template correctly', () => {
const options = {
value: '123',
- op: 'equals',
+ op: '=',
custom_subject: '{{ ALERT_CONDITION }}',
custom_body: '{{ ALERT_THRESHOLD }}',
};