Add tickscript type selector

ui/src/kapacitor/components/Tickscript.js

@@ -10,13 +10,15 @@ const Tickscript = ({
   validation,
   onSelectDbrps,
   onChangeScript,
+  onChangeType,
 }) => (
   <div className="page">
     <TickscriptHeader
       task={task}
       source={source}
-      onSelectDbrps={onSelectDbrps}
       onSave={onSave}
+      onChangeType={onChangeType}
+      onSelectDbrps={onSelectDbrps}
     />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
       <div className="container-fluid">
@@ -51,6 +53,7 @@ Tickscript.propTypes = {
   onChangeScript: func.isRequired,
   onSelectDbrps: func.isRequired,
   validation: string,
+  onChangeType: func.isRequired,
 }
 
 export default Tickscript

ui/src/kapacitor/components/TickscriptHeader.js

@@ -1,10 +1,17 @@
 import React, {PropTypes} from 'react'
 import SourceIndicator from 'shared/components/SourceIndicator'
+import TickscriptType from 'src/kapacitor/components/TickscriptType'
 import MultiSelectDBDropdown from 'shared/components/MultiSelectDBDropdown'
 
 const addName = list => list.map(l => ({...l, name: `${l.db}.${l.rp}`}))
 
-const TickscriptHeader = ({source, onSave, task, onSelectDbrps}) => (
+const TickscriptHeader = ({
+  source,
+  onChangeType,
+  onSave,
+  task,
+  onSelectDbrps,
+}) => (
   <div className="page-header">
     <div className="page-header__container">
       <div className="page-header__left">
@@ -14,6 +21,7 @@ const TickscriptHeader = ({source, onSave, task, onSelectDbrps}) => (
       </div>
       <div className="page-header__right">
         <SourceIndicator sourceName={source.name} />
+        <TickscriptType type={task.type} onChangeType={onChangeType} />
         <MultiSelectDBDropdown
           selectedItems={addName(task.dbrps)}
           onApply={onSelectDbrps}
@@ -40,6 +48,7 @@ TickscriptHeader.propTypes = {
       })
     ),
   }),
+  onChangeType: func.isRequired,
 }
 
 export default TickscriptHeader

ui/src/kapacitor/components/TickscriptType.js

@@ -0,0 +1,29 @@
+import React, {PropTypes} from 'react'
+const STREAM = 'stream'
+const BATCH = 'batch'
+
+const TickscriptType = ({type, onChangeType}) => (
+  <ul className="nav nav-tablist nav-tablist-sm">
+    <li
+      className={type === STREAM ? 'active' : ''}
+      onClick={onChangeType(STREAM)}
+    >
+      Stream
+    </li>
+    <li
+      className={type === BATCH ? 'active' : ''}
+      onClick={onChangeType(BATCH)}
+    >
+      Batch
+    </li>
+  </ul>
+)
+
+const {string, func} = PropTypes
+
+TickscriptType.propTypes = {
+  type: string,
+  onChangeType: func,
+}
+
+export default TickscriptType

ui/src/kapacitor/containers/TickscriptPage.js

@@ -7,7 +7,6 @@ import * as kapactiorActionCreators from 'src/kapacitor/actions/view'
 import * as errorActionCreators from 'shared/actions/errors'
 import {getActiveKapacitor} from 'src/shared/apis'
 
-// TODO: collect dbsrps, stream, and name for tasks (needs design)
 class TickscriptPage extends Component {
   constructor(props) {
     super(props)
@@ -80,6 +79,10 @@ class TickscriptPage extends Component {
     this.setState({task: {...this.state.task, dbrps}})
   }
 
+  handleChangeType(type) {
+    return () => this.setState({task: {...this.state.task, type}})
+  }
+
   render() {
     const {source} = this.props
     const {task, validation} = this.state
@@ -91,6 +94,7 @@ class TickscriptPage extends Component {
         onSave={::this.handleSave}
         onSelectDbrps={::this.handleSelectDbrps}
         onChangeScript={::this.handleChangeScript}
+        onChangeType={::this.handleChangeType}
         validation={validation}
       />
     )