Introduce skeleton to create task through proxy

ui/src/kapacitor/actions/view/index.js

@@ -6,6 +6,7 @@ import {
   getRule,
   deleteRule as deleteRuleAPI,
   updateRuleStatus as updateRuleStatusAPI,
+  createTask as createTaskAJAX,
 } from 'src/kapacitor/apis'
 import {errorThrown} from 'shared/actions/errors'
 
@@ -208,3 +209,18 @@ export function updateRuleStatus(rule, status) {
       })
   }
 }
+
+export const createTask = (kapacitor, task) => async dispatch => {
+  try {
+    const {data} = await createTaskAJAX(kapacitor, task)
+    dispatch(publishNotification('success', 'We made a tick script!'))
+    return data
+  } catch (error) {
+    if (!error) {
+      dispatch(errorThrown('Could not communicate with server'))
+      return
+    }
+
+    return error.data
+  }
+}

ui/src/kapacitor/apis/index.js

@@ -55,3 +55,22 @@ export const updateRuleStatus = (rule, status) => {
     data: {status},
   })
 }
+
+// tickscript contains script, dbsrps, id, and type
+export const createTask = async (kapacitor, {id, dbsrps, script, type}) => {
+  try {
+    return await AJAX({
+      method: 'POST',
+      url: kapacitor.links.tasks,
+      data: {
+        id,
+        type,
+        dbsrps,
+        script,
+      },
+    })
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}

ui/src/kapacitor/components/Tickscript.js

@@ -3,14 +3,22 @@ import TickscriptHeader from 'src/kapacitor/components/TickscriptHeader'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 import TickscriptEditor from 'src/kapacitor/components/TickscriptEditor'
 
-const Tickscript = ({source, onSave}) => (
+const Tickscript = ({source, onSave, task, validation, onChangeScript}) => (
   <div className="page">
     <TickscriptHeader source={source} onSave={onSave} />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
       <div className="container-fluid">
         <div className="row">
           <div className="col-xs-12">
-            <TickscriptEditor />
+            {validation}
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-xs-12">
+            <TickscriptEditor
+              script={task.script}
+              onChangeScript={onChangeScript}
+            />
           </div>
         </div>
       </div>
@@ -18,11 +26,18 @@ const Tickscript = ({source, onSave}) => (
   </div>
 )
 
-const {func, shape} = PropTypes
+const {arrayOf, func, shape, string} = PropTypes
 
 Tickscript.propTypes = {
-  onSave: func,
+  onSave: func.isRequired,
   source: shape(),
+  task: shape({
+    id: string,
+    script: string,
+    dbsrps: arrayOf(shape()),
+  }).isRequired,
+  onChangeScript: func.isRequired,
+  validation: string,
 }
 
 export default Tickscript

ui/src/kapacitor/components/TickscriptEditor.js

@@ -1,21 +1,18 @@
-import React, {Component} from 'react'
+import React, {PropTypes, Component} from 'react'
 import CodeMirror from 'react-codemirror'
 import 'src/external/codemirror'
 
 class TickscriptEditor extends Component {
   constructor(props) {
     super(props)
-    this.state = {
-      code: '',
-    }
   }
 
-  updateCode(code) {
-    this.setState({code})
+  updateCode(script) {
+    this.props.onChangeScript(script)
   }
 
   render() {
-    const {code} = this.state
+    const {script} = this.props
 
     const options = {
       lineNumbers: true,
@@ -23,9 +20,20 @@ class TickscriptEditor extends Component {
     }
 
     return (
-      <CodeMirror value={code} onChange={::this.updateCode} options={options} />
+      <CodeMirror
+        value={script}
+        onChange={::this.updateCode}
+        options={options}
+      />
     )
   }
 }
 
+const {func, string} = PropTypes
+
+TickscriptEditor.propTypes = {
+  onChangeScript: func,
+  script: string,
+}
+
 export default TickscriptEditor

ui/src/kapacitor/containers/TickscriptPage.js

@@ -1,28 +1,98 @@
 import React, {PropTypes, Component} from 'react'
+import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+
 import Tickscript from 'src/kapacitor/components/Tickscript'
+import * as kapactiorActionCreators from 'src/kapacitor/actions/view'
+import {getActiveKapacitor} from 'src/shared/apis'
+import {errorThrown as errorAction} from 'shared/actions/errors'
 
 class TickscriptPage extends Component {
   constructor(props) {
     super(props)
+    this.state = {
+      kapacitor: {},
+      task: {
+        id: 'testing',
+        status: 'enabled',
+        script: '',
+        dbsrps: [
+          {
+            db: '_internal',
+            rp: 'monitor',
+          },
+        ],
+        type: 'stream',
+      },
+      validation: '',
+    }
   }
 
-  handleSave() {
-    console.log('save me!') // eslint-disable-line no-console
+  async componentDidMount() {
+    const {source, errorThrown} = this.props
+    const kapacitor = await getActiveKapacitor(source)
+
+    if (!kapacitor) {
+      errorThrown('We could not find a configured Kapacitor for this source')
+    }
+
+    this.setState({kapacitor})
+  }
+
+  async handleSave() {
+    const {kapacitor, task} = this.state
+    const {source, router, kapactiorActions: {createTask}} = this.props
+
+    const response = await createTask(kapacitor, task)
+    if (response && response.error) {
+      return this.setState({validation: response.error})
+    }
+
+    router.push(`/sources/${source.id}/alert-rules`)
+  }
+
+  handleChangeScript(script) {
+    this.setState({task: {...this.state.task, script}})
   }
 
   render() {
     const {source} = this.props
+    const {task, validation} = this.state
 
-    return <Tickscript onSave={this.handleSave} source={source} />
+    return (
+      <Tickscript
+        task={task}
+        source={source}
+        onSave={::this.handleSave}
+        onChangeScript={::this.handleChangeScript}
+        validation={validation}
+      />
+    )
   }
 }
 
-const {shape, string} = PropTypes
+const {func, shape, string} = PropTypes
 
 TickscriptPage.propTypes = {
   source: shape({
     name: string,
   }),
+  errorThrown: func.isRequired,
+  kapactiorActions: shape({
+    createTask: func.isRequired,
+  }),
+  router: shape({
+    push: func.isRequired,
+  }).isRequired,
 }
 
-export default TickscriptPage
+const mapStateToProps = () => {
+  return {}
+}
+
+const mapDispatchToProps = dispatch => ({
+  errorThrown: bindActionCreators(errorAction, dispatch),
+  kapactiorActions: bindActionCreators(kapactiorActionCreators, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TickscriptPage)