Refactor RuleMessage templates into separate components, update to ES6

ui/src/kapacitor/components/CodeData.js

@@ -0,0 +1,34 @@
+import React, {Component, PropTypes} from 'react'
+
+// needs to be React Component for click handler to work
+class CodeData extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {onClickTemplate, template} = this.props
+
+    return (
+      <code
+        className="rule-builder--message-template"
+        data-tip={template.text}
+        onClick={onClickTemplate}
+      >
+        {template.label}
+      </code>
+    )
+  }
+}
+
+const {func, shape, string} = PropTypes
+
+CodeData.propTypes = {
+  onClickTemplate: func,
+  template: shape({
+    label: string,
+    text: string,
+  }),
+}
+
+export default CodeData

ui/src/kapacitor/components/RuleMessage.js

@@ -1,10 +1,10 @@
 import React, {PropTypes} from 'react'
 import classnames from 'classnames'
-import ReactTooltip from 'react-tooltip'
 
 import RuleMessageAlertConfig from 'src/kapacitor/components/RuleMessageAlertConfig'
+import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 
-import {RULE_MESSAGE_TEMPLATES as templates, DEFAULT_ALERTS} from '../constants'
+import {RULE_MESSAGE_TEMPLATES, DEFAULT_ALERTS} from '../constants'
 
 const {arrayOf, func, shape, string} = PropTypes
 
@@ -98,57 +98,15 @@ export const RuleMessage = React.createClass({
             value={rule.message}
             spellCheck={false}
           />
-          <div className="rule-section--row rule-section--row-last rule-section--border-top">
+          <RuleMessageTemplates
-            <p>Templates:</p>
+            templates={RULE_MESSAGE_TEMPLATES}
-            {Object.keys(templates).map(t => {
+            actions={actions}
-              return (
+            rule={rule}
-                <CodeData
+          />
-                  key={t}
-                  template={templates[t]}
-                  onClickTemplate={() =>
-                    actions.updateMessage(
-                      rule.id,
-                      `${this.message.value} ${templates[t].label}`
-                    )}
-                />
-              )
-            })}
-            <ReactTooltip
-              effect="solid"
-              html={true}
-              offset={{top: -4}}
-              class="influx-tooltip kapacitor-tooltip"
-            />
-          </div>
         </div>
       </div>
     )
   },
 })
 
-const CodeData = React.createClass({
-  propTypes: {
-    onClickTemplate: func,
-    template: shape({
-      label: string,
-      text: string,
-    }),
-  },
-
-  render() {
-    const {onClickTemplate, template} = this.props
-    const {label, text} = template
-
-    return (
-      <code
-        className="rule-builder--message-template"
-        data-tip={text}
-        onClick={onClickTemplate}
-      >
-        {label}
-      </code>
-    )
-  },
-})
-
 export default RuleMessage

ui/src/kapacitor/components/RuleMessageTemplates.js

@@ -0,0 +1,50 @@
+import React, {Component, PropTypes} from 'react'
+import ReactTooltip from 'react-tooltip'
+
+import CodeData from 'src/kapacitor/components/CodeData'
+
+// needs to be React Component for CodeData click handler to work
+class RuleMessageTemplates extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {templates, actions, rule} = this.props
+
+    return (
+      <div className="rule-section--row rule-section--row-last rule-section--border-top">
+        <p>Templates:</p>
+        {Object.keys(templates).map(t => {
+          return (
+            <CodeData
+              key={t}
+              template={templates[t]}
+              onClickTemplate={() =>
+                actions.updateMessage(
+                  rule.id,
+                  `${rule.message} ${templates[t].label}`
+                )}
+            />
+          )
+        })}
+        <ReactTooltip
+          effect="solid"
+          html={true}
+          offset={{top: -4}}
+          class="influx-tooltip kapacitor-tooltip"
+        />
+      </div>
+    )
+  }
+}
+
+const {shape} = PropTypes
+
+RuleMessageTemplates.propTypes = {
+  templates: shape().isRequired,
+  actions: shape().isRequired,
+  rule: shape().isRequired,
+}
+
+export default RuleMessageTemplates