Introduce TICKscript editing

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

@@ -7,6 +7,7 @@ import {
   deleteRule as deleteRuleAPI,
   updateRuleStatus as updateRuleStatusAPI,
   createTask as createTaskAJAX,
+  updateTask as updateTaskAJAX,
 } from 'src/kapacitor/apis'
 import {errorThrown} from 'shared/actions/errors'
 
@@ -47,16 +48,18 @@ export const getRule = (kapacitor, ruleID) => async dispatch => {
     dispatch({
       type: 'LOAD_RULE',
       payload: {
-        rule: {...rule, queryID: rule.query.id},
+        rule: {...rule, queryID: rule.query && rule.query.id},
       },
     })
 
-    dispatch({
-      type: 'LOAD_KAPACITOR_QUERY',
-      payload: {
-        query: rule.query,
-      },
-    })
+    if (rule.query) {
+      dispatch({
+        type: 'LOAD_KAPACITOR_QUERY',
+        payload: {
+          query: rule.query,
+        },
+      })
+    }
   } catch (error) {
     console.error(error)
     throw error
@@ -247,3 +250,18 @@ export const createTask = (kapacitor, task) => async dispatch => {
     return error.data
   }
 }
+
+export const updateTask = (kapacitor, task, ruleID) => async dispatch => {
+  try {
+    const {data} = await updateTaskAJAX(kapacitor, task, ruleID)
+    dispatch(publishNotification('success', 'TICKscript updated successully'))
+    return data
+  } catch (error) {
+    if (!error) {
+      dispatch(errorThrown('Could not communicate with server'))
+      return
+    }
+
+    return error.data
+  }
+}

ui/src/kapacitor/apis/index.js

@@ -61,7 +61,6 @@ export const updateRuleStatus = (rule, status) => {
   })
 }
 
-// tickscript contains script, dbsrps, id, and type
 export const createTask = async (kapacitor, {id, dbrps, script, type}) => {
   try {
     return await AJAX({
@@ -79,3 +78,25 @@ export const createTask = async (kapacitor, {id, dbrps, script, type}) => {
     throw error
   }
 }
+
+export const updateTask = async (
+  kapacitor,
+  {id, dbrps, script, type},
+  ruleID
+) => {
+  try {
+    return await AJAX({
+      method: 'PATCH',
+      url: `${kapacitor.links.tasks}/${ruleID}`,
+      data: {
+        id,
+        type,
+        dbrps,
+        script,
+      },
+    })
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}

ui/src/kapacitor/containers/TickscriptPage.js

@@ -7,6 +7,7 @@ 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)
@@ -54,9 +55,20 @@ class TickscriptPage extends Component {
 
   async handleSave() {
     const {kapacitor, task} = this.state
-    const {source, router, kapacitorActions: {createTask}} = this.props
+    const {
+      source,
+      router,
+      kapacitorActions: {createTask, updateTask},
+      params: {ruleID},
+    } = this.props
+
+    let response
+    if (this.isEditing()) {
+      response = await updateTask(kapacitor, task, ruleID)
+    } else {
+      response = await createTask(kapacitor, task)
+    }
 
-    const response = await createTask(kapacitor, task)
     if (response && response.error) {
       return this.setState({validation: response.error})
     }
@@ -99,6 +111,7 @@ TickscriptPage.propTypes = {
     errorThrown: func.isRequired,
   }).isRequired,
   kapacitorActions: shape({
+    updateTask: func.isRequired,
     createTask: func.isRequired,
     getRule: func.isRequired,
   }),