Add Kafka alert handler

ui/src/kapacitor/components/HandlerOptions.js

@@ -8,6 +8,7 @@ import {
   EmailHandler,
   AlertaHandler,
   HipchatHandler,
+  KafkaHandler,
   OpsgenieHandler,
   PagerdutyHandler,
   PushoverHandler,
@@ -92,6 +93,15 @@ class HandlerOptions extends Component {
             validationError={validationError}
           />
         )
+      case 'kafka':
+        return (
+          <KafkaHandler
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            onGoToConfig={onGoToConfig('kafka')}
+            validationError={validationError}
+          />
+        )
       case 'opsGenie':
         return (
           <OpsgenieHandler

ui/src/kapacitor/components/handlers/KafkaHandler.tsx

@@ -0,0 +1,59 @@
+import React, {SFC} from 'react'
+
+import HandlerInput from 'src/kapacitor/components/HandlerInput'
+
+interface Handler {
+  alias: string
+  enabled: boolean
+  headerKey: string
+  headerValue: string
+  headers: {
+    [key: string]: string
+  }
+  text: string
+  type: string
+  url: string
+}
+
+interface Props {
+  selectedHandler: object
+  handleModifyHandler: (
+    selectedHandler: Handler,
+    fieldName: string,
+    parseToArray: string
+  ) => void
+}
+
+const KafkaHandler: SFC<Props> = ({selectedHandler, handleModifyHandler}) => (
+  <div className="endpoint-tab-contents">
+    <div className="endpoint-tab--parameters">
+      <h4>Parameters for this Alert Handler</h4>
+      <div className="faux-form">
+        <HandlerInput
+          selectedHandler={selectedHandler}
+          handleModifyHandler={handleModifyHandler}
+          fieldName="cluster"
+          fieldDisplay="Cluster"
+          placeholder=""
+          fieldColumns="col-md-12"
+        />
+        <HandlerInput
+          selectedHandler={selectedHandler}
+          handleModifyHandler={handleModifyHandler}
+          fieldName="topic"
+          fieldDisplay="Topic"
+          placeholder=""
+        />
+        <HandlerInput
+          selectedHandler={selectedHandler}
+          handleModifyHandler={handleModifyHandler}
+          fieldName="template"
+          fieldDisplay="Template"
+          placeholder=""
+        />
+      </div>
+    </div>
+  </div>
+)
+
+export default KafkaHandler

ui/src/kapacitor/components/handlers/index.js

@@ -4,6 +4,7 @@ import ExecHandler from './ExecHandler'
 import LogHandler from './LogHandler'
 import AlertaHandler from './AlertaHandler'
 import HipchatHandler from './HipchatHandler'
+import KafkaHandler from './KafkaHandler'
 import OpsgenieHandler from './OpsgenieHandler'
 import PagerdutyHandler from './PagerdutyHandler'
 import PushoverHandler from './PushoverHandler'
@@ -22,6 +23,7 @@ export {
   EmailHandler,
   AlertaHandler,
   HipchatHandler,
+  KafkaHandler,
   OpsgenieHandler,
   PagerdutyHandler,
   PushoverHandler,

ui/src/kapacitor/constants/index.js

@@ -114,6 +114,7 @@ export const MAP_KEYS_FROM_CONFIG = {
 export const ALERTS_FROM_CONFIG = {
   alerta: ['environment', 'origin', 'token'], // token = bool
   hipChat: ['url', 'room', 'token'], // token = bool
+  kafka: [],
   opsGenie: ['api-key', 'teams', 'recipients'], // api-key = bool
   opsGenie2: ['api-key', 'teams', 'recipients'], // api-key = bool
   pagerDuty: ['service-key'], // service-key = bool
@@ -172,6 +173,7 @@ export const HANDLERS_TO_RULE = {
     'service',
   ],
   hipChat: ['room'],
+  kafka: ['cluster', 'topic', 'template'],
   opsGenie: ['teams', 'recipients'],
   opsGenie2: ['teams', 'recipients'],
   pagerDuty: [],