Implemented new condition comparison options (#4240)

* Implemented new condition comparison options

* Fixed test

* Move backward compatibility code to service

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,

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;

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) => (
-              <Select.Option value={k} label={v} key={k}>
-                {v} &nbsp;{k}
-              </Select.Option>
-            ))}
+            <Select.Option value=">" label={CONDITIONS['>']}>
+              {CONDITIONS['>']} greater than
+            </Select.Option>
+            <Select.Option value=">=" label={CONDITIONS['>=']}>
+              {CONDITIONS['>=']} greater than or equals
+            </Select.Option>
+            <Select.Option disabled key="dv1">
+              <Divider className="select-option-divider m-t-10 m-b-5" />
+            </Select.Option>
+            <Select.Option value="<" label={CONDITIONS['<']}>
+              {CONDITIONS['<']} less than
+            </Select.Option>
+            <Select.Option value="<=" label={CONDITIONS['<=']}>
+              {CONDITIONS['<=']} less than or equals
+            </Select.Option>
+            <Select.Option disabled key="dv2">
+              <Divider className="select-option-divider m-t-10 m-b-5" />
+            </Select.Option>
+            <Select.Option value="==" label={CONDITIONS['==']}>
+              {CONDITIONS['==']} equals
+            </Select.Option>
+            <Select.Option value="!=" label={CONDITIONS['!=']}>
+              {CONDITIONS['!=']} not equal to
+            </Select.Option>
           </Select>
         ) : (
           <DisabledInput minWidth={50}>{CONDITIONS[alertOptions.op]}</DisabledInput>

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) => {

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 }}',
     };