Remove TICKscript name creation

ui/src/kapacitor/apis/index.js

@@ -19,19 +19,6 @@ export const createRule = (kapacitor, rule) => {
   })
 }
 
-export const createTickScript = async (kapacitor, rule) => {
-  try {
-    return await AJAX({
-      method: 'POST',
-      url: kapacitor.links.rules,
-      data: rule,
-    })
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
-}
-
 export const getRules = kapacitor => {
   return AJAX({
     method: 'GET',

ui/src/kapacitor/components/Tickscript.js

@@ -10,9 +10,6 @@ const Tickscript = ({
   onSelectDbrps,
   onChangeScript,
   onChangeType,
-  isEditingID,
-  onStartEditID,
-  onStopEditID,
   isNewTickscript,
 }) =>
   <div className="page">
@@ -20,9 +17,6 @@ const Tickscript = ({
       task={task}
       source={source}
       onSave={onSave}
-      isEditing={isEditingID}
-      onStopEdit={onStopEditID}
-      onStartEdit={onStartEditID}
       onChangeType={onChangeType}
       onSelectDbrps={onSelectDbrps}
       isNewTickscript={isNewTickscript}
@@ -62,9 +56,6 @@ Tickscript.propTypes = {
   onSelectDbrps: func.isRequired,
   validation: string,
   onChangeType: func.isRequired,
-  isEditingID: bool.isRequired,
-  onStartEditID: func.isRequired,
-  onStopEditID: func.isRequired,
   isNewTickscript: bool.isRequired,
 }
 

ui/src/kapacitor/components/TickscriptHeader.js

@@ -2,11 +2,13 @@ import React, {PropTypes} from 'react'
 import SourceIndicator from 'shared/components/SourceIndicator'
 import TickscriptType from 'src/kapacitor/components/TickscriptType'
 import MultiSelectDBDropdown from 'shared/components/MultiSelectDBDropdown'
+import {TickscriptStaticName} from 'src/kapacitor/components/TickscriptName'
 
 const addName = list => list.map(l => ({...l, name: `${l.db}.${l.rp}`}))
 
 const TickscriptHeader = ({
   task: {type, dbrps},
+  task,
   source: {name},
   onSave,
   onChangeType,
@@ -14,7 +16,9 @@ const TickscriptHeader = ({
 }) =>
   <div className="page-header">
     <div className="page-header__container">
-      <div className="page-header__left" />
+      <div className="page-header__left">
+        <TickscriptStaticName name={task.name} />
+      </div>
       <div className="page-header__right">
         <SourceIndicator sourceName={name} />
         <TickscriptType type={type} onChangeType={onChangeType} />
@@ -44,7 +48,7 @@ TickscriptHeader.propTypes = {
     ),
   }),
   onChangeType: func.isRequired,
-  isEditing: bool.isRequired,
+  isNewTickscript: bool.isRequired,
 }
 
 export default TickscriptHeader

ui/src/kapacitor/components/TickscriptID.js

@@ -1,74 +0,0 @@
-import React, {PropTypes, Component} from 'react'
-import ReactTooltip from 'react-tooltip'
-import onClickOutside from 'react-onclickoutside'
-
-class TickscriptNewID extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      tickscriptID: '',
-    }
-  }
-
-  handleChangeID = e => {
-    const tickscriptID = e.target.value
-    this.setState({tickscriptID})
-  }
-
-  handleClickOutside() {
-    this.props.onStopEdit()
-  }
-
-  render() {
-    const {isEditing, onStartEdit} = this.props
-    const {tickscriptID} = this.state
-
-    return isEditing
-      ? <input
-          className="page-header--editing kapacitor-theme"
-          autoFocus={true}
-          value={tickscriptID}
-          onChange={this.handleChangeID}
-          placeholder="Name your tickscript"
-          spellCheck={false}
-          autoComplete={false}
-        />
-      : <h1
-          className="page-header__title page-header--editable kapacitor-theme"
-          onClick={onStartEdit}
-          data-for="rename-kapacitor-tooltip"
-          data-tip="Click to Rename"
-        >
-          {tickscriptID}
-          <ReactTooltip
-            id="rename-kapacitor-tooltip"
-            delayShow={200}
-            effect="solid"
-            html={true}
-            offset={{top: 2}}
-            place="bottom"
-            class="influx-tooltip kapacitor-tooltip place-bottom"
-          />
-        </h1>
-  }
-}
-
-export const TickscriptEditID = ({id}) =>
-  <h1 className="page-header__title page-header kapacitor-theme">
-    {id}
-  </h1>
-
-const {bool, func, string} = PropTypes
-
-TickscriptNewID.propTypes = {
-  isEditing: bool.isRequired,
-  onStartEdit: func.isRequired,
-  onStopEdit: func.isRequired,
-  isNewTickscript: bool.isRequired,
-}
-
-TickscriptEditID.propTypes = {
-  id: string.isRequired,
-}
-
-export default onClickOutside(TickscriptNewID)

ui/src/kapacitor/components/TickscriptName.js

@@ -0,0 +1,44 @@
+import React, {PropTypes, Component} from 'react'
+
+class TickscriptName extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {onChangeName, name} = this.props
+
+    return (
+      <input
+        className="page-header--editing kapacitor-theme"
+        autoFocus={true}
+        value={name}
+        onChange={onChangeName}
+        placeholder="Name your tickscript"
+        spellCheck={false}
+        autoComplete={false}
+      />
+    )
+  }
+}
+
+export const TickscriptStaticName = ({name}) =>
+  <h1
+    className="page-header__title page-header kapacitor-theme"
+    style={{display: 'flex', justifyContent: 'baseline'}}
+  >
+    {name}
+  </h1>
+
+const {func, string} = PropTypes
+
+TickscriptName.propTypes = {
+  onChangeName: func.isRequired,
+  name: string.isRequired,
+}
+
+TickscriptStaticName.propTypes = {
+  name: string.isRequired,
+}
+
+export default TickscriptName

