Add unsavedChanges state to TickscriptPage

Signed-off-by: Deniz Kusefoglu <denizk@gmail.com>

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

@@ -203,7 +203,6 @@ export const createTask = (
 ) => async dispatch => {
   try {
     const {data} = await createTaskAJAX(kapacitor, task)
-    router.push(`/sources/${sourceID}/alert-rules`)
     dispatch(publishNotification('success', 'You made a TICKscript!'))
     return data
   } catch (error) {
@@ -222,6 +221,48 @@ export const updateTask = (
   ruleID,
   router,
   sourceID
+) => async dispatch => {
+  try {
+    const {data} = await updateTaskAJAX(kapacitor, task, ruleID, sourceID)
+    dispatch(publishNotification('success', 'TICKscript updated successully'))
+    return data
+  } catch (error) {
+    if (!error) {
+      dispatch(errorThrown('Could not communicate with server'))
+      return
+    }
+
+    return error.data
+  }
+}
+
+export const createTaskExit = (
+  kapacitor,
+  task,
+  router,
+  sourceID
+) => async dispatch => {
+  try {
+    const {data} = await createTaskAJAX(kapacitor, task)
+    router.push(`/sources/${sourceID}/alert-rules`)
+    dispatch(publishNotification('success', 'TICKscript successfully created.'))
+    return data
+  } catch (error) {
+    if (!error) {
+      dispatch(errorThrown('Could not communicate with server'))
+      return
+    }
+
+    return error.data
+  }
+}
+
+export const updateTaskExit = (
+  kapacitor,
+  task,
+  ruleID,
+  router,
+  sourceID
 ) => async dispatch => {
   try {
     const {data} = await updateTaskAJAX(kapacitor, task, ruleID, sourceID)

ui/src/kapacitor/components/Tickscript.js

@@ -8,6 +8,7 @@ import LogsTable from 'src/kapacitor/components/LogsTable'
 
 const Tickscript = ({
   onSave,
+  onSaveAndExit,
   task,
   logs,
   validation,
@@ -15,6 +16,7 @@ const Tickscript = ({
   onChangeScript,
   onChangeType,
   onChangeID,
+  unsavedChanges,
   isNewTickscript,
   areLogsVisible,
   areLogsEnabled,
@@ -24,6 +26,8 @@ const Tickscript = ({
     <TickscriptHeader
       task={task}
       onSave={onSave}
+      unsavedChanges={unsavedChanges}
+      onSaveAndExit={onSaveAndExit}
       areLogsVisible={areLogsVisible}
       areLogsEnabled={areLogsEnabled}
       onToggleLogsVisibility={onToggleLogsVisibility}

ui/src/kapacitor/components/TickscriptHeader.js

@@ -2,10 +2,13 @@ import React, {PropTypes} from 'react'
 
 import SourceIndicator from 'shared/components/SourceIndicator'
 import LogsToggle from 'src/kapacitor/components/LogsToggle'
+import ConfirmButton from 'src/shared/components/ConfirmButton'
 
 const TickscriptHeader = ({
   task: {id},
   onSave,
+  onSaveAndExit,
+  unsavedChanges,
   areLogsVisible,
   areLogsEnabled,
   isNewTickscript,
@@ -24,14 +27,36 @@ const TickscriptHeader = ({
         />}
       <div className="page-header__right">
         <SourceIndicator />
-        <button
-          className="btn btn-success btn-sm"
-          title={id ? '' : 'ID your TICKscript to save'}
-          onClick={onSave}
-          disabled={!id}
-        >
-          {isNewTickscript ? 'Save New TICKscript' : 'Save TICKscript'}
-        </button>
+        {isNewTickscript
+          ? <button
+              className="btn btn-success btn-sm"
+              title="ID your TICKscript to save"
+              onClick={onSave}
+              disabled={!id}
+            >
+              Save New TICKscript
+            </button>
+          : <button
+              className="btn btn-success btn-sm"
+              title="You have unsaved changes"
+              onClick={onSave}
+              disabled={!unsavedChanges}
+            >
+              Save Changes
+            </button>}
+        {unsavedChanges
+          ? <ConfirmButton
+              text="Exit"
+              confirmText="This will discard unsaved changes"
+              confirmAction={onSaveAndExit}
+            />
+          : <button
+              className="btn btn-default btn-sm"
+              title="Return to Alert Rules Page"
+              onClick={onSaveAndExit}
+            >
+              Exit
+            </button>}
       </div>
     </div>
   </div>

ui/src/kapacitor/containers/TickscriptPage.js

@@ -29,6 +29,7 @@ class TickscriptPage extends Component {
       logs: [],
       areLogsEnabled: false,
       failStr: '',
+      unsavedChanges: false,
     }
   }
 
@@ -172,7 +173,40 @@ class TickscriptPage extends Component {
       } else {
         response = await createTask(kapacitor, task, router, sourceID)
       }
+      if (response && response.code === 500) {
+        // check responses on failing??!
+        return this.setState({validation: response.message})
+      }
+      this.setState({unsavedChanges: false})
+    } catch (error) {
+      console.error(error)
+      throw error
+    }
+  }
 
+  handleSaveAndExit = async () => {
+    const {kapacitor, task} = this.state
+    const {
+      source: {id: sourceID},
+      router,
+      kapacitorActions: {createTaskExit, updateTaskExit},
+      params: {ruleID},
+    } = this.props
+
+    let response
+
+    try {
+      if (this._isEditing()) {
+        response = await updateTaskExit(
+          kapacitor,
+          task,
+          ruleID,
+          router,
+          sourceID
+        )
+      } else {
+        response = await createTaskExit(kapacitor, task, router, sourceID)
+      }
       if (response && response.code === 500) {
         return this.setState({validation: response.message})
       }
@@ -183,7 +217,10 @@ class TickscriptPage extends Component {
   }
 
   handleChangeScript = tickscript => {
-    this.setState({task: {...this.state.task, tickscript}})
+    this.setState({
+      task: {...this.state.task, tickscript},
+      unsavedChanges: true,
+    })
   }
 
   handleSelectDbrps = dbrps => {
@@ -204,7 +241,14 @@ class TickscriptPage extends Component {
 
   render() {
     const {source} = this.props
-    const {task, validation, logs, areLogsVisible, areLogsEnabled} = this.state
+    const {
+      task,
+      validation,
+      logs,
+      areLogsVisible,
+      areLogsEnabled,
+      unsavedChanges,
+    } = this.state
 
     return (
       <Tickscript
@@ -213,6 +257,8 @@ class TickscriptPage extends Component {
         source={source}
         validation={validation}
         onSave={this.handleSave}
+        unsavedChanges={unsavedChanges}
+        onSaveAndExit={this.handleSaveAndExit}
         isNewTickscript={!this._isEditing()}
         onSelectDbrps={this.handleSelectDbrps}
         onChangeScript={this.handleChangeScript}
@@ -243,6 +289,8 @@ TickscriptPage.propTypes = {
   kapacitorActions: shape({
     updateTask: func.isRequired,
     createTask: func.isRequired,
+    updateTaskExit: func.isRequired,
+    createTaskExit: func.isRequired,
     getRule: func.isRequired,
   }),
   router: shape({