Unbind dispatch from fetchTimeSeriesAsync

ui/src/dashboards/components/CellEditorOverlay.js

@@ -105,10 +105,6 @@ class CellEditorOverlay extends Component {
     this.setState({activeQueryIndex})
   }
 
-  handleValidateQuery() {
-    // fetch info from server and update query configs
-  }
-
   async handleEditRawText(url, id, text) {
     // use this as the handler passed into fetchTimeSeries to update a query status
     try {
@@ -127,7 +123,6 @@ class CellEditorOverlay extends Component {
       onCancel,
       timeRange,
       autoRefresh,
-      fetchTimeSeries,
       editQueryStatus,
     } = this.props
 
@@ -154,7 +149,6 @@ class CellEditorOverlay extends Component {
             activeQueryIndex={0}
             cellType={cellWorkingType}
             cellName={cellWorkingName}
-            fetchTimeSeries={fetchTimeSeries}
             editQueryStatus={editQueryStatus}
           />
           <ResizeBottom>
@@ -204,7 +198,6 @@ CellEditorOverlay.propTypes = {
       queries: string.isRequired,
     }),
   }),
-  fetchTimeSeries: func.isRequired,
   editQueryStatus: func.isRequired,
   queryStatus: shape({
     queryID: string,

ui/src/dashboards/containers/DashboardPage.js

@@ -9,7 +9,6 @@ import DashboardHeaderEdit from 'src/dashboards/components/DashboardHeaderEdit'
 import Dashboard from 'src/dashboards/components/Dashboard'
 
 import * as dashboardActionCreators from 'src/dashboards/actions'
-import {fetchTimeSeriesAsync} from 'src/shared/actions/timeSeries'
 
 import {setAutoRefresh} from 'shared/actions/app'
 import {presentationButtonDispatcher} from 'shared/dispatchers'
@@ -55,7 +54,6 @@ const DashboardPage = React.createClass({
     timeRange: shape({}).isRequired,
     inPresentationMode: bool.isRequired,
     handleClickPresentationButton: func,
-    fetchTimeSeries: func,
     cellQueryStatus: shape({
       queryID: string,
       status: shape(),
@@ -168,7 +166,6 @@ const DashboardPage = React.createClass({
       timeRange,
       dashboards,
       autoRefresh,
-      fetchTimeSeries,
       cellQueryStatus,
       dashboardActions,
       inPresentationMode,
@@ -195,7 +192,6 @@ const DashboardPage = React.createClass({
               timeRange={timeRange}
               onCancel={this.handleDismissOverlay}
               onSave={this.handleSaveEditedCell}
-              fetchTimeSeries={fetchTimeSeries}
               editQueryStatus={dashboardActions.editCellQueryStatus}
               queryStatus={cellQueryStatus}
             /> :
@@ -285,7 +281,6 @@ const mapDispatchToProps = (dispatch) => ({
   handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
   handleClickPresentationButton: presentationButtonDispatcher(dispatch),
   dashboardActions: bindActionCreators(dashboardActionCreators, dispatch),
-  fetchTimeSeries: bindActionCreators(fetchTimeSeriesAsync, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage)

ui/src/data_explorer/components/Table.js

@@ -3,6 +3,7 @@ import {Table, Column, Cell} from 'fixed-data-table'
 import Dimensions from 'react-dimensions'
 import _ from 'lodash'
 import moment from 'moment'
+import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
 
 const {
   arrayOf,
@@ -22,7 +23,7 @@ const defaultTableHeight = 1000
 
 const CustomCell = React.createClass({
   propTypes: {
-    data: oneOfType([number, string]).isRequired,
+    data: oneOfType([number, string]),
     columnName: string.isRequired,
   },
 
@@ -48,8 +49,7 @@ const ChronoTable = React.createClass({
     }).isRequired,
     containerWidth: number.isRequired,
     height: number,
-    onEditRawStatus: func,
-    fetchTimeSeries: func.isRequired,
+    editQueryStatus: func.isRequired,
   },
 
   getInitialState() {
@@ -86,7 +86,7 @@ const ChronoTable = React.createClass({
     this.setState({isLoading: true})
     // second param is db, we want to leave this blank
     try {
-      const {results} = await this.props.fetchTimeSeries({source: query.host, query})
+      const {results} = await fetchTimeSeriesAsync({source: query.host, query})
       this.setState({isLoading: false})
 
       if (!results) {

ui/src/data_explorer/components/View.js

@@ -14,7 +14,6 @@ const View = ({
   autoRefresh,
   heightPixels,
   editQueryStatus,
-  fetchTimeSeries,
   activeQueryIndex,
 }) => {
   const activeQuery = queries[activeQueryIndex]
@@ -31,7 +30,6 @@ const View = ({
         query={query}
         height={heightPixels}
         editQueryStatus={editQueryStatus}
-        fetchTimeSeries={fetchTimeSeries}
       />
     )
   }
@@ -53,7 +51,6 @@ const View = ({
       isInDataExplorer={true}
       showSingleStat={cellType === "line-plus-single-stat"}
       displayOptions={displayOptions}
-      fetchTimeSeries={fetchTimeSeries}
       editQueryStatus={editQueryStatus}
     />
   )
@@ -73,8 +70,7 @@ View.propTypes = {
   cellType: string,
   autoRefresh: number.isRequired,
   heightPixels: number,
-  editQueryStatus: func,
-  fetchTimeSeries: func.isRequired,
+  editQueryStatus: func.isRequired,
   activeQueryIndex: number,
 }
 

ui/src/data_explorer/components/Visualization.js

@@ -29,8 +29,7 @@ const Visualization = React.createClass({
     activeQueryIndex: number,
     height: string,
     heightPixels: number,
-    fetchTimeSeries: func.isRequired,
-    editQueryStatus: func,
+    editQueryStatus: func.isRequired,
   },
 
   contextTypes: {
@@ -79,7 +78,6 @@ const Visualization = React.createClass({
       heightPixels,
       queryConfigs,
       editQueryStatus,
-      fetchTimeSeries,
       activeQueryIndex,
     } = this.props
     const {source} = this.context
@@ -105,7 +103,6 @@ const Visualization = React.createClass({
             autoRefresh={autoRefresh}
             heightPixels={heightPixels}
             editQueryStatus={editQueryStatus}
-            fetchTimeSeries={fetchTimeSeries}
             activeQueryIndex={activeQueryIndex}
           />
         </div>

ui/src/data_explorer/containers/DataExplorer.js

@@ -10,8 +10,6 @@ import Header from '../containers/Header'
 import ResizeContainer, {ResizeBottom} from 'src/shared/components/ResizeContainer'
 
 import {setAutoRefresh} from 'shared/actions/app'
-import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
-import {editQueryStatus} from 'src/data_explorer/actions/view'
 import * as viewActions from 'src/data_explorer/actions/view'
 
 const {
@@ -32,7 +30,9 @@ const DataExplorer = React.createClass({
       }).isRequired,
     }).isRequired,
     queryConfigs: arrayOf(shape({})).isRequired,
-    queryConfigActions: shape({}).isRequired,
+    queryConfigActions: shape({
+      editQueryStatus: func.isRequired,
+    }).isRequired,
     autoRefresh: number.isRequired,
     handleChooseAutoRefresh: func.isRequired,
     timeRange: shape({
@@ -43,7 +43,6 @@ const DataExplorer = React.createClass({
     dataExplorer: shape({
       queryIDs: arrayOf(string).isRequired,
     }).isRequired,
-    fetchTimeSeries: func.isRequired,
   },
 
   childContextTypes: {
@@ -83,7 +82,6 @@ const DataExplorer = React.createClass({
       setTimeRange,
       queryConfigs,
       queryConfigActions,
-      fetchTimeSeries,
       source,
     } = this.props
     const {activeQueryIndex} = this.state
@@ -105,7 +103,6 @@ const DataExplorer = React.createClass({
             setActiveQueryIndex={this.handleSetActiveQueryIndex}
             onDeleteQuery={this.handleDeleteQuery}
             activeQueryIndex={activeQueryIndex}
-            fetchTimeSeries={fetchTimeSeries}
           />
           <ResizeBottom>
             <Visualization
@@ -113,8 +110,7 @@ const DataExplorer = React.createClass({
               timeRange={timeRange}
               queryConfigs={queryConfigs}
               activeQueryIndex={activeQueryIndex}
-              fetchTimeSeries={fetchTimeSeries}
-              editQueryStatus={editQueryStatus}
+              editQueryStatus={queryConfigActions.editQueryStatus}
             />
           </ResizeBottom>
         </ResizeContainer>
@@ -140,7 +136,6 @@ function mapDispatchToProps(dispatch) {
     handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
     setTimeRange: bindActionCreators(viewActions.setTimeRange, dispatch),
     queryConfigActions: bindActionCreators(viewActions, dispatch),
-    fetchTimeSeries: bindActionCreators(fetchTimeSeriesAsync, dispatch),
   }
 }
 

ui/src/shared/actions/app.js

@@ -20,3 +20,8 @@ export const setAutoRefresh = (milliseconds) => ({
     milliseconds,
   },
 })
+
+export const noop = () => ({
+  type: 'NOOP',
+  payload: {},
+})

ui/src/shared/actions/timeSeries.js

@@ -1,50 +1,47 @@
 import {proxy} from 'utils/queryUrlGenerator'
+import {noop} from 'shared/actions/app'
 import _ from 'lodash'
 
-const NOOP = () => ({
-  type: 'RUNNING_FETCH_TIME_SERIES',
-})
-
-export const handleLoading = (query, editQueryStatus, dispatch) => {
-  dispatch(editQueryStatus(query.id, {loading: true}))
+export const handleLoading = (query, editQueryStatus) => {
+  editQueryStatus(query.id, {loading: true})
 }
 // {results: [{}]}
-export const handleSuccess = (data, query, editQueryStatus, dispatch) => {
+export const handleSuccess = (data, query, editQueryStatus) => {
   const {results} = data
   const error = _.get(results, ['0', 'error'], false)
   const series = _.get(results, ['0', 'series'], false)
   // 200 from server and no results = warn
   if (!series && !error) {
-    dispatch(editQueryStatus(query.id, {warn: 'Your query is syntactically correct but returned no results'}))
+    editQueryStatus(query.id, {warn: 'Your query is syntactically correct but returned no results'})
     return data
   }
 
   // 200 from chrono server but influx returns an "error" = warning
   if (error) {
-    dispatch(editQueryStatus(query.id, {warn: error}))
+    editQueryStatus(query.id, {warn: error})
     return data
   }
 
   // 200 from server and results contains data = success
-  dispatch(editQueryStatus(query.id, {success: 'Success!'}))
+  editQueryStatus(query.id, {success: 'Success!'})
   return data
 }
 
-export const handleError = (error, query, editQueryStatus, dispatch) => {
+export const handleError = (error, query, editQueryStatus) => {
   const message = _.get(error, ['data', 'message'], error)
 
   // 400 from chrono server = fail
-  dispatch(editQueryStatus(query.id, {error: message}))
+  editQueryStatus(query.id, {error: message})
   console.error(error)
 }
 
-export const fetchTimeSeriesAsync = ({source, db, rp, query}, editQueryStatus = NOOP) => async (dispatch) => {
-  handleLoading(query, editQueryStatus, dispatch)
+export const fetchTimeSeriesAsync = async ({source, db, rp, query}, editQueryStatus = noop) => {
+  handleLoading(query, editQueryStatus)
   try {
     const {data} = await proxy({source, db, rp, query: query.text})
-    return handleSuccess(data, query, editQueryStatus, dispatch)
+    return handleSuccess(data, query, editQueryStatus)
   } catch (error) {
-    handleError(error, query, editQueryStatus, dispatch)
+    handleError(error, query, editQueryStatus)
     throw error
   }
 }

ui/src/shared/components/AutoRefresh.js

@@ -1,8 +1,5 @@
 import React, {PropTypes} from 'react'
-import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
 import _ from 'lodash'
-
 import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
 
 const {
@@ -24,7 +21,6 @@ const AutoRefresh = (ComposedComponent) => {
         host: oneOfType([string, arrayOf(string)]),
         text: string,
       }).isRequired).isRequired,
-      fetchTimeSeries: func.isRequired,
       editQueryStatus: func,
     },
     getInitialState() {
@@ -73,7 +69,7 @@ const AutoRefresh = (ComposedComponent) => {
       const newSeries = []
       for (const query of queries) {
         const {host, database, rp} = query
-        const response = await this.props.fetchTimeSeries({source: host, db: database, rp, query}, this.props.editQueryStatus)
+        const response = await fetchTimeSeriesAsync({source: host, db: database, rp, query}, this.props.editQueryStatus)
         newSeries.push({response})
         count += 1
         if (count === queries.length) {
@@ -150,11 +146,7 @@ const AutoRefresh = (ComposedComponent) => {
     },
   })
 
-  const mapDispatchToProps = (dispatch) => ({
-    fetchTimeSeries: bindActionCreators(fetchTimeSeriesAsync, dispatch),
-  })
-
-  return connect(null, mapDispatchToProps)(wrapper)
+  return wrapper
 }
 
 export default AutoRefresh