diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 5876d83c8c..5b41b964c0 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'
 import classnames from 'classnames'
 
 import RuleMessageAlertConfig from 'src/kapacitor/components/RuleMessageAlertConfig'
+import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 
 import {RULE_MESSAGE_TEMPLATES, DEFAULT_ALERTS} from '../constants'
@@ -90,18 +91,11 @@ export const RuleMessage = React.createClass({
                 />
               </div>
             : null}
-          <textarea
-            className="form-control form-malachite monotype rule-builder--message"
-            ref={r => (this.message = r)}
-            onChange={() => actions.updateMessage(rule.id, this.message.value)}
-            placeholder="Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields &quot;value&quot; }}"
-            value={rule.message}
-            spellCheck={false}
-          />
+          <RuleMessageText rule={rule} actions={actions} />
           <RuleMessageTemplates
-            templates={RULE_MESSAGE_TEMPLATES}
-            actions={actions}
             rule={rule}
+            actions={actions}
+            templates={RULE_MESSAGE_TEMPLATES}
           />
         </div>
       </div>
diff --git a/ui/src/kapacitor/components/RuleMessageText.js b/ui/src/kapacitor/components/RuleMessageText.js
new file mode 100644
index 0000000000..8cc79f507f
--- /dev/null
+++ b/ui/src/kapacitor/components/RuleMessageText.js
@@ -0,0 +1,31 @@
+import React, {Component, PropTypes} from 'react'
+
+class RuleMessageText extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {rule, actions} = this.props
+
+    return (
+      <textarea
+        className="form-control form-malachite monotype rule-builder--message"
+        ref={r => (this.message = r)}
+        onChange={() => actions.updateMessage(rule.id, this.message.value)}
+        placeholder="Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields &quot;value&quot; }}"
+        value={rule.message}
+        spellCheck={false}
+      />
+    )
+  }
+}
+
+const {shape} = PropTypes
+
+RuleMessageText.propTypes = {
+  rule: shape().isRequired,
+  actions: shape().isRequired,
+}
+
+export default RuleMessageText