Fix: Alert condition rendering

client/app/pages/alert/Alert.jsx

@@ -13,6 +13,7 @@ import LoadingState from '@/components/items-list/components/LoadingState';
 import AlertView from './AlertView';
 import AlertEdit from './AlertEdit';
 import AlertNew from './AlertNew';
+import { getConditionText } from './components/Criteria';
 
 import Modal from 'antd/lib/modal';
 
@@ -25,13 +26,14 @@ const MODES = {
   EDIT: 2,
 };
 
-const defaultNameBuilder = template('<%= query.name %>: <%= options.column %> <%= options.op %> <%= options.value %>');
+// eslint-disable-next-line no-template-curly-in-string
+const defaultNameBuilder = template('${query.name}: ${options.column} ${conditionText} ${options.value}');
 
 export function getDefaultName(alert) {
   if (!alert.query) {
     return 'New Alert';
   }
-  return defaultNameBuilder(alert);
+  return defaultNameBuilder({ ...alert, conditionText: getConditionText(alert.options.op) });
 }
 
 class AlertPage extends React.Component {

client/app/pages/alert/components/Criteria.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { head, includes, toString, isEmpty } from 'lodash';
+import { head, includes, toString, isEmpty, get } from 'lodash';
 
 import Input from 'antd/lib/input';
 import Icon from 'antd/lib/icon';
@@ -12,14 +12,23 @@ import { AlertOptions as AlertOptionsType } from '@/components/proptypes';
 import './Criteria.less';
 
 const CONDITIONS = {
-  '>': '\u003e',
-  '>=': '\u2265',
-  '<': '\u003c',
-  '<=': '\u2264',
-  '==': '\u003d',
-  '!=': '\u2260',
+  '>': ['\u003e', 'greater than'],
+  '>=': ['\u2265', 'greater than or equals'],
+  '<': ['\u003c', 'less than'],
+  '<=': ['\u2264', 'less than or equals'],
+  '==': ['\u003d', 'equals'],
+  '!=': ['\u2260', 'not equal to'],
 };
 
+function getConditionOption(key) {
+  const [char, text] = CONDITIONS[key];
+  return <Select.Option value={key} label={char}>{char} {text}</Select.Option>;
+}
+
+export function getConditionText(key) {
+  return get(CONDITIONS, [key, 1], key);
+}
+
 const VALID_STRING_CONDITIONS = ['==', '!='];
 
 function DisabledInput({ children, minWidth }) {
@@ -87,33 +96,21 @@ export default function Criteria({ columnNames, resultValues, alertOptions, onCh
             dropdownMatchSelectWidth={false}
             style={{ width: 55 }}
           >
-            <Select.Option value=">" label={CONDITIONS['>']}>
-              {CONDITIONS['>']} greater than
-            </Select.Option>
-            <Select.Option value=">=" label={CONDITIONS['>=']}>
-              {CONDITIONS['>=']} greater than or equals
-            </Select.Option>
+            {getConditionOption('>')}
+            {getConditionOption('>=')}
             <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>
+            {getConditionOption('<')}
+            {getConditionOption('<=')}
             <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>
+            {getConditionOption('==')}
+            {getConditionOption('!=')}
           </Select>
         ) : (
-          <DisabledInput minWidth={50}>{CONDITIONS[alertOptions.op]}</DisabledInput>
+          <DisabledInput minWidth={50}>{head(CONDITIONS[alertOptions.op])}</DisabledInput>
         )}
       </div>
       <div className="input-title">

client/app/pages/alert/components/NotificationTemplate.jsx

@@ -10,6 +10,7 @@ import Input from 'antd/lib/input';
 import Select from 'antd/lib/select';
 import Modal from 'antd/lib/modal';
 import Switch from 'antd/lib/switch';
+import { getConditionText } from './Criteria';
 
 import './NotificationTemplate.less';
 
@@ -19,7 +20,7 @@ function normalizeCustomTemplateData(alert, query, columnNames, resultValues) {
 
   return {
     ALERT_STATUS: 'TRIGGERED',
-    ALERT_CONDITION: alert.options.op,
+    ALERT_CONDITION: getConditionText(alert.options.op),
     ALERT_THRESHOLD: alert.options.value,
     ALERT_NAME: alert.name,
     ALERT_URL: `${window.location.origin}/alerts/${alert.id}`,

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: '=',
+      op: '==',
       custom_subject: '{{ ALERT_CONDITION }}',
       custom_body: '{{ ALERT_THRESHOLD }}',
     };
@@ -38,7 +38,7 @@ describe('Edit Alert', () => {
       .then(({ id: alertId }) => {
         cy.visit(`/alerts/${alertId}/edit`);
         cy.get('.alert-template-preview').click();
-        cy.getByTestId('CustomSubject').should('have.value', options.op);
+        cy.getByTestId('CustomSubject').should('have.value', 'equals');
         cy.getByTestId('CustomBody').should('have.value', options.value);
       });
   });

redash/models/__init__.py

@@ -785,6 +785,15 @@ class Alert(TimestampMixin, BelongsToOrgMixin, db.Model):
     OK_STATE = 'ok'
     TRIGGERED_STATE = 'triggered'
 
+    CONDITION_TEXTS = {
+        '>': 'greater than',
+        '>=': 'greater than or equals',
+        '<': 'less than',
+        '<=': 'less than or equals',
+        '==': 'equals',
+        '!=': 'not equal to',
+    }
+
     id = Column(db.Integer, primary_key=True)
     name = Column(db.String(255))
     query_id = Column(db.Integer, db.ForeignKey("queries.id"))
@@ -870,7 +879,7 @@ def render_template(self, template):
             'ALERT_NAME': self.name,
             'ALERT_URL': '{host}/alerts/{alert_id}'.format(host=host, alert_id=self.id),
             'ALERT_STATUS': self.state.upper(),
-            'ALERT_CONDITION': self.options['op'],
+            'ALERT_CONDITION': self.conditionText,
             'ALERT_THRESHOLD': self.options['value'],
             'QUERY_NAME': self.query_rel.name,
             'QUERY_URL': '{host}/queries/{query_id}'.format(host=host, query_id=self.query_rel.id),
@@ -894,6 +903,12 @@ def custom_subject(self):
     def groups(self):
         return self.query_rel.groups
 
+    @property
+    def conditionText(self):
+        condition = self.options['op'];
+        default = condition # backwards compatibility
+        return self.CONDITION_TEXTS.get(condition, default);
+
 
 def generate_slug(ctx):
     slug = utils.slugify(ctx.current_parameters['name'])