Add a checkbox input field to endpoint options

ui/src/kapacitor/components/EndpointCheckbox.js

@@ -0,0 +1,37 @@
+import React, {PropTypes} from 'react'
+
+const EndpointCheckbox = ({
+  fieldName,
+  fieldDisplay,
+  selectedEndpoint,
+  handleModifyEndpoint,
+}) => {
+  return (
+    <div className="form-group">
+      <div className="form-control-static">
+        <input
+          name={fieldName}
+          id={fieldName}
+          type="checkbox"
+          defaultChecked={selectedEndpoint[fieldName]}
+          onClick={handleModifyEndpoint(selectedEndpoint, fieldName)}
+        />
+        <label htmlFor={fieldName}>
+          {fieldDisplay}
+        </label>
+      </div>
+    </div>
+  )
+}
+
+const {func, shape, string, bool} = PropTypes
+
+EndpointCheckbox.propTypes = {
+  fieldName: string,
+  fieldDisplay: string,
+  defaultChecked: bool,
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
+
+export default EndpointCheckbox

ui/src/kapacitor/components/RuleMessage.js

@@ -109,10 +109,17 @@ class RuleMessage extends Component {
 
   handleModifyEndpoint = (selectedEndpoint, fieldName) => e => {
     const {endpointsOnThisAlert} = this.state
-    const modifiedEP = {
+    const modifiedEP =
-      ...selectedEndpoint,
+      e.target.type === 'checkbox'
-      [fieldName]: e.target.value,
+        ? {
-    }
+            ...selectedEndpoint,
+            [fieldName]: !selectedEndpoint[fieldName],
+          }
+        : {
+            ...selectedEndpoint,
+            [fieldName]: e.target.value,
+          }
+    console.log(modifiedEP)
     const remainingEndpoints = _.reject(endpointsOnThisAlert, [
       'alias',
       modifiedEP.alias,

ui/src/kapacitor/components/configEP/PostConfig.js

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
+import EndpointCheckbox from 'src/kapacitor/components/EndpointCheckbox'
 
 const HttpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
   return (
@@ -13,6 +14,12 @@ const HttpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
           fieldDisplay="POST URL"
           placeholder="Ex: http://example.com/api/alert"
         />
+        <EndpointCheckbox
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="captureResponse"
+          fieldDisplay="Capture response"
+        />
       </div>
     </div>
   )

ui/src/kapacitor/components/configEP/TelegramConfig.js

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
+import EndpointCheckbox from 'src/kapacitor/components/EndpointCheckbox'
 
 const TelegramConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
   return (
@@ -20,6 +21,18 @@ const TelegramConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
           fieldDisplay="Parse Mode:"
           placeholder="Ex: Markdown"
         />
+        <EndpointCheckbox
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="disableWebPagePreview"
+          fieldDisplay="Disable web page preview"
+        />
+        <EndpointCheckbox
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="disableNotification"
+          fieldDisplay="Disable notification"
+        />
       </div>
     </div>
   )