ui/src/kapacitor/containers/TickscriptPage.js

@@ -15,6 +15,7 @@ class TickscriptPage extends Component {
       kapacitor: {},
       task: {
         id: '',
+        name: '',
         status: 'enabled',
         tickscript: '',
         dbrps: [],
@@ -42,11 +43,11 @@ class TickscriptPage extends Component {
 
     if (this._isEditing()) {
       await kapacitorActions.getRule(kapacitor, ruleID)
-      const {id, tickscript, dbrps, type} = this.props.rules.find(
+      const {id, name, tickscript, dbrps, type} = this.props.rules.find(
         r => r.id === ruleID
       )
 
-      this.setState({task: {tickscript, dbrps, type, status, id}})
+      this.setState({task: {tickscript, dbrps, type, status, name, id}})
     }
 
     this.setState({kapacitor})
@@ -55,7 +56,7 @@ class TickscriptPage extends Component {
   handleSave = async () => {
     const {kapacitor, task} = this.state
     const {
-      source,
+      source: {id: sourceID},
       router,
       kapacitorActions: {createTask, updateTask},
       params: {ruleID},
@@ -65,16 +66,14 @@ class TickscriptPage extends Component {
 
     try {
       if (this._isEditing()) {
-        response = await updateTask(kapacitor, task, ruleID)
+        response = await updateTask(kapacitor, task, ruleID, router, sourceID)
       } else {
-        response = await createTask(kapacitor, task)
+        response = await createTask(kapacitor, task, router, sourceID)
       }
 
       if (response && response.code === 500) {
         return this.setState({validation: response.message})
       }
-
-      router.push(`/sources/${source.id}/alert-rules`)
     } catch (error) {
       console.error(error)
       throw error
@@ -93,28 +92,21 @@ class TickscriptPage extends Component {
     return () => this.setState({task: {...this.state.task, type}})
   }
 
-  handleStartEditID = () => {
-    this.setState({isEditingID: true})
-  }
-
-  handleStopEditID = () => {
-    this.setState({isEditingID: false})
+  handleChangeName = e => {
+    this.setState({task: {...this.state.task, name: e.target.value}})
   }
 
   render() {
     const {source} = this.props
-    const {task, validation, isEditingID} = this.state
+    const {task, validation} = this.state
 
     return (
       <Tickscript
         task={task}
         source={source}
         validation={validation}
-        isEditingID={isEditingID}
-        isNewTickscript={!this._isEditing()}
         onSave={this.handleSave}
-        onStartEditID={this.handleStartEditID}
-        onStopEditID={this.handleStopEditID}
+        isNewTickscript={!this._isEditing()}
         onSelectDbrps={this.handleSelectDbrps}
         onChangeScript={this.handleChangeScript}
         onChangeType={this.handleChangeType}