Start reducer and actions for the Kapacitor tasks

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

@@ -0,0 +1,96 @@
+import defaultQueryConfig from 'src/utils/defaultQueryConfig';
+
+export function fetchTask(taskID) {
+  // do some ajax
+  //
+  return {
+    type: 'K_LOAD_TASK',
+    payload: {
+      taskID,
+      task: {
+        query: defaultQueryConfig(''),
+        otherProperties: {},
+      },
+    },
+  };
+}
+
+export function toggleField(taskId, fieldFunc) {
+  return {
+    type: 'K_TOGGLE_FIELD',
+    payload: {
+      queryId,
+      fieldFunc,
+    },
+  };
+}
+
+export function groupByTime(queryId, time) {
+  return {
+    type: 'K_GROUP_BY_TIME',
+    payload: {
+      queryId,
+      time,
+    },
+  };
+}
+
+export function applyFuncsToField(queryId, fieldFunc) {
+  return {
+    type: 'K_APPLY_FUNCS_TO_FIELD',
+    payload: {
+      queryId,
+      fieldFunc,
+    },
+  };
+}
+
+export function chooseTag(queryId, tag) {
+  return {
+    type: 'K_CHOOSE_TAG',
+    payload: {
+      queryId,
+      tag,
+    },
+  };
+}
+
+export function chooseNamespace(queryId, {database, retentionPolicy}) {
+  return {
+    type: 'K_CHOOSE_NAMESPACE',
+    payload: {
+      queryId,
+      database,
+      retentionPolicy,
+    },
+  };
+}
+
+export function chooseMeasurement(queryId, measurement) {
+  return {
+    type: 'K_CHOOSE_MEASUREMENT',
+    payload: {
+      queryId,
+      measurement,
+    },
+  };
+}
+
+export function groupByTag(queryId, tagKey) {
+  return {
+    type: 'K_GROUP_BY_TAG',
+    payload: {
+      queryId,
+      tagKey,
+    },
+  };
+}
+
+export function toggleTagAcceptance(queryId) {
+  return {
+    type: 'K_TOGGLE_TAG_ACCEPTANCE',
+    payload: {
+      queryId,
+    },
+  };
+}

ui/src/kapacitor/components/DataSection.js

@@ -20,6 +20,7 @@ export const DataSection = React.createClass({
         kapacitors: PropTypes.string.isRequired,
       }).isRequired,
     }),
+    query: PropTypes.shape({}).isRequired,
     addFlashMessage: PropTypes.func,
   },
 
