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