feat(kapacitor): also expose stateChangesOnly option

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

@@ -153,6 +153,14 @@ export const updateNoRecoveries = (ruleID, noRecoveries) => ({
   },
 })
 
+export const updateStateChangesOnly = (ruleID, stateChangesOnly) => ({
+  type: 'UPDATE_RULE_STATECHANGESONLY',
+  payload: {
+    ruleID,
+    stateChangesOnly,
+  },
+})
+
 export const updateMessage = (ruleID, message) => ({
   type: 'UPDATE_RULE_MESSAGE',
   payload: {

ui/src/kapacitor/components/RuleHandlers.tsx

@@ -20,6 +20,7 @@ interface RuleActions {
   updateAlertNodes: (id: string, handlersOnThisAlert: Handler[]) => void
   updateMessage: (id: string, e: MouseEvent<HTMLInputElement>) => void
   updateNoRecoveries: (id: string, noRecoveries: boolean) => void
+  updateStateChangesOnly: (id: string, stateChangesOnly: boolean) => void
   updateDetails: () => void
 }
 
@@ -145,6 +146,16 @@ class RuleHandlers extends PureComponent<Props, State> {
               />
               <label htmlFor="noRecoveries">Don't send alert on condition recovery</label>
             </div>
+            <div className="form-control-static">
+              <input
+                name="stateChangesOnly"
+                id="stateChangesOnly"
+                type="checkbox"
+                defaultChecked={rule.alertNodes.stateChangesOnly}
+                onClick={this.handleStateChangesOnly}
+              />
+              <label htmlFor="stateChangesOnly">Send alert only when condition state changes</label>
+            </div>
           </div>
           <div className={ruleSectionClassName}>
             <p>Send this Alert to:</p>
@@ -185,6 +196,11 @@ class RuleHandlers extends PureComponent<Props, State> {
     ruleActions.updateNoRecoveries(rule.id, e.target.checked)
   }
 
+  private handleStateChangesOnly = e => {
+    const {ruleActions, rule} = this.props
+    ruleActions.updateStateChangesOnly(rule.id, e.target.checked)
+  }
+
   private handleChooseHandler = (ep: HandlerWithText): (() => void) => () => {
     this.setState({selectedHandler: ep})
   }

ui/src/kapacitor/reducers/rules.js

@@ -85,6 +85,15 @@ export default function rules(state = {}, action) {
       })
     }
 
+    case 'UPDATE_RULE_STATECHANGESONLY': {
+      const {ruleID, stateChangesOnly} = action.payload
+      return Object.assign({}, state, {
+        [ruleID]: Object.assign({}, state[ruleID], {
+          alertNodes: {...state[ruleID].alertNodes, stateChangesOnly},
+        }),
+      })
+    }
+
     case 'UPDATE_RULE_ALERT_NODES': {
       const {ruleID, alerts} = action.payload
       const alertNodesByType = {}

ui/test/kapacitor/reducers/rules.test.js

@@ -13,6 +13,7 @@ import {
   deleteRuleSuccess,
   updateRuleStatusSuccess,
   updateNoRecoveries,
+  updateStateChangesOnly,
 } from 'src/kapacitor/actions/view'
 
 describe('Kapacitor.Reducers.rules', () => {
@@ -211,4 +212,24 @@ describe('Kapacitor.Reducers.rules', () => {
     const newState = reducer(initialState, updateNoRecoveries(ruleID, true))
     expect(newState[ruleID].alertNodes.noRecoveries).toBe(true)
   })
+
+  it('can set stateChangesOnly', () => {
+    const ruleID = 1
+
+    const initialState = {
+      [ruleID]: {
+        id: ruleID,
+        queryID: 988,
+        alertNodes: {
+          stateChangesOnly: true,
+        },
+      },
+    }
+
+    const newState = reducer(
+      initialState,
+      updateStateChangesOnly(ruleID, false)
+    )
+    expect(newState[ruleID].alertNodes.stateChangesOnly).toBe(false)
+  })
 })