@@ -39,88 +40,39 @@ export const DataSection = React.createClass({
   getInitialState() {
     return {
       activeTab: DB_TAB,
-      query: {
-        id: 1,
-        database: null,
-        measurement: null,
-        retentionPolicy: null,
-        fields: [],
-        tags: {},
-        groupBy: {
-          time: null,
-          tags: [],
-        },
-        areTagsAccepted: true,
-        rawText: null,
-      },
     };
   },
 
   handleChooseNamespace(namespace) {
-    this.setState((oldState) => {
-      const newQuery = Object.assign({}, oldState.query, namespace);
-      return Object.assign({}, oldState, {query: newQuery, activeTab: MEASUREMENTS_TAB});
-    });
   },
 
   handleChooseMeasurement(measurement) {
-    this.setState((oldState) => {
-      const newQuery = Object.assign({}, oldState.query, {measurement});
-      return Object.assign({}, oldState, {query: newQuery, activeTab: FIELDS_TAB});
-    });
   },
 
   handleToggleField({field, funcs}) {
-    this.setState((oldState) => {
-      const isSelected = oldState.query.fields.find((f) => f.field === field);
-      if (isSelected) {
-        const nextFields = oldState.query.fields.filter((f) => f.field !== field);
-        if (!nextFields.length) {
-          const nextGroupBy = Object.assign({}, oldState.query.groupBy, {time: null});
-          return Object.assign({}, oldState, {
-            query: Object.assign({}, oldState.query, {
-              fields: nextFields,
-              groupBy: nextGroupBy,
-            }),
-          });
-        }
-
-        return Object.assign({}, oldState, {
-          query: Object.assign({}, oldState.query, {
-            fields: nextFields,
-          }),
-        });
-      }
-
-      return Object.assign({}, oldState, {
-        query: Object.assign({}, oldState.query, {
-          fields: oldState.query.fields.concat({field, funcs}),
-        }),
-      });
-    });
   },
 
-  //  handleGroupByTime(time) {
+  handleGroupByTime(time) {
-  //  },
+  },
 
-  //  handleApplyFuncsToField(fieldFunc) {
+  handleApplyFuncsToField(fieldFunc) {
-  //  },
+  },
 
-  //  handleChooseTag(tag) {
+  handleChooseTag(tag) {
-  //  },
+  },
 
-  //  handleToggleTagAcceptance() {
+  handleToggleTagAcceptance() {
-  //  },
+  },
 
-  //  handleGroupByTag(tagKey) {
+  handleGroupByTag(tagKey) {
-  //  },
+  },
 
   handleClickTab(tab) {
     this.setState({activeTab: tab});
   },
 
   render() {
-    const {query} = this.state;
+    const {query} = this.props;
     const timeRange = {lower: 'now() - 15m', upper: null};
     const statement = query.rawText || selectStatement(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
 
@@ -135,7 +87,8 @@ export const DataSection = React.createClass({
   },
 
   renderEditor() {
-    const {query, activeTab} = this.state;
+    const {activeTab} = this.state;
+    const {query} = this.props;
     if (query.rawText) {
       return (
         <div className="generic-empty-state query-editor-empty-state">
@@ -162,7 +115,7 @@ export const DataSection = React.createClass({
   },
 
   renderList() {
-    const {query} = this.state;
+    const {query} = this.props;
 
     switch (this.state.activeTab) {
       case DB_TAB:

ui/src/kapacitor/containers/KapacitorRulePage.js

@@ -1,5 +1,11 @@
 import React, {PropTypes} from 'react';
+import {connect} from 'react-redux';
 import DataSection from '../components/DataSection';
+import defaultQueryConfig from 'src/utils/defaultQueryConfig';
+import * as actionCreators from '../actions/view';
+import {bindActionCreators} from 'redux'
+
+const TASK_ID = 1; // switch to this.props.params.taskID
 
 export const KapacitorRulePage = React.createClass({
   propTypes: {
@@ -9,6 +15,11 @@ export const KapacitorRulePage = React.createClass({
       }).isRequired,
     }),
     addFlashMessage: PropTypes.func,
+    tasks: PropTypes.shape({}).isRequired,
+  },
+
+  componentDidMount() {
+    this.props.actions.fetchTask(TASK_ID);
   },
 
   render() {
@@ -48,10 +59,12 @@ export const KapacitorRulePage = React.createClass({
   },
 
   renderDataSection() {
+    const task = this.props.tasks[Object.keys(this.props.tasks)[0]]; // this.props.params.taskID
+    const query = (task && task.query) || defaultQueryConfig('');
     return (
       <div className="kapacitor-rule-section">
         <h3>Data</h3>
-        <DataSection source={this.props.source} />
+        <DataSection source={this.props.source} query={query} />
       </div>
     );
   },
@@ -87,4 +100,14 @@ export const KapacitorRulePage = React.createClass({
   },
 });
 
-export default KapacitorRulePage;
+function mapStateToProps(state) {
+  return {
+    tasks: state.tasks
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {actions: bindActionCreators(actionCreators, dispatch)}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(KapacitorRulePage);

ui/src/kapacitor/reducers/tasks.js

@@ -0,0 +1,11 @@
+export default function tasks(state = {}, action) {
+  switch (action.type) {
+    case 'LOAD_TASK': {
+      const {taskID, task} = action.payload;
+      return Object.assign({}, state, {
+        [taskID]: task,
+      });
+    }
+  }
+  return state;
+}

ui/src/store/configureStore.js

@@ -3,10 +3,11 @@ import {combineReducers} from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import makeQueryExecuter from 'src/shared/middleware/queryExecuter';
 import * as chronografReducers from 'src/chronograf/reducers';
+import tasksReducer from 'src/kapacitor/reducers/tasks';
 import notifications from 'src/shared/reducers/notifications';
 import persistStateEnhancer from './persistStateEnhancer';
 
-const rootReducer = combineReducers({notifications, ...chronografReducers});
+const rootReducer = combineReducers({notifications, ...chronografReducers, tasks: tasksReducer});
 
 export default function configureStore(initialState) {
   const createPersistentStore = compose(