check RuleID instead of isEditing? to determine rule status

ui/src/kapacitor/components/KapacitorRule.js

@@ -137,7 +137,7 @@ class KapacitorRule extends Component {
     const {
       rule,
       source,
-      isEditing,
+      ruleID,
       ruleActions,
       queryConfigs,
       enabledAlerts,
@@ -150,7 +150,7 @@ class KapacitorRule extends Component {
       <div className="page">
         <RuleHeader
           source={source}
-          onSave={isEditing ? this.handleEdit : this.handleCreate}
+          onSave={ruleID === 'new' ? this.handleCreate : this.handleEdit}
           validationError={this.validationError()}
         />
         <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
@@ -159,10 +159,9 @@ class KapacitorRule extends Component {
               <div className="col-xs-12">
                 <div className="rule-builder">
                   <NameSection
-                    isEditing={isEditing}
+                    ruleID={ruleID}
                     defaultName={rule.name}
                     onRuleRename={ruleActions.updateRuleName}
-                    ruleID={rule.id}
                   />
                   <ValuesSection
                     rule={rule}
@@ -204,7 +203,7 @@ KapacitorRule.propTypes = {
   queryConfigActions: PropTypes.shape({}).isRequired,
   ruleActions: PropTypes.shape({}).isRequired,
   addFlashMessage: PropTypes.func.isRequired,
-  isEditing: PropTypes.bool.isRequired,
+  ruleID: PropTypes.string.isRequired,
   enabledAlerts: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   router: PropTypes.shape({
     push: PropTypes.func.isRequired,

ui/src/kapacitor/components/NameSection.js

@@ -27,13 +27,13 @@ class NameSection extends Component {
   }
 
   render() {
-    const {isEditing, defaultName} = this.props
+    const {ruleID, defaultName} = this.props
     const {reset} = this.state
 
     return (
       <div className="rule-section">
         <h3 className="rule-section--heading">
-          {isEditing ? 'Name' : 'Name this Alert Rule'}
+          {ruleID === 'new' ? 'Name this Alert Rule' : 'Name'}
         </h3>
         <div className="rule-section--body">
           <div className="rule-section--row rule-section--row-first rule-section--row-last">
@@ -53,10 +53,9 @@ class NameSection extends Component {
   }
 }
 
-const {bool, func, string} = PropTypes
+const {func, string} = PropTypes
 
 NameSection.propTypes = {
-  isEditing: bool,
   defaultName: string.isRequired,
   onRuleRename: func.isRequired,
   ruleID: string.isRequired,

ui/src/kapacitor/containers/KapacitorRulePage.js

@@ -22,11 +22,9 @@ class KapacitorRulePage extends Component {
 
   async componentDidMount() {
     const {params, source, ruleActions, addFlashMessage} = this.props
-    if (this.isEditing()) {
-      ruleActions.fetchRule(source, params.ruleID)
-    } else {
-      ruleActions.loadDefaultRule()
-    }
+    params.ruleID === 'new'
+      ? ruleActions.loadDefaultRule()
+      : ruleActions.fetchRule(source, params.ruleID)
 
     const kapacitor = await getActiveKapacitor(this.props.source)
     if (!kapacitor) {
@@ -70,9 +68,8 @@ class KapacitorRulePage extends Component {
       router,
     } = this.props
     const {enabledAlerts, kapacitor} = this.state
-    const rule = this.isEditing()
-      ? rules[params.ruleID]
-      : rules[DEFAULT_RULE_ID]
+    const rule =
+      params.ruleID === 'new' ? rules[DEFAULT_RULE_ID] : rules[params.ruleID]
     const query = rule && queryConfigs[rule.queryID]
 
     if (!query) {
@@ -88,17 +85,12 @@ class KapacitorRulePage extends Component {
         ruleActions={ruleActions}
         addFlashMessage={addFlashMessage}
         enabledAlerts={enabledAlerts}
-        isEditing={this.isEditing()}
+        ruleID={params.ruleID}
         router={router}
         kapacitor={kapacitor}
       />
     )
   }
-
-  isEditing = () => {
-    const {params} = this.props
-    return params.ruleID && params.ruleID !== 'new'
-  }
 }
 
 const {func, shape, string} = PropTypes