Make task ids only edit when making new task

influxdata · Jul 19, 2017 · d5c301b · d5c301b
1 parent 0a22159
commit d5c301b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 31 deletions.
diff --git a/ui/src/kapacitor/components/Tickscript.js b/ui/src/kapacitor/components/Tickscript.js
@@ -14,6 +14,7 @@ const Tickscript = ({
   isEditingID,
   onStartEditID,
   onStopEditID,
+  isNewTickscript,
 }) => (
   <div className="page">
     <TickscriptHeader
@@ -25,6 +26,7 @@ const Tickscript = ({
       onStartEdit={onStartEditID}
       onChangeType={onChangeType}
       onSelectDbrps={onSelectDbrps}
+      isNewTickscript={isNewTickscript}
     />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
       <div className="container-fluid">
@@ -63,6 +65,7 @@ Tickscript.propTypes = {
   isEditingID: bool.isRequired,
   onStartEditID: func.isRequired,
   onStopEditID: func.isRequired,
+  isNewTickscript: bool.isRequired,
 }
 
 export default Tickscript
diff --git a/ui/src/kapacitor/components/TickscriptHeader.js b/ui/src/kapacitor/components/TickscriptHeader.js
@@ -2,7 +2,9 @@ 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 TickscrtiptID from 'src/kapacitor/components/TickscriptID'
+import TickscrtiptNewID, {
+  TickscriptEditID,
+} from 'src/kapacitor/components/TickscriptID'
 const addName = list => list.map(l => ({...l, name: `${l.db}.${l.rp}`}))
 
 const TickscriptHeader = ({
@@ -14,16 +16,19 @@ const TickscriptHeader = ({
   onStartEdit,
   onChangeType,
   onSelectDbrps,
+  isNewTickscript,
 }) => (
   <div className="page-header">
     <div className="page-header__container">
       <div className="page-header__left">
-        <TickscrtiptID
-          id={id}
-          isEditing={isEditing}
-          onStopEdit={onStopEdit}
-          onStartEdit={onStartEdit}
-        />
+        {isNewTickscript
+          ? <TickscrtiptNewID
+              isEditing={isEditing}
+              onStopEdit={onStopEdit}
+              onStartEdit={onStartEdit}
+              isNewTickscript={isNewTickscript}
+            />
+          : <TickscriptEditID id={id} />}
       </div>
       <div className="page-header__right">
         <SourceIndicator sourceName={name} />
@@ -58,6 +63,7 @@ TickscriptHeader.propTypes = {
   isEditing: bool.isRequired,
   onStartEdit: func.isRequired,
   onStopEdit: func.isRequired,
+  isNewTickscript: bool.isRequired,
 }
 
 export default TickscriptHeader
diff --git a/ui/src/kapacitor/components/TickscriptID.js b/ui/src/kapacitor/components/TickscriptID.js
@@ -1,11 +1,12 @@
 import React, {PropTypes, Component} from 'react'
 import ReactTooltip from 'react-tooltip'
+import onClickOutside from 'react-onclickoutside'
 
-class TickscriptID extends Component {
+class TickscriptNewID extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      tickscriptID: props.id,
+      tickscriptID: '',
     }
   }
 
@@ -14,8 +15,12 @@ class TickscriptID extends Component {
     this.setState({tickscriptID})
   }
 
+  handleClickOutside() {
+    this.props.onStopEdit()
+  }
+
   render() {
-    const {isEditing, onStartEdit, id} = this.props
+    const {isEditing, onStartEdit} = this.props
     const {tickscriptID} = this.state
 
     return isEditing
@@ -34,8 +39,7 @@ class TickscriptID extends Component {
           data-for="rename-kapacitor-tooltip"
           data-tip="Click to Rename"
         >
-          {id}
-          <span className="icon pencil" />
+          {tickscriptID}
           <ReactTooltip
             id="rename-kapacitor-tooltip"
             delayShow={200}
@@ -49,13 +53,23 @@ class TickscriptID extends Component {
   }
 }
 
+export const TickscriptEditID = ({id}) => (
+  <h1 className="page-header__title page-header kapacitor-theme">
+    {id}
+  </h1>
+)
+
 const {bool, func, string} = PropTypes
 
-TickscriptID.propTypes = {
+TickscriptNewID.propTypes = {
   isEditing: bool.isRequired,
   onStartEdit: func.isRequired,
   onStopEdit: func.isRequired,
+  isNewTickscript: bool.isRequired,
+}
+
+TickscriptEditID.propTypes = {
   id: string.isRequired,
 }
 
-export default TickscriptID
+export default onClickOutside(TickscriptNewID)
diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js
@@ -10,17 +10,18 @@ import {getActiveKapacitor} from 'src/shared/apis'
 class TickscriptPage extends Component {
   constructor(props) {
     super(props)
+
     this.state = {
       kapacitor: {},
       task: {
-        id: props.params.ruleID,
+        id: '',
         status: 'enabled',
         script: '',
         dbrps: [],
         type: 'stream',
       },
       validation: '',
-      isEditingID: false,
+      isEditingID: true,
     }
   }
 
@@ -39,7 +40,7 @@ class TickscriptPage extends Component {
       )
     }
 
-    if (this.isEditing()) {
+    if (this._isEditing()) {
       await kapacitorActions.getRule(kapacitor, ruleID)
       const activeRule = this.props.rules.find(r => r.id === ruleID)
       this.setState({task: {...this.state.task, script: activeRule.tickscript}})
@@ -58,7 +59,7 @@ class TickscriptPage extends Component {
     } = this.props
 
     let response
-    if (this.isEditing()) {
+    if (this._isEditing()) {
       response = await updateTask(kapacitor, task, ruleID)
     } else {
       response = await createTask(kapacitor, task)
@@ -75,7 +76,6 @@ class TickscriptPage extends Component {
     this.setState({task: {...this.state.task, script}})
   }
 
-  // TODO: make this fire on every click so user doesn't have to 'apply'
   handleSelectDbrps(dbrps) {
     this.setState({task: {...this.state.task, dbrps}})
   }
@@ -100,32 +100,27 @@ class TickscriptPage extends Component {
       <Tickscript
         task={task}
         source={source}
-        onSave={::this.handleSave}
-        onSelectDbrps={::this.handleSelectDbrps}
-        onChangeScript={::this.handleChangeScript}
-        onChangeType={::this.handleChangeType}
         validation={validation}
         isEditingID={isEditingID}
+        isNewTickscript={!this._isEditing()}
+        onSave={::this.handleSave}
         onStartEditID={::this.handleStartEditID}
         onStopEditID={::this.handleStopEditID}
+        onSelectDbrps={::this.handleSelectDbrps}
+        onChangeScript={::this.handleChangeScript}
+        onChangeType={::this.handleChangeType}
       />
     )
   }
 
-  isEditing() {
+  _isEditing() {
     const {params} = this.props
     return params.ruleID && params.ruleID !== 'new'
   }
 }
 
 const {arrayOf, func, shape, string} = PropTypes
 
-TickscriptPage.defaultProps = {
-  params: {
-    ruleID: '',
-  },
-}
-
 TickscriptPage.propTypes = {
   source: shape({
     name: string,
@@ -142,7 +137,7 @@ TickscriptPage.propTypes = {
     push: func.isRequired,
   }).isRequired,
   params: shape({
-    ruleID: string.isRequired,
+    ruleID: string,
   }).isRequired,
   rules: arrayOf(shape()),
 }